From f8bf751920d1c2e69d6784fb2f7c09b213391b5e Mon Sep 17 00:00:00 2001 From: Chris Shyi Date: Wed, 27 Jun 2018 12:07:38 -0400 Subject: [PATCH 1/3] Change URL pattern for retrieving audio feature data Added 'api' as a prefix to make the URL consistent with the genre data retrieval URL. --- spotifyvis/templates/spotifyvis/audio_features.html | 2 +- spotifyvis/urls.py | 2 +- spotifyvis/views.py | 6 ++++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/spotifyvis/templates/spotifyvis/audio_features.html b/spotifyvis/templates/spotifyvis/audio_features.html index 47db0fd..bc53458 100644 --- a/spotifyvis/templates/spotifyvis/audio_features.html +++ b/spotifyvis/templates/spotifyvis/audio_features.html @@ -50,7 +50,7 @@ // define the vertical scaling function let vScale = d3.scaleLinear().range([height, 0]); - d3.json(`/audio_features/${audioFeature}/{{ user_secret }}`) + d3.json(`/api/audio_features/${audioFeature}/{{ user_secret }}`) .then(function(response) { // categorize the data points for (let dataPoint of response.data_points) { diff --git a/spotifyvis/urls.py b/spotifyvis/urls.py index 868f86b..c44840d 100644 --- a/spotifyvis/urls.py +++ b/spotifyvis/urls.py @@ -14,6 +14,6 @@ urlpatterns = [ path('graphs/genre/', display_genre_graph, name='display_genre_graph'), path('audio_features/', audio_features, name='audio_features'), - path('audio_features//', + path('api/audio_features//', get_audio_feature_data, name='get_audio_feature_data'), ] diff --git a/spotifyvis/views.py b/spotifyvis/views.py index d48acef..64a36bb 100644 --- a/spotifyvis/views.py +++ b/spotifyvis/views.py @@ -205,6 +205,12 @@ def display_genre_graph(request, client_secret): return render(request, "spotifyvis/genre_graph.html", context) def audio_features(request, client_secret): + """Renders the audio features page + + :param request: the HTTP request + :param client_secret: user secret used for identification + :return: renders the audio features page + """ user = User.objects.get(user_secret=client_secret) context = { 'user_id': user.user_id, From 8851c5ce25ec9a20c62489e31aa1b83a6f858842 Mon Sep 17 00:00:00 2001 From: Chris Shyi Date: Thu, 28 Jun 2018 16:42:16 -0400 Subject: [PATCH 2/3] Set up artist bubble chart Major changes: - Set up preliminary artist bubble chart, font too small - Wrote shell script for resetting database --- reset_db.sh | 14 ++++ reset_db.sql | 3 + .../static/spotifyvis/scripts/artist_graph.js | 81 +++++++++++++++++++ .../templates/spotifyvis/artist_graph.html | 27 +++++++ .../templates/spotifyvis/audio_features.html | 1 + .../templates/spotifyvis/logged_in.html | 5 +- spotifyvis/urls.py | 14 ++-- spotifyvis/views.py | 51 ++++++++---- 8 files changed, 174 insertions(+), 22 deletions(-) create mode 100644 reset_db.sh create mode 100644 reset_db.sql create mode 100644 spotifyvis/static/spotifyvis/scripts/artist_graph.js create mode 100644 spotifyvis/templates/spotifyvis/artist_graph.html diff --git a/reset_db.sh b/reset_db.sh new file mode 100644 index 0000000..4bbef35 --- /dev/null +++ b/reset_db.sh @@ -0,0 +1,14 @@ +# check if in virtual environment +# 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 + +# echo $INVENV +# if $INVENV is 1, then in virtualenv + +if [ $INVENV -eq 1 ]; then + rm spotifyvis/migrations/00* + sudo -u postgres psql -f reset_db.sql + python manage.py makemigrations + python manage.py migrate +fi diff --git a/reset_db.sql b/reset_db.sql new file mode 100644 index 0000000..7a99492 --- /dev/null +++ b/reset_db.sql @@ -0,0 +1,3 @@ +DROP DATABASE spotifyvis; +CREATE DATABASE spotifyvis; +GRANT ALL PRIVILEGES ON DATABASE spotifyvis TO django; diff --git a/spotifyvis/static/spotifyvis/scripts/artist_graph.js b/spotifyvis/static/spotifyvis/scripts/artist_graph.js new file mode 100644 index 0000000..c1f48cb --- /dev/null +++ b/spotifyvis/static/spotifyvis/scripts/artist_graph.js @@ -0,0 +1,81 @@ +/** + * Draws the artist count graph as a bubble chart, and appends it the a designated parent element + * @param artistData: the artist counts data as an array of objects, of the format {'name': artist name, 'num_songs': 50} + * @param parentElem: the DOM element to append the artist graph to (as a string) + */ +function drawArtistGraph(artistData, parentElem) { + let margin = {top: 20, right: 30, bottom: 30, left: 40}; + let width = 960 - margin.right - margin.left; + let height = 540 - margin.top - margin.bottom; + + let color = d3.scaleOrdinal(d3.schemeCategory10); + let bubble = d3.pack(artistData) + .size([width, height]) + .padding(1.5); + + let svg = d3.select(parentElem) + .append("svg") + .attr("width", width + margin.right + margin.left) + .attr("height", height + margin.top + margin.bottom) + .attr("class", "bubble"); + + let nodes = d3.hierarchy(artistData) + .sum(function(d) { return d.num_songs; }); + + let node = svg.selectAll(".node") + .data(bubble(nodes).descendants()) + .enter() + .filter(function(d) { + return !d.children; + }) + .append("g") + .attr("class", "node") + .attr("transform", function(d) { + return "translate(" + d.x + "," + d.y + ")"; + }); + + node.append("title") + .text(function(d) { + return `${d.name}: ${d.num_songs}`; + }); + + node.append("circle") + .attr("r", function(d) { + return d.r; + }) + .style("fill", function(d,i) { + return color(i); + }); + + // artist name text + node.append("text") + .attr("dy", ".2em") + .style("text-anchor", "middle") + .text(function(d) { + return d.data.name.substring(0, d.r / 3); + }) + .attr("font-family", "sans-serif") + .attr("font-size", function(d){ + return d.r/5; + }) + .attr("fill", "white"); + + // artist song count text + node.append("text") + .attr("dy", "1.3em") + .style("text-anchor", "middle") + .text(function(d) { + return d.data.num_songs; + }) + .attr("font-family", "Gill Sans", "Gill Sans MT") + .attr("font-size", function(d){ + return d.r/5; + }) + .attr("fill", "white"); + + d3.select(self.frameElement) + .style("height", height + "px"); + + + +} \ No newline at end of file diff --git a/spotifyvis/templates/spotifyvis/artist_graph.html b/spotifyvis/templates/spotifyvis/artist_graph.html new file mode 100644 index 0000000..433e39b --- /dev/null +++ b/spotifyvis/templates/spotifyvis/artist_graph.html @@ -0,0 +1,27 @@ + +{% load static %} + + + + Artist Graphs + + +

