Mobility Bubble Chart (Spring 2020)

README.md

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

• Github Gist
• Bl.ocks.org
• Blockbuilder.org
• Vizhub.com

Tableau 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.

bubble.js

/*
 * a lot of this example is hard-coded to match our tableau prototype...
 * and this is a reasonable approach for your own visualizations.
 * however, there are ways to automatically calculate these hard-coded values
 * in our javascript/d3 code.
 */

// showing use of const
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

// if you need to change values, use let instead
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

// set svg size and plot margins
const width = 960;
const height = 500;

const margin = {
  top: 10,
  bottom: 35,
  left: 35,
  right: 15
};

// select svg
const svg = d3.select("svg#bubble");
console.assert(svg.size() == 1);

// set svg size
svg.attr("width", width);
svg.attr("height", height);

// add plot region
const plot = svg.append("g").attr("id", "plot");

// this is just so we can see the transform of the plot
// comment out for final version
// plot.append("rect").attr("width", 10).attr("height", 10);

// transform region by margin
plot.attr("transform", translate(margin.left, margin.top));

/*
 * setup scales with ranges and the domains we set from tableau
 * defined globally for access within other functions
 */

const scales = {
  x: d3.scaleLinear(),
  y: d3.scaleLinear(),
  // do not linearly scale radius...
  // area = pi * r * r, so use sqrt of r!
  r: d3.scaleSqrt(),
  fill: d3.scaleDiverging(d3.interpolateRdYlGn)
};

// we are going to hardcode the domains, so we can setup our scales now
// that is one benefit of prototyping!
scales.x.range([0, width - margin.left - margin.right]);
scales.x.domain([20000, 185000]);

scales.y.range([height - margin.top - margin.bottom, 0]);
scales.y.domain([-0.5, 10.5]);

// note we can chain if we want
scales.r.range([1, 20]).domain([0, 9000]);

scales.fill.domain([-20, 0, 35]);

// since we do not need the data for our domains, we can draw our axis/legends right away
drawAxis();
drawTitles();
drawColorLegend();
drawCircleLegend();

// load data and trigger draw
d3.csv("mrc_table1.csv", convert).then(draw);

function draw(data) {
  console.log("loaded:", data.length, data[0]);

  // filter for only california universities
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  data = data.filter(row => row.state === "CA");
  console.log("filter:", data.length, data[0]);

  // sort by count so small circles are drawn last
  data.sort((a, b) => b.count - a.count);
  console.log("sorted:", data.length, data[0]);

  drawBubble(data);
  drawAverage(data); // in this order, lines will be on top of bubbles
  drawLabels(data);
}

/*
 * draw labels for pre-selected bubbles
 */
function drawLabels(data) {
  // place the labels in their own group
  const group = plot.append('g').attr('id', 'labels');

  // create data join and enter selection
  const labels = group.selectAll('text')
    .data(data)
    .enter()
    .filter(d => d.label) // only keep values that we want to label
    .append('text');

  labels.text(d => d.name);

  labels.attr('x', d => scales.x(d.income));
  labels.attr('y', d => scales.y(d.mobility));

  labels.attr('text-anchor', 'middle');
  labels.attr('dy', d => -(scales.r(d.count) + 4));

  // maybe we also want to make it more clear which circle is associated
  // with the label above it---we will work with update selection here!
  plot.select('#bubbles')
    .selectAll('circle')
    .data(data)
    .filter(d => d.label)
    .style('stroke', 'black')
    .style('stroke-width', 1);
}

/*
 * draw the average lines
 */
function drawAverage(data) {
  // place the average lines and labels in their own group
  const group = plot.append('g').attr('id', 'averages');

  // calculate averages
  const xAverage = d3.mean(data, d=> d.income);
  const yAverage = d3.mean(data, d=> d.mobility);
  console.log('averages:', [xAverage, yAverage]);

  // draw x average line
  group.append('line')
    .attr('x1', scales.x(xAverage))
    .attr('x2', scales.x(xAverage))
    .attr('y1', scales.y.range()[0])
    .attr('y2', scales.y.range()[1]);

  // draw y average line
  group.append('line')
    .attr('x1', scales.x.range()[0])
    .attr('x2', scales.x.range()[1])
    .attr('y1', scales.y(yAverage))
    .attr('y2', scales.y(yAverage));

  // draw text label
  group.append('text')
    .text('Average')
    .attr('x', 0)
    .attr('y', scales.y(yAverage))
    .attr('dx', 4)
    .attr('dy', -6)
    .attr('text-anchor', 'start');

  group.append('text')
    .text('Average')
    .attr('x', scales.x(xAverage))
    .attr('y', scales.y.range()[0])
    .attr('dx', 4)
    .attr('dy', -6)
    .attr('text-anchor', 'start');
}

