Published
Edited
Sep 13, 2020
3 forks
2 stars
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])
);
return svg.node();
}
groupedData = d3.rollups(data, v => v.length, d => d[colAttr])
arcs = d3
.pie()
.padAngle(0.01)
.value(d => d[1])(groupedData)
arc
arc = d3
.arc()
.innerRadius(radius * 0.6)
.outerRadius(radius * 0.9)
html`<svg><path d="${arc(arcs[0])}" stroke="black" /></svg>`
radius = Math.min(width / 2, height / 2)
color = d3.scaleOrdinal(d3.schemePastel1).domain(data.map(d => d[colAttr]))
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.
