Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published2🌍 Public
Llupica.matthew@gmail.com
Last edited Mar 24, 2023
Created on Jan 12, 2022
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
90% 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
90% match
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
88% 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
88% 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
86% match
Loading thumbnail…

NYS Map

This visualization displays a map of New York State’s counties, rendered as an SVG using React and D3. The code employs `d3.geoAlbersUsa` for projection, `d3.geoPath` for drawing, and TopoJSON to parse the county boundaries from a remote gist. County outlines are shown in white with black strokes, while interstate borders are hidden with no stroke. The map is static and loads asynchronously via `d3.json`, displaying a loading message until the data is ready.

Llupica.matthew@gmail.com
86% 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
85% match
Loading thumbnail…

map: NY Counties

This interactive map displays New York State counties using a glitchy, layered rendering technique. The visualization uses D3’s geoAlbersUsa projection and geoPath to render county boundaries from a TopoJSON source, with hover effects that highlight individual counties. The map also includes world landmasses and graticules, creating an overlapping collage effect where the state’s counties appear superimposed on global geography. React manages the component state while D3’s json and topojson.feature APIs load and parse the geographic data for SVG rendering. The stylized CSS uses semi-transparent fills and hover states to emphasize the experimental aesthetic.

Zzach b.
85% match