Published
Edited
May 2, 2020
2 stars
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('style', 'font: 400 14px/1.5 "Work Sans", "Open Sans"; fill: #202630');
// bars
svg.append('g')
.selectAll('rect')
.data(data)
.join('rect')
.attr('fill', d => groupColors[d.group - 1])
.attr('x', (d,i) => xScale(i))
.attr('y', d => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(0) - yScale(d.value))
const percentFormatter = d3.format(".2~%")
// bar value labels
svg.append("g")
.attr("fill", "#202630")
.attr("text-anchor", "middle")
.attr("font-family", "Work Sans")
.attr("font-size", 12)
.style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px")
.selectAll("text")
.data(data)
.join("text")
.attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
.attr("y", d => yScale(d.value))
.attr("dy", "-.5em")
.text(d => percentFormatter(d.value));
// x-axis
svg.append('g').call(xAxis);
// y-axis
svg.append('g').call(yAxis);
// legend
svg.append("g")
.call(legend);
// chart title
svg.append("text")
.attr("transform", `translate(0, 0)`)
.attr("dy", "1em")
.attr("text-anchor", "start")
.style("fill", "#202630")
.style("font-size", 18)
.html("Allocation of resources across groups");
return svg.node();
}
data = original_data.sort((a, b) => {
if (a.group < b.group) {
return -1;
}
if (a.group > b.group) {
return 1;
}
// a must be equal to b
return 0;
})
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.
