Draw a circle with D3Draw a line (path) with D3Draw a curved line (path) with D3Draw 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 straight line (path) connected to a circle
{
const boxHeight = 200;
const circleX = 100;
const circleY = boxHeight / 2;
const radius = 40;
const lineLength = 200;
const lineStart = [circleX + radius, circleY];
const lineEnd = [lineStart[0] + lineLength, circleY];
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);
svg
.append('circle')
.attr('cx', circleX)
.attr('cy', circleY)
.attr('r', radius)
.style('fill', 'green');
svg
.append('path')
.attr('d', d3.line()([lineStart, lineEnd]))
.attr('stroke', '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.
