Skip to main content
SimilarExport ZIP
100%

D3 + Leaflet for Canada

✓ Published0🌍 Public
BBrideau
Last edited Nov 30, 2015
Created on Nov 24, 2015

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.

AI-generated description

D3 + Leaflet: Canadian 2011 Polling Districts.

Adapted from Mike Bostock's D3 + Leaflet

Similar vizzes

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
86% match
Loading thumbnail…

D3 + OpenLayers 3 for Canadian Polling Districts

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.

BBrideau
86% 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
84% 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…

Fork of Let's make a map with D3.js!

This example visualizes Canada’s provinces as a choropleth map on a blue spherical background using a natural Earth projection. The map is rendered with SVG paths generated by `d3.geoPath` and `d3.geoNaturalEarth1`, while TopoJSON data is fetched and converted to GeoJSON via the `feature` method. Province boundaries appear as light green shapes with thin black strokes, and the sphere itself is drawn as a distinct path. The code loads data from a GitHub gist and relies on D3 v5 and TopoJSON v3.

SSeldomtimely
76% match
Loading thumbnail…

Canada Map

This example presents a choropleth-style map of Canada’s provinces, rendered as orange SVG paths with white strokes on a blue background. It uses `d3.json` to load the `provinces-10m.json` TopoJSON dataset from the `canada-atlas` package, then converts it to GeoJSON via `topojson.feature`. The `d3.geoPath` generator applies a `d3.geoMercator` projection with a scale of 1500 to draw each province boundary, with styling handled through static attributes.

NNitheeshSama
75% match
Loading thumbnail…

ICE-8_CanadaMap

This example visualizes a map of Canada with its provinces distinguished by light blue fill and white borders, rendered as scalable vector graphics. It loads TopoJSON data from a GitHub gist and uses d3.geoMercator for projection, with d3.geoPath converting geographic coordinates into SVG paths. The code employs topojson.feature for extracting province geometries and topojson.mesh for drawing internal boundaries, while d3.json handles asynchronous data loading.

Jjgaur96@gmail.com
75% match
Loading thumbnail…

Untitled

This example displays a choropleth map of Canada using D3 v7, with provinces rendered as SVG paths via `d3.geoPath` and an Albers projection. Hovering over a province changes its fill color from green to red and triggers a tooltip div, positioned via mouse event coordinates, that shows the province name from the loaded GeoJSON data. The tooltip is shown and hidden by toggling a CSS class, and the map data is fetched from a GitHub-hosted GeoJSON file.

SSUSHMA CHIRRA
75% match