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

// See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker
svg
.append('defs')
.append('marker')
.attr('id', 'arrow')
.attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
.attr('refX', refX)
.attr('refY', refY)
.attr('markerWidth', markerBoxWidth)
.attr('markerHeight', markerBoxHeight)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', d3.line()(arrowPoints))
.attr('stroke', 'black');

svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-start', 'url(#arrow)')
.attr('fill', 'none');

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

svg
.append('defs')
.append('marker')
.attr('id', 'arrow')
.attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
.attr('refX', refX)
.attr('refY', refY)
.attr('markerWidth', markerBoxWidth)
.attr('markerHeight', markerBoxHeight)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', d3.line()(arrowPoints))
.attr('stroke', 'black');

svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-end', 'url(#arrow)')
.attr('fill', 'none');

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

svg
.append('defs')
.append('marker')
.attr('id', 'arrow')
.attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
.attr('refX', refX)
.attr('refY', refY)
.attr('markerWidth', markerBoxWidth)
.attr('markerHeight', markerBoxHeight)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', d3.line()(arrowPoints))
.attr('stroke', 'black');

svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-start', 'url(#arrow)')
.attr('marker-end', 'url(#arrow)')
.attr('fill', 'none');

return svg.node();
}
Insert cell
markerBoxWidth = 20
Insert cell
markerBoxHeight = 20;
Insert cell
refX = markerBoxWidth / 2
Insert cell
refY = markerBoxHeight / 2
Insert cell
markerWidth = markerBoxWidth / 2;
Insert cell
markerHeight = markerBoxHeight / 2;
Insert cell
arrowPoints = [[0, 0], [0, 20], [20, 10]];
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