Published
Edited
Dec 19, 2020
1 star
data = d3.range(5).map(d=> ({data:d3.range(10).map(e=>Math.floor(Math.random() * 10)).sort(), x:Math.floor(Math.random() * 10), y:Math.floor(Math.random() * 10) }))
{
const height = 600
const width = 600
const margin = ({top: 30, right: 40, bottom: 40, left: 50})
const svg = d3.select(DOM.svg(width, height))
const group = svg.selectAll("g").data(data).join("g")
.attr("transform",(d,i)=> "translate("+(d.x*50)+","+(d.y*50)+")" )
group.selectAll("circle").data(d=>d.data).join("circle")
.attr("cx",(d,i)=> d*5)
.attr("cy",(d,i)=> d*5)
.attr("r",(d,i)=> d*2)
.style("fill","steelblue")
return svg.node();
}
d3 = require('d3')
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.
