Assign data from csv to a canvas map

100%

Assign data from csv to a canvas map

✓ Published0🌍 Public

Last edited Feb 19, 2017

Created on Feb 19, 2017

A choropleth map of the Portuguese island of La Palma colors municipalities by unemployment rate, with values assigned from a CSV file via their common ID codes. The visualization overlays land-use polygons and road networks from a TopoJSON file onto the unemployment data. Using D3.js, it renders directly to a Canvas with `d3.geoPath` and `.context(context)`, applying a threshold color scale to the unemployment percentages. The code combines `d3.queue` for deferred loading of the JSON and CSV, and `topojson.feature` to extract map geometries before drawing each layer.

AI-generated description

A series of blocks for the QGIS-and-d3 workshop at Medialab-Prado Madrid (02/19/2017).

Similar vizzes

Loading thumbnail…

Simple canvas map

A simple canvas map displays unemployment rates across the municipalities of a Spanish island using a threshold color scale. The visualization loads a TopoJSON file with `d3.json` and renders directly to a canvas element via `d3.geoPath`, iterating through each municipality to fill its polygon with color based on the unemployment value. White dashed lines stroke municipal boundaries, while a solid line outlines the island. The project is part of a QGIS and d3 workshop by LuisSevillano.

LLuisSevillano

86% match

Loading thumbnail…

Spanish municipalities choropleth test with Canvas and preprojected TopoJSON

A choropleth map of Spanish municipalities colors each region by population density using a threshold color scale. The visualization renders on a Canvas via `d3.geoPath`, reading preprojected TopoJSON geometry and joining it to CSV population data by municipality ID. A national border is stroked afterward for context. The map uses a forked `d3-geo-projection` pipeline to streamline drawing performance.

LLuisSevillano

80% match

Loading thumbnail…

Retina canvas map

A canvas map of São Miguel Island renders land use, municipal unemployment rates, and road networks from a QGIS-derived TopoJSON file. It uses d3.geoPath with a null projection to draw features onto a 2D canvas context, applying a threshold color scale to municipalities and custom stroke and fill styles for forests, residential areas, and road classes. The code also handles high-DPI displays by scaling the canvas context with the device pixel ratio.

LLuisSevillano

75% match

Loading thumbnail…

Projected Choropleth

A choropleth map shows unemployment rates by U.S. county, using a blue sequential color scale with nine quantized classes for rates from 0 to 15 percent. State boundaries appear as white lines, while counties are drawn as SVG paths. The map uses pre-projected TopoJSON data, created via the `topojson` command-line tool with the `d3.geo.albersUsa()` projection, and renders using `d3.geo.path()`. County geometries and unemployment rates are joined into a single file during preprocessing, eliminating separate data loads. This variation of the classic unemployment choropleth simplifies the workflow by embedding the projection and data join directly into the TopoJSON generation step.

Mmbostock

74% match

Loading thumbnail…

D3 Example

This interactive choropleth map visualizes 2010 unemployment rates by census tract in San Mateo County, California. It uses D3’s geo and zoom behaviors to render SVG paths from TopoJSON shapefile data, with colors scaled by an unemployment dataset from the county’s open data portal. Hovering reveals a tooltip with the exact percentage for each tract. The map is drawn using `d3.geo.mercator`, `d3.geo.path`, and `d3.behavior.zoom`.

MMatteoTomassetti

73% match

Loading thumbnail…

Choropleth

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values with a d3.scaleQuantize that bins rates from 0 to 15% into nine color classes. Rendered with SVG, the map uses a white state boundary overlay to delineate county borders, while the quantized color scale (from light blue to dark navy) visually distinguishes unemployment ranges. The visualization is built with D3 v4 and TopoJSON, and it includes a resize handler to scale the map responsively.

EEvertLagerberg

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…

Choropleth

A choropleth map of U.S. county unemployment rates for August 2016, drawn as SVG paths using `d3.geoPath`, colors each county with a `d3.scaleThreshold` and the `d3.schemeBlues` color scheme. A legend displays the color scale via a linear axis. The map uses TopoJSON from the U.S. Census Bureau and unemployment data from the Bureau of Labor Statistics, loaded with `d3.queue` and `d3.tsv`. State boundaries are overlaid as a white mesh using `topojson.mesh`.

Mmbostock

73% match