Kevin Mok
f71ba20116
Avoided artist breakdown overflowing total tracks in genre by only adding artists while running tally is less than total.
113 lines
3.7 KiB
HTML
113 lines
3.7 KiB
HTML
<!-- 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]><!-->
|
|
<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">
|
|
</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>
|
|
<svg width="960" height="500"></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(function(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);
|
|
});
|
|
});
|
|
|
|
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>
|