Skip to main content
100%

Gist 385dfb7948133ce98410abfeab56361f

✓ Published0🌍 Public
AAlan McConchie
Last edited Apr 6, 2021
Created on Apr 6, 2021

This visualization compares two renderings of New York State’s shoreline: a simplified GeoJSON feature collection and a projected TopoJSON topology. Using the `d3.geoPath()` projection, it draws both datasets as map layers to illustrate differences in coastline detail and coordinate transformation. The simplified version shows a coarse, multi-polygon outline, while the topology version uses delta-encoded arcs to represent the full shoreline, demonstrating how compact topological data can render the same geographic shape.

AI-generated description

Similar vizzes

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
Loading thumbnail…

ONE MAP TO RULE THEM ALL!

This example visualizes a static map of New York State’s counties, rendered as green filled paths on a light background. The code loads a TopoJSON file from a GitHub Gist and converts it into GeoJSON features using the `topojson` library. It then applies the `d3.geoAlbersUsa()` projection and draws each county with `d3.geoPath`. The visualization is framed within a 900-by-600 SVG container, with the map’s shape defined by the provided data and a simple border, but it includes no interactive or clickable elements despite the page’s title.

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

Gist ea51c362645dc8fb9bdbba440558b37a

Atlas of the United States, using a TopoJSON shapefile rendered with `d3.geoPath` and a custom Albers projection. The map is overlaid with a graticule generated by `d3.geoGraticule`, and states are colored by a choropleth scale. The visualization is drawn on an SVG canvas, and the code uses `d3.json` to load the TopoJSON data and `topojson.feature` to convert it into GeoJSON. A tooltip appears on hover, displaying the state name and value.

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

Gist 11520211

This example visualizes the geographic boundaries of US states and counties using a TopoJSON file that encodes land, county, and state outlines. Built with D3, it renders the map from the `us.json` TopoJSON data, which contains geometry collections for counties and states. The visualization likely uses D3's projection and path generators to draw the geographic shapes, displaying the boundaries with distinct styling for counties and states. The minimal code structure suggests a basic interactive or static map, with the data provided in a structured TopoJSON format.

CCaged
73% match
Loading thumbnail…

U.S. TopoJSON

This visualization displays U.S. state and county boundaries extracted from a TopoJSON file served from d3js.org. A blurred, semi-transparent silhouette of the nation appears behind a solid white version, creating a subtle depth effect. The code uses d3.geoPath to render the features, while topojson.feature and topojson.mesh convert the TopoJSON data into GeoJSON paths for drawing.

Mmbostock
73% match
Loading thumbnail…

Gist 4047791

This example renders a single MultiPolygon geographic feature—a small island coastline—using D3’s `d3.geoPath` to project and draw the shape onto a canvas. The raw GeoJSON coordinates define the polygon’s boundary, and the visualization shows the resulting landmass as a filled path. The code relies on D3’s geographic projection pipeline to convert latitude and longitude points into screen-space coordinates, but does not include axes, labels, or interaction. It is a minimal demonstration of how a GeoJSON geometry can be displayed directly with D3’s path generator.

Aandrewxhill
73% 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
72% match