sjengle · February 12, 2020 20:31
diff --git a/README.md b/README.md
diff --git a/bubble.js b/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) + ')';
 }
diff --git a/index.html b/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>
diff --git a/mrc_table1.csv b/mrc_table1.csv
diff --git a/prototype.png b/prototype.png
diff --git a/style.css b/style.css
 body {
  background-color: whitesmoke;

  /*
   * the non-white background color is only to make it clear where our SVG is
   * located on the page and can be removed in the final version
   */
 }

 svg {
  background-color: white;
 }

 /*
 * i prefer to define values using em, ex, or rem (which are relative lengths),
 * but to simplify the example everything uses px (which is an absolute length)
 * see: https://developer.mozilla.org/en-US/docs/Web/CSS/length
 */

 .tick line,
 path.domain {
  stroke: #bbbbbb;
 }

 text.axis-title, text.legendTitle {
  font-size: 12px;
  font-weight: bold;
 }

 #labels text {
  font-size: 9px;
  text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff;

  /*
   * text shadow:
   * https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
   */
 }

 #color-axis path {
  display: none;
 }

 .tick text, .legendCells text.label {
  font-size: 9px;
  fill: #666666;
  font-weight: normal;
 }

 #color-axis line {
  stroke: none;
 }

 #averages line {
  stroke: black;
  stroke-width: 1px;
  stroke-opacity: 0.25;
  stroke-dasharray: 2 1;
 }

 #averages text {
  font-size: 10px;
  fill: black;
  fill-opacity: 0.5;
 }

 /*
 * example of fancy CSS selection. see:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
 */

 #color-axis g.tick:not(:nth-child(2)):not(:last-child) line {
  stroke: black;
  stroke-width: 2;
 }

 .legendCells circle.swatch {
  fill: none;
  stroke: #888888;
  stroke-width: 2;
 }
diff --git a/template.js b/template.js
 const width = 960;
 const height = 500;

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

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

 svg.attr("width", width);
 svg.attr("height", height);

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

 // TODO
 // plot.append("rect").attr("width", 10).attr("height", 10);

 const scales = {
  // TODO
 };

 // 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]);
 //
 // scales.r.range([1, 20]).domain([0, 9000]);
 //
 // scales.fill.domain([-20, 0, 35]);

 drawAxis();
 drawTitles();
 drawColorLegend();
 drawCircleLegend();

 d3.csv("mrc_table1.csv", convert).then(draw);

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

  data = data.filter(row => row.state === "CA");
  console.log("filter:", data.length, data[0]);

  data.sort((a, b) => b.count - a.count);
  console.log("sorted:", data.length, data[0]);

  drawBubble(data);
  drawAverage(data);
  drawLabels(data);
 }

 function drawLabels(data) {
  const group = plot.append('g').attr('id', 'labels');
  // TODO
 }

 function drawAverage(data) {
  const group = plot.append('g').attr('id', 'averages');

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

  // TODO
 }

 function drawBubble(data) {
  const group = plot.append('g').attr('id', 'bubbles');
  // TODO
 }

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

  const group = svg.append('g').attr('id', 'color-legend');

  // TODO

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

  // TODO
 }

 function drawCircleLegend() {
  const legendWidth = 200;
  const legendHeight = 20;

  const group = svg.append('g').attr('id', 'circle-legend');

  // TODO
 }

 function drawTitles() {
  // TODO

  // 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');

  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

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

 function drawAxis() {
  const xGroup = svg.append('g').attr('id', 'x-axis').attr('class', 'axis');
  const yGroup = svg.append('g').attr('id', 'y-axis').attr('class', 'axis');

  const xAxis = d3.axisBottom(scales.x);
  const yAxis = d3.axisLeft(scales.y);

  // https://github.com/d3/d3-format#locale_formatPrefix
  // TODO
 }

 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;
 }

 function midpoint(range) {
  return range[0] + (range[1] - range[0]) / 2.0;
 }

 function translate(x, y) {
  return 'translate(' + String(x) + ',' + String(y) + ')';
 }
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`
	/*
	* 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) + ')';
	}
	<!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>
	body {
	background-color: whitesmoke;

	/*
	* the non-white background color is only to make it clear where our SVG is
	* located on the page and can be removed in the final version
	*/
	}

	svg {
	background-color: white;
	}

	/*
	* i prefer to define values using em, ex, or rem (which are relative lengths),
	* but to simplify the example everything uses px (which is an absolute length)
	* see: https://developer.mozilla.org/en-US/docs/Web/CSS/length
	*/

	.tick line,
	path.domain {
	stroke: #bbbbbb;
	}

	text.axis-title, text.legendTitle {
	font-size: 12px;
	font-weight: bold;
	}

	#labels text {
	font-size: 9px;
	text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff;

	/*
	* text shadow:
	* https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
	*/
	}

	#color-axis path {
	display: none;
	}

	.tick text, .legendCells text.label {
	font-size: 9px;
	fill: #666666;
	font-weight: normal;
	}

	#color-axis line {
	stroke: none;
	}

	#averages line {
	stroke: black;
	stroke-width: 1px;
	stroke-opacity: 0.25;
	stroke-dasharray: 2 1;
	}

	#averages text {
	font-size: 10px;
	fill: black;
	fill-opacity: 0.5;
	}

	/*
	* example of fancy CSS selection. see:
	* https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
	*/

	#color-axis g.tick:not(:nth-child(2)):not(:last-child) line {
	stroke: black;
	stroke-width: 2;
	}

	.legendCells circle.swatch {
	fill: none;
	stroke: #888888;
	stroke-width: 2;
	}