chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const gradient = DOM.uid();
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(area.defined()))
.attr("fill", "#eee")
.attr("opacity", 0.5)
.attr("d", area);
svg
.append("path")
.datum(blossoms)
.attr("fill", gradient)
.attr("opacity", 0.8)
.attr("d", area);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
d3.min(blossoms, (d) => d.date)
color.domain()
color.range()
color = d3
.scaleOrdinal()
.domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])
.range(petalColors)
petalColors = [
"#edd1cb",
"#e6bdbc",
"#dda9af",
"#d194a4",
"#c3819c",
"#b37093",
"#9f5f8a",
"#8a5081",
"#744375",
"#5b3665",
"#432a53",
"#2d1e3e"
]
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"))
area(blossoms)
area = d3
.area()
.defined((d) => !isNaN(d.date))
.x((d) => x(d.year))
// .y0(y(0))
.y0(y(d3.min(blossoms, (d) => d.date)))
.y1((d) => y(d.date))
x = d3
.scaleLinear()
.domain(d3.extent(blossoms, (d) => d.year))
.range([margin.left, width - margin.right])
y(blossoms[14].date)
y(d3.min(blossoms, (d) => d.date))
y(0)
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: yearFormat(new Date(year)),
date: parseDate("0" + date) ? parseDate("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.
