Skip to main content
SimilarExport ZIP
100%

Fork of map with points

✓ Published0🌍 Public
YYuxin Shao
Last edited Dec 3, 2022
Created on Dec 3, 2022
Forked from map with points

This visualization displays the population of US cities as circles overlaid on a map of the United States, with the map drawn from TopoJSON data and city points positioned using the geoAlbersUsa projection via d3.geoPath. Circle sizes encode population using a square-root scale, and the rendering uses React with SVG elements. The city data is loaded from a CSV file, and state boundaries and interiors are generated using topojson’s feature and mesh functions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

map with points

This visualization displays a map of the United States with a circle for each city, sized by population using a square-root scale to reduce visual disparity. It shows the geographic distribution of populated areas across the country. The code uses React to manage state and rendering, while D3 v5’s geoAlbersUsa and geoPath project and draw state boundaries and interior borders from TopoJSON data. City coordinates are projected from longitude and latitude, and circles are rendered as SVG elements with opacity.

CChase Hall
91% match
Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map with city points scaled by population using a square-root scale, rendered using D3.js geo projections and React. The map shows land masses, graticules, and a sphere outline created with the `geoNaturalEarth1` projection and `geoPath` from D3. City data is loaded from a CSV via `d3.csv`, while world atlas topology is fetched and processed with `topojson`’s `feature` and `mesh` functions. The visualization uses SVG circles with a gold fill at reduced opacity to represent city populations, all set against a dark radial-gradient background.

PPeiyang Li
87% match
Loading thumbnail…

Fork of Points on a Map

This example displays a world map with circles marking cities whose populations exceed 50,000, using data from Simplemaps. The visualization renders geographic features with d3.geoPath and geoNaturalEarth1, including land masses, graticules, and country interiors. City coordinates are projected onto the SVG using the same projection, with semi-transparent circles indicating locations. The map is built with React hooks, d3.v5, and TopoJSON for world atlas data.

Mmmei-d
87% match
Loading thumbnail…

Fork of map us 1

This visualization displays a map of the United States with ten major cities plotted as red circles, using `d3.geoPath` with a `d3.geoAlbersUsa` projection. The map is rendered in SVG using data from `citydata.csv` and a TopoJSON file from `us-atlas`. Users can hover over a city to enlarge it and turn it blue, or click a city to draw black connecting lines to all other cities. The visualization uses `d3.csv` and `d3.json` for data loading.

JJunaid Hasan
87% match
Loading thumbnail…

Fork of Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection, using a graticule, land masses, and interiors to provide geographic context. The map is rendered in SVG via React, with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handling projections and paths. City coordinates are projected from latitudes and longitudes loaded from a CSV, while country boundaries come from the World Atlas TopoJSON source.

Ggregoryh@ucar.edu
87% match
Loading thumbnail…

Fork of map with points

This example displays a choropleth-style map of the United States rendered as SVG paths, using React to manage component state and the d3.geoAlbersUsa projection with d3.geoPath to draw state boundaries from TopoJSON data loaded via the us-atlas package. The map is populated with geospatial features fetched from a remote URL, while a loading fallback appears until the data arrives. The visualization emphasizes the geographic outlines rather than quantitative values, with a single teal fill applied to all marks.

CChase Hall
86% match
Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with cities whose populations exceed 50,000, plotted as semi-transparent teal dots. The map includes country boundaries, graticules, and a sphere outline, rendered using d3.geoPath with a geoNaturalEarth1 projection. City positions come from a CSV loaded via d3.csv, while country shapes are derived from World Atlas TopoJSON using topojson.feature and topojson.mesh. The React component structure uses hooks to fetch data asynchronously, and the SVG marks are drawn with React elements.

YYanyu Long
86% match
Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection map. Circle size encodes population using a square root scale, with the largest cities reaching 15 pixels in radius. The map renders country boundaries and graticules using d3.geoPath with TopoJSON data from the World Atlas, while city coordinates come from a Simplemaps CSV. Built with React and d3.v5, the SVG map overlays scaled circles onto the projected geographic features, filtered from the complete world cities dataset.

Bblueyjuice
86% match