Published
Edited
Apr 7, 2020
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
var line = d3.line()
.x(function(d) { return xScale(new Date(d.date)); })
.y(function(d) { return yScale(d.value); });
forcasts.forEach((d,i) => {
svg.append('path').datum([].concat([result[i]], d.forcast))
.attr('d', line)
.attr('fill', 'none')
.attr('stroke', '#999');
});
svg.append('path').datum(result)
.attr('d', line)
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', 2);
return svg.node();
}
d3 = require("d3@5")
margin = ({top: 10, right: 20, bottom: 20, left: 30})
height = 300
width = 300
yScale = d3.scaleLinear()
.domain([0, maxValue])
.range([height, 0]);
xScale = d3.scaleTime()
.domain([new Date('1981-07'), new Date('1982-05')])
.range([0, width]);
maxValue = {
const maxResult = d3.max(result, d => d.value);
const maxForcast = d3.max([].concat(...forcasts.map(f => f.forcast)), d => d.value);
return d3.max([maxResult, maxForcast]);
}
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.
