Public
Edited
Aug 8, 2023
1 fork
1 star
{
const width = 1000
const height = 500
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
// const projection = d3.geoEquirectangular()
const projection = d3.geoAlbers()
.center([0, 0])
.scale(1040)
.rotate([0,0,0]);
const path = d3.geoPath()
.projection(projection);
const g = svg.append("g");
// world map
group.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.style('fill', '#ddd')
group.selectAll("rect")
.data(mapData)
.enter()
.append("rect")
.attr("x", function (d) { return projection([d.lon, d.lat])[0]; })
.attr("y", function (d) { return projection([d.lon, d.lat])[1]; })
.attr("width", function (d) { return (39); })
.attr("height", function (d) { return (36); })
.style("opacity", function (d) {return .5;})
.attr("fill", function (d) {return d3.rgb(2*d.o2,100,100);});
return svg.node();
}
world = fetch("https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m.json").then(d => d.json())
topojson = require("topojson-client@3")
mapData = FileAttachment("IPSL-CM5A-LR.json").json()
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.
