Published
Edited
May 13, 2018
3 forks
13 stars
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
/*
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", randomColor)
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
*/
var newline = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.date))
.y(d => y(d.value));
var newdata = data.map( (p, index) => index === data.length - 1 ? [p] : [p, data[index+1]]);
var bounds = d3.extent(data, d => d.value);
var interval = bounds[1]-bounds[0];
var gradientColor = (p) => {
return d3.interpolateHslLong("red", "blue")((p[0].value-bounds[0])/interval);
};
svg.selectAll('path')
.data(newdata)
.enter().append('path')
.attr('d', p => newline(p))
.attr('stroke', p => gradientColor(p)); //randomColor);
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.
