data visualization developer, runner, musician
Published
Edited
Nov 22, 2020
2 stars
{
return radialStackedBar(html`<div></div>`,
width,
height,
innerRadius,
data,
'State',
'total',
data.columns.slice(1),
z)
}
radialStackedBar = (container, width, height, innerRadius, data, xId, yId, keys, colorScale) => {
const div = d3.select(container)
const svg = div.append("svg")
.attr("width", width)
.attr("height", height)
.style("font", "10px sans-serif");
const outerRadius = Math.min(width, height) / 2;
const x = d3.scaleBand()
.domain(data.map(d => d[xId]))
.range([0, 2 * Math.PI])
.align(0)
const y = d3.scaleRadial()
.domain([0, d3.max(data, d => d[yId])])
.range([innerRadius, outerRadius])
const arc = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => x(d.data[xId]))
.endAngle(d => x(d.data[xId]) + x.bandwidth())
.padAngle(0.01)
.padRadius(innerRadius)
const g = svg.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.join("g")
.attr("fill", d => colorScale(d.key))
.selectAll("path")
.data(d => d)
.join("path")
.attr("d", arc);
return div.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.
