Split spotifyvis code into different apps (#47)

Server is able to start, but none of the apps are linked together yet.

graphs/apps.py

@@ -0,0 +1,4 @@
+from django.apps import AppConfig
+
+class GraphsConfig(AppConfig):
+    name = 'graphs'

graphs/models.py

@@ -0,0 +1,104 @@
+from django.db import models
+
+# id's are 22 in length in examples but set to 30 for buffer
+MAX_ID = 30
+
+#  Genre {{{ # 
+
+class Genre(models.Model):
+            
+    class Meta:
+        verbose_name = "Genre"
+        verbose_name_plural = "Genres"
+
+    name = models.CharField(primary_key=True, max_length=50)
+    num_songs = models.PositiveIntegerField()
+
+    def __str__(self):
+        return self.name
+
+#  }}} Genre # 
+
+#  Artist {{{ # 
+
+
+class Artist(models.Model):
+    class Meta:
+        verbose_name = "Artist"
+        verbose_name_plural = "Artists"
+
+    artist_id = models.CharField(primary_key=True, max_length=MAX_ID)
+    # unique since only storing one genre per artist right now
+    name = models.CharField(unique=True, max_length=50)
+    genres = models.ManyToManyField(Genre, blank=True)
+
+    def __str__(self):
+        return self.name
+
+#  }}} Artist # 
+
+#  User {{{ # 
+
+class User(models.Model):
+    class Meta:
+        verbose_name = "User"
+        verbose_name_plural = "Users"
+
+    user_id = models.CharField(primary_key=True, max_length=MAX_ID) # the user's Spotify ID
+    user_secret = models.CharField(max_length=50, default='')
+
+    def __str__(self):
+        return self.user_id
+
+#  }}} User # 
+
+#  Track {{{ # 
+
+class Track(models.Model):
+    
+    class Meta:
+        verbose_name = "Track"
+        verbose_name_plural = "Tracks"
+
+    track_id = models.CharField(primary_key=True, max_length=MAX_ID)
+    #  artist = models.ForeignKey(Artist, on_delete=models.CASCADE)
+    artists = models.ManyToManyField(Artist, blank=True)
+    year = models.PositiveSmallIntegerField()
+    popularity = models.PositiveSmallIntegerField()
+    runtime = models.PositiveSmallIntegerField()
+    name = models.CharField(max_length=200)
+    users = models.ManyToManyField(User, blank=True)
+    genre = models.ForeignKey(Genre, on_delete=models.CASCADE, blank=True,
+            null=True)
+
+    def __str__(self):
+        track_str = "{}, genre: {}, artists: [".format(self.name, self.genre)
+        for artist in self.artists.all():
+            track_str += "{}, ".format(artist.name)
+        track_str += "]"
+        return track_str
+
+#  }}} Track # 
+
+#  AudioFeatures {{{ # 
+
+class AudioFeatures(models.Model):
+        
+    class Meta:
+        verbose_name = "AudioFeatures"
+        verbose_name_plural = "AudioFeatures"
+
+    track = models.OneToOneField(Track, on_delete=models.CASCADE, primary_key=True,)
+    acousticness = models.DecimalField(decimal_places=3, max_digits=3)
+    danceability = models.DecimalField(decimal_places=3, max_digits=3)
+    energy = models.DecimalField(decimal_places=3, max_digits=3)
+    instrumentalness = models.DecimalField(decimal_places=3, max_digits=3)
+    loudness = models.DecimalField(decimal_places=3, max_digits=6)
+    speechiness = models.DecimalField(decimal_places=3, max_digits=3)
+    tempo = models.DecimalField(decimal_places=3, max_digits=6)
+    valence = models.DecimalField(decimal_places=3, max_digits=3)
+
+    def __str__(self):
+        return super(AudioFeatures, self).__str__()
+
+#  }}} AudioFeatures #

graphs/static/graphs/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");
+
+
+
+}

