Skip to main content
SimilarExport ZIP
100%

NY state map with React and D3

✓ Published0🌍 Public
NNita
Last edited May 1, 2025
Created on May 1, 2025

This interactive map displays New York State’s counties with hover tooltips revealing county names and FIPS codes. The visualization uses React for component state and layout dimensions via a ResizeObserver, while D3.js handles geographic rendering with `d3.geoPath`, `d3.geoAlbers`, and TopoJSON data from the us-atlas package. County boundaries are drawn as SVG paths, and labels are positioned using path centroids.

AI-generated description

New York State County Map

An interactive map of New York State counties built with React and D3.js. Hover over counties to see their names and FIPS codes.

Features

  • Interactive county visualization
  • Tooltip with county information
  • Responsive design

Implementation

  • React for UI components and state management
  • D3.js for geographic visualization
  • TopoJSON for efficient geographic data representation
MIT Licensed

Similar vizzes

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.
89% 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
88% match
Loading thumbnail…

NY state map

A choropleth-style SVG map displays New York State's counties, filtered from a TopoJSON US atlas by state FIPS code. The map uses the Albers USA projection via `d3.geoAlbersUsa()` and renders county boundaries with `d3.geoPath()`. D3's data join methods add, update, and remove path elements as data changes. County shapes are filled pale green with gray strokes, sized within an 800 by 900 pixel SVG.

NNita
85% match
Loading thumbnail…

NY State Map 1 - working

This interactive map of New York State displays all county boundaries with a blue sequential color scale and marks ten major cities with labeled dots. It uses D3.js v7 with TopoJSON to load US states and counties from the us-atlas CDN, filtering features for New York’s FIPS code. The code applies d3.geoMercator projection with fitSize, renders paths via d3.geoPath, and adds hover effects on counties with tooltips showing FIPS codes.

NNita
85% match
Loading thumbnail…

NYS V2

This interactive map of New York State displays county boundaries, which change color on hover and can be clicked to zoom in and isolate a selected county while hiding the others. A tooltip shows the county name, and a return button restores the full map view. Built with D3 v7 and TopoJSON, it uses `d3.geoMercator`, `d3.geoPath`, and SVG elements, with county boundaries from a TopoJSON file and district data loaded from external CSV files.

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

NYS V3

An interactive choropleth map of New York State displays its counties, which change color and reveal a tooltip with the county name on hover. Clicking a county hides all others and shows a full-width “Return” button, though the code’s data-entry section is empty, so no additional details appear. Built with D3 v7 and topojson, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.geoBounds` to project and render GeoJSON/TopoJSON data, with SVG paths styled via CSS.

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

NY Counties

This visualization displays New York’s counties on a map, colored white with gray borders, and highlights each county in crimson on mouseover while showing its name and population in an info box. It uses d3.geoPath with a transverse Mercator projection, d3.queue to load TopoJSON county boundaries and population data, and topojson-client to convert geometries. The map also includes a blurred drop shadow and white overlay for a layered effect, with state boundaries drawn as a mesh.

MMTClass
82% match
Loading thumbnail…

Fork of Map NY fips 1

This interactive map of New York State counties visualizes housing market data, allowing users to toggle between median home prices and the number of sales for 2022, 2023, and 2024. The map uses D3’s `geoMercator` projection and `geoPath` to render county boundaries, with a `scaleSequential` color scale providing the legend. By clicking up to five counties, a sidebar table offers detailed year-over-year comparisons. The React frontend manages user selections, while D3 builds the SVG chart, controls, and tooltips.

NNita
82% match