md`# Rain`
md`A simple combination of lines and circles`
{
const width = 950
const height = 450
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
group.append("rect")
.attr("x",0)
.attr("y",0)
.attr("height","100%")
.attr("width","100%")
.attr("fill","#0C5A7A")
group
.selectAll("line")
.data(mapData)
.enter()
.append("line")
.attr("x1", function (d,i) { return -100 + Math.abs(d.lat) * 80 ; })
.attr("y1", 0)
.attr("x2", function (d,i) { return -100 + Math.abs(d.lat) * 80 + 3 * Math.abs(d.lon/2); })
.attr("y2", function (d,i) { return 0 + 4 * Math.abs(d.lon/2);})
.attr("stroke-width", .5)
.style("opacity", 1)
.attr("stroke", "white");
group
.selectAll("circle")
.data(mapData)
.enter()
.append("circle")
.attr("cx", function (d,i) { return -100 + Math.abs(d.lat) * 80 + 3 * Math.abs(d.lon/2); })
.attr("cy", function (d,i) { return 0 + 4 * Math.abs(d.lon/2);})
.attr("r", function (d,i) { return 5 * Math.random();})
.attr("stroke-width", 1)
.style("opacity", 1)
.attr("stroke", "white")
.attr("fill", "white");
return svg.node();
}
mapData = FileAttachment("random_data.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.