graphs/static/graphs/scripts/genre_graph.js

@@ -0,0 +1,137 @@
+function create_genre_graph(data) {
+    // convert strings to nums {{{ //
+    
+    data.forEach(function(d) {
+        d.num_songs = +d.num_songs;
+        console.log(d.genre, d.num_songs);
+        var artist_names = Object.keys(d.artists);
+        artist_names.forEach(function(e) {
+            d.artists[e] = +d.artists[e];
+            console.log(e, d.artists[e]);
+            //console.log(e, d.artists[e], d.artists[e] + 1);
+        });
+    });
+    
+    // }}} convert strings to nums //
+
+	// domains {{{ //
+	
+    data.sort(function(a, b) {
+        return b.num_songs - a.num_songs;
+    });
+    x.domain(data.map(function(d) {
+        return d.genre;
+    }));
+    //y.domain([0, d3.max(data, function(d) { return d.num_songs; }) * 1.25]).nice();
+    y.domain([0, d3.max(data, function(d) {
+        return d.num_songs;
+    })]).nice();
+	
+	// }}} domains  //
+
+    // setup bar colors {{{ //
+    
+    var max_artists = d3.max(data, function(d) {
+        return Object.keys(d.artists).length;
+    });
+    var z = d3.scaleOrdinal().range(randomColor({
+        count: max_artists,
+        luminosity: 'light',
+    }));
+    
+    // }}} setup bar colors //
+
+    for (var genre_dict of data) {
+		
+        // process artist breakdown  {{{ //
+        
+        var keys = Object.keys(genre_dict.artists);
+        var stack = d3.stack()
+            //.order(d3.stackOrderAscending)
+            .order(d3.stackOrderDescending)
+            .keys(keys)([genre_dict.artists])
+            //unpack the column
+            .map((d, i) => {
+                return {
+                    key: keys[i],
+                    data: d[0]
+                }
+            });
+        
+        // }}} process artist breakdown  //
+
+        // add bars {{{ //
+        
+        g.append("g")
+            .selectAll("rect")
+            .data(stack)
+            .enter().append("rect")
+            .attr("x", x(genre_dict.genre))
+            .attr("y", function(d) {
+                return y(d.data[1]);
+            })
+            .attr("height", d => y(d.data[0]) - y(d.data[1]))
+            .attr("width", x.bandwidth())
+            .attr('fill', (d, i) => z(i))
+            .append('title').text(d => d.key + ': ' + (d.data[1] - d.data[0]));
+        
+        // }}} add bars //
+
+        // x-axis {{{ //
+        
+        g.append("g")
+            .attr("class", "axis")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(x))
+            .selectAll(".tick text")
+            .call(wrap, x.bandwidth());
+        
+        // }}} x-axis //
+
+        // y-axis {{{ //
+        
+        g.append("g")
+            .attr("class", "axis")
+            .call(d3.axisLeft(y).ticks(null, "s"))
+            .append("text")
+            .attr("x", 2)
+            .attr("y", y(y.ticks().pop()) + 0.5)
+            .attr("dy", "0.32em")
+            .attr("fill", "#000")
+            .attr("font-weight", "bold")
+            .attr("text-anchor", "start")
+            .text("Songs");
+        
+        // }}} y-axis //
+
+    }
+}
+
+// wrap text {{{ //
+
+// https://gist.github.com/guypursey/f47d8cd11a8ff24854305505dbbd8c07#file-index-html
+function wrap(text, width) {
+    text.each(function() {
+        var text = d3.select(this),
+			words = text.text().split(/\s+/).reverse(),
+            word,
+            line = [],
+            lineNumber = 0,
+            lineHeight = 1.1, // ems
+            y = text.attr("y"),
+            dy = parseFloat(text.attr("dy")),
+            tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em")
+        while (word = words.pop()) {
+            line.push(word)
+            tspan.text(line.join(" "))
+            if (tspan.node().getComputedTextLength() > width) {
+                line.pop()
+                tspan.text(line.join(" "))
+                line = [word]
+                tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", `${++lineNumber * lineHeight + dy}em`).text(word)
+            }
+        }
+    })
+}
+
+// }}} wrap text //

