Fork of React & D3 Starter

100%

Fork of React & D3 Starter

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 10, 2025

This example presents a world map rendered in an SVG container, visually distinguishing a subset of countries by coloring them orange according to a small, hardcoded population dataset, while all other nations appear in gray. It uses the `d3.geoMercator` and `d3.geoPath` APIs to project and draw geographic boundaries from a TopoJSON source loaded via `d3.json`. The map is built within a React application, and the code demonstrates a non-reactive workflow by appending paths directly to the SVG element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

A choropleth map of world countries colors each nation by continent using a D3 geo path generator and a color scale. The visualization renders as an SVG globe inside a React component built with React hooks, fetching geographic data from the World Atlas TopoJSON and TSV files. Hovering reveals country names and indices appended as SVG title elements, while a transparent sphere outline frames the map. The code leverages d3.json, d3.tsv, and d3.geoPath to construct the projection and interactivity.

IIgor Bojković

90% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue oceanic sphere. It uses D3 v5 and the topojson library to load and parse world-atlas data from an external URL, then projects the geographic features with a natural Earth projection and draws them using d3.geoPath. The map is generated entirely in the browser from TopoJSON data, with a simple CSS-styled SVG output.

DD3React

87% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map as an SVG, with countries shown in light green on a blue sphere background. It uses D3.js v5 for map projections and rendering, specifically the `geoNaturalEarth1` projection and `geoPath` to convert geographic coordinates into SVG paths. The map data comes from the world-atlas package, loaded as TopoJSON and processed with the `topojson` library’s `feature` function. The page is built with a React starter template, though the main logic runs through a bundle.js file that fetches country boundaries and draws them, including a background sphere path drawn first.

Eeravellisaimeghana

87% match

Loading thumbnail…

Fork of Fork of World Map

This example displays an orthographic world map with graticules, landmasses, and country interiors rendered as an SVG using React. The geographic data comes from the World Atlas TopoJSON dataset, which is processed with `topojson.feature` and `topojson.mesh`. The visualization uses `d3.geoOrthographic` for the projection, `d3.geoPath` for path generation, and `d3.geoGraticule` to create the grid lines. The sphere is filled light gray, land areas use a teal color, and country borders appear as black lines.

Bbhargavarathod

86% match

Loading thumbnail…

Fork of World Map

This example displays a world map using an August projection, showing landmasses, country borders, graticules, and a sphere outline. The map is rendered as SVG using React, with d3.geoPath generating the geographic paths from TopoJSON data loaded from the world-atlas package. The visualization applies a teal color scheme to the land, gray strokes for interiors, and a light gray background for the sphere, with graticules drawn using d3.geoGraticule.

JJyothicherukuri

86% match

Loading thumbnail…

Fork of World Map

This example presents a stylized orthographic world map, highlighting landmasses in pink with black interior borders and a subtle graticule grid. Built with React and D3 v7, it uses `geoOrthographic` and `geoPath` to project and render spherical geometry as SVG. The data comes from the world-atlas TopoJSON file, processed with `topojson.feature` and `topojson.mesh` to generate land polygons and country boundary lines.

SSaiSreya1

86% match

Loading thumbnail…

Fork of World Map

This example displays a world map using an orthographic projection, rendered as SVG with D3’s `geoPath` and `geoOrthographic`. It shows landmasses filled in teal, graticules, sphere outline, and interior borders, drawing from the world-atlas TopoJSON dataset (countries-50m.json) via `feature` and `mesh`. React manages the component state, loading data asynchronously with a custom `useData` hook before rendering the map within a fixed SVG canvas.

SSaiSreya1

86% match

Loading thumbnail…

Fork of World Map

This example presents a world map rendered with D3’s natural Earth projection, displaying countries as purple landmasses with red interior borders and blue graticule lines on a white sphere. The data comes from the world-atlas TopoJSON file, which is parsed using topojson’s feature and mesh functions. The visualization uses React to manage the component state and rendering, with d3.geoPath and d3.geoNaturalEarth1 generating the SVG paths for the map and its overlay elements.

Cchandanagandla

86% match