Set up artist bubble chart

Major changes: - Set up preliminary artist bubble chart, font too small - Wrote shell script for resetting database
6 years ago · 8851c5ce25
8 changed files with 174 additions and 22 deletions
--- a/reset_db.sh
+++ 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
--- a/reset_db.sql
+++ b/reset_db.sql
@ -0,0 +1,3 @@
+DROP DATABASE spotifyvis;
+CREATE DATABASE spotifyvis;
+GRANT ALL PRIVILEGES ON DATABASE spotifyvis TO django;
--- a/spotifyvis/static/spotifyvis/scripts/artist_graph.js
+++ 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");
+
+
+
+}
--- a/spotifyvis/templates/spotifyvis/artist_graph.html
+++ b/spotifyvis/templates/spotifyvis/artist_graph.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Artist Graphs</title>
+</head>
+<body>
+    <p>Logged in as {{ user_id }}</p>
+    <script src="https://d3js.org/d3.v5.js"></script>
+    <script src="{% static "spotifyvis/scripts/artist_graph.js" %}"></script>
+    <script>
+        d3.json("{% url "get_artist_data" user_secret %}").then(function(data) {
+            for (let index = 0; index < data.length; index++) {
+                console.log(data[index].name);
+                console.log(data[index].num_songs);
+            }
+            // this is the data format needed for bubble charts
+            data = {
+                "children": data
+            };
+            drawArtistGraph(data, "body");
+        });
+    </script>
+
+</body>
+</html>
--- 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;
--- a/spotifyvis/templates/spotifyvis/logged_in.html
+++ b/spotifyvis/templates/spotifyvis/logged_in.html
@ -9,9 +9,12 @@
 </head>
 <body>
 	<h1>{{ user_id }}'s Graphs</h1>
-	<a class="btn btn-primary" href="/audio_features/{{ user_secret }}"
+	<a class="btn btn-primary" href="{% url "display_audio_features" user_secret %}"
 		role="button">Audio Features</a>
    <a class="btn btn-primary" href="{% url "display_genre_graph" user_secret %}"
 		role="button">Genres</a>
+    <a class="btn btn-primary" href="{% url "display_artist_graph" user_secret %}" role="button">
+        Artists
+    </a>
 </body>
 </html>
--- 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/<str:user_id>', get_artist_data, name='get_artist_data'),
+    path('api/user_artists/<str:user_secret>', get_artist_data, name='get_artist_data'),
+    path('artists/<str:user_secret>', artist_data, name='display_artist_graph'),
    path('api/user_genres/<str:user_secret>', get_genre_data, name='get_genre_data'),
-    path('graphs/genre/<str:client_secret>', display_genre_graph,
-        name='display_genre_graph'),
-    path('audio_features/<str:client_secret>', audio_features, name='audio_features'),
-    path('api/audio_features/<str:audio_feature>/<str:client_secret>',
-        get_audio_feature_data, name='get_audio_feature_data'),
+    path('graphs/genre/<str:user_secret>', display_genre_graph,
+         name='display_genre_graph'),
+    path('audio_features/<str:user_secret>', audio_features, name='display_audio_features'),
+    path('api/audio_features/<str:audio_feature>/<str:user_secret>',
+         get_audio_feature_data, name='get_audio_feature_data'),
 ]
--- 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': [],