Skip to main content
SimilarExport ZIP
100%

D3 + OpenLayers 3 for Canadian Polling Districts

✓ Published0🌍 Public
BBrideau
Last edited Dec 4, 2015
Created on Dec 4, 2015

This example combines D3 and OpenLayers 3 to render Canadian polling district boundaries from a TopoJSON file onto a Stamen watercolor tile map. It uses a custom OpenLayers `ol.source.ImageCanvas` with a `canvasFunction` to draw the districts via `d3.geo.path` and a Mercator projection. The code transforms geographic bounds between EPSG:4326 and EPSG:3857, calculates scale and translation to align the D3-rendered vector features with the map’s current view. Election district polygons display names, province codes, and census population data from the JSON source.

AI-generated description

D3 + OpenLayers 3 for Canadian Polling Districts.

Adapted from OpenLayers 3 D3 Integration Example

Similar vizzes

Loading thumbnail…

D3 + Leaflet for Canada

A choropleth-style map of Canadian 2011 federal polling districts is rendered over Leaflet base tiles, using D3.js to project and draw the district boundaries as SVG paths. The code uses `d3.geo.path` with `d3.geo.transform` to convert geographic coordinates to Leaflet layer points, and `topojson.feature` to decode the district geometries from the provided TopoJSON file. Hovering highlights each district in red based on the CSS `path:hover` rule. The map is built with D3 v3 and Leaflet v0.7.7, initialized to a view centered over Canada.

BBrideau
86% match
Loading thumbnail…

Canadian Polling Distrtict TopoJSON

This map shows Canadian federal electoral districts, with each district rendered as a gray path that highlights red on hover. The visualization uses the TopoJSON format to encode district boundaries and relies on the `d3.geo` path API to project and draw the geographic data. The projection is a Lambert conformal conic, applied specifically for Canada, with the map centered on the country and scaled to fit an SVG canvas. The district attributes include English and French names, province, and population data from the 2011 census, though only the district shapes and interactive hover effect are visually presented.

BBrideau
85% match
Loading thumbnail…

Canadian Province TopoJSON

This example displays a mesh of Canadian federal electoral districts from a 2011 TopoJSON file, highlighting each district boundary with a thin black stroke. Red dots mark the first coordinate of every arc in the topology, revealing the underlying data structure. The map uses a conic conformal projection and is rendered as SVG via `d3.geo.path`. The code employs `topojson.mesh` to extract boundaries and appends circles using each arc’s transformed starting point, based on the TopoJSON transform.

BBrideau
81% match
Loading thumbnail…

Canadian Province TopoJSON

This example displays a graticule-free map of Canadian provinces as a topojson mesh, rendered as SVG paths with black outlines. The code uses d3.geo.conicConformal for projection and d3.geo.path to draw the features. A scatter of small circles marks each arc’s starting point. The data comes from a topojson file that refines a GeoJSON FeatureCollection sourced from Natural Earth.

BBrideau
76% match
Loading thumbnail…

D3.js Canvas Example

This interactive map displays the provinces of Ontario, Canada, using a custom Albers projection. Users can click on individual divisions to zoom in and highlight them in blue, with a reset function to restore the original view. Built with D3.js v5 and React, it fetches GeoJSON data from GitHub and renders paths using `d3.geoPath`, with zoom behavior driven by `d3.zoom` and color transitions applied via `transition.attrTween`.

PPedram
73% match
Loading thumbnail…

D3: Loading GeoJSON data and generating SVG paths

This example combines Canadian health data with geographic boundaries to create a choropleth map. It loads GeoJSON province outlines via `d3.json` and CSV health statistics via `d3.csv`, merging them by province name to color each region using a `d3.scale.quantize` color scale. The map uses a `d3.geo.conicConformal` projection and `d3.geo.path` for SVG rendering, with population circles from a third CSV overlaid using the same projection.

MMbrownshoes
73% match
Loading thumbnail…

Gist 69526c10c61369e9ebc7f2479ab96375

This example renders a choropleth map of British Columbia’s regional districts from a TopoJSON file, coloring each polygon by its `FEATURE_AREA_SQM` property. The visualization uses a custom `d3.geoPath` projection to draw district boundaries and a sequential color scale to encode area. Hover effects are implemented through a `transition.attrTween` that animates the fill color on selection, while a tooltip displays the district name and area. The map is composed using D3’s topology and geometry APIs, with the data sourced from the province’s legal boundary records.

MMbrownshoes
72% match
Loading thumbnail…

Canada p2

This example displays a map of Canada using a conic conformal projection, with SVG paths outlining the country's boundaries and small circles marking the starting point of each arc in the TopoJSON data. The visualization is built with D3 v5, using `d3.geoPath` and `topojson.mesh` to render the geographic shapes, while the projection is configured with specific parallels and rotation. The data originates from a local JSON file containing topology information, and the map is drawn within an SVG canvas.

Kkasalwelengwe@gmail.com
71% match