RP branches

100%

✓ Published0🌍 Public

Last edited Dec 20, 2022

Created on Dec 20, 2022

This example shows a global map of city branches, plotted as semi-transparent teal dots, over a stylized Earth rendered with graticules and landmasses. It uses D3's `geoNaturalEarth1` projection and `geoPath` to draw the sphere, graticules, land, and interiors from the World Atlas TopoJSON dataset. City coordinates from a CSV file are projected and drawn as SVG circles. The visualization is built with React, using custom hooks to fetch and transform the data, and styles the map layers with CSS.

AI-generated description

A World Map using World Atlas

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays a natural Earth projection map with country boundaries, graticules, and city points overlaid as semi-transparent teal circles. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and interior borders from World Atlas TopoJSON data, while a CSV of world cities is mapped through the projection to position each dot. The React component structure manages asynchronous data loading via useWorldAtlas and useCities hooks, with SVG rendering styled through CSS to create a clean, polished aesthetic.

Aaakarsh satyam

81% match

Loading thumbnail…

Points on a Map

This example displays global city locations as semi-transparent circles on a natural Earth map projection. It renders the world using `geoPath` and `geoNaturalEarth1` from d3-geo, with graticules and country interiors overlaid via TopoJSON world atlas data. City coordinates are projected from latitude/longitude pairs using the same projection, drawing each point as an SVG circle. The data comes from the Data Canvas Sense Your City Dataset, loaded through d3.csv, with React managing the component state and SVG rendering.

MMichael Bergerson

81% match

Loading thumbnail…

Points on a map

This example displays a natural Earth projection world map with city locations plotted as semi-transparent teal circles. It loads world geography from the World Atlas TopoJSON and city coordinates from a CSV file. Using React hooks, it fetches both datasets and renders them as SVG elements. The map includes graticules, country boundaries, and interior borders, with cities positioned via the `d3.geoNaturalEarth1` projection and `d3.geoPath`. The visualization is built with D3 v6, React, and uses `d3.geoGraticule` for the background grid.

Ssurikmeetr

81% match

Loading thumbnail…

points on a map

This map visualization displays global city locations as semi-transparent dots overlaid on a natural Earth projection of the world. The geographic context is rendered using d3.geoNaturalEarth1 with d3.geoPath for land masses, graticules, and sphere outlines. City coordinates from a world cities CSV dataset are projected onto the SVG using the same projection function, with each point drawn as a small circle. The React component structure manages asynchronous data loading for both world atlas TopoJSON data and city coordinates.

BBlake McCarty

81% match

Loading thumbnail…

Mapping : Part 2 - Cities

This example visualizes worldwide cities as semi-transparent teal dots layered over a natural Earth projection map. It uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and interior boundaries from the world-atlas TopoJSON dataset, while city coordinates are plotted via d3.csv from a cleaned world cities dataset. The React component fetches both data sources asynchronously using useEffect, then projects each city’s longitude and latitude into SVG circles with fixed pixel radii.

Zzeeeeem

81% match

Loading thumbnail…

Points on a Map

This example displays a world map with city points overlaid, using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map includes land boundaries, graticules, and interiors rendered as SVG paths from World Atlas TopoJSON data. City locations, loaded from a CSV with d3.csv, are plotted as semi-transparent circles. The visualization is built with React and D3 v5, demonstrating a clean, styled cartographic composition with an equirectangular-like aesthetic.

Ppnlinyz

81% match

Loading thumbnail…

Visualization-tutorial

This example displays a world map with country boundaries, graticules, and interior borders, rendered as SVG paths. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project land features and generates sphere and graticule outlines. It loads TopoJSON data from the World Atlas repository to draw landmasses, while an interior mesh defines shared borders. The React-based interface, styled with CSS, also fetches city data from a CSV file, though the map itself focuses on geographic boundaries rather than plotting those points.

Rramdev2021

80% match

Loading thumbnail…

World Map

This example displays a natural Earth projection world map with graticule lines, country borders, and interior boundaries. City populations are plotted as semitransparent circles with radii scaled by the square root of population using `d3.scaleSqrt`. The visualization uses React hooks to load world atlas TopoJSON data and a CSV of global cities, converting them into GeoJSON features via `topojson.feature` and `topojson.mesh`. D3’s `geoNaturalEarth1` projection and `geoPath` render the SVG shapes.

Iiblub

80% match