Opo Cities

100%

✓ Published1🌍 Public

Last edited Mar 20, 2021

Created on Mar 20, 2021

Forked from usmap

The visualization depicts the geographic distribution of "opo" cities across the United States, with a dark landmass and circles sized proportionally to the number of centers in each city. Using React with D3 v5, it renders an Albers equal-area projection via `d3.geoPath`, plotting map features from the US Atlas TopoJSON and city coordinates from a CSV file. The circles’ radii are scaled by the square root of the `Centers` attribute, providing a clear comparison of city significance.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Opo Tx Data Map

A map of the United States shows circles sized by the number of opioid treatment centers in each city, using a square-root scale. The geographic boundaries come from the US Atlas TopoJSON, while city coordinates are loaded from a CSV. The visualization uses `d3.geoAlbersUsa` and `d3.geoPath` to render state paths, and `d3.scaleSqrt` to map center counts to circle radii, all drawn in SVG within a React component.

GGary Ditsch

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

76% match

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

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

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

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

73% match

Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

LLove Wessman

73% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

EEFezerKW

73% match