You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.4 KiB
81 lines
2.4 KiB
/**
|
|
* Draws the artist count graph as a bubble chart, and appends it the a designated parent element
|
|
* @param artistData: the artist counts data as an array of objects, of the format {'name': artist name, 'num_songs': 50}
|
|
* @param parentElem: the DOM element to append the artist graph to (as a string)
|
|
*/
|
|
function drawArtistGraph(artistData, parentElem) {
|
|
let margin = {top: 20, right: 30, bottom: 30, left: 40};
|
|
let width = 960 - margin.right - margin.left;
|
|
let height = 540 - margin.top - margin.bottom;
|
|
|
|
let color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
let bubble = d3.pack(artistData)
|
|
.size([width, height])
|
|
.padding(1.5);
|
|
|
|
let svg = d3.select(parentElem)
|
|
.append("svg")
|
|
.attr("width", width + margin.right + margin.left)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.attr("class", "bubble");
|
|
|
|
let nodes = d3.hierarchy(artistData)
|
|
.sum(function(d) { return d.num_songs; });
|
|
|
|
let node = svg.selectAll(".node")
|
|
.data(bubble(nodes).descendants())
|
|
.enter()
|
|
.filter(function(d) {
|
|
return !d.children;
|
|
})
|
|
.append("g")
|
|
.attr("class", "node")
|
|
.attr("transform", function(d) {
|
|
return "translate(" + d.x + "," + d.y + ")";
|
|
});
|
|
|
|
node.append("title")
|
|
.text(function(d) {
|
|
return `${d.name}: ${d.num_songs}`;
|
|
});
|
|
|
|
node.append("circle")
|
|
.attr("r", function(d) {
|
|
return d.r;
|
|
})
|
|
.style("fill", function(d,i) {
|
|
return color(i);
|
|
});
|
|
|
|
// artist name text
|
|
node.append("text")
|
|
.attr("dy", ".2em")
|
|
.style("text-anchor", "middle")
|
|
.text(function(d) {
|
|
return d.data.name.substring(0, d.r / 3);
|
|
})
|
|
.attr("font-family", "sans-serif")
|
|
.attr("font-size", function(d){
|
|
return d.r/5;
|
|
})
|
|
.attr("fill", "white");
|
|
|
|
// artist song count text
|
|
node.append("text")
|
|
.attr("dy", "1.3em")
|
|
.style("text-anchor", "middle")
|
|
.text(function(d) {
|
|
return d.data.num_songs;
|
|
})
|
|
.attr("font-family", "Gill Sans", "Gill Sans MT")
|
|
.attr("font-size", function(d){
|
|
return d.r/5;
|
|
})
|
|
.attr("fill", "white");
|
|
|
|
d3.select(self.frameElement)
|
|
.style("height", height + "px");
|
|
|
|
|
|
|
|
}
|