US Cities Map At Night

100%

US Cities Map At Night

✓ Published3🌍 Public

Last edited Mar 27, 2024

Created on Feb 26, 2024

This example visualizes the geographic distribution of over 1,000 US cities as glowing dots on a dark, night-time map of the United States. The map renders state boundaries from US Atlas TopoJSON data using `d3.geoAlbersUsa` and `d3.geoPath`, while city coordinates are parsed from a CSV file with `d3.csvParse` and projected onto the map. Each city appears as a semi-transparent, pale yellow circle, with an overlaid graticule and outline providing spatial context. The visualization updates dynamically through a state-driven render loop, fetching both datasets asynchronously via the Fetch API.

AI-generated description

A map showing United States cities in a night view.

Similar vizzes

Loading thumbnail…

Fork of US Cities Map At Night

This fork of the US Cities Map At Night visualization renders a dark-themed United States map with a graticule overlay, using d3.geoAlbersUsa and d3.geoPath to project state boundaries from a TopoJSON atlas. It plots over a thousand cities as small glowing dots with low opacity, pulling latitude, longitude, and population data from a CSV. The loading sequence fetches the atlas and city data asynchronously, then draws the map and points in a single SVG using D3’s data join pattern.

CCurran Kelleher

88% match

Loading thumbnail…

Fork of World Cities

This example visualizes the distribution of U.S. cities and their populations as small dots overlaid on a map of the United States, with state boundaries outlined in white. It first renders the country outline and graticule, then projects each city’s longitude and latitude using `d3.geoAlbersUsa` and draws them as circles. The visualization fetches TopoJSON state boundaries from `us-atlas` and CSV city data from a GitHub-hosted dataset, parsing populations with D3’s `csvParse`. A subtle graticule grid and black outline frame the map, while city dot radius remains fixed at 0.2 pixels.

JJingxuan Yang

78% match

Loading thumbnail…

US National Parks

This visualization displays the locations of US National Parks as glowing dots across a dark map of the United States. It uses the Albers USA projection from `d3.geoAlbersUsa` and renders map features with `d3.geoPath`. Park coordinates are loaded from a CSV file, and each park appears as a small, semi-transparent circle. The map outline and graticule are drawn using `d3.geoGraticule`, while state boundaries come from a TopoJSON file fetched from the `us-atlas` package. The visualization is built with D3.js version 7 and TopoJSON for geographic data processing.

VVansh Patel

76% match

Loading thumbnail…

map us 1

This map of the United States displays cities as red circles, overlaid on a gray state map. It uses D3’s `geoAlbersUsa` projection and `geoPath` to render the states, and plots city coordinates from `citydata.csv`. Clicking a city draws black lines to all other cities, with line thickness proportional to the clicked city’s `flow` value, and hover transitions enlarge and recolor the selected circle.

PPeiyang Li

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

76% match

Loading thumbnail…

US Choropleths Map And Captital/Major Cities

This example displays a choropleth map of the contiguous United States with state boundaries rendered as colored polygons, overlaid with two city datasets. State colors transition from white to blue via a `scaleLinear` color scale, while graticules and interior borders are drawn using `d3.geoPath` and `d3.geoGraticule`. Population data from a world cities CSV appears as semi-transparent purple circles sized with `scaleSqrt`, and state capitals from a Vega JSON file are fixed black dots. The map uses TopoJSON from the us-atlas library, projected with `geoAlbers` in an SVG rendered through React.

Yyuzhang21

75% match

Loading thumbnail…

US Choropleths Map And Captital/Major Cities

A US choropleth map displays all continental states colored with a white-to-pink linear scale, alongside two city overlays: state capitals as fixed black dots and major cities as population-sized circles. The visualization uses React with d3.geoAlbers projection, d3.geoPath, and d3.geoGraticule to render SVG shapes from US Atlas TopoJSON. City data comes from a world cities CSV and US state capitals JSON. d3.scaleSqrt maps city populations to circle radii.

Qqeuscor

75% match

Loading thumbnail…

World Cities (night)

A world map depicts the top 10,000 cities by population as glowing yellow-to-white dots, with capital cities outlined in red. The dark ocean and landmasses provide a night-time aesthetic, and the map is rendered using a Natural Earth projection. The visualization uses d3.geoPath to draw the world map and graticule, while city positions are projected with d3.geoNaturalEarth1. Data comes from the Simplemaps World Cities Database, and city point sizes are scaled by the square root of their population.

Ffadingcode9@gmail.com

75% match