Retina canvas map

100%

Retina canvas map

✓ Published0🌍 Public

Last edited Feb 19, 2017

Created on Feb 19, 2017

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.

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

77% match

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

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

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

70% match

Loading thumbnail…

Canvas+SVG hover stroke effect

This choropleth map of Spanish municipalities uses a dual-rendering strategy: SVG paths provide hover interaction while a Canvas context draws the color-coded population density fills. The map layers transparent SVG municipality outlines over the Canvas raster, which uses a threshold color scale to visualize population rates. When a user hovers over an SVG path, its stroke becomes visible, creating a highlight effect. The example utilizes `d3.geoPath` and `d3.scaleThreshold` to generate both the vector outlines and the Canvas-rendered fills.

LLuisSevillano

69% match

Loading thumbnail…

d3.geoPath + node-canvas

This example demonstrates how to render geographic data to a Canvas element using d3.geoPath with node-canvas, producing a stroked mesh of United States county boundaries. The rasterize script loads US Atlas TopoJSON data, converts it to GeoJSON with topojson-client, and passes it through d3.geoPath’s context method to draw paths into a 960×600 canvas. It then writes the resulting bitmap to a PNG file, showing server-side vector-to-raster conversion without a browser.

Mmbostock

67% match

Loading thumbnail…

New composite border in es-atlas

This example shows a map of Spanish municipal boundaries rendered with D3.js. It uses a composite border for the Canary Islands, a cartographic convention, alongside the standard municipal outlines. The code loads a TopoJSON file and applies a geographic identity projection with `d3.geoPath` to draw the shapes. It uses `topojson.feature` to extract the border and composite border objects, and the `d3-composite-projections` library to support the projection, resulting in an SVG visualization.

LLuisSevillano

67% match

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock

67% match