Information designer, data visualization engineer📈, 🇺🇦🇺🇦🇺🇦
Public
Edited
Oct 29, 2023
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "12px sans-serif");
const chartContainer = svg
.selectAll("g")
.data(data.series)
.join("g")
.attr(
"transform",
(d, i) =>
`translate(${blockWidth * (i % 4)}, ${Math.floor(i / 4) * blockWidth})`
);
chartContainer.append("g").attr("class", "x_axis").call(xAxis);
chartContainer.append("g").call(yAxis);
chartContainer
.append("text")
.attr("class", "chart-title")
.attr("x", blockWidth / 2)
.attr("y", gutter + 5)
.attr("text-anchor", "middle")
.text((d, i) => categories[0][d.name]);
const path = chartContainer
.append("g")
.append("path")
.attr("class", "line")
.attr("d", (d) => line(d.values));
return svg.node();
}
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.
