Public
Edited
Apr 1, 2024
1 star
Easter Birthdays
Insert cell
Insert cell
Insert cell
Insert cell
data.length
Insert cell
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - 1.5 * margin.bottom})`)
.call(d3.axisBottom(x).tickSize(0))
.call((g) => g.select(".domain").remove())
Insert cell
x = d3
.scaleLinear()
.domain(summary.map((d) => d.freq))
.range([3 * margin.left, width - margin.right])
Insert cell
y = d3
.scalePoint()
.domain(data.map((d) => d.counts))
.range([margin.top, height - 3 * margin.bottom])
Insert cell
counts = data.map((d) => d.counts)
Insert cell
data = Array.from(t, ([counts, dates]) => ({ counts, dates }))
Insert cell
summary = Array.from(
d3.rollup(
rdata,
(v) => v.length,
(d) => d.counts
),
([counts, freq]) => ({ counts, freq })
)
Insert cell
t = d3.groups(
rdata,
(d) => d.counts,
(d) => d.date
)
Insert cell
Array.from(
d3.group(rdata, (d) => d.counts),
([key, dates]) => ({ key, dates })
)
Insert cell
Insert cell
Insert cell
Insert cell
width = 400
Insert cell
colors = ({
background: "#FDA608",
textcolor: "#EA0024",
easter: "#56A080",
dark: "#103933",
light: "#56A080"
})
Insert cell
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