chart = {
const svg = d3.select(DOM.svg(width, height))
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`)
.style("width", "100%")
.style("height", "auto")
.style("font", "12px sans-serif");
svg
.selectAll('g')
.data(d3.stack().keys(data.columns.slice(2))(data))
.join("g")
.attr("fill", d => z(d.key))
.selectAll("path")
.data(d => d)
.join('path')
.attr('d', arc)
svg
.selectAll('text')
.data( data )
.join('text')
.text(d => d.Country)
.attr("x", 0)
.attr("y", 0)
//.attr("dx", d => y(d.consumption) + 10)
.attr("dx", innerRadius + 10)
.attr("dy", 5)
.attr("transform", (d, i) => 'rotate(' + (degrees(x(d.Country) + x.bandwidth() / 2) - 90) + ')')
.attr("fill", "white")
svg.append("g")
.call(legend);
return svg.node();
}
x = d3.scaleBand()
.range([0, 2 * Math.PI])
.align(0)
.domain( dataSorted.map(function(d) { return d.Country; }) );
y = d3.scaleRadial()
.domain([0, d3.max(dataSorted, d => d.consumption)])
.range([innerRadius, outerRadius])
z = d3.scaleOrdinal()
.domain(data.columns.slice(2))
.range(colorRange)
arc = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => x(d.data.Country))
.endAngle(d => x(d.data.Country) + x.bandwidth())
.cornerRadius(0)
.padAngle(0.05)
.padRadius(innerRadius)
legend = g => g.append("g")
.selectAll("g")
.data(data.columns.slice(2).reverse())
.join("g")
.attr("transform", (d, i) => `translate(-40,${(i - (data.columns.length - 2) / 2) * 20})`)
.call(g => g.append("rect")
.attr("width", 18)
.attr("height", 18)
.attr("fill", z))
.call(g => g.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", "0.35em")
.text(d => d))
degrees = (radians) => {return radians * (180/Math.PI)}
data = FileAttachment("antibiotic_consumption_stacked@3.csv").csv({typed: true});
dataSorted = data.slice().sort((a, b) => d3.ascending(a.Country, b.Country) || d3.ascending(a.consumption, b.consumption))
innerRadius = 100;
outerRadius = 400;
colorRange = d3.quantize(d3.interpolateHcl("#e6007e", "#e6e6e6"), data.columns.length - 2);
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.
