Public
Edited
Jun 23, 2022
{
const svg = d3.create("svg").attr("width", 700).attr("height", 300);
const content = svg.append("g").attr("class", "content");
const xScale = d3.scaleTime().domain(dateExtent).range([0, 600]);
const xAxis = d3.axisBottom(xScale).ticks(10);
content
.append("g")
.attr("class", "x-axis-group")
.attr("transform", `translate(0, ${300 - 35})`)
.call(xAxis);
content
.selectAll("circle.temp-circle")
.data(dateData)
.join("circle")
.attr("class", "temp-circle")
.attr("cx", (d) => xScale(d.date))
.attr("cy", 300 - 45)
.attr("r", 3)
.style("fill", "steelBlue");
return svg.node();
}
dateExtent = {
const dateExtent = d3.extent(dateData, (x) => x.date);
dateExtent[0] = new Date(
new Date(dateExtent[0].valueOf()).setDate(dateExtent[0].getDate() - 1)
);
dateExtent[1] = new Date(
new Date(dateExtent[1].valueOf()).setDate(dateExtent[1].getDate() + 1)
);
return dateExtent;
}
dateData = timelineData
.map((d) => {
const datePattern = /(\d{4})(\d{2})(\d{2})/;
return {
date: new Date(String(d[0]).replace(datePattern, "$1-$2-$3")),
count: d[1]
};
})
.sort((a, b) => (a.date < b.date ? -1 : 1))
timelineData = [
[20220301, 100],
[20220302, 100],
[20220303, 100],
[20220304, 100],
[20220305, 100],
[20220306, 100],
[20220307, 100],
[20220308, 100],
[20220309, 100],
[20220310, 100],
[20220311, 100],
[20220312, 100],
[20220313, 100],
[20220314, 100],
[20220315, 100],
[20220316, 100],
[20220317, 100],
[20220318, 100],
[20220319, 100],
[20220320, 100],
[20220321, 100],
[20220322, 100],
[20220323, 100],
[20220324, 100],
[20220325, 100],
[20220326, 100],
[20220327, 100],
[20220328, 100],
[20220329, 100],
[20220330, 100],
[20220331, 100]
]
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.
