chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.attr("fill", color)
.attr("opacity", 0.7)
.selectAll("rect")
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => Math.max(0, x(d.x1) - x(d.x0) - 1))
.attr("y", (d) => y(d.length))
.attr("height", (d) => y(0) - y(d.length));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
x = d3
.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(bins, d => d.length)]).nice()
.range([height - margin.bottom, margin.top])
dateFormat = d3.timeFormat("%B-%d")
dateFormat(-2201800000000)
dateFormat(-2201700000000)
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(
d3
.axisBottom(x)
.tickFormat(d3.timeFormat("%B-%d"))
.ticks(width / 80)
.tickSizeOuter(0)
)
.call((g) =>
g
.append("text")
.attr("x", width - margin.right)
.attr("y", -4)
.attr("fill", "#2d1e3e")
// .attr("font-weight", "bold")
.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(height / 40))
.call((g) => g.select(".domain").remove())
.call((g) =>
g
.select(".tick:last-of-type text")
.clone()
.attr("x", 4)
.attr("fill", "#2d1e3e")
.attr("text-anchor", "start")
// .attr("font-weight", "bold")
.text(blossoms.y)
)
.call((g) => g.selectAll(".tick line").attr("stroke", "#2d1e3e"))
.call((g) => g.selectAll(".tick text").attr("fill", "#2d1e3e"))
numBins = Math.sqrt(filteredBlossoms.length)
filteredBlossoms.length
bins = d3
.bin()
.value((d) => d.date)
.thresholds(numBins)(filteredBlossoms)
[
d3.min(filteredBlossoms, (d) => d.date),
d3.median(filteredBlossoms, (d) => d.date),
d3.max(filteredBlossoms, (d) => d.date)
]
filteredBlossoms = {
return _.map(blossoms, (d) => {
return {
year: d.year,
date: d.date
};
}).filter((d) => !isNaN(d.date));
}
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: "Date →", y: "↑ Number of 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.
