This is where I prototype and experiment
Published
Edited
Jul 15, 2020
{
const svg = d3.create("svg")
.attr("viewBox", [-10, -20, width, height]);
const l = 30;
svg.selectAll("path")
.data(trends)
.join("path")
.attr("d", `M 0 0 L ${l} 0`)
.attr("transform", (d, i) => `translate(0, ${20*i}) rotate(${scale(d[1] / d[0])}, ${l / 2}, 0)`)
.attr("stroke-width", 4)
.attr("stroke", (_, i) => color(i));
return svg.node();
}
color = d3.scaleSequential()
.domain([-2, 6])
.interpolator(d3.interpolateRdBu);
scale = d3.scaleLinear()
.domain([maxVal, 0])
.range([-60, 60]);
maxVal = d3.max(trends, d => d[1] / d[0])
trends.map(d => d[1] / d[0])
trends = [
[4, 8],
[4, 6],
[4, 4],
[4, 2],
[4, 0]
]
height = 120
d3 = require("d3@5")
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.