/*
 * draw bubbles
 */
function drawBubble(data) {
  // place all of the bubbles in their own group
  const group = plot.append('g').attr('id', 'bubbles');

  const bubbles = group.selectAll('circle')
    .data(data)
    .enter()
    .append('circle');

  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  bubbles.attr('cx', d => scales.x(d.income));
  bubbles.attr('cy', d => scales.y(d.mobility));
  bubbles.attr('r',  d => scales.r(d.count));

  bubbles.style('stroke', 'white');
  bubbles.style('fill', d => scales.fill(d.trend));
}

// https://beta.observablehq.com/@tmcw/d3-scalesequential-continuous-color-legend-example
function drawColorLegend() {
  const legendWidth = 200;
  const legendHeight = 20;

  // place legend in its own group
  const group = svg.append('g').attr('id', 'color-legend');

  // shift legend to appropriate position
  group.attr('transform', translate(width - margin.right - legendWidth, margin.top));

  const title = group.append('text')
    .attr('class', 'axis-title')
    .text('Trend of Parents in Bottom 20%');

  title.attr('dy', 12);

  // lets draw the rectangle, but it won't have a fill just yet
  const colorbox = group.append('rect')
    .attr('x', 0)
    .attr('y', 12 + 6)
    .attr('width', legendWidth)
    .attr('height', legendHeight);

  // we need to create a linear gradient for our color legend
  // this defines a color at a percent offset
  // https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient

  // this is easier if we create a scale to map our colors to percents

  // get the domain first (we do not want the middle value from the diverging scale)
  const colorDomain = [d3.min(scales.fill.domain()), d3.max(scales.fill.domain())];

  // add a new scale to go from color tick to percent
  scales.percent = d3.scaleLinear()
    .range([0, 100])
    .domain(colorDomain);

  // we have to first add gradients
  const defs = svg.append('defs');

  // add a color stop per data tick
  // input  (ticks)   : [-20, ..., 15, ..., 50]
  // output (percents): [  0, ..., 50, ..., 100]
  defs.append('linearGradient')
    .attr('id', 'gradient')
    .selectAll('stop')
    .data(scales.fill.ticks())
    .enter()
    .append('stop')
    .attr('offset', d => scales.percent(d) + '%')
    .attr('stop-color', d => scales.fill(d));

  // draw the color rectangle with the gradient
  colorbox.attr('fill', 'url(#gradient)');

  // now we need to draw tick marks for our scale
  // we can create a legend that will map our data domain to the legend colorbox
  scales.legend = d3.scaleLinear()
    .domain(colorDomain)
    .range([0, legendWidth]);

  // i tend to keep scales global so i can debug them in the console
  // in this case there really is no need for the percent and legend scales
  // to be accessible outside of this function

  const legendAxis = d3.axisBottom(scales.legend)
    .tickValues(scales.fill.domain())
    .tickSize(legendHeight)
    .tickSizeOuter(0);

  const axisGroup = group.append('g')
    .attr('id', 'color-axis')
    .attr('transform', translate(0, 12 + 6))
    .call(legendAxis);

  // now lets tighten up the tick labels a bit so they don't stick out
  axisGroup.selectAll('text')
    .each(function(d, i) {
      // set the first tick mark to anchor at the start
      if (i == 0) {
        d3.select(this).attr('text-anchor', 'start');
      }
      // set the last tick mark to anchor at the end
      else if (i == legendAxis.tickValues().length - 1) {
        d3.select(this).attr('text-anchor', 'end');
      }
    });

  // note how many more lines of code it took to generate the legend
  // than the base visualization!
}

/*
 * this demonstrates d3-legend for creating a circle legend
 * it is made to work with d3v4 not d3v5 however
 */
