Moved script to create genre graph to static file

- sorted artists in bar by most to least, bottom to top
- wrap x-axis labels by bar width
- increased track name length (program crashed on a track name)

spotifyvis/models.py

@@ -49,7 +49,7 @@ class Track(models.Model):
     year = models.PositiveSmallIntegerField()
     popularity = models.PositiveSmallIntegerField()
     runtime = models.PositiveSmallIntegerField()
-    name = models.CharField(max_length=150)
+    name = models.CharField(max_length=200)
     users = models.ManyToManyField(User, blank=True)
     genre = models.CharField(max_length=30)
 

spotifyvis/static/spotifyvis/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 //

spotifyvis/templates/spotifyvis/test_db.html

@@ -19,9 +19,11 @@
 <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>
-  <svg width="960" height="500"></svg>
+  {% load static %}
-  <script>
+  <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,
@@ -34,79 +36,7 @@
     var y = d3.scaleLinear()
         .rangeRound([height, 0]);
 
-    d3.json("{% url "get_genre_data" user_secret %}").then(function(data) {
+    d3.json("{% url "get_genre_data" user_secret %}").then(create_genre_graph);
-      // 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);
-        });
-      });
-
-      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();
-
-      // setup bar colors
-      var max_artists = d3.max(data, function(d) {
-        return Object.keys(d.artists).length;
-      });
-      var colorRange = [];
-      for (i = 0; i < max_artists; i++) {
-        colorRange.push(randomColor());
-      }
-      var z = d3.scaleOrdinal().range(colorRange);
-
-      for (var genre_dict of data) {
-        // process artist breakdown 
-        var keys = Object.keys(genre_dict.artists);
-        var stack = d3.stack()
-          .keys(keys)([genre_dict.artists])
-          //unpack the column
-          .map((d, i) => {
-            return {
-              key: keys[i],
-              data: d[0]
-            }
-          });
-
-        // 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]));
-
-        // x-axis
-        g.append("g")
-            .attr("class", "axis")
-            .attr("transform", "translate(0," + height + ")")
-            .call(d3.axisBottom(x));
-
-        // 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");
-      }
-    });
   </script>
 </body>
 </html>

spotifyvis/utils.py

@@ -26,7 +26,7 @@ def parse_library(headers, tracks, user):
     """
     #  TODO: implement importing entire library with 0 as tracks param
     # number of tracks to get with each call
-    limit = 5
+    limit = 50
     # keeps track of point to get songs from
     offset = 0
     payload = {'limit': str(limit)}

spotifyvis/views.py

@@ -19,7 +19,7 @@ from .models import User, Track, AudioFeatures, Artist
 #  }}} imports # 
 
 TIME_FORMAT = '%Y-%m-%d-%H-%M-%S'
-TRACKS_TO_QUERY = 15
+TRACKS_TO_QUERY = 100
 
 #  generate_random_string {{{ #