Fork of US Cities Map At Night

100%

Fork of US Cities Map At Night

✓ Published0🌍 Public

Last edited Feb 26, 2024

Created on Feb 26, 2024

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.

AI-generated description

A map showing United States cities in a night view.

Similar vizzes

Loading thumbnail…

US Cities Map At Night

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.

VVansh Patel

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

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

82% match

Loading thumbnail…

Fork of reusable D3 Scatter Plot

This interactive map of the United States plots ten major cities as red circles, scaled by their netflow values. A click on any city draws semi-transparent black lines connecting it to all other cities, visually comparing its position relative to the entire set. Built with React and D3, the visualization uses a geoAlbersUsa projection from `d3.geoPath` to render the states, while mouseover transitions animate circle size and color, and the `topojson` library converts US Atlas data for state boundaries.

GGan Gao

79% match

Loading thumbnail…

Fork of 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.

YYuxin Shao

79% match

Loading thumbnail…

Fork of World Map

This visualization shows a U.S. states map rendered as green polygons with black outlines against a light blue spherical background. It uses d3.geoAlbersUsa for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded from the us-atlas package. The code converts TopoJSON to GeoJSON using topojson.feature before binding the state features to SVG paths, while the sphere element is drawn separately using a GeoJSON Sphere object.

PPeiyang Li

77% match

Loading thumbnail…

Fork of America Map

This visualization displays a choropleth map of the United States with state names overlaid, using cyan to fill each state and a maroon highlight on hover. The map is rendered as SVG, with geographic data sourced from a GitHub-hosted CSV file. The code leverages d3's `geoAlbersUsa` projection, `geoPath`, `feature` from topojson, and `select` to generate state paths and position labels at their centroids.

SSheshidharreddy

77% match

Loading thumbnail…

Fork of Country map

This map of the United States renders all states and territories using an Albers projection, with landmasses filled in sky blue and interior borders drawn in teal. The visualization uses the geo-albers-usa-territories projection and d3.geoPath to convert TopoJSON features into SVG paths. Geographic data is loaded from the us-atlas package, while React’s useState and useEffect hooks manage the asynchronous data fetching and component rendering.

Bbhargavarathod

77% match