Published
Edited
Jan 28, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
myData = [12, 4, 23, 10, 6, 9, 11, 12, 4, 10, 6, 9, 11, 12, 4, 23, 10, 6, 9, 11, 12, 4, 23, 10, 6, 9, 11]
Insert cell
myData.length
Insert cell
myViz = {
var svg = d3.select(DOM.svg(width, height));
svg.style('background-color', '#eeeeee');

svg.selectAll('circle')
.data(myData)
.join('circle')
.attr('cx', (d, index) => {
return (40 * index) + 20;
})
.attr('cy', height / 2)
.attr('r', d => d)
.style('fill', '#0000ff')
.style('opacity', d => d / 100);

return svg.node();
}
Insert cell
Insert cell
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