geojson = FileAttachment("110m_land.geojson").json()
// [longitude: number, latitude: number] -> [x: number, y: number]
// Null Island
d3.geoMercator()([0, 0])
// ~Greenwich, UK
d3.geoMercator()([0, 51])
// ~Águila Islet, Chile
d3.geoMercator()([-56, -68])
// ~Wellington, New Zealand
d3.geoMercator()([171, -41])
{
const pathGenerator = d3.geoPath(d3.geoMercator());
return pathGenerator(fakeGeoJSON);
}
svg = {
// Choosing our projection. I'm going with Equal Earth.
const projection = d3.geoEqualEarth();
// Feeding it into our path generator generator.
const pathGenerator = d3.geoPath(projection);
// Creating an SVG element and setting its viewBox attribute.
// Without any configuration, each projection has default boundaries that must be specified here.
// I guess-and-checked to find that a height of 1000px and a width of 500px worked for Equal Earth.
// We can learn how to be smarter about this with the projection.fitExtent method
const svg = d3.create("svg").attr("viewBox", [0, 0, 1000, 500]);
// Using D3's element API, I'm appending a path element
// Then setting its 'd' attribute to the string of co-ordinates our path generator creates.
// If our path generator output was "M150 0 L75 200 L225 200 Z",
// then the node that this produces would look like:
/*
<svg viewBox="0, 0, 1000, 500">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
*/
svg.append("path").attr("d", pathGenerator(geojson));
return svg;
}
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.
