md`# Simple World Map(Random rgba Colors)`
d3 = require('d3')
topojson = require('topojson')
world = d3.json('https://gist.githubusercontent.com/olemi/d4fb825df71c2939405e0017e360cd73/raw/d6f9f0e9e8bd33183454250bd8b808953869edd2/world-110m2.json')
map = {
const svg = d3.select(DOM.svg(width, width/1.6));
const projection = d3.geoMercator()
.center([0, 30])
.scale(200)
.rotate([0,0]);
const path = d3.geoPath()
.projection(projection);
const g = svg.append("g");
// world map
g.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.style('fill', function(){return 'rgba('+Math.random() * 256+','+Math.random() * 256+','+Math.random() * 256+','+Math.random()+')';})
// zoom and pan
const zoom = d3.zoom()
.on("zoom", () => {
g.attr("transform", d3.event.transform);
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
return svg.node();
}
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.
