Kevin-Mok/spotify-lib-vis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Genre Artist Breakdown

Browse Source 
Implemented the generation of genre artist breakdown data for the genre
graphs. More test cases needed.
This commit is contained in:
Chris Shyi
2018-07-24 00:24:47 -04:00
parent 6665532fea
commit 54c541426c
7 changed files with 93 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
graphs/static/graphs/scripts/genre_graph.js
View File

@@ -4,7 +4,7 @@ function create_genre_graph(data) {
data.forEach(function(d) {
d.num_songs = +d.num_songs;
console.log(d.genre, d.num_songs);
var artist_names = Object.keys(d.artists);
let artist_names = Object.keys(d.artists);
artist_names.forEach(function(e) {
d.artists[e] = +d.artists[e];
console.log(e, d.artists[e]);
@@ -31,22 +31,22 @@ function create_genre_graph(data) {
// setup bar colors {{{ //
var max_artists = d3.max(data, function(d) {
let max_artists = d3.max(data, function(d) {
return Object.keys(d.artists).length;
});
var z = d3.scaleOrdinal().range(randomColor({
let z = d3.scaleOrdinal().range(randomColor({
count: max_artists,
luminosity: 'light',
}));
// }}} setup bar colors //
for (var genre_dict of data) {
for (let genre_dict of data) {
// process artist breakdown {{{ //
var keys = Object.keys(genre_dict.artists);
var stack = d3.stack()
let keys = Object.keys(genre_dict.artists);
let stack = d3.stack()
//.order(d3.stackOrderAscending)
.order(d3.stackOrderDescending)
.keys(keys)([genre_dict.artists])
@@ -112,7 +112,7 @@ function create_genre_graph(data) {
// https://gist.github.com/guypursey/f47d8cd11a8ff24854305505dbbd8c07#file-index-html
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
let text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],

6
graphs/templates/graphs/genre_graph.html
View File

@@ -26,16 +26,16 @@
<svg width="1920" height="740"></svg>
<script>
var svg = d3.select("svg"),
let 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()
let x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
let y = d3.scaleLinear()
.rangeRound([height, 0]);
d3.json("{% url "api:get_genre_data" user_secret %}").then(create_genre_graph);