Fork of map us 1

100%

Fork of map us 1

✓ Published0🌍 Public

Last edited May 6, 2023

Created on May 6, 2023

Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

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

86% match

Loading thumbnail…

Fork of Fork of USA Country Map

This example displays a map of the fifty United States, rendered as pink states with white borders that highlight orange on hover. The visualization uses the `d3.geoPath` function with the `geoAlbersUsaTerritories` projection to draw the geographic data. State boundaries come from the `us-atlas` TopoJSON file, processed by the `topojson` `feature` and `mesh` functions, while React manages the SVG rendering and user interface.

AAndre J Denais

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

84% match

Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the 50 US states, rendered as an SVG where each state boundary is drawn using D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection. The map initially fills each state with a teal color, and hovering over a state highlights it in magenta. Data is loaded asynchronously from the US Atlas TopoJSON file (`states-10m.json`) using React hooks (`useState`, `useEffect`) and processed with TopoJSON’s `feature` and `mesh` functions to generate land and interior borders. The visualization is built with React 16 and D3 v5, with styling defined in an external CSS file.

Ttejaswikalluri05

84% match

Loading thumbnail…

Fork of Country map

This example displays a map of the United States with its individual states filled in sky blue and state boundaries drawn in teal. It uses the `geoAlbersUsaTerritories` projection and `geoPath` from d3 to render geographic shapes as SVG paths, with data from the US Atlas TopoJSON. React manages the component state, loading the topology via `useData` and `topojson.feature` and `topojson.mesh` to extract land and interior boundaries.

SSaiSree0122

84% match

Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Mmoslem-tg

83% match