Coastal Graph Distance II

100%

Coastal Graph Distance II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 24, 2014

This map of US counties visualizes graph distance from coastal counties. The animation cycles a rainbow color scale based on each county's distance. The visualization uses d3.js version 3, the topojson library for geographic data, and a queue library for asynchronous loading. The color of each county is set using `d3.hsl` based on the distance value, resulting in a rapidly changing, high-saturation effect.

AI-generated description

Ahh, my eyes! A deliberately retina-searing variation of the coastal graph distance map.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Coastal Graph Distance

This map shows the graph distance of each US county from the Pacific or Atlantic coast, with coastal counties in dark blue and counties nine or more counties away in light yellow. It recreates a Reddit map using TopoJSON. The code calculates distances by iteratively expanding from coastal counties, using `d3.queue` to load the US GeoJSON and TSV data, `topojson.neighbors` for adjacency, and `d3.geoPath` to render SVG paths with a color scale from `d3.scaleOrdinal`.

Mmbostock

84% match

Loading thumbnail…

US Map

This interactive visualization displays all US counties as a choropleth-style map rendered with a natural Earth projection using d3.geoPath. The map is drawn with SVG elements, featuring graticules and a sphere outline to provide geographic context. County boundaries come from a TopoJSON file loaded asynchronously and converted to GeoJSON features. Built with React and D3 v7, the visualization dynamically fills the browser window and uses the Poppins font for its minimal interface.

JJohn Lewis

75% match

Loading thumbnail…

Paint by Numbers II

This interactive map of U.S. counties lets users paint each county with one of nine colors, with selections shared via a URL hash. Dragging across the map assigns colors, while clicking the legend or pressing number keys switches the active color. Built with D3 v3 and TopoJSON, the visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.drag` for painting, and merges colored counties into SVG paths via `d3.geo.path`. County boundaries are rendered as a mesh, with a background stroke and interactive foreground paths.

Mmbostock

74% match

Loading thumbnail…

d3 choropleth map

This animated choropleth map visualizes the change in a numeric variable across US counties from 1817 to 2012 using a CSV time-series dataset. The map renders each county as a colored SVG path, with color intensity encoding the value for the currently selected year. A play button and timeline slider allow users to animate through years, updating the fill colors with a smooth transition. The visualization is built with D3 v3 and includes a legend to map color scale values, enabling temporal exploration of the spatial distribution of the data.

HHamishWoodrow

73% match

Loading thumbnail…

Gist d8a8c52a3d98232cd513f1f5364a6e5c

This example displays a choropleth map of U.S. county unemployment rates, using a blue sequential color scale ranging from light to dark shades. The map is rendered as SVG paths via `d3.geo.path` with an Albers USA projection, while county data is joined to `d3.map` values from an external TSV. State boundaries are drawn as a white mesh overlay using TopoJSON. The code relies on `queue`, `d3.json`, `d3.tsv`, and `d3.scale.quantize` to bin rates into nine classes.

JJn1532

73% match

Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey

72% match

Loading thumbnail…

country map

This visualization displays a map of the United States at the county level, using a green fill with black borders that highlight individual county boundaries. Hovering over any county changes its fill color to yellow. The map is rendered as SVG using D3 v5, with geographic projections handled by `d3.geoAlbersUsa` and `d3.geoPath`. County boundaries are generated from TopoJSON data loaded from the us-atlas package, and the code relies on `topojson.feature` to extract geographic features and `topojson.mesh` for boundary calculations.

Ddivyagunuguntla

72% match

Loading thumbnail…

Merging Counties III

This stress test visualizes a random subset of US counties, merged and colored via TopoJSON’s `topojson.merge` API. It shows a constantly cycling animation where new merged polygon groups fade in, highlight with distinct category colors, and fade out. The example uses D3.v3, `d3.select`, `d3.json`, and an AlbersUSA projection to render SVG paths. The underlying data source is a raw JSON file of US geometries from a gist.

Mmbostock

72% match