Published
Edited
Nov 8, 2019
1 fork
Insert cell
md`# D3 Tutorial 11-1`
Insert cell
dataset = [ 5, 10, 15, 20, 25 ]
Insert cell
w = 500
Insert cell
h = 50
Insert cell
svg = {
const svg = DOM.svg(w, h)
return svg
}
Insert cell
circles = d3.select(svg).selectAll("circle")
.data(dataset)
.enter()
.append("circle");
Insert cell
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
})
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
});
Insert cell
style = html`<style>
</style>`
Insert cell
d3 = require('d3@5')
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