Export Image
Export Code

Mobility Rate Bubble Chart

1
Fork
0
Stars

allcapsangela

Last edited Mar 25, 2020
Created on Mar 15, 2020

Mobility 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

Bubble Chart 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 Cohort ranges from 50 to 8556 on this sheet.

  • College Name has 168 members on this sheet

    • Members: CalState LA; California State Polytechnic University, Pomona; Crimson Technical College; Glendale Community College; University Of California, Irvine; ...

  • State has 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 Rate ranges from 0.000 to 9.918 on this sheet.

  • Median Parent Household Income ranges from 29,300 to 172,600 on this sheet.

MIT Licensed