projection = d3.geoNaturalEarth1()
.fitExtent([[0, 0], [width, height]], { type: "Sphere" })
.precision(0.1)
path = d3.geoPath()
.projection(projection)
land = topojson.merge(world, world.objects.countries.geometries.filter(d => d.id !== "010"))
viewof summary = land_simplified = {
//It's possible to first presimplify to get a sense of what min-value needs to be given to topojson.simplify
let world_simplified = topojson.presimplify(world)
let min_weight = topojson.quantile(world_simplified, quantile_value)
//Every arc coordinate whose z-value is lower than min_weight is removed
world_simplified = topojson.simplify(world_simplified, min_weight)
//Merge the simplified countries into a new land shape
let land = topojson.merge(world_simplified, world_simplified.objects.countries.geometries.filter(d => d.id !== "010")) //take out Antractica
return land
}
land_rounded = {
//Run the geo-path variable on the simplified land coordinates to get the SVG path coordinates back
//as a string, and next split these by each start of a new SVG path, the "M"
const svg_path = path(land_simplified).split("M")
//Remove the first empty result
svg_path.shift()
//Loop through each separate path, remove the closing letter of the path, "Z"
//Then split by each straight path section, given by "L"
//And finally, get the x and y coordinates by splitting the remaining string by its comma ","
let land_rounded = []
svg_path.forEach(d => { land_rounded.push(d.replace(/Z/,"").split("L").map(p => p.split(","))) })
return land_rounded
}
line = d3.line()
.x(d => d[0])
.y(d => d[1])
.curve(d3.curveBasisClosed)
height = width / 2
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.
