Kevin-Mok/spotify-lib-vis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix floating point precision issue in audio feat

Browse Source 
The last commit (fc6c30ec32) was affected
by a floating point addition/subtraction precision bug. The bug caused
nonsensical categories to appear on the audio feature bar charts. Now
fixed.
This commit is contained in:
Chris Shyi
2018-06-30 18:51:52 -04:00
parent fc6c30ec32
commit 01759c59b3
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
graphs/static/graphs/scripts/audio_feat_graph.js
View File

@@ -20,9 +20,9 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
let featureData = {}; let featureData = {};
let currentEndPoint = intervalEndPoints.begin; // start at beginning let currentEndPoint = intervalEndPoints.begin; // start at beginning
// Create the keys first in order // Create the keys first in order
while (currentEndPoint !== intervalEndPoints.end) { while (currentEndPoint < intervalEndPoints.end) {
let startOfRange = currentEndPoint; let startOfRange = currentEndPoint;
let endOfRange = startOfRange + intervalEndPoints.step; let endOfRange = precise(startOfRange + intervalEndPoints.step);
let key = `${startOfRange} ~ ${endOfRange}`; let key = `${startOfRange} ~ ${endOfRange}`;
featureData[key] = 0; featureData[key] = 0;
@@ -40,13 +40,14 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
// categorize the data points // categorize the data points
for (let dataPoint of response.data_points) { for (let dataPoint of response.data_points) {
dataPoint = parseFloat(dataPoint); dataPoint = parseFloat(dataPoint);
let currLowerBound = intervalEndPoints.end - intervalEndPoints.step; let currLowerBound = precise(intervalEndPoints.end - intervalEndPoints.step);
let stepSize = intervalEndPoints.step; let stepSize = intervalEndPoints.step;
// find the index of the first element greater than dataPoint // find the index of the first element greater than dataPoint
while (dataPoint < currLowerBound) { while (dataPoint < currLowerBound && currLowerBound >= intervalEndPoints.begin) {
currLowerBound -= stepSize; currLowerBound = precise(currLowerBound - stepSize);
} }
let upperBound = currLowerBound + stepSize; let upperBound = precise(currLowerBound + stepSize);
currLowerBound = precise(currLowerBound);
let key = `${currLowerBound} ~ ${upperBound}`; let key = `${currLowerBound} ~ ${upperBound}`;
featureData[key] += 1; featureData[key] += 1;
} }
@@ -113,4 +114,13 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
*/ */
function capFeatureStr(audioFeature) { function capFeatureStr(audioFeature) {
return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1); return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1);
}
/**
* Converts a number to a floating point value with 2 significant figures
* @param number: the number to be converted
* @returns the input converted to two significant digits
*/
function precise(number) {
return Number.parseFloat(number.toPrecision(2));
} }

14
graphs/templates/graphs/features_graphs.html
View File

@@ -24,14 +24,14 @@
<script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script> <script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script>
<script type="text/javascript"> <script type="text/javascript">
let userSecret = "{{ user_secret }}"; let userSecret = "{{ user_secret }}";
drawAudioFeatGraph("instrumentalness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret); drawAudioFeatGraph("instrumentalness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("valence", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret); drawAudioFeatGraph("valence", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("energy", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret); drawAudioFeatGraph("energy", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("tempo", {begin: 0, end: 200, step: 40}, 'body', userSecret); drawAudioFeatGraph("tempo", {begin: 0, end: 200, step: 40}, 'body', userSecret);
drawAudioFeatGraph("danceability", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret); drawAudioFeatGraph("danceability", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("acousticness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret); drawAudioFeatGraph("acousticness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("loudness", {begin: -60, end: 0, step: 15}, 'body', userSecret); drawAudioFeatGraph("loudness", {begin: -60, end: 0, step: 12}, 'body', userSecret);
drawAudioFeatGraph("speechiness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret); drawAudioFeatGraph("speechiness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
</script> </script>
</body> </body>
</html> </html>