projection

100%

✓ Published0🌍 Public

Last edited Apr 11, 2026

Created on Apr 10, 2026

This geographic map of Canada displays temperature distribution based on latitude, using a blue-to-red color gradient to represent colder northern and warmer southern regions. The visualization loads GeoJSON data from a GitHub repository and renders the country’s provinces using D3.js v7 with the `d3.geoMercator` projection and `d3.geoPath` for shapes. Province colors are computed from centroid latitudes via a simulated temperature model, with a legend gradient showing the cold-to-warm scale. The implementation utilizes `d3.scaleSequential`, `d3.interpolateRdYlBu`, and SVG rendering.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

75% match

Loading thumbnail…

Choropleth Map

This choropleth map shows how Canada’s provincial and territorial populations changed annually from 1991 to 2019. Animated transitions recolor each region as a slider or playback control (not implemented here) would step through years. The visualization uses D3 v5 with `d3.geoPath` and a `d3.geoAlbers` projection to render TopoJSON boundaries, while population data is loaded from a CSV. Province fill colors are intended to map to population values, though the current code leaves them white.

GGraceXT

75% match

Loading thumbnail…

Gist 5e36771400038b0c861c6617c622c5f7

A map of Canada visualizes interprovincial migration flows for 2017 Q2 and Q3, using animated, arrow-headed routes and scaled circles to show the net movement of people between provinces and internationally. Provincial boundaries are rendered from a TopoJSON file via `d3.geoPath` with a conic conformal projection, while migration data from a CSV file drives the visualization. A dropdown menu lets users switch between time periods, and D3 v4 handles the SVG rendering and animations.

MMbrownshoes

74% match

Loading thumbnail…

Canada Map

This example displays a static choropleth map of Canada rendered as SVG paths. It loads GeoJSON data from `canada.json` and uses `topojson.feature` to convert the TopoJSON collection. A Mercator projection (`d3.geoMercator`) centers the country, with `d3.geoPath` generating the path data for each province. The map applies a uniform gray fill and dark strokes, using D3 v7 with a standard SVG element.

GGogineni44

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

74% match

Loading thumbnail…

ICE-8_Q1.2_Canada_CostIndex_Map

This choropleth map displays Canadian provinces colored by an arbitrary cost index, with gray indicating missing data. Built with D3 v7, it loads a Canada GeoJSON file and joins it to the linked dataset on province name. The map uses a Mercator projection via `d3.geoMercator` and renders paths with `d3.geoPath`. A sequential color scale maps the cost index values, and interactive tooltips appear on mouseover, while a linear gradient legend explains the color encoding.

LLikhitaMudagereShivaraj@my.unt.edu

74% match