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

Improve readability

Browse Source 
Added additional comments to improve readability of the genre graph
related code.
This commit is contained in:
Chris Shyi
2018-07-26 02:37:53 -04:00
parent 54c541426c
commit 765141c024
4 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,9 +22,9 @@ function create_genre_graph(data) {
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;
return d.num_songs; // returns the maximum number of songs in the genre
})]).nice();
// }}} domains //
@@ -34,7 +34,7 @@ function create_genre_graph(data) {
let max_artists = d3.max(data, function(d) {
return Object.keys(d.artists).length;
});
let z = d3.scaleOrdinal().range(randomColor({
let colorScale = d3.scaleOrdinal().range(randomColor({
count: max_artists,
luminosity: 'light',
}));
@@ -47,10 +47,9 @@ function create_genre_graph(data) {
let keys = Object.keys(genre_dict.artists);
let stack = d3.stack()
//.order(d3.stackOrderAscending)
.order(d3.stackOrderDescending)
.keys(keys)([genre_dict.artists])
//unpack the column
// unpack the column
.map((d, i) => {
return {
key: keys[i],
@@ -72,8 +71,9 @@ function create_genre_graph(data) {
})
.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]));
.attr('fill', (d, i) => colorScale(i))
// keep 3 significant figures in the song count label
.append('title').text(d => d.key + ': ' + (d.data[1] - d.data[0]).toPrecision(3));
// }}} add bars //
@@ -108,7 +108,7 @@ function create_genre_graph(data) {
}
// wrap text {{{ //
// wrapping long labels
// https://gist.github.com/guypursey/f47d8cd11a8ff24854305505dbbd8c07#file-index-html
function wrap(text, width) {
text.each(function() {
@@ -122,13 +122,13 @@ function wrap(text, width) {
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(" "))
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)
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);
}
}
})

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

@@ -13,7 +13,7 @@
<title>Test DB Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">
{# <link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">#}
</head>
<!-- }}} header -->
@@ -33,7 +33,8 @@
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.paddingInner(0.1)
.paddingOuter(0.7)
.align(0.1);
let y = d3.scaleLinear()
.rangeRound([height, 0]);