Fork of World Map

100%

Fork of World Map

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

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

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

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 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.

SSaiSreya1

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

93% match