Fork of FP: Map

100%

Fork of FP: Map

✓ Published3🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

Forked from FP: Map

This visualization displays a map of United States states using an Albers projection, rendered as simple outlined polygons against a graticule grid. The code fetches TopoJSON data from the us-atlas package and converts it to GeoJSON using `topojson.feature`. It draws the map with `d3.geoPath`, also rendering the graticule and its outline via `geoGraticule`. The map appears once data finishes loading, with states shown as white-bordered paths on a plain background.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of FP: Map

This example displays a map of the United States, rendering state boundaries with thin white strokes against a graticule grid and a bold black outline. It uses `d3.geoPath` with `d3.geoAlbers` to project and draw geographic features, and `d3.geoGraticule` to generate the background grid. State data is fetched from the `us-atlas` package as TopoJSON and converted to GeoJSON features via `topojson.feature`.

Rreddysushma994@gmail.com

92% match

Loading thumbnail…

FP: Map

This example renders a map of U.S. states using D3’s `geoAlbers` projection, `geoPath`, and `geoGraticule`. It fetches TopoJSON data from the `us-atlas` package, converts it with `topojson.feature`, and draws graticule, outline, and country paths. The visualization updates asynchronously from a loading state, applying stroke styles to each geographic feature.

JJingxuan Yang

88% match

Loading thumbnail…

Fork of Map

This example displays a choropleth-style map of the United States, with each state filled in a light blue shade and outlined by dark gray borders, over a pale background. Hovering over a state reveals its name via an SVG `<title>` tooltip. The visualization uses a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON data from the us-atlas package, drawing both individual state polygons and the national outline. State names are derived from the TopoJSON geometries’ `properties.name` field.

Sson.sultan@yahoo.com

85% match

Loading thumbnail…

Fork of usa map

This map of the United States renders each state as an SVG path, colored by a categorical color scale based on the state name. The visualization uses the D3.js library's `geoPath` and `geoAlbersUsa` projection to convert TopoJSON state boundaries into map geometry. A hover effect turns the state black via CSS. The state boundaries are sourced from a remote JSON file containing US states data.

GGeorge Vaz

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

84% match

Loading thumbnail…

Fork of map

This visualization displays a map of the United States, with each county filled using a categorical color scale based on its name. It renders these counties as SVG paths generated by `d3.geoPath` with the `geoAlbersUsa` projection, sourcing geographic data from a US Atlas TopoJSON file. The counties are outlined in red with low opacity, and they highlight yellow on hover. The visualization uses D3 v5 and the `topojson` library’s `feature` function to extract the geometries from the `counties-10m.json` dataset.

Rreddysushma994@gmail.com

84% match

Loading thumbnail…

Fork of Fork of USA Country Map

This interactive map of the United States renders state boundaries as pink strokes over sky-blue landmasses, using an Albers USA projection that includes territories. The visualization builds on a React component that loads TopoJSON data via `d3.json` and converts it with `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator creates the SVG paths for both land areas and state interiors, with the `geoAlbersUsaTerritories` projection handling the geographic layout. The map displays state-level administrative boundaries with a clean, minimal aesthetic.

SSRI RAM REDDY KOTERU

84% match

Loading thumbnail…

Fork of Country map

This choropleth displays all U.S. states as sky-blue filled polygons with teal borders marking state boundaries. Using the geo-albers-usa-territories projection via d3.geoPath, the map renders TopoJSON data from the us-atlas package. React manages the SVG output, while d3.geoGraticule and a mesh from topojson generate the underlying grid lines and interior state divisions.

Cchandrakalavanukuri

84% match