This is where I prototype and experiment
Published
Edited
Dec 25, 2020
5 forks
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
const g = svg.selectAll("g")
.data(myData)
.join("g")
.attr("fill", d => color(d.party));
g.selectAll("path")
.data((d, i) => d3.range(
yTickSpacing, d.value + 1, yTickSpacing
).map(value => ({ value: value, pos: i })))
.join("path")
.attr("fill-opacity", d => d.value / yMaxTick)
.attr("d", d => d3.arc()
.innerRadius(y(d.value-yTickSpacing))
.outerRadius(y(d.value))
.startAngle(x(d.pos))
.endAngle(x(d.pos+1))(d));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
x = d3.scaleLinear()
.domain([0, myData.length])
.range([0, 2 * Math.PI])
y = d3.scaleLinear()
.domain([0, d3.max(myData, d => Math.ceil(d.value))])
.range([innerRadius, outerRadius])
xAxis = g => g.selectAll("g")
.data(x.ticks(myData.length))
.join("g")
.append("path")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("stroke-width", 0.5)
.attr("d", d => `
M${d3.pointRadial(x(d), innerRadius)}
L${d3.pointRadial(x(d), outerRadius + margin)}
`)
yAxis = g => g.selectAll("g")
.data(y.ticks().reverse())
.join("g")
.attr("fill", "none")
.append("circle")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("stroke-width", 0.5)
.attr("r", y)
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.
