Gist 5e36771400038b0c861c6617c622c5f7

100%

Gist 5e36771400038b0c861c6617c622c5f7

✓ Published0🌍 Public

Last edited Mar 14, 2018

Created on Mar 14, 2018

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.

AI-generated description

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

80% match

Loading thumbnail…

Chord Diagram

This chord diagram visualizes directed migration flows between Canadian provinces and territories, using a circular layout where arcs represent total outbound movement and connecting ribbons show the volume of migration from origin to destination. The matrix data is hard-coded in the script, drawn from the included `mig.csv` file. Built with d3.v4, the visualization uses `d3.chord` for layout, `d3.arc` for group segments, and `d3.ribbon` for the directed links, all rendered as SVG with ordinal color scaling and group tick labels formatted in thousands.

MMbrownshoes

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

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…

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…

Untitled

This example presents an interactive map of Canada that displays a tooltip with the name of each province on hover. The map is rendered as SVG using d3.v7, with province shapes generated via `d3.geoPath` and the Albers projection. On mouse movement over a province, a styled `div` tooltip is positioned and populated with the province’s name, while the province’s CSS class changes its fill color; on mouse-out, the tooltip is hidden. The geographic data is loaded as JSON from a remote gist.

Ssnehareddygurram

74% match

Loading thumbnail…

Untitled

This example shows an interactive map of Canada with SVG paths representing provinces, initially colored dark green. When the mouse hovers over a province, the CSS class changes to turn it red and a tooltip div appears, displaying information about the province. The tooltip is positioned and shown by modifying its CSS properties on mouse move, and hidden on mouse out. Built with D3.v7, it loads GeoJSON data from GitHub and renders paths using `d3.geoPath` with an Albers projection, while D3's `select` and `join` methods handle the interactive state changes.

PPedram

74% match