US National Parks Map

100%

US National Parks Map

✓ Published0🌍 Public

Last edited Aug 26, 2024

Created on Mar 27, 2024

This map uses D3.js to display the locations of US national parks, leveraging geographic projections from d3-geo to position markers across the United States. It incorporates animation and is designed as an interactive visualization of park distribution, drawing on data from public sources such as Wikipedia. The project, authored by vspatel927, is released under the MIT license and was created as a final project for a data visualization course.

AI-generated description

A map showing the United States national parks. My final project for WPI CS 573 - Data Visualization.

Similar vizzes

Loading thumbnail…

US National Parks

This visualization displays the locations of US National Parks as glowing dots across a dark map of the United States. It uses the Albers USA projection from `d3.geoAlbersUsa` and renders map features with `d3.geoPath`. Park coordinates are loaded from a CSV file, and each park appears as a small, semi-transparent circle. The map outline and graticule are drawn using `d3.geoGraticule`, while state boundaries come from a TopoJSON file fetched from the `us-atlas` package. The visualization is built with D3.js version 7 and TopoJSON for geographic data processing.

VVansh Patel

85% match

Loading thumbnail…

VP National Parks Bar Chart

This animated bar chart displays the top six most visited U.S. National Parks as of 2022, ranking them by visitor count using interactive bars. Built with D3.js, it uses `scaleBand` and `scaleLinear` for positioning, with axes rendered via helper functions. The visualization responds to mouse movement by tracking `hoveredX` and `hoveredY` coordinates, triggering tooltips that show each park’s name and visitor totals. Data comes from the `@vspatel987/national-park-2022` package, and the chart animates through a resize observer, updating the SVG dimensions dynamically.

VVansh Patel

73% match

Loading thumbnail…

VP Vizualize Numbers

Five bubbles represent the five largest U.S. national parks by land area, scaled proportionally and labeled with each park's name and acreage. Animated with D3 transitions, circles expand sequentially while text fades in. Distances between bubbles are not to scale, but radii accurately compare park sizes. Data originates from Wikipedia's list of national parks, and the visualization uses d3's `select`, `transition`, and `easeLinear` APIs.

VVansh Patel

72% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

72% match

Loading thumbnail…

USA Map

This visualization shows a map of the United States with state boundaries, rendered as SVG using React components. The map displays land areas in tan, state borders in black, and a light blue sphere background. The code uses d3.geoAlbers for the projection, d3.geoPath to generate paths, and d3.geoGraticule for grid lines, though graticules are defined but not rendered. Data comes from the us-atlas TopoJSON file, processed with topojson.feature for the nation outline and topojson.mesh for state interiors.

Ttarungunda

71% match

Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau

71% match

Loading thumbnail…

USA Country Map

This visualization displays a map of the United States, with each state rendered as a green SVG path that turns darker on hover and includes a tooltip showing the state name. The map uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the geography from TopoJSON data loaded via `d3.json`. State boundaries appear in blue with partial opacity, and the example demonstrates basic data binding with `selectAll`, `enter`, and `append` to create the paths.

NNaveenrajaYalagandula

71% match

Loading thumbnail…

project_NH_US_Map

This example displays a map of the United States with circles overlaid on major cities, using a square-root scale to size each circle based on the city’s population. The map is rendered with SVG paths generated by d3.geoPath, while the city coordinates are projected using d3.geoAlbersUsa. The visualization loads US state boundaries and city data from external CSV and TopoJSON sources, and is built with React and D3 v5.

NNavak94

70% match