chart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height + margin.top + margin.bottom)
.style("font", "10px sans-serif")
.attr("transform", `translate(${margin.left},${margin.top})`)
.style("overflow", "visible")
const g = svg
.selectAll("g")
.data(times_delta)
.join("g")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr('fill', 'none')
const path = g.append('path')
.attr('d', d => line(d.values))
.style("opacity", "0.5")
.attr("stroke", "#ddd")
svg.call(hover, path)
svg.append('g').call(xAxis)
svg.append('g').call(yAxis)
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.
