World Map

100%

✓ Published0🌍 Public

Last edited Apr 4, 2022

Created on Apr 3, 2022

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

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.

Pparidhi

93% match

Loading thumbnail…

World Map

A world map displays country and land-mass boundaries on an equirectangular projection, filled with a pale blue and accented by graticule lines and interior borders. Built with React and D3 v5, it loads World Atlas TopoJSON data via `d3.json`, processes it with `topojson.feature` and `topojson.mesh`, and renders SVG paths using `d3.geoPath` and `geoEquirectangular`. The visualization also draws a sphere outline and graticules for a polished, cartographic look.

Ssmile2git

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

91% match

Loading thumbnail…

World map

This example shows a world map rendered as an orthographic projection of landmasses and graticules, with country borders highlighted. It uses D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` to project and draw the sphere, graticule grid, and land features from a TopoJSON world-atlas dataset, while `topojson.feature` and `topojson.mesh` extract geometries and interior borders. React manages the component structure and data loading via a custom `useData` hook, with all shapes output as SVG paths.

FFrederick O'Brien

91% match

Loading thumbnail…

World Map

This example displays an interactive world map rendered with SVG, showing landmasses, country borders, graticules, and the Earth’s sphere. It uses a React component to load geographic data from the world-atlas TopoJSON source via `d3.json`, then converts it to GeoJSON with `topojson.feature` and `topojson.mesh`. The map is drawn using `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule`, with CSS styling for the land, interior boundaries, and graticule paths.

SSonja Ek

90% 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 shows a world map rendered as an SVG, featuring landmasses, country borders, graticules, and a sphere outline. It loads world-atlas TopoJSON data using d3.json and converts it to GeoJSON with the topojson feature and mesh functions. The map uses the d3.geoNaturalEarth1 projection and d3.geoPath to draw the geographic features. React manages the component state and rendering, while CSS styles define the color palette for the land, sphere, graticules, and interior boundaries.

CCatalina Vajiac

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

90% match