Mobility Rate Bubble Chart
This bubble chart shows the mobility rate of California universities, plotting median parent household income against the percentage of students who move from the bottom to the top income quintile. Circle size encodes average cohort size, while color shows the trend of parents in the bottom income bracket. The visualization uses D3.js v5 scales and joins to render SVG circles, with d3-legend for color and size legends, and includes labeled averages and annotations. Data comes from Opportunity Insights' Mobility Report Cards dataset.
AI-generated descriptionMobility Rate by College Bubble Chart
This example will demonstrate how to implement a bubble chart in D3.js version 5 with legends using d3-legend by Susie Lu.
The data comes from Opportunity Insights, which is a "non-partisan, not-for-profit organization based at Harvard University" that puts out public datasets produced for on their research.
We will specifically use data from the Mobility Report Cards project. The dataset is titled "Mobility Report Cards: Preferred Estimates of Access and Mobility Rates by College" and can be accessed via these direct links:
mrc_table1.csv
Codebook-MRC-Table-1.pdf
The original CSV file is replicated on this gist to avoid CORS issues when viewing this example on bl.ocks.org or blockbuilder.org.
We will filter this data to focus only on those universities located in California, which includes the University of San Francisco.
References
Tableau Prototype
See the Tableau Workbook for how to create this prototype. It is important to make sure count appears first on the marks card, which makes sure the smaller bubbles are drawn on top of the larger ones.
Below is the sheet description from Tableau to help rebuild it:
Description of "Mobility vs Income"
Median Parent Household Income vs. Mobility Rate. Color shows details about Trend of Parents in Bottom 20%. Size shows details about Average Children per Cohort. The marks are labeled by College Name. The data is filtered on State, which keeps CA.
Marks
The mark type is Circle.
The marks are labeled by College Name.
Stacked marks is off.
Shelves
| Label | Renamed Field | Original Field |
|---|---|---|
| Rows: | Mobility Rate | mr_kq5_pq1 |
| Columns: | Median Parent Household Income | par_median |
| Filters: | State | state |
| Text: | College Name | name |
| Color: | Trend of Parents in Bottom 20% | trend_parq1 |
| Size: | Average Children per Cohort | count |
Dimensions
Average Children per Cohortranges from 50 to 8556 on this sheet.College Namehas 168 members on this sheet- Members: CalState LA; California State Polytechnic University, Pomona; Crimson Technical College; Glendale Community College; University Of California, Irvine; ...
Statehas 1 members on this sheet- Members: CA
Trend of Parents in Bottom 20%ranges from -17.57 to 31.79 on this sheet.
Measures
Mobility Rateranges from 0.000 to 9.918 on this sheet.Median Parent Household Incomeranges from 29,300 to 172,600 on this sheet.