Skip to main content
SimilarExport ZIP
100%

NY State Map 1 - working

✓ Published1🌍 Public
NNita
Last edited May 6, 2025
Created on May 6, 2025
Forked from Texas State Map

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.

AI-generated description

New York State Map

This project displays an interactive map of New York State with county boundaries and major cities.

Features

  • Visualization of all New York State counties
  • Major cities marked with labels
  • Interactive elements with hover effects on counties
  • Responsive design that works on different screen sizes

Implementation Details

The map is built using:

  • D3.js for data visualization
  • TopoJSON for geographical data
  • Modern JavaScript techniques

Usage

Simply open the index.html file in a web browser to view the map.

MIT Licensed

Similar vizzes

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 with React and D3

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.

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
84% match
Loading thumbnail…

NY Counties

This example presents a map of New York State counties, colored white with gray borders, against a backdrop of the broader U.S. boundary with a subtle drop-shadow effect. Hovering over a county highlights it in crimson and displays its name and population in an overlay. The visualization uses D3 v4 with `d3.geoPath` and a transverse Mercator projection, loading TopoJSON county geometries and population data from a GitHub repository. The map renders as SVG, leveraging a blur filter and `topojson-client` for feature conversion and state boundary meshing.

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

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
81% match
Loading thumbnail…

Fork of NY State Map 2 - working

This interactive choropleth map visualizes 2023 median home prices and sales volume for New York State counties. A sequential blue color scale encodes price magnitude, while hovering reveals a tooltip with county FIPS, median price, and sales count. The map uses D3.js v7 and TopoJSON with a `d3.geoMercator()` projection, drawing county paths via `d3.geoPath()` and loading data from a local CSV. The visualization includes a gradient legend and state boundary, with counties lacking data rendered in gray.

NNita
81% 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.
81% match