semicircle = {
var svg = d3.create("svg")
.attr("viewBox", [0,0, dimensions.width/3, dimensions.height/3])
svg.selectAll("circle")
.data(radii)
.enter().append("circle")
.attr("fill", (d,i) => colorScale(i))
.attr("stroke", "#fff")
.attr("r", function(d) { return d} )
return svg.node()
}
square = {
var svg = d3.create("svg")
.attr("viewBox", [0,0, dimensions.width/3, dimensions.height/3])
svg.selectAll("circle")
.data(radii)
.enter().append("circle")
.attr("fill", (d,i) => colorScale(i))
.attr("stroke", "#fff")
.attr("r", function(d) { return d} )
svg.selectAll("circles")
.data(radii)
.enter().append("circle")
.attr("fill", (d,i) => colorScale(i*10))
.attr("stroke", "#fff")
.attr("r", function(d) { return d} )
.attr("transform", `translate(${dimensions.width/4},${dimensions.height/2.8})`)
return svg.node()
}
d3 = require("d3@6")
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.