function drawCircleLegend() {
  const legendWidth = 200;
  const legendHeight = 20;

  // place legend into its own group
  const group = svg.append('g').attr('id', 'circle-legend');

  // position legend
  group.attr('transform', translate(width - margin.right - legendWidth, margin.top + 75))

  // https://d3-legend.susielu.com/#size-linear
  const legendSize = d3.legendSize()
    .scale(scales.r)
    .shape('circle')
    .cells(6)
    .ascending(true)
    .shapePadding(4)
    .labelOffset(10)
    .labelFormat("d")
    .title('Average Cohort Size')
    .orient('horizontal');

  group.call(legendSize);

  // fix the title spacing
  group.select('text.legendTitle').attr('dy', -8);

  // note it is harder to get this to be two column using this package
  // we have to select what was drawn and then move it around
}

/*
 * draw axis titles
 */
function drawTitles() {
  const xMiddle = margin.left + midpoint(scales.x.range());
  const yMiddle = margin.top + midpoint(scales.y.range());

  // test middle calculation
  // svg.append("circle").attr("cx", xMiddle).attr("cy", yMiddle).attr("r", 5);

  const xTitle = svg.append('text')
    .attr('class', 'axis-title')
    .text('Median Parent Household Income');

  xTitle.attr('x', xMiddle);
  xTitle.attr('y', height);
  xTitle.attr('dy', -4);
  xTitle.attr('text-anchor', 'middle');

  // it is easier to rotate text if you place it in a group first
  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

  const yGroup = svg.append('g');

  // set the position by translating the group
  yGroup.attr('transform', translate(4, yMiddle));

  const yTitle = yGroup.append('text')
    .attr('class', 'axis-title')
    .text('Mobility Rate');

  // keep x, y at 0, 0 for rotation around the origin
  yTitle.attr('x', 0);
  yTitle.attr('y', 0);

  yTitle.attr('dy', '1.75ex');
  yTitle.attr('text-anchor', 'middle');
  yTitle.attr('transform', 'rotate(-90)');
}

/*
 * create axis lines
 */
function drawAxis() {
  // place the xaxis and yaxis in their own groups
  const xGroup = svg.append('g').attr('id', 'x-axis').attr('class', 'axis');
  const yGroup = svg.append('g').attr('id', 'y-axis').attr('class', 'axis');

  // create axis generators
  const xAxis = d3.axisBottom(scales.x);
  const yAxis = d3.axisLeft(scales.y);

  // https://github.com/d3/d3-format#locale_formatPrefix
  xAxis.ticks(9, 's').tickSizeOuter(0);
  yAxis.ticks(6).tickSizeOuter(0);;

  // shift x axis to correct location
  xGroup.attr('transform', translate(margin.left, height - margin.bottom));
  xGroup.call(xAxis);

  // shift y axis to correct location
  yGroup.attr('transform', translate(margin.left, margin.top))
  yGroup.call(yAxis);
}

/*
 * converts values as necessary and discards unused columns
 */
function convert(row) {
  let keep = {}

  keep.name = row.name;
  keep.state = row.state;

  keep.count = parseInt(row.count);
  keep.mobility = parseFloat(row.mr_kq5_pq1);
  keep.income = parseFloat(row.par_median);
  keep.trend = parseFloat(row.trend_bottom40);

  switch(row.name.toLowerCase()) {
    case 'university of san francisco':
      keep.name = 'USF';
      keep.label = true;
      break;

    case 'california state university, los angeles':
      keep.name = 'CalState LA';
      keep.label = true;
      break;

    case 'harvey mudd college':
      keep.name = 'Harvey Mudd';
      keep.label = true;
      break;

    case 'san francisco community college district':
      keep.name = 'SF Community Colleges';
      keep.label = true;
      break;

    case 'san francisco state university':
      keep.name = 'SF State';
      keep.label = true;
      break;

    case 'sonoma state university':
      keep.name = 'Sonoma State';
      keep.label = true;
      break;

    case 'stanford university':
      keep.name = 'Stanford';
      keep.label = true;
      break;

    case 'university of california, los angeles':
      keep.name = 'UCLA';
      keep.label = true;
      break;

    default:
      keep.label = false;
  }

  return keep;
}

/*
 * calculates the midpoint of a range given as a 2 element array
 */
function midpoint(range) {
  return range[0] + (range[1] - range[0]) / 2.0;
}

/*
 * returns a translate string for the transform attribute
 */
function translate(x, y) {
  return 'translate(' + String(x) + ',' + String(y) + ')';
}

index.html

<!DOCTYPE html>
<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://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
</head>

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

      <svg id="bubble"></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>

mrc_table1.csv