chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis)
.attr("transform", `translate(0,${((height - margin.bottom) / 2)})`);
svg.append("g")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
return svg.node();
}
y = d3.scaleLinear()
.domain(([-d3.max(data, d => d.value),d3.max(data, d => d.value)])).nice()
.range([height - margin.bottom, margin.top])
line = d3.line()
.curve(d3.curveCardinal)
.x(d => x(new Date(d.date)))
.y(d => y(d.value))
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.
