chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2.75, -height / 2, width, height])
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
svg
.append("path")
.style("fill", "url(#areaGradient)")
.attr("d", line.radius((d) => y(d.date))(filteredBlossoms));
svg.append("g").call(stamen);
let areaGradient = svg
.append("defs")
.append("radialGradient")
.attr("id", "areaGradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "100%");
areaGradient
.append("stop")
.attr("offset", "0%")
.attr("stop-color", colorPicker(diff))
.attr("stop-opacity", 1);
areaGradient
.append("stop")
.attr("offset", "90%")
.attr("stop-color", color[1])
.attr("stop-opacity", 0.3);
return svg.node();
}
stamen = (g) =>
g
.call((g) =>
g
.append("path")
.style("fill", "white")
.attr("opacity", 0.1)
.attr("d", line.radius((d) => yMin2(d.min3Date))(filteredBlossoms))
)
.call((g) =>
g
.append("path")
.style("fill", "white")
.attr("opacity", 0.1)
.attr("d", line.radius((d) => yMin2(d.min2Date))(filteredBlossoms))
)
.call((g) =>
g
.append("path")
.style("fill", colorPicker(diff))
.attr("opacity", 0.4)
.attr("d", line.radius((d) => yMin(d.min1Date))(filteredBlossoms))
)
.call((g) =>
g
.append("path")
.style("fill", color[0])
.attr("opacity", 0.3)
.attr("d", line.radius((d) => yMin(d.min0Date))(filteredBlossoms))
)
line = d3
.lineRadial()
.curve(d3.curveCatmullRomClosed)
.angle((d) => x(d.year))
// .defined((d) => !isNaN(d.date))
x = d3
.scaleLinear()
.domain([years[0], years[1]])
.range([0, 2 * Math.PI])
y = d3
.scaleTime()
.domain([
d3.min(filteredBlossoms, (d) => d.date),
d3.max(filteredBlossoms, (d) => d.date)
])
.range([innerRadius, outerRadius])
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.
