Question 2 Canada Provincial Wellbeing Index

100%

Question 2 Canada Provincial Wellbeing Index

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

This choropleth map displays illustrative wellbeing scores (0–100) across Canadian provinces and territories, with a yellow-green sequential color scale and an interactive tooltip showing exact values on hover. Built with D3 v7, it loads GeoJSON province boundaries from the codeforgermany/click_that_hood repository and renders them as SVG paths using d3.geoPath with a Mercator projection fitted to the container. A legend with a linear gradient and axis communicates the color scale, and the chart redraws responsively on window resize.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Question 2

This choropleth map displays a provincial wellbeing index for South Africa, using a green color scale to represent illustrative values from 0 to 100. The visualization loads TopoJSON data from a remote GitHub repository, converts it to GeoJSON features via topojson-client, and renders each province as a projected SVG path using d3.geoMercator and d3.geoPath. Interactive tooltips appear on hover, showing the province name and its associated wellbeing score through mouse events.

Vvunnamnandini13@gmail.com

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

76% 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…

ICE8CAmap

This choropleth map displays synthetic crime totals for each Canadian province, colored on a yellow-to-red sequential scale. It relies on the D3.js v7 API, projecting province boundaries with `d3.geoAlbers()` and rendering them as SVG paths through `d3.geoPath()`. The map loads GeoJSON from the `click_that_hood` repository, assigns random values, and includes an interactive legend with a color gradient and axis.

Ddandamidhun41613@gmail.com

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

72% match

Loading thumbnail…

Untitled

This visualization displays monthly unemployment rates across Canadian provinces, using a grid of colored tiles to represent rate changes. Each tile’s color encodes the magnitude of change, from green (negative) to white (neutral) to magenta (positive), while vertical positioning reflects each province’s rank. The chart uses a D3.js v6 SVG layout with `d3.scaleBand` for axes, `d3.scaleSequential` for color interpolation, and interactive tooltips. Data is loaded from a CSV file containing month, province, amount, changed, and rank fields.

Pparniantaghipour

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

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

71% match