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

Refactor audio feat graph

Browse Source 
Fixes #51. Instead of passing in an array of hard coded values as the
interval end points, an object specifying the beginning, the end, and
the step size is used. Categories can be more easily defined and
modified this way.
This commit is contained in:
Chris Shyi
2018-06-30 17:59:34 -04:00
parent 98151e19d2
commit fc6c30ec32
5 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/utils.py
View File

@@ -170,7 +170,7 @@ def add_artist_genres(headers, artist_objs):
params = {'ids': artist_ids} params = {'ids': artist_ids}
artists_response = requests.get('https://api.spotify.com/v1/artists/', artists_response = requests.get('https://api.spotify.com/v1/artists/',
headers=headers, headers=headers,
params={'ids': artist_ids}, params=params,
).json()['artists'] ).json()['artists']
for i in range(len(artist_objs)): for i in range(len(artist_objs)):
if len(artists_response[i]['genres']) == 0: if len(artists_response[i]['genres']) == 0:

3
api/views.py
View File

@@ -166,8 +166,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)

29
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 = 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,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 index = intervalEndPoints.length - 2; let currLowerBound = 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) {
index -= 1; currLowerBound -= stepSize;
} }
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`; let upperBound = currLowerBound + stepSize;
let key = `${currLowerBound} ~ ${upperBound}`;
featureData[key] += 1; featureData[key] += 1;
} }

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.25}, 'body', userSecret);
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("valence", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("energy", {begin: 0, end: 1.0, step: 0.25}, '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.25}, 'body', userSecret);
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("acousticness", {begin: 0, end: 1.0, step: 0.25}, 'body', userSecret);
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0], 'body', userSecret); drawAudioFeatGraph("loudness", {begin: -60, end: 0, step: 15}, 'body', userSecret);
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret); drawAudioFeatGraph("speechiness", {begin: 0, end: 1.0, step: 0.25}, '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