World Map

100%

✓ Published0🌍 Public

Last edited Sep 22, 2021

Created on Sep 22, 2021

This world map visualization displays global landmasses and country boundaries using a natural Earth projection. The map renders land areas in teal, country interiors in a lighter stroke, and graticules as thin gray lines over a light sphere background. Built with React and d3-geo, the visualization uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw features. Geographic data comes from the world-atlas TopoJSON dataset, processed with `topojson.feature` and `topojson.mesh` for land polygons and country borders.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses rendered in teal against a light gray sphere and graticule grid lines. The map also highlights country borders through interior mesh strokes. Built with React and D3 v7, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and processed with topojson.feature and topojson.mesh to extract land polygons and interior boundaries.

Aahora

96% 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

96% match

Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using an equal-area Natural Earth projection. It renders a graticule grid, a light gray sphere backdrop, teal land areas, and darker interior borders. The React-based code imports d3’s geoNaturalEarth1, geoPath, and geoGraticule to project geographic features, while topojson’s feature and mesh functions process the world-atlas dataset. All elements are drawn as SVG paths, with loading state shown until the JSON data fetches successfully.

CChris Briggs

96% match

Loading thumbnail…

World Map

This world map visualization presents global landmasses and country boundaries using a natural Earth projection. It displays the sphere, graticule grid, land areas in teal, and interior borders distinguishing countries. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render geographic features from TopoJSON data sourced from the world-atlas package. React manages the component structure, while SVG paths draw each geographic element with distinct CSS styling.

DDeborah Ong

96% 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

96% match

Loading thumbnail…

World Map

This interactive world map visualizes global landmasses and country borders using a natural Earth projection. The visualization renders a sphere, graticule grid, land areas in teal, and interior boundaries in a lighter teal stroke. Built with React and D3 v5, it uses the `geoNaturalEarth1` and `geoPath` APIs to project and draw geographic features, while TopoJSON converts the world-atlas dataset into GeoJSON features and meshes. Styling is applied via CSS classes on SVG path elements.

CCees Klap

95% match

Loading thumbnail…

World Map

This interactive world map visualizes global landmasses and country boundaries using a natural Earth projection. Land areas are filled in teal, while graticules and interior borders are rendered as subtle gray and blue strokes. The visualization loads geospatial data from the world-atlas TopoJSON dataset, processes it with the `topojson` library’s `feature` and `mesh` functions, and renders the map as SVG paths using D3’s `geoPath`, `geoNaturalEarth1`, and `geoGraticule`. React manages the interface, updating the scene once the data finishes loading.

HHarabi Adem

95% 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

95% match