Maps

Basic geographic visualizations. These are placeholder maps ready for GeoJSON integration.

World Map

World regions with value-based choropleth coloring.

Population by Region (millions)

North AmericaSouth AmericaEuropeAfricaAsiaOceaniaValue454,700Simplified placeholder map • Load GeoJSON for accurate boundaries
Valid JSON
Note: This is a simplified placeholder map. For production use, load proper GeoJSON/TopoJSON data for accurate country boundaries.

US Map

US states with value-based choropleth coloring.

Population by State

Value10M40MSimplified placeholder map • Load TopoJSON for accurate boundaries
Valid JSON
Note: This is a simplified placeholder map. For production use, load US TopoJSON for accurate state boundaries with proper projection.

Adding GeoJSON Data

To use accurate geographic boundaries:

  1. Download TopoJSON data from world-atlas or similar sources
  2. Import using topojson-client package (already installed)
  3. Update the map components to use d3.geoPath() with appropriate projection
import * as topojson from 'topojson-client';
import { geoPath, geoNaturalEarth1 } from 'd3';

// Load and render
const projection = geoNaturalEarth1();
const path = geoPath(projection);