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.
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:
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
.
The mark type is Circle
.
The marks are labeled by College Name
.
Stacked marks is off
.
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 |
Average Children per Cohort
ranges from 50 to 8556 on this sheet.
College Name
has 168 members on this sheet
State
has 1 members on this sheet
Trend of Parents in Bottom 20%
ranges from -17.57 to 31.79 on this sheet.
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.