Logged in as {{ user_id }}

+ + + + + + \ No newline at end of file diff --git a/spotifyvis/templates/spotifyvis/audio_features.html b/spotifyvis/templates/spotifyvis/audio_features.html index bc53458..78e2e50 100644 --- a/spotifyvis/templates/spotifyvis/audio_features.html +++ b/spotifyvis/templates/spotifyvis/audio_features.html @@ -37,6 +37,7 @@ * @return None */ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem) { + // TODO: Not hard code the dimensions? let margin = {top: 20, right: 30, bottom: 30, left: 40}; let width = 480 - margin.left - margin.right, height = 270 - margin.top - margin.bottom; diff --git a/spotifyvis/templates/spotifyvis/logged_in.html b/spotifyvis/templates/spotifyvis/logged_in.html index 849a59b..1df0826 100644 --- a/spotifyvis/templates/spotifyvis/logged_in.html +++ b/spotifyvis/templates/spotifyvis/logged_in.html @@ -9,9 +9,12 @@

{{ user_id }}'s Graphs

- Audio Features Genres + + Artists + diff --git a/spotifyvis/urls.py b/spotifyvis/urls.py index c44840d..c28cfcd 100644 --- a/spotifyvis/urls.py +++ b/spotifyvis/urls.py @@ -1,5 +1,4 @@ from django.urls import path, include -from django.conf.urls import url from .views import * @@ -9,11 +8,12 @@ urlpatterns = [ path('callback', callback, name='callback'), path('user_data', user_data, name='user_data'), path('admin_graphs', admin_graphs, name='admin_graphs'), - path('user_artists/', get_artist_data, name='get_artist_data'), + path('api/user_artists/', get_artist_data, name='get_artist_data'), + path('artists/', artist_data, name='display_artist_graph'), path('api/user_genres/', get_genre_data, name='get_genre_data'), - path('graphs/genre/', display_genre_graph, - name='display_genre_graph'), - path('audio_features/', audio_features, name='audio_features'), - path('api/audio_features//', - get_audio_feature_data, name='get_audio_feature_data'), + path('graphs/genre/', display_genre_graph, + name='display_genre_graph'), + path('audio_features/', audio_features, name='display_audio_features'), + path('api/audio_features//', + get_audio_feature_data, name='get_audio_feature_data'), ] diff --git a/spotifyvis/views.py b/spotifyvis/views.py index 64a36bb..ef9b391 100644 --- a/spotifyvis/views.py +++ b/spotifyvis/views.py @@ -183,52 +183,75 @@ def admin_graphs(request): update_track_genres(user_obj) return render(request, 'spotifyvis/logged_in.html', context) + +def artist_data(request, user_secret): + """Renders the artist data graph display page + + :param request: the HTTP request + :param user_secret: the user secret used for identification + :return: render the artist data graph display page + """ + user = User.objects.get(user_secret=user_secret) + context = { + 'user_id': user.user_id, + 'user_secret': user_secret, + } + return render(request, "spotifyvis/artist_graph.html", context) + # get_artist_data {{{ # + def get_artist_data(request, user_secret): - """TODO + """Returns artist data as a JSON serialized list of dictionaries + The (key, value) pairs are (artist name, song count for said artist) + + :param request: the HTTP request + :param user_secret: the user secret used for identification + :return: a JsonResponse """ - user = User.objects.get(user_id=user_secret) + user = User.objects.get(user_secret=user_secret) artist_counts = Artist.objects.annotate(num_songs=Count('track', - filter=Q(track__users=user))) + filter=Q(track__users=user))) processed_artist_counts = [{'name': artist.name, - 'num_songs': artist.num_songs} for artist in artist_counts] + 'num_songs': artist.num_songs} for artist in artist_counts] return JsonResponse(data=processed_artist_counts, safe=False) # }}} get_artist_data # -def display_genre_graph(request, client_secret): - user = User.objects.get(user_secret=client_secret) + +def display_genre_graph(request, user_secret): + user = User.objects.get(user_secret=user_secret) context = { - 'user_secret': client_secret, + 'user_secret': user_secret, } return render(request, "spotifyvis/genre_graph.html", context) -def audio_features(request, client_secret): + +def audio_features(request, user_secret): """Renders the audio features page :param request: the HTTP request - :param client_secret: user secret used for identification + :param user_secret: user secret used for identification :return: renders the audio features page """ - user = User.objects.get(user_secret=client_secret) + user = User.objects.get(user_secret=user_secret) context = { 'user_id': user.user_id, - 'user_secret': client_secret, + 'user_secret': user_secret, } return render(request, "spotifyvis/audio_features.html", context) # get_audio_feature_data {{{ # -def get_audio_feature_data(request, audio_feature, client_secret): +def get_audio_feature_data(request, audio_feature, user_secret): """Returns all data points for a given audio feature Args: request: the HTTP request audio_feature: The audio feature to be queried - client_secret: client secret, used to identify the user + user_secret: client secret, used to identify the user """ - user = User.objects.get(user_secret=client_secret) + user = User.objects.get(user_secret=user_secret) user_tracks = Track.objects.filter(users=user) response_payload = { 'data_points': [], From f624414701d9499537c02f03fe6c0cffef2756d3 Mon Sep 17 00:00:00 2001 From: Chris Shyi Date: Thu, 28 Jun 2018 21:52:24 -0400 Subject: [PATCH 3/3] Refactor audio features graph code Closes #44. Audio features graph code is now in an external .js file. Also closes #45. --- .../static/spotifyvis/scripts/artist_graph.js | 24 +++- .../spotifyvis/scripts/audio_feat_graph.js | 105 +++++++++++++++ .../templates/spotifyvis/artist_graph.html | 6 +- .../templates/spotifyvis/audio_features.html | 124 ++---------------- spotifyvis/urls.py | 4 +- 5 files changed, 136 insertions(+), 127 deletions(-) create mode 100644 spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js diff --git a/spotifyvis/static/spotifyvis/scripts/artist_graph.js b/spotifyvis/static/spotifyvis/scripts/artist_graph.js index c1f48cb..023dfd9 100644 --- a/spotifyvis/static/spotifyvis/scripts/artist_graph.js +++ b/spotifyvis/static/spotifyvis/scripts/artist_graph.js @@ -5,13 +5,25 @@ */ function drawArtistGraph(artistData, parentElem) { let margin = {top: 20, right: 30, bottom: 30, left: 40}; - let width = 960 - margin.right - margin.left; - let height = 540 - margin.top - margin.bottom; + let width = 1000 - margin.right - margin.left; + let height = 1000 - margin.top - margin.bottom; let color = d3.scaleOrdinal(d3.schemeCategory10); + /* + ** Next four variables were part of an attempt to make bubbles larger, + ** didn't work + */ + let songCounts = artistData.children.map(function(artist) { return artist.num_songs; }); // array of counts + let songCountExtent = d3.extent(songCounts); // [min song count, max song count] + let circleSize = { + min: 45, + max: 75 + }; + let circleRadiusScale = d3.scaleSqrt().domain(songCountExtent).range([circleSize.min, circleSize.max]); + let bubble = d3.pack(artistData) - .size([width, height]) - .padding(1.5); + .size([width + 100, height + 100]) + .padding(0.2); let svg = d3.select(parentElem) .append("svg") @@ -23,7 +35,7 @@ function drawArtistGraph(artistData, parentElem) { .sum(function(d) { return d.num_songs; }); let node = svg.selectAll(".node") - .data(bubble(nodes).descendants()) + .data(bubble(nodes).leaves()) .enter() .filter(function(d) { return !d.children; @@ -36,7 +48,7 @@ function drawArtistGraph(artistData, parentElem) { node.append("title") .text(function(d) { - return `${d.name}: ${d.num_songs}`; + return d.data.name + ": " + d.data.num_songs; }); node.append("circle") diff --git a/spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js b/spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js new file mode 100644 index 0000000..1fab293 --- /dev/null +++ b/spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js @@ -0,0 +1,105 @@ +/** Queries the backend for audio feature data, draws the bar chart + * illustrating the frequencies of values, and appends the chart to + * a designated parent element + * + * @param audioFeature: the name of the audio feature (string) + * @param intervalEndPoints: a sorted array of 5 real numbers defining the intervals (categories) of values, + * for example: + * [0, 0.25, 0.5, 0.75, 1.0] for instrumentalness would define ranges + * (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 userSecret: the user secret string for identification + * @return None + */ +function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSecret) { + // TODO: Not hard code the dimensions? + let margin = {top: 20, right: 30, bottom: 30, left: 40}; + let width = 480 - margin.left - margin.right, + height = 270 - margin.top - margin.bottom; + + let featureData = {}; + // Create the keys first in order + for (let index = 0; index < intervalEndPoints.length - 1; index++) { + let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`; + featureData[key] = 0; + } + // define the vertical scaling function + let vScale = d3.scaleLinear().range([height, 0]); + + d3.json(`/api/audio_features/${audioFeature}/${userSecret}`) + .then(function(response) { + // categorize the data points + for (let dataPoint of response.data_points) { + dataPoint = parseFloat(dataPoint); + let index = intervalEndPoints.length - 2; + // find the index of the first element greater than dataPoint + while (dataPoint < intervalEndPoints[index]) { + index -= 1; + } + let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`; + featureData[key] += 1; + } + + let dataSet = Object.values(featureData); + let dataRanges = Object.keys(featureData); // Ranges of audio features, e.g. 0-0.25, 0.25-0.5, etc + let dataArr = []; + // turn the counts into an array of objects, e.g. {range: "0-0.25", counts: 5} + for (let i = 0; i < dataRanges.length; i++) { + dataArr.push({ + range: dataRanges[i], + counts: featureData[dataRanges[i]] + }); + } + vScale.domain([0, d3.max(dataSet)]).nice(); + + let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.5); + + let xAxis = d3.axisBottom().scale(hScale); + let yAxis = d3.axisLeft().scale(vScale); + + let featureSVG = d3.select(parentElem) + .append('svg').attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom); + + let featureGraph = featureSVG.append("g") + .attr("transform", `translate(${margin.left}, ${margin.top})`) + .attr("fill", "teal"); + + featureGraph.selectAll(".bar") + .data(dataArr) + .enter().append('rect') + .attr('class', 'bar') + .attr('x', function(d) { return hScale(d.range); }) + .attr('y', function(d) { return vScale(d.counts); }) + .attr("height", function(d) { return height - vScale(d.counts); }) + .attr("width", hScale.bandwidth()); + + // function(d) { return hScale(d.range); } + + featureGraph.append('g') + .attr('class', 'axis') + .attr('transform', `translate(0, ${height})`) + .call(xAxis); + + featureGraph.append('g') + .attr('class', 'axis') + .call(yAxis); + + featureSVG.append("text") + .attr('x', (width / 2)) + .attr('y', (margin.top / 2)) + .attr('text-anchor', 'middle') + .style('font-size', '14px') + .text(`${capFeatureStr(audioFeature)}`); + + }); +} + +/** + * Returns the audio feature name string with the first letter capitalized + * @param audioFeature: the name of the audio feature + * @returns the audio feature name string with the first letter capitalized + */ +function capFeatureStr(audioFeature) { + return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1); +} \ No newline at end of file diff --git a/spotifyvis/templates/spotifyvis/artist_graph.html b/spotifyvis/templates/spotifyvis/artist_graph.html index 433e39b..0e5d49a 100644 --- a/spotifyvis/templates/spotifyvis/artist_graph.html +++ b/spotifyvis/templates/spotifyvis/artist_graph.html @@ -11,13 +11,9 @@ + diff --git a/spotifyvis/urls.py b/spotifyvis/urls.py index c28cfcd..f0f8319 100644 --- a/spotifyvis/urls.py +++ b/spotifyvis/urls.py @@ -9,11 +9,11 @@ urlpatterns = [ path('user_data', user_data, name='user_data'), path('admin_graphs', admin_graphs, name='admin_graphs'), path('api/user_artists/', get_artist_data, name='get_artist_data'), - path('artists/', artist_data, name='display_artist_graph'), + path('graphs/artists/', artist_data, name='display_artist_graph'), path('api/user_genres/', get_genre_data, name='get_genre_data'), path('graphs/genre/', display_genre_graph, name='display_genre_graph'), - path('audio_features/', audio_features, name='display_audio_features'), + path('graphs/audio_features/', audio_features, name='display_audio_features'), path('api/audio_features//', get_audio_feature_data, name='get_audio_feature_data'), ]