All examples By author By category About

sjengle
Full window Github gist

Mobility Bubble Chart (D3 v5, Tableau Desktop)

Mobility Rate by College Bubble Chart

This example will demonstrate how to prototype a bubble chart in Tableau Desktop and then implement a version of that bubble chart in D3.js version 5.

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.

Tableau Prototype

Bubble Chart Prototype

See the bubble_prototype.twbx 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 "Bubble Chart"

Par Median vs. Mr Kq5 Pq1. Color shows details about Trend Bottom40. Size shows details about Count. The marks are labeled by Name. The data is filtered on State, which keeps CA.

Marks

The mark type is Circle.
The marks are labeled by Name.
Stacked marks is off.

Shelves

Label | Field ------|------- Rows: | Mr Kq5 Pq1 Columns: | Par Median Filters: | State Text: | Name Color: | Trend Bottom40 Size: | Count

Dimensions

D3 Implementation

Bubble Chart D3 Implementation

See the index.html, style.css, and bubble.js files for the D3 implementation.

This implementation makes use of the d3-legend library.