Fork of World Map

100%

Fork of World Map

✓ Published0🌍 Public

Last edited Jul 7, 2022

Created on Jul 7, 2022

This example presents a stylized orthographic world map, highlighting landmasses in pink with black interior borders and a subtle graticule grid. Built with React and D3 v7, it uses `geoOrthographic` and `geoPath` to project and render spherical geometry as SVG. The data comes from the world-atlas TopoJSON file, processed with `topojson.feature` and `topojson.mesh` to generate land polygons and country boundary lines.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Map

This example displays a world map using an orthographic projection, rendered as SVG with D3’s `geoPath` and `geoOrthographic`. It shows landmasses filled in teal, graticules, sphere outline, and interior borders, drawing from the world-atlas TopoJSON dataset (countries-50m.json) via `feature` and `mesh`. React manages the component state, loading data asynchronously with a custom `useData` hook before rendering the map within a fixed SVG canvas.

SSaiSreya1

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

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

93% match

Loading thumbnail…

Fork of World Map

This example renders a global map with an orthographic projection, displaying landmasses in teal, country borders as fine gray lines, and a graticule overlay on a light sphere. The visualization uses D3’s `geoOrthographic` and `geoPath` to project and draw geographic features, while TopoJSON’s `feature` and `mesh` extract land polygons and country boundaries from the world-atlas dataset. The React-based code structure separates data handling in `useData` from the SVG marks rendered by the `Marks` component, with styling applied via CSS classes.

AArefa Patwary

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

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

92% match

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

92% match