Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published1🌍 Public
Hhunsingeruk@gmail.com
Last edited Oct 22, 2023
Created on Oct 13, 2023

A world map renders 50m TopoJSON country outlines with a sequential orange color scale, encoding each nation's `color1` value from a TSV file. The visualization uses `d3.geoPath` with a Natural Earth projection, `d3.scaleSequential` with `interpolateOranges`, and React to manage data loading and SVG rendering. Countries missing data appear magenta, while graticules and ocean-sphere paths provide geographic context.

AI-generated description

A program that shows a world map using 50m topo json data.

Data: World Map 50m - TopoJson.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

A polished world map renders country boundaries from World Atlas TopoJSON data, using an orange land fill against a black sphere with light blue interior borders and grey graticules. The visualization uses React to manage state through a custom `useData` hook that fetches and converts topology via `topojson.feature` and `topojson.mesh`. D3's `geoNaturalEarth1` projection and `geoPath` generate the SVG paths for land, sphere, graticules, and country boundaries, displaying a clean, stylized geographic overview.

Ppavankalyan1507
90% match
Loading thumbnail…

World Map

A world map rendered with D3’s geoNaturalEarth1 projection, drawn in SVG using d3.geoPath. The map displays landmasses filled with teal, country interiors as thin light-blue lines, and graticules in gray. Data comes from the TopoJSON World Atlas (countries-50m.json), processed via TopoJSON’s feature and mesh APIs. The React-based visualization shows a static globe with a subtle color scheme, prioritizing clean spatial form over interactivity.

WWolfgang
90% match
Loading thumbnail…

World Map

This world map visualization displays countries and landmasses using an equal-area Natural Earth projection. The SVG rendering layers a graticule, sphere outline, land polygons, and interior boundaries in muted teal and gray tones. Built with React and D3 v7, it fetches world-atlas TopoJSON data, converts it with topojson’s `feature` and `mesh` functions, and projects geometries via `geoNaturalEarth1` and `geoPath`. The map highlights relationships between countries by drawing interior boundaries where adjacent nations meet.

JJenna Hamza
89% match
Loading thumbnail…

World Map

A world map visualization displays countries as teal landmasses with lighter graticules and interiors, rendered in SVG within a React component. It uses the `geoNaturalEarth1` projection via `d3.geoPath` to convert GeoJSON features, with `topojson.feature` and `topojson.mesh` processing the world-atlas TopoJSON data. Graticule lines and sphere outlines are drawn from D3’s `geoGraticule`, while CSS classes style the distinct map layers.

Uubik-valis
89% match
Loading thumbnail…

World map

This example shows a world map rendered as an SVG with countries filled in green, oceans in light blue, graticules as light gray lines, and interior borders in dark gray. The visualization uses the D3 geoNaturalEarth1 projection with d3.geoPath to draw the sphere, graticule, land, and country boundaries from TopoJSON data sourced from the world-atlas package. The React component fetches the TopoJSON with d3.json and converts it using the topojson feature and mesh functions.

TTaylor
89% match
Loading thumbnail…

World Map

This interactive world map visualizes the Earth’s countries using a natural Earth projection, displaying the globe’s sphere, graticules, and landmasses with custom styling. Built with React and D3 v6, the visualization loads TopoJSON data from the `world-atlas` package and processes it using `topojson`'s `feature` and `mesh` APIs to extract country boundaries and interiors. The `d3.geoNaturalEarth1` projection and `d3.geoPath` render all geographic elements as SVG paths, while CSS classes define teal and gray color schemes for a polished aesthetic.

Ee-ines
88% match
Loading thumbnail…

World Map

A world map displays country boundaries as filled landmasses against a light sphere, with graticules and interior borders drawn in contrasting strokes. The visualization is built with React and D3 v5, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and render the SVG paths. Country and land geometry comes from the World Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. A muted teal and gray palette gives the map a polished, stylized appearance.

Mmarianamartins87
88% match
Loading thumbnail…

WorldMap

This visualization shows a world map with country boundaries rendered in green, overlaid with graticule lines and gray sphere background. Using React to manage the component lifecycle, the code loads GeoJSON data from the world-atlas package via D3’s json function, then applies d3.geoNaturalEarth1 projection and d3.geoPath to draw SVG paths. TopoJSON’s feature and mesh utilities extract country polygons and interior borders from the topology.

EEd Hutchinson
88% match