Skip to main content
SimilarExport ZIP
100%

FP: Map

✓ Published4🌍 Public
JJingxuan Yang
Last edited Apr 2, 2024
Created on Apr 1, 2024
Forked from Simple World 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

Rrobertotienonyaranga@gmail.com
88% match
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
87% match
Loading thumbnail…

US States Map

This example renders a geographic map of US states using D3 and TopoJSON, loading data from the us-atlas TopoJSON file. It draws each state with `d3.geoPath` and a `geoAlbersUsaTerritories` projection, which includes US territories. State boundaries appear as white strokes overlaid via a TopoJSON mesh, while the map updates reactively through the `d3-rosetta` StateProperty pattern. The visualization highlights the separation between states and provides a clean, basic template for choropleth or interaction extensions.

CCurran Kelleher
83% match
Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari
83% 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
82% match
Loading thumbnail…

Fork of World Map Simple

This example visualizes the contiguous United States with a geographical projection, showing both country outlines and a graticule grid. It uses the `geoAlbersUsa` projection and `geoPath` from d3-geo to render the shapes, while topojson-client converts the TopoJSON data from the us-atlas package into GeoJSON features. The visualization loads state data asynchronously, displaying the map once the fetch completes, and redraws it whenever new data arrives. The code highlights a simple pattern for integrating D3 with React through a state-driven update cycle.

JJingxuan Yang
82% match
Loading thumbnail…

experiment Map

This example displays a map of the United States rendered as SVG paths, with state boundaries drawn from TopoJSON data loaded from the us-atlas dataset. It uses D3 v5’s `json`, `geoPath`, and `geoMercator` functions along with the `feature` method from topojson to convert the TopoJSON topology into GeoJSON features. The visualization demonstrates basic geographic projection and path generation, outputting a static map without additional interactivity or styling.

SSaurabh Gupta
82% match
Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Ddaigokawabe
81% match