From 8851c5ce25ec9a20c62489e31aa1b83a6f858842 Mon Sep 17 00:00:00 2001 From: Chris Shyi Date: Thu, 28 Jun 2018 16:42:16 -0400 Subject: [PATCH] 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': [],