chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.selectAll("g")
.data(filteredBlossoms, (d) => d.year)
.join((enter) => {
const g = enter
.append("g")
.attr(
"transform",
(d) =>
`translate(${x(d.year)},${y(d.date)})scale(${petalScale(d.date)})`
);
g.selectAll("path")
.data((d) =>
_.times(d.numPetals, (i) =>
Object.assign({}, d, { rotate: i * (360 / d.numPetals) })
)
)
.join("path")
.attr("transform", (d) => `rotate(${d.rotate})scale(0.5)`)
.attr("fill", function (d) {
return color(d.date);
})
.attr("fill-opacity", 0.3)
.attr("d", (d) => d.path)
.attr("stroke-width", 10)
.attr("stroke", function (d) {
return color(d.date);
});
});
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(grid);
return svg.node();
}
petalScale = d3
.scaleLinear()
.domain([
d3.min(filteredBlossoms, (d) => d.date),
d3.max(filteredBlossoms, (d) => d.date)
])
.range([0.2, 0.15])
sizeScale = d3
.scaleLinear()
.domain([
d3.min(filteredBlossoms, (d) => d.date),
d3.max(filteredBlossoms, (d) => d.date)
])
.range([5, 2])
color = d3
.scaleTime()
.domain([
d3.min(filteredBlossoms, (d) => d.date),
d3.max(filteredBlossoms, (d) => d.date)
])
.range(petalColors)
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call((g) => g.select(".domain").remove())
.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))
.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"))
grid = (g) =>
g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call((g) =>
g
.append("g")
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", (d) => 0.5 + x(d))
.attr("x2", (d) => 0.5 + x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom)
)
.call((g) =>
g
.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", (d) => 0.5 + y(d))
.attr("y2", (d) => 0.5 + y(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right)
)
x = d3
.scaleLinear()
.domain(d3.extent(blossoms, (d) => d.year))
.range([margin.left, width - margin.right])
y = d3
.scaleTime()
.domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])
.nice()
.range([height - margin.bottom, margin.top])
filteredBlossoms = {
return _.map(blossoms, (d, i) => {
return {
year: d.year,
date: d.date,
path: petalPath,
numPetals: 5
};
}).filter((d) => !isNaN(d.date));
}
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
})),
{ 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.
