Past: Reuters Graphics, The Times, BBC News Labs.
🇫🇷 in 🇩🇪
Published
Edited
Aug 28, 2019
chart = {
const svg = d3.create("svg")
.attr('id', 'svg')
.attr('width', config.width)
.attr('height', config.height);
svg
.append('defs')
.append('marker')
.attr('id', 'arrowhead-right')
.attr('refX', 5)
.attr('refY', 4)
.attr('markerWidth', 16)
.attr('markerHeight', 13)
.append('path')
.attr('d', 'M 0 0 L 5 5 L 0 10')
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('fill', 'none');
svg.append("g")
.attr('id', 'axis')
.attr('transform', 'translate(50,100)')
.call(xAxis);
svg.select('#axis path.domain')
.attr('marker-end', 'url(#arrowhead-right)');
return svg.node();
}
config = ({
width: 500,
height: 200,
})
xAxis = d3
.axisBottom(x)
.tickSizeInner(0)
.tickPadding(9)
.tickSizeOuter(0)
x = d3
.scaleLinear()
.range([0, 400])
.domain([0, 10]);
d3 = require("d3@4")
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.
