| 
					
					
						
							
						
					
					
				 | 
				@ -22,8 +22,6 @@ | 
			
		
		
	
		
			
				 | 
				 | 
				  <svg width="960" height="500"></svg> | 
				 | 
				 | 
				  <svg width="960" height="500"></svg> | 
			
		
		
	
		
			
				 | 
				 | 
				  <script> | 
				 | 
				 | 
				  <script> | 
			
		
		
	
		
			
				 | 
				 | 
				
 | 
				 | 
				 | 
				
 | 
			
		
		
	
		
			
				 | 
				 | 
				    // {{{ setup | 
				 | 
				 | 
				 | 
			
		
		
	
		
			
				 | 
				 | 
				
 | 
				 | 
				 | 
				 | 
			
		
		
	
		
			
				 | 
				 | 
				    var svg = d3.select("svg"), | 
				 | 
				 | 
				    var svg = d3.select("svg"), | 
			
		
		
	
		
			
				 | 
				 | 
				        margin = {top: 20, right: 20, bottom: 30, left: 40}, | 
				 | 
				 | 
				        margin = {top: 20, right: 20, bottom: 30, left: 40}, | 
			
		
		
	
		
			
				 | 
				 | 
				        width = +svg.attr("width") - margin.left - margin.right, | 
				 | 
				 | 
				        width = +svg.attr("width") - margin.left - margin.right, | 
			
		
		
	
	
		
			
				| 
					
					
					
						
							
						
					
				 | 
				@ -36,8 +34,6 @@ | 
			
		
		
	
		
			
				 | 
				 | 
				    var y = d3.scaleLinear() | 
				 | 
				 | 
				    var y = d3.scaleLinear() | 
			
		
		
	
		
			
				 | 
				 | 
				        .rangeRound([height, 0]); | 
				 | 
				 | 
				        .rangeRound([height, 0]); | 
			
		
		
	
		
			
				 | 
				 | 
				
 | 
				 | 
				 | 
				
 | 
			
		
		
	
		
			
				 | 
				 | 
				    // }}} | 
				 | 
				 | 
				 | 
			
		
		
	
		
			
				 | 
				 | 
				
 | 
				 | 
				 | 
				 | 
			
		
		
	
		
			
				 | 
				 | 
				    d3.json("{% url "get_genre_data" user_secret %}").then(function(data) { | 
				 | 
				 | 
				    d3.json("{% url "get_genre_data" user_secret %}").then(function(data) { | 
			
		
		
	
		
			
				 | 
				 | 
				      // convert strings to nums | 
				 | 
				 | 
				      // convert strings to nums | 
			
		
		
	
		
			
				 | 
				 | 
				      data.forEach(function(d) { | 
				 | 
				 | 
				      data.forEach(function(d) { | 
			
		
		
	
	
		
			
				| 
					
					
					
						
							
						
					
				 | 
				@ -54,6 +50,7 @@ | 
			
		
		
	
		
			
				 | 
				 | 
				      data.sort(function(a, b) { return b.num_songs - a.num_songs; }); | 
				 | 
				 | 
				      data.sort(function(a, b) { return b.num_songs - a.num_songs; }); | 
			
		
		
	
		
			
				 | 
				 | 
				      x.domain(data.map(function(d) { return d.genre; })); | 
				 | 
				 | 
				      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; }) * 1.25]).nice(); | 
			
		
		
	
		
			
				 | 
				 | 
				 | 
				 | 
				 | 
				      //y.domain([0, d3.max(data, function(d) { return d.num_songs; })]).nice(); | 
			
		
		
	
		
			
				 | 
				 | 
				
 | 
				 | 
				 | 
				
 | 
			
		
		
	
		
			
				 | 
				 | 
				      // setup bar colors | 
				 | 
				 | 
				      // setup bar colors | 
			
		
		
	
		
			
				 | 
				 | 
				      var max_artists = d3.max(data, function(d) { | 
				 | 
				 | 
				      var max_artists = d3.max(data, function(d) { | 
			
		
		
	
	
		
			
				| 
					
						
							
						
					
					
						
							
						
					
					
				 | 
				@ -84,7 +81,7 @@ | 
			
		
		
	
		
			
				 | 
				 | 
				          .data(stack) | 
				 | 
				 | 
				          .data(stack) | 
			
		
		
	
		
			
				 | 
				 | 
				          .enter().append("rect") | 
				 | 
				 | 
				          .enter().append("rect") | 
			
		
		
	
		
			
				 | 
				 | 
				            .attr("x", x(genre_dict.genre)) | 
				 | 
				 | 
				            .attr("x", x(genre_dict.genre)) | 
			
		
		
	
		
			
				 | 
				 | 
				            .attr("y", function(d) { return y(d.data[0]); }) | 
				 | 
				 | 
				 | 
			
		
		
	
		
			
				 | 
				 | 
				 | 
				 | 
				 | 
				            .attr("y", function(d) { return y(d.data[1]); }) | 
			
		
		
	
		
			
				 | 
				 | 
				            .attr("height", d => y(d.data[0]) - y(d.data[1])) | 
				 | 
				 | 
				            .attr("height", d => y(d.data[0]) - y(d.data[1])) | 
			
		
		
	
		
			
				 | 
				 | 
				            .attr("width", x.bandwidth()) | 
				 | 
				 | 
				            .attr("width", x.bandwidth()) | 
			
		
		
	
		
			
				 | 
				 | 
				            .attr('fill', (d, i) => z(i)) | 
				 | 
				 | 
				            .attr('fill', (d, i) => z(i)) | 
			
		
		
	
	
		
			
				| 
					
						
							
						
					
					
					
				 | 
				
  |