chart = {
const svg = d3.select(DOM.svg(width, height));
const serie = svg.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", (d, i) => `translate(0,${y(i) + 1})`);
serie.append("path")
.attr("fill", "#fff")
.attr("d", area);
serie.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", line);
svg.append("g")
.call(xAxis);
return svg.node();
}
overlap = 16
height = 720
margin = ({top: 60, right: 10, bottom: 20, left: 10})
x = d3.scaleLinear()
.domain([0, data[0].length - 1])
.range([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(data.map((d, i) => i))
.range([margin.top, height - margin.bottom])
z = d3.scaleLinear()
.domain([
d3.min(data, d => d3.min(d)),
d3.max(data, d => d3.max(d))
])
.range([0, -overlap * y.step()])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x.copy().domain([0, 92])).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:first-of-type text").append("tspan").attr("x", 10).text(" ms"))
area = d3.area()
.defined(d => !isNaN(d))
.x((d, i) => x(i))
.y0(0)
.y1(z)
line = area.lineY1()
data = d3.text("https://gist.githubusercontent.com/borgar/31c1e476b8e92a11d7e9/raw/0fae97dab6830ecee185a63c1cee0008f6778ff6/pulsar.csv").then(data => d3.csvParseRows(data, row => row.map(Number)))
d3 = require("d3@5")
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.
