Published
Edited
Sep 24, 2022
Insert cell
# Eye Candy
Insert cell
chart = {
const height = 200;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const v_low=0.0,v_high=1.0;
const c2='#FF993399',white='#FFFFFF';
var background = svg.append("rect").style("stroke","green").style("stroke-width","2px")
.attr("width",width).attr("height",height)
.attr("fill",0);
var colorMap = d3.scaleLinear().domain([v_low,v_high]).range(['#FFFFFF',c2])
svg
.selectAll("circle")
.data(d3.range(120))
.join("circle")
.attr("cx", d => d * 12)
.attr("cy", d => height / 2 + Math.random() * 48)
.attr("r", d => Math.random() * 60)
.attr("fill", c2); //"hsl(216deg 100% 13%)");
return svg.node();
}
Insert cell

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.
Learn more