Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ppasyasahas
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

This example displays a map of the USA, projected using a Mercator projection, and rendered as a single grey SVG path. It loads world GeoJSON data from a GitHub repository, filters the features to include only the USA, and draws it with `d3.geoPath`. The code also includes an alternative, commented-out approach using `d3.geoAlbersUsa` to overlay a country on a world map. Additionally, it demonstrates the use of ES6 modules by exporting a message variable.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96
88% match
Loading thumbnail…

USA in v3

This example displays a static map of the United States, using the AlbersUSA projection to render state boundaries as SVG paths. It shows the geographic shape of the country without additional data encoding. The visualization uses D3 v4’s `d3.json` to load GeoJSON state data, then `d3.geoPath` with a `d3.geoAlbersUsa` projection to generate the paths. The map is centered and scaled within an SVG canvas. The code relies solely on the loaded GeoJSON features and does not include interactivity or color encoding.

FFrieseWoudloper
85% match
Loading thumbnail…

Untitled

This example displays a map of the United States, including Alaska, Hawaii, and Puerto Rico, using a custom composite projection defined in `albers-usa-pr.js`. The code builds on `d3.geoAlbers` and `d3.geoConicEqualArea` to create `d3.geoAlbersUsaPr`, which is then used with `d3.geoPath` to render state boundaries from TopoJSON data in `states.js`. SVG paths are generated for each state, filled gray with white strokes.

Iillus0r
84% match
Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

AAnnie Ulichney
84% match
Loading thumbnail…

Untitled

This example displays a map of New York State, rendering its geographic boundaries as steel-blue shapes on an SVG canvas. It loads GeoJSON data from a remote GitHub gist using `d3.json` and projects the coordinates with `d3.geoAlbersUsa`. The code uses `d3.geo.path()` to convert the projected features into SVG path data, appending each region as a `<path>` element within grouped `<g>` elements. The visualization relies on D3 v5 and React, with the final output showing a simple, unadorned state outline.

Llupica.matthew@gmail.com
84% match
Loading thumbnail…

Assignment 2 USA map

This example displays a choropleth-style map of the United States rendered as SVG paths. The code uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to convert GeoJSON features into map outlines, with each state filled red and stroked blue. The geographic data comes from a remote US features JSON file fetched via `d3.json`. The visualization sets a fixed 700×700 canvas and demonstrates D3 map projection, path generation, and asynchronous data loading in a single page.

Ppasyasahas
84% match
Loading thumbnail…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Ppcsong33
84% match
Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96
84% match