Fork of World Map

100%

Fork of World Map

✓ Published0🌍 Public

Last edited Mar 30, 2022

Created on Mar 30, 2022

This visualization depicts a orthographic projection of the world map, rendered as a solid sphere with graticule lines and individual country landmasses. The `d3.geoOrthographic` projection and `d3.geoPath` generate the sphere and land shapes from TopoJSON data sourced from the world-atlas package. Country interiors are outlined using a topological mesh, while styled SVG paths in React manage the visual hierarchy, using fill and stroke colors to distinguish land, graticules, and the surrounding sphere.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Map

This visualization presents a world map using an orthographic projection, creating a three-dimensional globe effect with shaded landmasses and interior boundaries. It uses d3.geoPath with d3.geoOrthographic and d3.geoGraticule to render the sphere, graticule, and country features, with data sourced from the world-atlas TopoJSON file. The React-based SVG rendering applies custom styling to differentiate land, interiors, and graticules.

SShivaPriyad

94% match

Loading thumbnail…

Fork of World Map

This orthographic world map displays Earth's landmasses and country borders using a sphere projection with graticules. The visualization renders SVG paths via d3.geoPath and d3.geoOrthographic, styling land in teal, interiors as light strokes, and the sphere in gray. Data is loaded from the world-atlas TopoJSON file with topojson.feature and topojson.mesh within a React component. The example uses d3.v7 and React 17, presenting a static globe without interaction or animation.

GGalineeharika

94% match

Loading thumbnail…

Fork of Fork of World Map

This example displays an orthographic world map with graticules, landmasses, and country interiors rendered as an SVG using React. The geographic data comes from the World Atlas TopoJSON dataset, which is processed with `topojson.feature` and `topojson.mesh`. The visualization uses `d3.geoOrthographic` for the projection, `d3.geoPath` for path generation, and `d3.geoGraticule` to create the grid lines. The sphere is filled light gray, land areas use a teal color, and country borders appear as black lines.

Bbhargavarathod

94% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map with country boundaries and graticules, rendered as SVG paths. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 v5, with land areas filled in orange against a black sphere backdrop. It loads geographic data from World Atlas TopoJSON and processes it with `topojson.feature` and `topojson.mesh` to extract land polygons and interior borders between countries, which are stroked in light blue. The React components encapsulate the data-loading hook and mark-rendering logic.

Bbhargavarathod

92% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map using an orthographic projection, rendered as SVG within a React application. It shows landmasses in teal, country borders in black, and graticules on a light gray sphere. The code uses `geoOrthographic` and `geoPath` from d3 to project geographic features, while topojson’s `feature` and `mesh` functions process land and country boundary data from the world-atlas dataset. The map is static, with no interaction or animation.

SSnapika

92% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map rendered as SVG, with landmasses filled in teal and country borders drawn as thin interior lines atop a light gray sphere with graticule gridlines. It uses d3.geoNaturalEarth1 projection with d3.geoPath and d3.geoGraticule to generate the geographic shapes, while topojson’s feature and mesh methods extract land polygons and country boundaries from the world-atlas TopoJSON source. React manages the component structure, with data loaded asynchronously via d3.json.

SSam Hege

92% match

Loading thumbnail…

Fork of World Map

This example displays a world map using an August projection, showing landmasses, country borders, graticules, and a sphere outline. The map is rendered as SVG using React, with d3.geoPath generating the geographic paths from TopoJSON data loaded from the world-atlas package. The visualization applies a teal color scheme to the land, gray strokes for interiors, and a light gray background for the sphere, with graticules drawn using d3.geoGraticule.

JJyothicherukuri

92% match

Loading thumbnail…

Fork of World Map

A world map renders landmasses in teal on a light gray sphere, with graticule lines and country borders overlaid. The visualization uses an orthographic projection via `d3.geoOrthographic` and draws geographic features with `d3.geoPath`. The React component fetches world-atlas TopoJSON data through `d3.json`, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. Styling is applied through SVG classes, showing a clean, static globe view.

Mmanvithareddykarra

91% match