graphs/templates/graphs/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>

graphs/templates/graphs/features_graph.html

@@ -0,0 +1,142 @@
+{% load static %}
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>User Spotify Data</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+            .tick {
+                font-size: 15px;
+            }
+        </style>
+    </head>
+    <body>
+        <!--[if lt IE 7]>
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+        <p>Logged in as {{ user_id }}</p>
+        <script src="https://d3js.org/d3.v5.js"></script>
+        <script type="text/javascript">
+
+            /** 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)
+             *  @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;
+
+                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}/{{ user_secret }}`)
+                    .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);
+            }
+
+            drawAudioFeatGraph("instrumentalness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
+            drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0], 'body');
+            drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0], 'body');
+            drawAudioFeatGraph("tempo", [40, 80, 120, 160, 200], 'body');
+            drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0], 'body');
+            drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
+            drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0], 'body');
+            drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
+        </script>
+    </body>
+</html>

graphs/templates/graphs/genre_graph.html

@@ -0,0 +1,44 @@
+<!-- header {{{ -->
+
+<!DOC
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+	<!--[if gt IE 8]><!--> 
+{% load static %}
+<html class="no-js"> <!--<![endif]-->
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Test DB Page</title>
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{% static 'spotifyvis/css/dark_bg.css' %}">
+</head>
+
+<!-- }}} header -->
+
+<body>
+  <script src="https://d3js.org/d3.v5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>
+  {% load static %}
+  <script src="{% static "spotifyvis/scripts/genre_graph.js" %}"></script>
+
+  <svg width="1920" height="740"></svg>
+  <script>
+    var svg = d3.select("svg"),
+        margin = {top: 20, right: 20, bottom: 30, left: 40},
+        width = +svg.attr("width") - margin.left - margin.right,
+        height = +svg.attr("height") - margin.top - margin.bottom,
+        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+    var x = d3.scaleBand()
+        .rangeRound([0, width])
+        .paddingInner(0.05)
+        .align(0.1);
+    var y = d3.scaleLinear()
+        .rangeRound([height, 0]);
+
+    d3.json("{% url "get_genre_data" user_secret %}").then(create_genre_graph);
+  </script>
+</body>
+</html>

graphs/urls.py

@@ -0,0 +1,12 @@
+from django.urls import path, include
+
+from .views import *
+
+urlpatterns = [
+    path('artists/<str:user_secret>', artist_data, 
+        name='display_artist_graph'),
+    path('genre/<str:user_secret>', display_genre_graph,
+        name='display_genre_graph'),
+    path('audio_features/<str:user_secret>', audio_features,
+        name='display_audio_features'),
+]

graphs/views.py

@@ -0,0 +1,51 @@
+#  imports {{{ # 
+
+import math
+import random
+import requests
+import os
+import urllib
+import secrets
+import pprint
+import string
+from datetime import datetime
+
+from django.shortcuts import render, redirect
+
+#  }}} imports # 
+
+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)
+
+def display_genre_graph(request, user_secret):
+    user = User.objects.get(user_secret=user_secret)
+    context = {
+        'user_secret': user_secret,
+    }
+    return render(request, "spotifyvis/genre_graph.html", context)
+
+
+def audio_features(request, user_secret):
+    """Renders the audio features page
+
+    :param request: the HTTP request
+    :param user_secret: user secret used for identification
+    :return: renders the audio features page
+    """
+    user = User.objects.get(user_secret=user_secret)
+    context = {
+        'user_id': user.user_id,
+        'user_secret': user_secret,
+    }
+    return render(request, "spotifyvis/audio_features.html", context)