chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("fill", "none")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
const gradient = DOM.uid();
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg
.append("linearGradient")
.attr("id", gradient.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("y1", height - margin.bottom)
.attr("x2", 0)
.attr("y2", margin.top)
.selectAll("stop")
.data(d3.ticks(0, 1, 10))
.join("stop")
.attr("offset", (d) => d)
.attr("stop-color", color);
svg
.append("path")
.datum(blossoms.filter(line.defined()))
// .attr("fill", "none")
.attr("stroke", "#ccc")
.attr("d", line);
svg
.append("path")
.datum(blossoms)
// .attr("fill", "none")
.attr("stroke", gradient)
.attr("stroke-width", 1.5)
.attr("d", line);
return svg.node();
}
// legend({
// color: d3.scaleSequential([0, 100], ["#edd1cb", "#6e4071", "#2d1e3e"]),
// title: blossoms.title
// })
color = d3
.scaleOrdinal()
.domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])
.range(petalColors)
line(blossoms)
line = d3
.line()
.defined((d) => !isNaN(d.date))
.x((d) => x(d.year))
.y((d) => y(d.date))
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
)
.call((g) =>
g
.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "#2d1e3e")
.attr("text-anchor", "end")
.text(blossoms.x)
)
.call((g) => g.selectAll(".tick line").attr("stroke", "#2d1e3e"))
.call((g) => g.selectAll(".tick text").attr("fill", "#2d1e3e"))
yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(width / 120))
.call((g) => g.select(".domain").remove())
.call((g) =>
g
.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "#2d1e3e")
.attr("text-anchor", "start")
.text(blossoms.y)
)
.call((g) => g.selectAll(".tick line").attr("stroke", "#2d1e3e"))
.call((g) => g.selectAll(".tick text").attr("fill", "#2d1e3e"))
d3.extent(blossoms, (d) => d.year)
x = d3
.scaleLinear()
.domain(d3.extent(blossoms, (d) => d.year))
// .nice()
.range([margin.left, width - margin.right])
d3.min(blossoms, (d) => d.date)
d3.max(blossoms, (d) => d.date)
d3.timeFormat("%m%d")(d3.median(blossoms, (d) => d.date))
d3.timeFormat("%m%d")(d3.mean(blossoms, (d) => d.date))
y = d3
.scaleTime()
.domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])
.nice()
.range([height - margin.bottom, margin.top])
blossoms = Object.assign(
d3
.csvParse(await FileAttachment("peak-bloom.csv").text())
.map(({ year, date }) => ({
year: d3.timeFormat("%Y")(new Date(year)),
date: d3.utcParse("%m%d")("0" + date)
? d3.utcParse("%m%d")("0" + date)
: undefined
})),
{ title: "Cherry Blossom Peak-bloom Date", y: " date" },
{ x: "Year →", y: "↑ Peak-bloom date" }
)
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.
