Untitled

100%

✓ Published0🌍 Public

Last edited Dec 7, 2021

Created on Dec 2, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive stacked bar chart displays unemployment data across U.S. states for different years, with a dropdown menu to select the year and a checkbox to toggle sorting by total value. The visualization uses D3 v5 to render SVG elements with smooth transitions between states, animating bar positions and heights over 750 milliseconds. Data is loaded from a CSV file, and the chart employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal to assign category colors. Stacked segments are created using d3.stack, with labels showing each state's total.

Yyc4004

75% match

Loading thumbnail…

31.Multi-Line Voronoi

This multi-line chart displays monthly unemployment rates for several metropolitan areas over time, with each city represented as a gray line. Hovering over the chart highlights the nearest point on the closest line and shows the corresponding city name and value. The example uses an invisible Voronoi tessellation, created with `d3.voronoi`, to map mouse position to the nearest data point across all lines, making interaction efficient. A checkbox toggles the visibility of this Voronoi overlay, which is rendered in red for inspection. The visualization is built with D3 v4 and SVG, loading data from an external TSV file.

深深度碎片

74% match

Loading thumbnail…

Multi-Line Voronoi with colors

This multi-line chart visualizes monthly unemployment rates across multiple U.S. metropolitan areas over time, with each line colored using a categorical scale. The chart uses an invisible Voronoi tessellation to enable precise mouseover interactions—the closest point on any line to the cursor is highlighted, and a tooltip displays the city name and value. A checkbox toggles the Voronoi overlay, which draws red cell boundaries when enabled. The data is sourced from the Bureau of Labor Statistics.

663anp3ca

73% match

Loading thumbnail…

Untitled

This interactive map of Canada displays province names in a tooltip as the mouse moves over each region. Hovering a province turns it red via a CSS `:hover` rule, while the tooltip div follows the cursor and is hidden on mouse-out. The visualization uses d3.v7’s `d3.json` to load GeoJSON data and `d3.geoAlbers` projection with `d3.geoPath` to render the SVG paths. Tooltip positioning and visibility are managed through CSS classes and inline styles.

YYerlan Yeszhanov

73% match

Loading thumbnail…

Choropleth

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values with a d3.scaleQuantize that bins rates from 0 to 15% into nine color classes. Rendered with SVG, the map uses a white state boundary overlay to delineate county borders, while the quantized color scale (from light blue to dark navy) visually distinguishes unemployment ranges. The visualization is built with D3 v4 and TopoJSON, and it includes a resize handler to scale the map responsively.

EEvertLagerberg

72% match

Loading thumbnail…

Gist 7bcb7bfb170746a20c14

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values from 0 to 15% using a quantize scale with nine discrete color classes. The SVG visualization uses a Mercator projection and TopoJSON data for county and state boundaries. Unemployment data is loaded from a TSV file and joined to county IDs via a `d3.map`, with each county’s fill class (q0-9 through q8-9) assigned by the quantized rate, producing a blue sequential palette from light to dark. County boundaries are stroked in white and state borders in white with rounded joins, while the background remains transparent. The example highlights the use of quantize scales for continuous-to-discrete mapping and suggests a threshold scale as an alternative for arbitrary ranges.

11wheel

72% match

Loading thumbnail…

Visu_Part3

This visualization shows unemployment rates across French regions from 2013 to 2017 as animated multi-line charts. Users can toggle between viewing all regions at once or selecting individual regions via radio buttons and legend clicks. The D3 v4 code loads CSV data, nests values by region, and draws SVG paths using `d3.line` with color-coded strokes. Legend text elements respond to clicks to toggle line opacity, while animated transitions update the display based on user selection.

AAminaSGitHub

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