dv2020-ep36-viz38 - points on a map

100%

dv2020-ep36-viz38 - points on a map

✓ Published1🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

Forked from dv2020-ep29-viz29 - world map 01

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.

AI-generated description

world map using world atlas, natural earth map data.

city data originally from simplemaps. filtered to cities w/ population greater than 50,000. City data from Simplemaps: World Cities Database

Episode 36

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep37-viz39 - points on a map, using size

This visualization displays world cities as circles on an interactive map, with circle size encoding population using a square-root scale. The map uses a natural Earth projection rendered via `d3.geoPath`, with country borders, shorelines, and graticules from World Atlas TopoJSON data. City coordinates come from a Simplemaps CSV, filtered to populations above 50,000. React manages the component state, while D3 handles geographic projections, scaling, and SVG rendering.

Zzach b.

91% match

Loading thumbnail…

Dataviz 2020_Ep36 - 28. Points on a Map

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.

MMinwoo Pak

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

88% match

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

88% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

87% match

Loading thumbnail…

Ep. 36 - Points on a Map

This visualization displays global city populations as scaled circles on a natural Earth projection, with a graticule, landmasses rendered in light gray, and semi-transparent teal points. It uses d3.geoNaturalEarth1 and d3.geoPath to project land and graticule features, while d3.scaleSqrt maps population values to circle radii. The map is built with React and SVG, fetching world atlas topology via d3.json and topojson, and city data from a CSV loaded with d3.csv. The rendering is set in a React component, styled via CSS classes.

YYee Han

86% match

Loading thumbnail…

dv2020-ep29-viz29 - world map 01

This example renders a world map using world-atlas TopoJSON data, converted to GeoJSON and drawn as SVG paths. The map shows countries filled in green, with red borders, blue shorelines, a glowing blue sphere, and semi-transparent red graticule lines. It uses d3.geoNaturalEarth1 for projection, d3.geoPath for path generation, and d3.geoGraticule for the grid, with projection.fitSize to scale the map to the viewport. React manages the component state and rendering.

Zzach b.

86% match

Loading thumbnail…

29. Points on a Map

This example visualizes a world map with points representing cities whose populations exceed 50,000. Using a natural Earth projection, it renders landmasses, graticules, and the sphere outline via `d3.geoPath`, while `d3.geoNaturalEarth1` handles the projection. City locations are plotted as SVG circles, with coordinates transformed through the projection function. The map uses a light gray land fill and teal points, with data sourced from the World Cities Database and country boundaries from World Atlas TopoJSON. The visualization is built with React, D3 v5, and TopoJSON.

PPrashish Paudel

86% match