Dataviz 10 - Points on map

100%

Dataviz 10 - Points on map

✓ Published1🌍 Public

Last edited Nov 26, 2021

Created on Nov 26, 2021

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.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This visualization displays world cities with populations exceeding 50,000 as semi-transparent teal points on an SVG map. The map uses a Natural Earth projection via d3.geoNaturalEarth1, with landmasses, graticules, and interiors rendered using d3.geoPath. City locations are projected from latitude and longitude coordinates, then drawn as small circles. The underlying city data comes from Simplemaps, while country boundaries come from the World Atlas TopoJSON, both loaded asynchronously with d3.csv and d3.json. The React component structure uses custom hooks for data fetching.

SSabin Bhandari

94% match

Loading thumbnail…

Dataviz 10 - Points on map with sizes

A world map displays global cities with populations over 50,000, using circle size to encode each city’s population. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, country interiors, graticules, and a sphere backdrop. City coordinates are projected onto the map, and circle radii are scaled with `scaleSqrt` based on population data from Simplemaps. Built with React and d3.v5, the SVG rendering includes styled land, sphere, and interior boundary paths for a polished cartographic appearance.

RRyAlpha

93% match

Loading thumbnail…

Using Points on a World Map

This visualization displays a world map with points marking cities that have populations greater than 50,000, sourced from the Simplemaps World Cities Database. Using d3.geoNaturalEarth1 and d3.geoPath, it renders land masses, graticules, and country interiors as SVG paths, with city coordinates projected onto the map. The React-based code loads TopoJSON world atlas data via d3.json and mesh, while city data is fetched as CSV. Circles are drawn with low opacity to reveal dense urban clusters across continents.

SSushan Prajapati

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

92% match

Loading thumbnail…

world ma Points on a Map

This visualization displays a world map with points marking cities whose population exceeds 50,000, sourced from the Simplemaps World Cities Database. It uses a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, interiors, and a sphere outline from World Atlas TopoJSON data. City points are projected and drawn as semi-transparent circles. The React-based implementation, using d3.v5 and SVG rendering, creates a clean, minimal aesthetic with light gray landmasses and teal city markers.

Ssagar limbu

92% match

Loading thumbnail…

Points on a Map

This example displays a world map with cities whose populations exceed 50,000, plotted as semi-transparent circles. The map uses a Natural Earth projection via `d3.geoNaturalEarth1`, with landmasses, graticules, and country interiors drawn using `d3.geoPath` from the World Atlas TopoJSON dataset. City coordinates are projected from latitude and longitude into SVG circle positions, with the data loaded from a Simplemaps CSV via `d3.csv`. The rendering is handled in React, producing a clean, styled SVG visualization.

GGiovanniD_

92% match

Loading thumbnail…

Points on a Map

This example visualizes a world map with dots marking cities whose population exceeds 50,000. The city locations are plotted as semi-transparent teal circles over a natural Earth projection, with landmasses, graticules, and country interiors rendered in gray tones. The visualization is built with React and uses D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` functions to project geographic data from the World Atlas TopoJSON. City coordinates come from the Simplemaps World Cities Database, accessed via a CSV file, and are projected onto the map using D3's projection method.

NNita

91% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles marking cities whose population exceeds 50,000, using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. The map includes graticules and country boundaries from World Atlas TopoJSON, with city data sourced from Simplemaps. Circle radii are scaled by population using `scaleSqrt`, rendered as semi-transparent SVG elements in React. The implementation leverages React hooks for data loading and D3 v5 for geographic projections and CSV parsing.

Zzyniax

91% match