colored-data.geojson

100%

colored-data.geojson

✓ Published0🌍 Public

Last edited Nov 14, 2016

Created on Oct 21, 2016

A choropleth-style map displays a small set of U.S. counties colored with a categorical palette. The visualization loads a GeoJSON FeatureCollection, where each county polygon includes a `fill` property defining its color. The code uses `d3.geoPath` to project and render the geographic shapes as SVG paths, assigning each county its designated fill color. It relies on the D3 library to handle the GeoJSON parsing and path generation.

AI-generated description

Similar vizzes

Loading thumbnail…

Choropleth Map of County Data

This choropleth map colors U.S. counties to visualize geographic data, with state boundaries drawn as white lines for contrast. The map is rendered as SVG using `d3.geoPath` to project TopoJSON geometry onto a 960×600 canvas. County and state shapes are styled via CSS classes, with the d3-scale-chromatic library available for color encoding. A small script sets a tooltip title on the label element, though the map itself does not display interactive data values.

SShabani Muswamba

82% match

Loading thumbnail…

USA geojson

This example displays a choropleth map of the United States using GeoJSON data from a gist, with each state’s population from 2010 encoded by color. It uses d3-geo’s `d3.geoPath` to render the state boundaries and fill them with a color scale based on the `POP2010` property. The map is drawn with SVG, and the layout is generated by projecting the geographic coordinates. The rendering demonstrates how spatial data can be visually encoded using standard D3.js geographic utilities.

JJn1532

80% match

Loading thumbnail…

Area Choropleth

This example shows a choropleth of U.S. counties where each county’s color encodes its geographic area on a logarithmic scale from brown (small) to steelblue (large). The map renders county boundaries as SVG paths using `d3.geo.path()` and TopoJSON, with state outlines drawn as white strokes. The fill color is computed by passing each path’s area, obtained via `path.area(d)`, into a `d3.scale.log()` with a domain of 10 to 500. The data comes from a local `us.json` TopoJSON file, and the visualization uses d3.v3.

Mmbostock

79% match

Loading thumbnail…

Choropleth Map of County Data

A choropleth map shades U.S. counties by poverty rate, with a color legend and state boundaries overlaid. The visualization loads GeoJSON topology and CSV data via promises, then uses `d3.geoPath` and TopoJSON to render county shapes, while `d3.scaleThreshold` and `d3.schemeGreens` map poverty percentages to fill colors. County paths include tooltips showing the exact rate, and an axis below the map labels the legend’s tick values.

YYash G

79% match

Loading thumbnail…

USA Map

This example displays a choropleth map of the United States, coloring each state according to a value from a local CSV file. The code loads GeoJSON geographic data and uses `d3.geoPath` for map rendering, while a linear color scale maps data values to a light-to-dark blue gradient. The map uses SVG paths with white strokes, and states without corresponding data appear gray. It demonstrates loading external data via `d3.csv` and `d3.json`.

Ppardha1411

78% match

Loading thumbnail…

new data with json

This example displays a choropleth map of U.S. counties, colored by yearly data values from 2000 to 2021. A vertical slider with a play button animates through years, updating the fill colors with a sequential scale. The map is rendered as SVG paths using d3.geoPath with geoIdentity projection, based on TopoJSON data from the us-atlas library. Hovering reveals county names, state abbreviations, and the current value via SVG titles, while state borders are drawn as a mesh overlay.

CChase Hall

78% 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

78% 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

77% match