Skip to main content
SimilarExport ZIP
100%

globe

✓ Published0🌍 Public
CChase Hall
Last edited Oct 26, 2022
Created on Sep 30, 2022
Forked from map

This example displays a map of the world on a dark grey spherical globe with white borders. The globe is rendered using React and SVG, with the d3.geoOrthographic projection and d3.geoPath converting geographic data into SVG paths. Country boundaries are drawn from a TopoJSON file loaded using the d3.json function. A large grey circle provides the globe’s background, while the map features are layered on top with thin white strokes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map!

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

DDannie2020
87% match
Loading thumbnail…

GLOBE

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AAnujbhatt26
86% match
Loading thumbnail…

World Map

This example uses D3’s geoOrthographic projection and geoPath to render a three-dimensional-looking Earth in SVG. It displays country landmasses in purple, with gray graticules and sphere outlines, plus gray interior borders between countries. The map loads world-atlas TopoJSON data, converts it using topojson’s feature and mesh, and visualizes it with React. The projection and path are generated with d3.geoOrthographic, d3.geoPath, and d3.geoGraticule, producing a static globe view.

AAashish Pandey
86% match
Loading thumbnail…

World Map

This example presents a world map rendered as SVG, showing continents as filled green shapes against a light gray sphere, with graticule lines and country borders drawn in subtle gray and teal strokes. The map uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw geographic features, while `topojson` and the `json` API load and convert the World Atlas TopoJSON data. All visual elements are styled via CSS classes within the React-based rendering.

OOleg Zhernovoy
85% match
Loading thumbnail…

Making a world map

This example visualizes world geography by rendering country boundaries, graticules, and a globe sphere using geographic projections. The map displays landmasses in teal with highlighted interior borders, set against a light gray sphere and graticule grid. The code uses `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule` to project and draw geographic features in SVG. It fetches TopoJSON data from the `world-atlas` package, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. React manages the component state and rendering, with styles defined in CSS.

EEhtisham UL Hassan
85% match
Loading thumbnail…

World Map

This example renders a world map using SVG, displaying country boundaries as paths. The visualization uses the D3 library's geoEqualEarth projection and geoPath to convert geographic data into SVG paths, with React managing the component state. The map draws a semi-transparent background sphere and country outlines in a teal color scheme. The data comes from the world-atlas TopoJSON file, which is fetched and converted to GeoJSON features using the topojson library.

NNika
85% match
Loading thumbnail…

World Map

This example displays a world map rendered with SVG, showing landmasses, country borders, graticules, and a sphere outline. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, with data loaded from the TopoJSON world-atlas dataset via `topojson.feature` and `topojson.mesh`. React manages the asynchronous data loading, and CSS styling separates land, interiors, graticules, and sphere appearances.

NNikita Toropov
85% 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
85% match