ladder-sm

100%

✓ Published0🌍 Public

Last edited Mar 20, 2018

Created on Mar 20, 2018

This visualization shows intergenerational income mobility across racial groups and genders by plotting the probability of a child reaching each income quintile given their parents' income quintile. Each chart displays stacked bars representing cumulative probabilities, with bar opacity encoding the child's income level. The code loads tabular data from a TSV file, uses d3.nest and d3.conventions to organize and scale the data, and renders SVG rects with tooltips via d3.attachTooltip.

AI-generated description

doodling after the deadline.

maybe transitions to show parent_q? or to switch between household and individual?

Similar vizzes

Loading thumbnail…

regl-ladder

This animated scatterplot uses WebGL to render 20,000 points representing the economic mobility of white and black men, arranged in a "ladder" comparing outcomes across income quintiles. Each dot eases along a path from its starting position to a target percentile line, with blue and orange encoding racial groups. The visualization iterates from a static SVG version through canvas-based approaches before settling on a regl implementation for performance, enabling many more points on screen. The final version optimizes rendering by passing precomputed arrays of attributes to the vertex shader and animating the points along their trajectories over time.

HHugoberry

76% match

Loading thumbnail…

income-transition

The visualization "income-transition" animates 1,500 circles representing people moving from a starting income quintile to an ending one, illustrating income mobility. Rendering with SVG via a custom `d3.select` and `d3.conventions` API, the animation chains transitions to move circles horizontally across the canvas, fading them in and out. The data is synthetic, generated with `d3.range` and random quintile assignments, while a tooltip div is prepared in the script.

11wheel

70% match

Loading thumbnail…

regl-ladder

This example animates 20,000 points representing race and class mobility for white and Black men, based on a rough draft of a New York Times chart. Each point moves horizontally across the screen while easing vertically between starting and ending income positions, with blue and orange dots distinguishing groups. The animation is rendered with regl, a WebGL library, using custom vertex and fragment shaders to achieve high performance. It also includes an SVG-based initial version and a canvas particle approach, both referenced in the README, and uses d3.js for scales and layout.

11wheel

70% match

Loading thumbnail…

Fork of Analysis using scatterplots

This interactive visualization analyzes race-based wealth inequality in the U.S. from 1963 to 2016, using both scatterplots and vertical bar charts to display median family wealth across White, Black, and Hispanic households. A dropdown menu lets users switch between racial groups, triggering smooth transitions that reposition the data points and bars via D3’s transition API. The chart uses d3.scaleLinear for axes, d3.extent for domain scaling, and d3.csv to load data from the TidyTuesday repository.

IIsabel Cayer

67% match

Loading thumbnail…

Irregular Histogram (Lollipop)

This example shows the income distribution of a population using an irregular histogram rendered as vertical lollipop sticks. Each line’s height encodes the number of people in a given income bracket, with the x-axis positioned at each bin’s income value and the baseline at the bottom. The visualization uses d3.v3 with SVG lines, a linear x and y scale, and d3.svg.axis for the axes. The data is loaded from a local CSV file, and the bin values are coerced to numbers before setting scale domains.

Mmbostock

67% match

Loading thumbnail…

A6 Scatterplot

This scatterplot visualizes the relationship between age and income, with each circle colored by gender using a categorical color scale. The chart uses D3.js v7 to load CSV data from a GitHub gist, scales the x-axis starting at age 15 and the y-axis from 5000 income, and renders SVG circles with axes labeled "Age" and "Income." A d3-legend color legend titled "Gender" identifies the categories, while the styling sets black axis lines and text. The rendering approach is SVG, with scales defined via `d3.scaleLinear` and `d3.scaleOrdinal`.

SShazil Taqi

67% match

Loading thumbnail…

Income by Race & Gender

This interactive grouped bar chart estimates median household income across five racial categories, disaggregated by male and female householders, based on U.S. Census Bureau data. Built with React and D3 v7, it uses `scaleBand` for grouped positioning, `axisLeft` for the y-axis, and interactive tooltips with a reference line. The chart features animated transitions via `transition` on hover interactions, and a legend that highlights bars by gender. Users can explore patterns in income disparities, with color-coded bars and value labels providing clarity.

CCurran Kelleher

66% match

Loading thumbnail…

Fork of Analysis using scatterplots

This visualization combines scatterplots and animated bar-like line marks to explore median family wealth in the US from 1983 to 2016, split by race. Users can switch between White, Black, and Hispanic households via a dropdown menu, triggering a D3 transition that updates both the circles and vertical lines. The data is sourced from the Urban Institute and US Census via TidyTuesday, normalized to 2016 dollars. The code uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `transition`.

Ggrigoriu-stefan-iulian

66% match