Gist 206fe25c8c762e30421c93a23e8a5d01

100%

Gist 206fe25c8c762e30421c93a23e8a5d01

✓ Published0🌍 Public

Last edited Feb 15, 2018

Created on Feb 15, 2018

This visualization charts the share of income held by different income groups across British Columbia and Vancouver from 1982 onward, comparing measures like market, total, and after-tax income. The display uses d3.scaleOrdinal for color encoding and d3.axisLeft/axisBottom for scaling, rendering lines or paths with d3.line to trace trends across years. Income groups are distinguished by hue, while the y-axis shows percentage shares, making it easy to compare the relative earnings of top, bottom, and middle percentiles over time.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 062e2198aa30fcbc94657e1e50de22e5

This interactive line chart uses D3.js to show grade-to-grade transition rates for British Columbia school students, with dropdown menus to select a demographic group and a comparison group. An animated slider scrubs through school years, triggering a brush interaction that updates the chart display. The visualization relies on D3’s time scale, linear scale for the slider, and SVG axes, while Bootstrap and Bootstrap Select handle the interface styling. The data appears to be sourced from the BC Ministry of Education’s public dataset on grade transitions.

MMbrownshoes

71% match

Loading thumbnail…

Irregular Histogram

This irregular histogram visualizes income distribution by adjusting the height of each bar to represent the quotient of people per income unit, a technique aligned with standard histogram normalization. The visualization loads data from an `income.csv` file and renders in SVG using the D3.js v3 library, employing `d3.scale.linear` for both axes and `d3.svg.axis` for tick marks. Each bin’s width is derived from the varying income ranges (e.g., 8.8, 30, 49.9), and the first bin is discarded to anchor the scale. The chart uses a steelblue fill for the rect elements and displays clear axis labels.

Mmbostock

70% match

Loading thumbnail…

Stacked-to-Grouped d3 v4

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

MMbrownshoes

70% match

Loading thumbnail…

Gist 40ca15ac0d6b9529e05fcfa15e22928d

This interactive map of British Columbia’s regional districts shows municipal solid waste disposal rates in kilograms per capita for 2014, with districts colored by a threshold scale. Hovering over a district reveals its exact rate, while a bar chart displays historical disposal trends for the selected region. The visualization uses D3.js with `d3.geo.path` and TopoJSON to render the map, and it dynamically updates a bar chart and line graph from the CSV dataset. Tooltips provide contextual population and tonnage figures on demand.

MMbrownshoes

69% match

Loading thumbnail…

Follow the money

A hierarchical tree diagram visualizes British Columbia gaming grant distributions, aggregating payments by grant type, sector, and subsector. Built with D3.js, the interactive visualization uses a collapsible tree layout where nodes represent categorical rollups and leaf nodes correspond to individual organizations. Payment amounts are summed through D3's nest and rollup operations, with a tooltip displaying details. The SVG rendering animates transitions when expanding or collapsing nodes, allowing viewers to trace funding flows from broad categories down to specific community recipients.

MMbrownshoes

68% match

Loading thumbnail…

Income Inequality

This visualization displays income inequality trends across countries using Gini coefficients, which range from 0 (perfect equality) to 1 (perfect inequality). The chart plots each country’s Gini index over time, allowing comparisons between nations and regions. The data is loaded from a CSV file and parsed using D3’s `csvParse` function, with numeric fields converted to numbers. The visualization dynamically updates its state through a custom `setState` function, re-rendering the display whenever new data is fetched or processed.

IIshaChid76

67% match

Loading thumbnail…

Income Inequality Pseudo-viz

The visualization displays the top 10 countries by income inequality, using Gini coefficients from OECD data, with bar lengths proportional to inequality values. It uses D3 v7’s data join and selection methods to render rectangles, with a placeholder for future color coding to distinguish G7 members. The current implementation manually embeds a small dataset in JavaScript rather than loading the full CSV, and only the `length` encoding is applied.

IIshaChid76

67% match

Loading thumbnail…

Canadian Income Tax Line Chart

The visualization compares average income tax rates across Canadian provinces and territories for different years. Users select a province and a base year from dropdown menus to highlight how its tax burden has changed over time, with the selected province’s current rates overlaid in green and the historical rates in red dashed lines. Built with D3.js (v3) and d3kit, the chart renders SVG line charts for all regions in the background as faint gray lines, using data from `avgTaxAll.json`. Interactive updates rely on D3’s selection API and event handling to redraw the highlighted paths.

BBrideau

67% match