word map

100%

✓ Published1🌍 Public

Last edited May 10, 2021

Created on May 10, 2021

This example shows a world map rendered as a choropleth of country boundaries, with a light gray graticule grid and sphere outline drawn behind them. The visualization uses React to manage the SVG output and d3’s `geoEqualEarth` projection, `geoPath`, and `geoGraticule` to construct the geographic shapes, while TopoJSON’s `feature` and `mesh` methods parse the World Atlas dataset for country polygons and interior borders. Country fills use a teal color, and boundary lines are styled via CSS classes.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World map

This visualization presents a world map using an equal-area Earth projection, rendered as an SVG with React. It displays country boundaries in teal against a light gray sphere, with graticules and interior lines in a subtle gray. The code employs D3's `geoEqualEarth`, `geoPath`, and `geoGraticule` to project and draw geographic features from the `world-atlas` TopoJSON dataset, while `topojson`’s `feature` and `mesh` functions prepare the country and interior geometries.

JJulia Hack

90% match

Loading thumbnail…

world map

This example displays a world map showing country boundaries and land masses, with a focus on geographic layout rather than quantitative data. The map renders an equal Earth projection using `d3.geoEqualEarth`, with graticule lines and a styled sphere background. Country polygons are drawn via `d3.geoPath`, while interior borders are generated from TopoJSON mesh data loaded from the world-atlas dataset. The visualization uses React for component structure and SVG for rendering, with CSS controlling the color scheme for countries, borders, and the surrounding ocean.

MMATTE-blz

90% match

Loading thumbnail…

World Map

This example renders a world map using the geoEqualEarth projection and geoPath to draw countries, graticules, and sphere outlines in SVG. It loads country boundaries from the world-atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract country polygons and interior borders. The visualization, built with React and D3 v5, fills countries in teal, with light gray graticule lines and a lighter sphere background.

11993-INDALKAR

89% match

Loading thumbnail…

World Map

This world map visualizes country boundaries and interior borders using a light gray sphere with teal country polygons and silver interior lines. The example relies on d3-geo’s `geoEqualEarth` projection and `geoPath` to render SVG paths, while the topojson library’s `feature` and `mesh` functions transform the World Atlas TopoJSON dataset into GeoJSON and isolate interior borders. React manages the data-loading state, and the visualization is drawn entirely as SVG within a React component.

AAnthony Ynami

89% match

Loading thumbnail…

World Map

This example displays an interactive world map rendered as an SVG using React. The visualization shows country boundaries and interior borders, with each country filled in teal and internal administrative divisions outlined in gray, all projected using a D3 equal Earth projection (`geoEqualEarth`) and drawn with `geoPath`. The map data comes from the world-atlas TopoJSON file, processed through `feature` and `mesh` from TopoJSON. The spherical background and clear styling make the geographic layout immediately readable.

Aadewole-top

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

89% match

Loading thumbnail…

world map

A world map visualization displays country boundaries as filled shapes on a light gray sphere, using an equal-earth projection. The map is rendered with SVG, where each country path is drawn via `d3.geoPath` and the projection is set with `geoEqualEarth`. Data comes from the world-atlas TopoJSON dataset, processed through `topojson.feature` to extract country geometries. The React-based example uses the `useData` hook to asynchronously load and transform the data before rendering.

Aaparnasj-sj

89% match

Loading thumbnail…

map

This example displays a world map using the GeoJSON country boundaries from the World Atlas TopoJSON dataset. The map is rendered as SVG paths via `d3.geoEqualEarth` and `d3.geoPath`, with each country filled in teal and outlined in light gray, while a separate sphere path provides a neutral background. It uses React for component structure, with data loaded through D3’s `json` method and converted from TopoJSON to GeoJSON using the `feature` function.

NNart Williamson

88% match