geoJSON = FileAttachment("countries-50m.json").json()
margin = ({top: 0, right: 0, bottom: 0, left: 0})
visWidth = 900 - margin.top - margin.bottom
visHeight = 500 - margin.left - margin.right
mapOutline = d3.geoGraticule().outline()
projection = d3.geoEqualEarth()
.fitSize([visWidth, visHeight], mapOutline)
path = d3.geoPath().projection(projection)
path(mapOutline)
path(geoJSON.features[0])
regions = Array.from(new Set(geoJSON.features.map(d => d.properties.REGION_WB)))
regionColor = d3.scaleOrdinal()
.domain(regions)
.range(d3.schemeTableau10)
swatches({ color: regionColor })
{
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// draw the map
g.selectAll('path')
.data(geoJSON.features)
.join('path')
.attr('d', path)
.attr('stroke', 'white')
.attr('fill', d => regionColor(d.properties.REGION_WB));
// draw outline
g.append('path')
.attr('d', path(mapOutline))
.attr('stroke', '#aaaaaa')
.attr('fill', 'none');
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.
