Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep36 - 28. Points on a Map

✓ Published1🌍 Public
MMinwoo Pak
Last edited Jul 21, 2021
Created on Jul 21, 2021

This example displays world cities as semi-transparent points overlaid on a natural Earth projection, with the map rendered using D3’s geoNaturalEarth1 and geoPath for land, interiors, graticules, and a sphere outline. The points are positioned by projecting each city’s longitude and latitude through the same projection. Data comes from a world cities CSV and the world-atlas TopoJSON, loaded via d3.csv and d3.json, while React manages the component state and SVG rendering.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map - Episode 36

This example visualizes world cities as semi-transparent points overlaid on a natural Earth projection map. The visualization displays country landmasses, graticules, and interior borders, with city locations rendered as small circles positioned using the geoNaturalEarth1 projection and geoPath utilities. Built with React and D3 v5, it loads geographic data from a TopoJSON world atlas and city coordinates from a CSV file, using d3.json, d3.csv, and topojson feature/mesh functions to prepare the data for SVG rendering.

Rroc286
92% 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
91% match
Loading thumbnail…

dv2020-ep36-viz38 - points on a map

This visualization displays a world map with over 50,000 cities plotted as points, using the Natural Earth dataset via the `topojson` library for geographic boundaries and a CSV of global city coordinates from Simplemaps. The map uses the `geoNaturalEarth1` projection and `geoPath` from d3 v5 to render countries, borders, shorelines, and graticules as SVG paths, with city data filtered by population and drawn as small circles. The React-based app loads data asynchronously and renders the interactive SVG within a fixed canvas, styled with a dark background and semi-transparent fills.

Zzach b.
90% match
Loading thumbnail…

Points on Map

This example displays a world map with city points overlaid, using a Natural Earth projection. The map shows country boundaries, graticules, and a sphere outline, with city locations plotted as circles. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the geographic features, while city data is loaded from a CSV via d3.csv. The visualization is built with React, rendering SVG elements, and uses TopoJSON from the World Atlas for country polygons and interior borders.

MMark Lam
90% match
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
90% match
Loading thumbnail…

Points on a Map - React, D3

This example displays a world map with city points, using a natural Earth projection to render country boundaries, graticules, and interior borders from World Atlas TopoJSON data. City locations are plotted as semi-transparent circles based on latitude and longitude coordinates loaded from a CSV file. The visualization is built with React for component structure and D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map geometry, rendered as SVG elements.

NNelson M
90% match
Loading thumbnail…

Dataviz 10 - Points on map

This visualization displays a world map with points marking cities that have populations exceeding 50,000, using data from the Simplemaps World Cities Database. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, featuring graticules, land masses, and interior boundaries from the World Atlas TopoJSON. City locations are plotted as semi-transparent teal circles positioned via the projection function. The visualization is built with React and D3 v5, loading geographic and city datasets asynchronously through custom hooks before rendering.

RRyAlpha
90% match
Loading thumbnail…

World Map with City Points

This example displays a world map with cities plotted as points using a Natural Earth projection. The visualization renders landmasses, country borders, graticules, and a sphere outline, with semi-transparent teal circles representing city locations. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for geographic projection, TopoJSON for world atlas data, and CSV-loaded city coordinates. City points are positioned through `d3.geoPath`'s projection function, converting latitude and longitude into SVG circle positions.

SSam Hege
89% match