Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Jul 6, 2022
2 forks
Importers
41 stars
// Load the geo from the URL or uploaded file
geo = uploaded_file === false ? await d3.json(geo_url) : uploaded_file
// Function to simplify path
// Adopted from https://observablehq.com/@nbremer/simplified-curved-earth-map
simplify = (geo, val) => {
let simplified = topojson.presimplify(geo);
let min_weight = topojson.quantile(simplified, val);
//Every arc coordinate whose z-value is lower than min_weight is removed
return topojson.simplify(simplified, min_weight);
}
// Simplify the geometry
geo_simplified = simplify(geo, quantile_value)
// Merge into a single path (faster to draw // no overlapping borders)
merged = topojson.mesh(geo_simplified, geo_simplified.objects[feature])
topojson.feature(geo_simplified, geo_simplified.objects.countries)
// Create projection that fits to the screen
proj = d3
.geoProjection(projection)
.fitExtent(
[[10, 10], [width, height]],
topojson.feature(geo_simplified, geo_simplified.objects[feature])
)
topojson.feature(geo_simplified, geo_simplified.objects[feature])
// Function to draw the path
path = d3.geoPath().projection(proj)
topojson = require("topojson")
import { projectionInput, projections } from "@d3/projection-transitions"
d3 = require("d3", "d3-geo@2", "d3-geo-projection@3")
import { select, slider, textarea, text, checkbox } from "@jashkenas/inputs"
import { fileInput } from "@mbostock/file-input-with-initial-value"
height = (width * 2) / 3
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.
