Public
Edited
Jul 9, 2024
1 fork
Insert cell
Insert cell
Insert cell
angle = d3
.scaleUtc()
.domain([Date.UTC(2000, 0, 1), Date.UTC(2001, 0, 1) - 1])
.range([0, 2 * Math.PI + (Math.PI * 2) / 180])
Insert cell
angleAxis = (g) =>
g
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call((g) =>
g
.selectAll("g")
.data(angle.ticks())
.join("g")
.each((d, i) => (d.id = DOM.uid("month")))
.call((g) =>
g
.append("path")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr(
"d",
(d) => `
M${d3.pointRadial(angle(d), innerRadius)}
L${d3.pointRadial(angle(d), outerRadius)}
`
)
)
.call((g) =>
g
.append("path")
.attr("id", (d) => d.id.id)
.datum((d) => [d, d3.utcMonth.offset(d, 1)])
.attr("fill", "none")
.attr(
"d",
([a, b]) => `
M${d3.pointRadial(angle(a), innerRadius)}
A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(
angle(b),
innerRadius
)}
`
)
)
.call((g) =>
g
.append("text")
.append("textPath")
.attr("startOffset", 6)
.attr("xlink:href", (d) => d.id.href)
.text(d3.utcFormat("%B"))
)
)
Insert cell
radius = d3
.scaleLinear()
.domain([d3.min(data, (d) => d.year), d3.max(data, (d) => d.year)])
.range([innerRadius, outerRadius])
Insert cell
radiusAxis = (g) =>
g
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call((g) =>
g
.selectAll("g")
.data(radius.ticks().reverse())
.join("g")
.attr("fill", "none")
.call((g) =>
g
.append("circle")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("r", radius)
)
.call((g) =>
g
.append("text")
.attr("y", (d) => -radius(d))
.attr("dy", "0.35em")
.attr("stroke", "#fff")
.attr("stroke-width", 5)
.text((x, i) => `${x.toFixed(0)}`)
.clone(true)
.attr("y", (d) => radius(d))
.selectAll(function () {
return [this, this.previousSibling];
})
.clone(true)
.attr("fill", "currentColor")
.attr("stroke", "none")
)
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
line = d3
.lineRadial()
.curve(d3.curveLinearClosed)
.angle((d) => angle(d.date))
Insert cell
Insert cell
Insert cell
// nyTitles = {
// const url =
// "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2022/2022-05-10/nyt_full.tsv";

// const results = await fetch(url);
// const records = await results.text();
// const data = d3.tsvParse(records);
// const parsed = data.map((d) => d3.autoType(d));

// return parsed
// .filter((d) => d.author === "Stephen King")
// .map((d) => ({ ...d, date: d.week }))

// return parsed;
// }
Insert cell

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.
Learn more