Skip to main content
SimilarExport ZIP
100%

atlas project

✓ Published2🌍 Public
GGuitong Li
Last edited Feb 5, 2022
Created on Feb 5, 2022

This interactive world map uses a Natural Earth projection to display country boundaries and graticule lines rendered as SVG paths, with land masses filled in gray and country borders drawn in white. Built with React and D3, the visualization loads GeoJSON data from the world-atlas TopoJSON dataset, then uses d3.geoPath and d3.geoNaturalEarth1 to project and draw the geography, while d3.geoGraticule generates the latitude and longitude grid.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Atlas

This visualization displays a world map using the Natural Earth projection, with country boundaries rendered in muted tones over a light graticule grid and sphere background. The code loads country topology data from the world-atlas npm package and converts it using topojson’s `feature` and `mesh` functions. React manages the component state and rendering, while d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs generate the projected SVG paths for countries, interiors, and graticules.

Jjulesgentry
90% match
Loading thumbnail…

World Map

This world map visualization displays global landmasses, country boundaries, and graticules using a Natural Earth projection. The land is filled with teal, while country interiors are outlined in green, and graticules appear in cyan over a light gray sphere. Built with React, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the map, and topojson’s feature and mesh functions to process the World Atlas TopoJSON dataset. The SVG output loads from unpkg’s world-atlas@2.0.2 file.

RRudy Shayganfar
89% match
Loading thumbnail…

D3 World Atlas

This example displays a world map using a natural Earth projection, rendered as SVG paths. The visualization shows landmasses in blue, country borders, graticules, and a semi-transparent sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The map is drawn with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs within a React component structure.

AAmeer Nuri
89% match
Loading thumbnail…

World Map

This world map displays global landmasses and country borders using a natural Earth projection. Built with React and D3 v7, it renders SVG paths via `d3.geoPath` and `geoNaturalEarth1`, overlaying a graticule grid and sphere outline. The visualization loads GeoJSON from the world-atlas TopoJSON dataset, converting it with the `topojson` library’s `feature` and `mesh` functions. Land areas are filled in teal, with interiors highlighted by a distinct stroke color.

Jjackcaldwellnichols
88% match
Loading thumbnail…

World Map

This world map visualization uses a Natural Earth projection to display global landmasses and country boundaries, rendered as an SVG with D3's geoPath and geoNaturalEarth1 functions. The map features a light gray sphere background with teal land masses, thin gray country borders, and white graticule lines showing latitude and longitude. Data comes from the world-atlas TopoJSON dataset, processed through the topojson library's feature and mesh functions to extract land polygons and country interiors, while the React application manages state and renders the interactive visualization.

LLento Manickathan
88% match
Loading thumbnail…

World Map

This world map uses a Natural Earth projection to display global landmasses and country borders. The visualization layers graticules, a sphere outline, land areas in teal, and interior boundary lines, all rendered as SVG paths. Built with React and d3-geo, it loads TopoJSON data from the World Atlas dataset, using d3.geoNaturalEarth1 and d3.geoPath to project features, while topojson.mesh draws country borders.

CCodeDuckie99
88% match
Loading thumbnail…

World Map

This world map shows country boundaries projected with the Natural Earth projection, using a light gray sphere background, teal landmasses, and graticule lines. The visualization loads geographic data from the world-atlas TopoJSON file via d3.json, then converts it to GeoJSON with topojson.feature and topojson.mesh. React renders the SVG elements, while d3.geoPath and d3.geoNaturalEarth1 handle projection and path generation, with d3.geoGraticule drawing the latitude and longitude grid.

MMarat
88% match
Loading thumbnail…

World Map

This map visualizes world landmasses and country borders using a Natural Earth projection. The React-based application loads GeoJSON data from the World Atlas TopoJSON file, converting it with `topojson.feature` and `topojson.mesh`. Using D3’s `geoNaturalEarth1` projection and `geoPath`, the SVG rendering displays land in teal, graticules in light gray, and country boundaries with a subtle stroke. The sphere outline and graticule grid provide geographic context, while the Poppins font styles the interface.

MMario Ibarra
88% match