Skip to main content
SimilarExport ZIP
100%

NYC Map

✓ Published0🌍 Public
IIan Wright
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from Simple World Map

This example visualizes the five boroughs of New York City using a conic equal-area projection. The map displays geographic boundaries as vector paths, with a graticule overlay and an outline for context. It fetches TopoJSON data from a GitHub repository and converts it to GeoJSON using `topojson-client`. The rendering relies on `d3.geoPath` and `d3.geoConicEqualArea` from the D3 library, with SVG elements joined via `selectAll().join()`. The projection parameters are tuned specifically for the city’s latitude and longitude range.

AI-generated description

A basic world map.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

NYC borough map with interactive legend

An interactive map of New York City's five boroughs displays traffic crash counts from a CSV dataset as circular markers with numeric labels, overlaid on a TopoJSON-derived GeoJSON map. Users hover over legend items or borough polygons to highlight matching regions while dimming others. The visualization uses React for component state and layout, D3 v7's `geoMercator` and `geoPath` for the map projection, and `select` for SVG updates. A semi-transparent legend communicates the fixed borough color scheme.

JJose Morales
79% match
Loading thumbnail…

nyc boroughs

This map displays the five boroughs of New York City from a GeoJSON file. The visualization uses the `d3.geoPath` projection to render the polygon boundaries, with each borough's name and code visible in the tooltip. The data is sourced from a gist by Jn1532 and drawn using the D3.js library to create an interactive geographic representation. The map is presented on a blank canvas, allowing users to explore the distinct shapes of Manhattan, Brooklyn, Queens, the Bronx, and Staten Island.

JJn1532
79% match
Loading thumbnail…

Fork of NYC Borough map

A responsive world map renders country boundaries from a TopoJSON file fetched from the visionscarto-world-atlas package, converted to GeoJSON via `feature` from `topojson-client`. The React app manages viewport-size state and passes the data to a separate `viz` module, which builds the visualization using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. Countries fill with a light gray and white strokes overlaid on a graticule grid and outline, all rendered as SVG paths.

JJose Morales
78% match
Loading thumbnail…

NYC Borough map

This map of New York City boroughs uses distinct colors for each borough, with semi-transparent circles and white text labels displaying the number of motor vehicle crashes per borough. The visualization loads TopoJSON geographical data and CSV crash statistics, then renders them as an SVG using React, D3’s `geoMercator` and `geoPath` projections, and `topojson-client`’s `feature` conversion. Circle radius is determined by the digit count of crash totals, providing a quick comparison of crash frequency across the five boroughs.

JJose Morales
77% match
Loading thumbnail…

Fork of Portland Map

This map visualizes Portland neighborhoods using a conic equal-area projection, rendering geographic boundaries as SVG paths from a TopoJSON dataset. The code leverages D3’s `geoConicEqualArea` and `geoPath` for projection and path generation, with React managing the component structure. The dataset is loaded via `d3.json` from a GitHub gist, and the resulting paths are styled with a teal stroke, displaying the city’s neighborhood outlines without additional thematic encoding.

VVAbhiram99
75% match
Loading thumbnail…

Interactive NYC Borough map

An interactive map of New York City's five boroughs, colored distinctly, serves as a base for exploring traffic crash data. Users toggle checkboxes in a legend to display layers of colored points representing injured or killed cyclists, pedestrians, and motorists. The map shows these incident locations as colored circles at varying opacities. Hovering over a borough reveals a tooltip with summary crash statistics. Built with React, it uses D3's `geoMercator` for projection, `geoPath` for drawing, and `topojson-client` for handling geographic data, visualizing point data loaded from CSV files.

JJose Morales
75% match
Loading thumbnail…

Portland Map

This visualization shows a map of Portland neighborhoods using a conic equal-area projection, rendered as stroked SVG paths. It uses `d3.geoPath` to project and draw the neighborhood boundaries from TopoJSON data, with the geographic projection centered on Portland. The map is displayed in a React component that fetches and parses the data via `d3.json` and `topojson.feature`. The styling applies a teal stroke to the paths, creating a clean, minimal map view.

DDINESH SAI BOPPANA
74% 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
74% match