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.
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:
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.
The mark type is Circle.
The marks are labeled by Name
.
Stacked marks is off.
Label | Field
------|-------
Rows: | Mr Kq5 Pq1
Columns: | Par Median
Filters: | State
Text: | Name
Color: | Trend Bottom40
Size: | Count
Count
ranges from 50 to 8556 on this sheet.Mr Kq5 Pq1
ranges from 0.000 to 9.918 on this sheet.Name
has 168 members on this sheet...Par Median
ranges from 29300 to 172600 on this sheet.
State
has 1 members on this sheet
Trend Bottom40
ranges from -18 to 48 on this sheet.See the index.html, style.css, and bubble.js files for the D3 implementation.
This implementation makes use of the d3-legend library.
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobility Rate Bubble Chart</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: whitesmoke;">
<section class="section">
<div class="container content">
<h1>Mobility Rate of Universities in California</h1>
<svg id="bubble" style="background-color: white;">
</svg>
<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>
<!-- include d3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- include d3-legend: https://d3-legend.susielu.com/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js" integrity="sha256-qo76Vs9B6JAALbrTn+PcN1r09hbNLd2M78V19glOMeU=" crossorigin="anonymous"></script>
<!-- craft visualization -->
<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