{
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', 'dot')
.attr('viewBox', [0, 0, 20, 20])
.attr('refX', 10)
.attr('refY', 10)
.attr('markerWidth', 10)
.attr('markerHeight', 10)
.append('circle')
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
.style('fill', 'green');
svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-start', 'url(#dot)')
.attr('fill', 'none');
return svg.node();
}
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);
svg
.append('defs')
.append('marker')
.attr('id', 'dot')
.attr('viewBox', [0, 0, 20, 20])
.attr('refX', 10)
.attr('refY', 10)
.attr('markerWidth', 10)
.attr('markerHeight', 10)
.append('circle')
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
.style('fill', 'green');
svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-end', 'url(#dot)')
.attr('fill', 'none');
return svg.node();
}
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);
svg
.append('defs')
.append('marker')
.attr('id', 'dot')
.attr('viewBox', [0, 0, 20, 20])
.attr('refX', 10)
.attr('refY', 10)
.attr('markerWidth', 10)
.attr('markerHeight', 10)
.append('circle')
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
.style('fill', 'green');
svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-mid', 'url(#dot)')
.attr('fill', 'none');
return svg.node();
}
{
const svg = d3.create('svg').attr('viewBox', [0, 0, width, 200]);
svg
.append('defs')
.append('marker')
.attr('id', 'dot')
.attr('viewBox', [0, 0, 20, 20])
.attr('refX', 10)
.attr('refY', 10)
.attr('markerWidth', 10)
.attr('markerHeight', 10)
.append('circle')
.attr('cx', 10)
.attr('cy', 10)
.attr('r', 10)
.style('fill', 'green');
svg
.append('path')
.attr('d', d3.line()([[100, 60], [40, 90], [200, 80], [300, 150]]))
.attr('stroke', 'black')
.attr('marker-start', 'url(#dot)')
.attr('marker-mid', 'url(#dot)')
.attr('marker-end', 'url(#dot)')
.attr('fill', 'none');
return svg.node();
}
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.
