World Map Data Visualization

Choropleth Layer

Bind GeoJSON feature properties to a quantized color scale. Use TopoJSON for compact topology and D3-geo projections for Mercator or Equal Earth. Pre-project paths once and cache the SVGdstrings.

const color = d3.scaleQuantize()
  .domain([0, maxVal])
  .range(d3.schemePurples[7])

paths.attr("fill", d => color(d.properties.density))

Bubble Overlay

Map lat/lng pairs to projected coordinates. Scale radius by sqrt of the metric to preserve area perception. Use an HTML canvas overlay for 10k+ points to avoid SVG DOM thrash.

const [x, y] = projection([lng, lat])
ctx.beginPath()
ctx.arc(x, y, Math.sqrt(val) * scale, 0, 2 * Math.PI)
ctx.fillStyle = "#8B5CF6"
ctx.fill()

Flow Arcs

Draw great-circle arcs between origin-destination pairs. Use cubic Bézier control points lifted perpendicular to the chord midpoint for altitude illusion. Animate stroke-dashoffset for directional flow.

const mid = geoInterpolate(a, b)(0.5)
const alt = distance(a, b) * 0.3
const ctrl = [mid[0], mid[1] + alt]
// SVG: M ax,ay Q cx,cy bx,by

Performance Notes

• Simplify geometries with TopoJSONtopojson.simplifyat 1e-7 tolerance for 60fps pan/zoom.
• DebouncerequestAnimationFramere-renders during viewport transforms.
• Offload heavy projections to a Web Worker for datasets over 500k features.