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

Merge branch 'master' into history

Browse Source
This commit is contained in:
Kevin Mok
2018-11-17 21:41:16 -05:00
committed by GitHub
parent 4ddf11aa41 06c31ac659
commit 668fcb7421
4 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
api/views.py
View File

@@ -177,8 +177,9 @@ def get_audio_feature_data(request, audio_feature, user_secret):
# get_genre_data {{{ # # get_genre_data {{{ #
def get_genre_data(request, user_secret): def get_genre_data(request, user_secret):
"""Return genre data needed to create the graph user. """Return genre data needed to create the graph
TODO TODO
""" """
user = User.objects.get(secret=user_secret) user = User.objects.get(secret=user_secret)

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

@@ -3,10 +3,10 @@
* a designated parent element * a designated parent element
* *
* @param audioFeature: the name of the audio feature (string) * @param audioFeature: the name of the audio feature (string)
* @param intervalEndPoints: a sorted array of 5 real numbers defining the intervals (categories) of values, * @param intervalEndPoints: a object defining the intervals (categories) of values,
* for example: * for example:
* [0, 0.25, 0.5, 0.75, 1.0] for instrumentalness would define ranges * {begin: 0, end: 1.0, step: 0.25} for instrumentalness would define ranges
* (0-0.25), (0.25-0.5), (0.5-0.75), (0.75-1.0) * [0-0.25), [0.25-0.5), [0.5-0.75), [0.75-1.0]
* @param parentElem: the DOM element to append the graph to (a selector string) * @param parentElem: the DOM element to append the graph to (a selector string)
* @param userSecret: the user secret string for identification * @param userSecret: the user secret string for identification
* @return None * @return None
@@ -18,11 +18,20 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
height = 270 - margin.top - margin.bottom; height = 270 - margin.top - margin.bottom;
let featureData = {}; let featureData = {};
let currentEndPoint = intervalEndPoints.begin; // start at beginning
// Create the keys first in order // Create the keys first in order
for (let index = 0; index < intervalEndPoints.length - 1; index++) { while (currentEndPoint < intervalEndPoints.end) {
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`; let startOfRange = currentEndPoint;
let endOfRange = precise(startOfRange + intervalEndPoints.step);
let key = `${startOfRange} ~ ${endOfRange}`;
featureData[key] = 0; featureData[key] = 0;
currentEndPoint = endOfRange;
} }
// for (let index = 0; index < intervalEndPoints.length - 1; index++) {
// let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
// featureData[key] = 0;
// }
// define the vertical scaling function // define the vertical scaling function
let vScale = d3.scaleLinear().range([height, 0]); let vScale = d3.scaleLinear().range([height, 0]);
@@ -31,12 +40,15 @@ 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 index = intervalEndPoints.length - 2; let currLowerBound = precise(intervalEndPoints.end - 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 < intervalEndPoints[index]) { while (dataPoint < currLowerBound && currLowerBound >= intervalEndPoints.begin) {
index -= 1; currLowerBound = precise(currLowerBound - stepSize);
} }
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`; let upperBound = precise(currLowerBound + stepSize);
currLowerBound = precise(currLowerBound);
let key = `${currLowerBound} ~ ${upperBound}`;
featureData[key] += 1; featureData[key] += 1;
} }
@@ -102,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));
} }

16
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", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("instrumentalness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("valence", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("energy", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("tempo", [0, 40, 80, 120, 160, 200], 'body', userSecret); drawAudioFeatGraph("tempo", {begin: 0, end: 200, step: 40}, 'body', userSecret);
drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("danceability", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("acousticness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0], 'body', userSecret); drawAudioFeatGraph("loudness", {begin: -60, end: 0, step: 12}, 'body', userSecret);
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("speechiness", {begin: 0, end: 1.0, step: 0.20}, 'body', userSecret);
</script> </script>
</body> </body>
</html> </html>

16
reset_db.sh
View File

@@ -1,15 +1,15 @@
# check if in virtual environment # check if in virtual environment
# https://stackoverflow.com/questions/15454174/how-can-a-shell-function-know-if-it-is-running-within-a-virtualenv/15454916 # https://stackoverflow.com/questions/15454174/how-can-a-shell-function-know-if-it-is-running-within-a-virtualenv/15454916
# python -c 'import sys; print(sys.real_prefix)' 2>/dev/null && INVENV=1 || INVENV=0 python -c 'import sys; print(sys.real_prefix)' 2>/dev/null && INVENV=1 || INVENV=0
# INVENV=$(python -c 'import sys; print ("1" if hasattr(sys, "real_prefix") else "0")') # INVENV=$(python -c 'import sys; print ("1" if hasattr(sys, "real_prefix") else "0")')
# if $INVENV is 1, then in virtualenv # if $INVENV is 1, then in virtualenv
# echo $INVENV # echo $INVENV
# if [ $INVENV -eq 1 ]; then if [ $INVENV -eq 1 ]; then
rm login/migrations/0* api/migrations/0* rm login/migrations/0* api/migrations/0*
sudo -u postgres psql -f reset_db.sql sudo -u postgres psql -f reset_db.sql
python manage.py makemigrations python manage.py makemigrations login api
python manage.py migrate python manage.py migrate
python manage.py runserver python manage.py runserver
# fi fi