Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published1🌍 Public
Pparidhi
Last edited Apr 2, 2022
Created on Mar 13, 2022

This interactive world map displays country boundaries on an orthographic projection using SVG. The visualization reacts to mouse movement, rotating the globe horizontally based on cursor position. Built with React and D3 v5, it uses `geoOrthographic` and `geoPath` for projection and rendering, with `geoGraticule` adding grid lines. Land polygons come from the world-atlas TopoJSON dataset, with interior country borders highlighted in a contrasting color.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

An interactive orthographic world map displays landmasses and country borders, with the globe rotating in response to mouse movement. Built with React and D3 v5, it uses `d3.geoOrthographic` and `d3.geoPath` to project and render GeoJSON features derived from the world-atlas TopoJSON dataset. The graticule and interior boundaries are drawn via `d3.geoGraticule` and TopoJSON mesh, while mouse coordinates trigger projection rotation through React state. The SVG output is styled with distinct colors for land, borders, and the surrounding sphere.

MMar-99
93% match
Loading thumbnail…

World Map

This interactive SVG world map visualizes country boundaries and landmasses using D3.js geo APIs, including `geoNaturalEarth1` for projection, `geoPath` for rendering, and `geoGraticule` for the graticule grid. The map is built with React, loading TopoJSON data from the world-atlas package, and displays land in teal, graticules in light gray, and interior boundaries in a contrasting shade. The sphere outline and graticules add a polished cartographic style to the visualization.

Mmuhammadshumas
90% match
Loading thumbnail…

World Map

This visualization displays a world map with country boundaries, rendered as an SVG using React. The map combines a natural Earth projection with graticules and country interiors, styled with a muted color palette. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic projection and rendering, while `topojson.feature` and `topojson.mesh` process the World Atlas TopoJSON data. The sphere background, graticule lines, and land masses are drawn as SVG paths, with country borders highlighted as interior mesh lines.

Cchandanagandla
90% match
Loading thumbnail…

WorldMap

This world map uses an orthographic projection to display Earth as a globe, with countries filled in cyan and outlined in maroon. A graticule is also drawn to show the projection’s coordinate grid. The visualization is built with React, using d3’s `geoPath` and `geoOrthographic` functions for map generation, and the `topojson` library’s `feature` function to parse country boundaries from the world-atlas dataset. The output is rendered as SVG.

Ssugunagar
89% match
Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using a stereographic projection. The map shows the sphere, graticules, and land features as SVG paths, with country interiors highlighted in a distinct color. The visualization uses d3.geoPath and d3.geoGraticule within a React framework, pulling geographic data from the world-atlas TopoJSON source. Land and interior features are rendered as styled path elements, with a muted color palette for the sphere and graticules.

JJoe Hutchins
89% match
Loading thumbnail…

World Map

This map uses D3.js geo utilities (geoEqualEarth, geoPath, geoGraticule) within a React component to render country borders from the World Atlas TopoJSON. The SVG view shows landmasses in cyan, ocean in gray, and a graticule for reference. The code projects sphere geometry, graticules, and TopoJSON features, with interiors drawn as stroked paths, creating a polished geographic visualization.

KKahlaoui-Ismail
89% 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
89% match
Loading thumbnail…

World Map

This world map visualization displays landmasses and country borders using a natural Earth projection with d3.geoPath and d3.geoGraticule. The SVG rendering, built with React, layers a light gray sphere, teal land fills, green interior boundaries, and cyan graticule lines. Data comes from the world-atlas TopoJSON dataset, processed through topojson.feature and topojson.mesh to extract land geometry and internal borders. The visualization emphasizes clean, stylized geographic outlines rather than thematic data encoding.

Mmclee933
89% match