Published
Edited
Feb 13, 2018
1 star
{
const svg = DOM.svg(500, 300);
const color = d3.scaleLinear()
.domain([1, 50, 99])
.interpolate(d3.interpolateHcl)
.range([d3.rgb('#f3cbd3'), d3.rgb('#6c2167'), d3.rgb('#f3cbd3')]);
d3.select(svg)
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", (d, i) => {
if (d < color.domain()[0] || d > color.domain()[2]) {
return '#999'
} return color(d)
})
.attr("r", radius => 10)
.attr("cx", (d, i) => 20 + i*25)
.attr("cy", (d, i) => 80);
return svg;
}
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.
