md`# Arcs`
md`Random distribution of arcs`
{
const width = 950
const height = 450
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
var arc = d3.arc()
.innerRadius(function(){return 40 + Math.random()*10;})
.outerRadius(function(){return 10 + Math.random()*70;})
.startAngle(function(d) {return d.start*Math.PI;})
.endAngle(2*Math.PI)
group
.selectAll("path")
.data(mapData)
.enter()
.append("path")
.attr("d", arc)
.style("opacity", 1)
.style("stroke", "none")
.style("fill", function(){
const rand = Math.random()
return d3.rgb(10, 225 - rand*155,255 - rand*155)})
.attr("transform", function () {
return "translate(" + (Math.random() * 1000) + "," + (Math.random() * 600) + ")"; })
return svg.node();
}
mapData = FileAttachment("Season_sta_1997.json").json()
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.
