Mobility Bubble Chart (Spring 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.

forked from sjengle's block: Mobility Bubble Chart (Spring 2020)

<!DOCTYPE html>
<html>

<title>Mobility Rate Bubble Chart</title>

<body>
  <section class="section">
    <div class="container content">
      <h1>Mobility Rate of Universities in California</h1>

<p class="is-size-7 has-text-grey">
        Shows the median parent household income (adjusted for inflation) versus mobility rate, calculated as the percent of students with parents in the bottom 20% of income distribution that reach the top 20% in income distribution. Circles are sized by average number of students per cohort, and colored by the change in the percent of parents from the bottom 40% of income distribution from 1980 to 1991. Source: <a href="https://opportunityinsights.org/data/">https://opportunityinsights.org/data/</a>
      </p>
    </div>
  </section>

<script src="https://d3js.org/d3.v5.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js" integrity="sha256-qo76Vs9B6JAALbrTn+PcN1r09hbNLd2M78V19glOMeU=" crossorigin="anonymous"></script>

<script src="bubble.js"></script>
</body>
</html>

https://d3js.org/d3.v5.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js