Doing stuff
function map(width, height) {
// This is exactly the same!
projection.fitSize([width - margin * 2, height - margin * 2], data);
const svg = d3
.create('svg')
.attr('viewBox', [0, 0, width, height])
.attr('width', width)
.attr('height', height)
.style('border', '1px dotted rgba(0, 0, 0, 50%)')
.style('box-sizing', 'border-box');
const g = svg
.append('g')
.attr('transform', `translate(${margin},${margin})`);
g.selectAll('path')
.data(data.features ? data.features : [data]) // just in case someone passes a single Feature
.join('path')
.attr('fill', '#ccc')
.attr('stroke', '#eee')
.attr('d', path);
return svg.node();
}
projection = d3.geoIdentity().reflectY(true)
path = d3.geoPath(projection)
data = d3.json(customGeoJSONPath || defaultGeoJSONPath)
mapWidth = Math.min(userWidth, width)
heightRatio = {
const bounds = path.bounds(data);
return (bounds[1][1] - bounds[0][1]) / (bounds[1][0] - bounds[0][0]);
}
mapHeight = Math.floor(mapWidth * heightRatio)
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.
