Published
Edited
Dec 31, 2019
Insert cell
Insert cell
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);

svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
// with multiple points defined, if you leave out fill:none,
// the overlapping space defined by the points is filled with
// the default value of 'black'
.attr('fill', 'none');

return svg.node();
}
Insert cell
Insert cell
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);

svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black');

return svg.node();
}
Insert cell
d3 = require('d3')
Insert cell

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.
Learn more