Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Llupica.matthew@gmail.com
Last edited Feb 2, 2023
Created on Jan 27, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays an interactive SVG map of New York State’s counties, rendered in light gray with black borders that highlight in light blue on hover. It uses D3 v3 with the Albers projection and `d3.geo.path` to draw the geographic features, filtered from a TopoJSON file by state FIPS code 36. The map loads county boundaries from a remote GitHub-hosted dataset, while an accompanying test file defines a tooltip with `d3.tip` for potential data annotations.

AAnnie Ulichney
87% match
Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei
86% match
Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

MManh Pham
85% 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
85% match
Loading thumbnail…

Untitled

This example shows an interactive map of New York cities and towns that zooms into a selected region on click, highlighting the active area in sky blue while fading other boundaries. Built with D3 v3, it uses `d3.geo.albersUsa` for projection, `d3.geo.path` for rendering TopoJSON features, and a `g.transition` with scaling and translation to animate the view. State and town borders are drawn as SVG paths, with click handling on both the background and individual regions to toggle zoom.

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

Untitled

This example displays a map of New York counties using an Albers USA projection with D3 v3 and TopoJSON, showing county boundaries and state borders in white. Clicking a county triggers a smooth zoom animation that centers the view on that region, highlighting it in sky blue while scaling stroke widths inversely. The visualization uses `d3.geo.albersUsa`, `d3.geo.path`, and a 750-millisecond transition with the `scale` and `translate` transforms, with data loaded from a GitHub-hosted TopoJSON file.

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

Untitled

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.

Ppasyasahas
84% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, colored grey with thin white stroke lines separating countries. The map uses the Mercator projection, centered on the prime meridian and rotated to show the eastern hemisphere. Users can pan and zoom interactively via a d3.zoom handler, which applies a transform to the grouped country paths during the zoom event. The geographic data comes from a TopoJSON file loaded with d3.json, and the features are extracted using topojson.feature before being drawn with d3.geoPath. The projection is configured with d3.geoMercator, and the zoom scale is restricted to a range of 1 to 8.

NNatalija Jansone
83% match