Published
Edited
Oct 28, 2020
3 forks
1 star
chart = {
const svg = d3.select(DOM.svg(width, height));
const entries = d3.entries(countByGenres)
const numEntries = entries.length
const extent = d3.extent(entries, d => d.value['One'] + d.value['Two'] + d.value['Three'] + d.value['More']);
const labelRadius = (height / 2 - 140) * 1.025;
function placeBar(count) {
const angle = ((count / numEntries) * (Math.PI * 2)) + (Math.PI * 3 / 2)
return {x:width/2 - 60 + ((80 + labelRadius) * Math.cos(angle)),y:height/2 - 60 + ((80 + labelRadius) * Math.sin(angle))}
}
function placePie(count) {
const nentries = countGenres.length;
const angle = ((count%100) / 100) * (Math.PI * 2)
return {x:width/2 + ((labelRadius - 15 * (Math.floor(count / 100) + 1))) * Math.cos(angle),y:height/2 + ((labelRadius - 15 * (Math.floor((count / 100)) + 1))) * Math.sin(angle)}
}
// Histograms
var count;
var arr = [];
for (count = 0; count < numEntries; count++) {
var a = entries[count].value;
var data2 = [a.One,a.Two,a.Three,a.More]
var x = d3
.scaleLinear()
.domain([0, d3.max(data2)])
.range([0, width])
var y = d3.scaleBand()
.domain(d3.range(data2.length))
.range([0, 20 * data2.length])
var bar = svg
.selectAll("g")
.data(data2)
.join("g")
.attr("transform", (d, i) => `translate(${0},${y(i)})`);
bar
.append("rect")
.attr("fill", "steelblue")
.attr("x", d => (width - x(d)) / 16)
.attr("width", d => x(d) / 8)
.attr("height", y.bandwidth() - 1)
.attr('transform', `translate(${placeBar(count).x},${placeBar(count).y})`)
.append("title")
.text(d => `${entries[count].key} - ${barname(d)}: ${d}`);
function barname(val) {
if (val == data2[0]){
return "One"
}
else if (val == data2[1]){
return "Two"
}
else if (val == data2[2]){
return "Three"
}
else{
return "More"
}
}
arr.push(bar);
}
// Pie Charts
function lineEnd(d){
var b = d.data.Group.split(",")
var a = []
var i;
for (i = 0; i < b.length; i++) {
var ind = genres.indexOf(b[i])
a.push([placePie(d.data.Index).x,placePie(d.data.Index).y])
a.push([placeBar(ind).x,placeBar(ind).y])
}
return a
}
var piescale = d3.scaleLinear()
.domain([1,d3.max(countGenres)])
.range([5, 25])
var count2;
for (count2 = 0; count2 < dividedagedata.length; count2++) {
var pie = d3.pie()
.sort(null)
.value(d => d.Value)
const arcs = pie(dividedagedata[count2]);
var arc = d3.arc()
.innerRadius(0)
.outerRadius(piescale(countGenres[count2]))
var line = svg.append("g")
.append("path")
.attr("stroke","black")
.attr("fill-opacity",0)
.attr("d",d3.line()([[0,0],[100,100]]))
.attr("visibility","hidden");
svg.append("g")
.attr("stroke", "white")
.attr('transform', `translate(${placePie(count2).x},${placePie(count2).y})`)
.selectAll("path")
.data(arcs)
.join("path")
.on('mouseover', (d, i, arr) => {
line.attr("visibility","show")
.attr("d",d3.line()(lineEnd(d)))
})
.on('mouseout', (d, i, arr) => {
line.attr("visibility","hidden")
})
.attr("d", arc)
.attr("fill", d => color(d.data.Age))
.append("title")
.text(d => `${d.data.Group} - ${d.data.Age}: ${d.data.Value.toLocaleString()}`)
}
// Labels
const labels = svg.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`)
.classed("labels", true);
labels.append("def")
.append("path")
.attr("id", "label-path")
.attr("d", "m0 " + -labelRadius + " a" + labelRadius + " " + labelRadius + " 0 1,1 -0.01 0");
labels.selectAll("text")
.data(entries.map(e => e.key))
.enter()
.append("text")
.style("text-anchor", "middle")
.style("font-family", "-apple-system,BlinkMacSystemFont")
.style("fill", "#000000")
.append("textPath")
.attr("xlink:href", "#label-path")
.attr("startOffset", (d, i) => i * 100 / numEntries + 50 / numEntries + '%')
.text(d => d);
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
