P3 - Task 1 — VizHub

100%

P3 - Task 1

✓ Published0🌍 Public

Last edited Mar 6, 2020

Created on Mar 6, 2020

This choropleth map displays the population of Canadian provinces and territories for a given year, with a slider intended to change the year. Each province is filled with a blue color scale based on its population value, using a linear scale from white to blue. The visualization is built with React, D3 v5, and TopoJSON, rendering geographic paths via `d3.geoPath` and `d3.geoAlbers`. Population data is loaded from a CSV file and joined to the map features by province name.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

84% match

Loading thumbnail…

Map exemple

This interactive choropleth displays global population estimates, with each country filled by a color scale ranging from light red to dark red according to its population. Built with D3 v5, the map uses TopoJSON to convert world-atlas GeoJSON features into SVG paths via a Mercator projection, while an accompanying TSV file supplies the population attributes. The visualization supports zooming and panning, and countries turn purple on hover.

EElodie31190

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

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

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

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

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

Data Viz Project

This example shows a choropleth world map colored by estimated population, sourced from World Atlas data loaded via `d3.json` and `d3.tsv`. A linear color scale maps population values from blue to dark blue, while hovering highlights individual countries. The map is rendered with `d3.geoMercator` and `d3.geoPath`, using TopoJSON features converted with the `feature` function, and the visualization updates responsively to the window size.

LLauren

71% match