Draw a circle with D3Draw a line (path) with D3Draw a straight line (path) connected to a circleDraw a circle dot (marker) on a line (path) with D3Draw an arrowhead (marker) connected to a line in D3Draw a horizontal line with an arrow between circles in D3Draw lines between circles (nodes) using D3 linksDraw circles with a data selection joinDraw an arrow between circles with D3 linksHandling click events on svg elements in D3Generate random circles with D3Drag a circle with D3
Draw a curved line (path) with D3
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);
const curve = d3.line().curve(d3.curveNatural);
// N.B. There are several pre-defined functions for curve interpolation in D3; curveNatural is one.
// It's also possible to define your own curve.
// See https://github.com/d3/d3-shape/blob/master/README.md#curves
const points = [[100, 60], [40, 90], [200, 80], [300, 150]];
svg
.append('path')
.attr('d', curve(points))
.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();
}
d3 = require('d3')
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.
