svg = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
// Your marks here
svg
.selectAll(".arc")
.data(arcs)
.join("path")
.attr("class", "arc")
.attr("fill", d => color(d.data[0]))
.attr("d", a => arc(a));
// Your marks here
svg
.selectAll(".label")
.data(arcs)
.join("text")
.attr("class", "label")
.attr("fill", "#333")
.attr("transform", a => `translate(${arc.centroid(a)})`)
.style("font-size", "10pt")
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.call(text =>
text
.append("tspan")
.style("font-weight", "bold")
.attr("x", 0)
.text(a => a.data[0])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("y", "1em")
.text(a => a.data[1])
);
svg
.selectAll(".axis")
.data(d3.range(...r.domain(), radius / 4))
.join("circle")
.attr("class", "axis")
.attr("r", d => r(d))
.attr("stroke", "#aaaa")
.attr("stroke-dasharray", "2 5")
.attr("fill", "none");
svg
.selectAll(".axisText")
.data(d3.range(...r.domain(), 50))
.join("text")
.attr("class", "axisText")
.attr("y", d => r(d) - 2)
.attr("fill", "#aaaa")
.style("font-size", "8pt")
.text(d => d); // I didn't need to invert because the data was already in the domain
return svg.node();
}
d3.range(...r.domain(), radius / 4)
groupedData = d3.rollups(data, v => v.length, d => d[colAttr])
arcs = d3
.pie()
.padAngle(0.01)
.value(d => 1)(groupedData)
arc
arc = d3
.arc()
.innerRadius(0)
.outerRadius(d => r(d.data[1]))
radius = Math.min(width / 2, height / 2)
color = d3.scaleOrdinal(d3.schemePastel1).domain(data.map(d => d[colAttr]))
r = d3
.scaleSqrt()
.domain([0, d3.max(arcs, d => d.data[1])])
.range([0, radius])
.nice()
colAttr = "Species"
height = 400
margin = ({ left: 50, top: 30, right: 20, bottom: 20 })
md`## Data`
data = vegaDatasets["penguins.json"]()
vegaDatasets = require("vega-datasets@2")
d3 = require("d3@6")
import { groupToStack } from "@john-guerra/d3-stack-with-d3-group"
import { swatches } from "@d3/color-legend"
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.
