Untitled

100%

✓ Published0🌍 Public

Last edited Jan 15, 2022

Created on Jan 12, 2022

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive map displays the towns of New York State, rendered as SVG paths using TopoJSON data. Users can click any town to zoom in on it with a smooth transition, and clicking again returns to the full state view. The visualization uses `d3.geo.albersUsa` for the projection and `d3.geo.path` for drawing, with click handling that triggers a 750-millisecond `g.transition` to scale and translate the view. The active town is highlighted in sky blue via CSS class toggling, while county borders remain white.

Llupica.matthew@gmail.com

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

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

87% match

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

87% match

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

85% match

Loading thumbnail…

Untitled

This choropleth map displays New York state’s cities and towns as red, semi-transparent polygons with black borders, rendered on a whitesmoke background using SVG. It uses `d3.json` to load TopoJSON data from a gist, converts it to GeoJSON with `topojson.feature`, and draws the map with `d3.geoPath`. The map is static, with no interactions, scales, or projections specified, and only includes a minimal styling for the county class.

Llupica.matthew@gmail.com

83% match

Loading thumbnail…

Untitled

This example visualizes the counties of New York State using a Transverse Mercator projection, with state boundaries outlined and counties filled in gray. Hovering over a county highlights it in light blue. The code loads US TopoJSON data via `d3.json`, extracts New York using `topojson.feature`, and applies a clipping path to restrict county paths to the state outline. It uses `d3.geo.path` for rendering and `path.bounds` to auto-fit the projection scale and translation.

AAnnie Ulichney

82% match