Simple canvas map

100%

Simple canvas map

✓ Published0🌍 Public

Last edited Feb 19, 2017

Created on Feb 19, 2017

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Assign data from csv to a canvas map

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.

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

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

77% match

Loading thumbnail…

RBush+canvas+svg

A choropleth map of Spanish municipalities colors each region by population variation, using a canvas basemap for the filled polygons and an SVG overlay for a hover outline. The code builds an R-tree spatial index with `rbush` to quickly identify the municipality under the cursor, then renders a highlighted `d3.geoPath` in SVG. It uses `d3-geo` with the `geoConicConformalSpain` projection and `topojson-client` to load boundaries, with tooltip data from a companion JSON file.

LLuisSevillano

74% match

Loading thumbnail…

spanish provinces

A choropleth-style map of Spanish provinces rendered on a canvas, colored with a light yellow fill and gray borders, plus a dashed line marking the boundary between the Iberian Peninsula and the Canary Islands. The visualization uses a composite conic conformal projection handled by the custom `d3.geo.conicConformalSpain` function, with TopoJSON data presimplified via `topojson.presimplify`. It leverages `StaticCanvasMap` from the spam library to manage partial rendering and efficient spatial indexing through RBush. Boundaries are stroked with `CanvasRenderingContext2D`, and an interactive hover state is prepared for future mouse tracking.

LLuisSevillano

73% match

Loading thumbnail…

Gist 7bcb7bfb170746a20c14

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values from 0 to 15% using a quantize scale with nine discrete color classes. The SVG visualization uses a Mercator projection and TopoJSON data for county and state boundaries. Unemployment data is loaded from a TSV file and joined to county IDs via a `d3.map`, with each county’s fill class (q0-9 through q8-9) assigned by the quantized rate, producing a blue sequential palette from light to dark. County boundaries are stroked in white and state borders in white with rounded joins, while the background remains transparent. The example highlights the use of quantize scales for continuous-to-discrete mapping and suggests a threshold scale as an alternative for arbitrary ranges.

11wheel

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

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

72% match