sjengle/MarketHealthIndex_State.csv

## README.md

      
    Raw
  

              README.md
            
          
    SF Monthly Property Crimes 2005 to 2015

This example demonstrates how to use a heatmap to show time series data. The actual heatmap visualization is not difficult to generate---more time in this example is spent on preparing the data using d3.nest() and on creating the color legend.
Data Source

You can access the dataset for this example directly at:
https://data.sfgov.org/Public-Safety/Monthly-Property-Crime-2005-to-2015/k5vw-3yuz
The dataset is derived from the SFPD Incidents - from 1 January 2003 dataset available at data.sfgov.org.

  
## bubble.js
/*
 * Draws our parallel coordinates. Assumes the following globals:
 * - data
 * - config
 * - scales
 *
 * Note: Want to avoid these kinds of globals, and/or passing these values
 * around to related functions? Look into closures in JavaScript!
 */
function drawBubble() {
  var svg = d3.select("body").append("svg")
    .attr("width", config.svg.width)
    .attr("height", config.svg.height);

  var plot = svg.append("g")
    .attr("id", "plot")
    .attr("transform", translate(config.pad.left, config.pad.top));

  // oh noes when we draw our bubbles fall off our plot!
  // we need to adjust to account for the radius size

  // we could try to subtract the max radius size from our range...
  // var xrange  = scales.x.range();
  // var xdomain = scales.x.domain();
  // var xshift  = config.r.max / (xrange[1] - xrange[0]);

  // xrange[0] += config.r.max;
  // xrange[1] -= config.r.max;
  // scales.x.range(xrange);

  // var yrange = scales.y.range();
  // yrange[0] -= config.r.max;
  // yrange[1] += config.r.max;
  // scales.y.range(yrange);

  // the above approach means our axis lines do not connect anymore
  // instead we can shift the domain---but by how much? a shift by 10
  // in the x-direction is different than 10 in the y-direction. we
  // will calculate what percent the max radius size is of each range
  // and shift the domain by that percent
  var xrange  = scales.x.range();
  var xdomain = scales.x.domain();
  var xshift  = (config.r.max + 5) / (xrange[1] - xrange[0]); // plus 5 padding
  xshift = xshift * (xdomain[1] - xdomain[0]);
  scales.x.domain([xdomain[0] - xshift, xdomain[1] + xshift]);

  var yrange  = scales.y.range();
  var ydomain = scales.y.domain();
  var yshift  = (config.r.max + 5) / (yrange[0] - yrange[1]);
  yshift = yshift * (ydomain[1] - ydomain[0]); // note not swapped
  scales.y.domain([ydomain[0] - yshift, ydomain[1] + yshift]);

  drawAxisLines(plot);
  drawCircles(plot);

  drawAreaLegend(plot);
  drawFillLegend(svg);

  drawTitle(svg);

  console.log("drawing complete");
}

function drawAxisLines(plot) {
  var xaxis = d3.svg.axis().scale(scales.x).orient("bottom");
  var yaxis = d3.svg.axis().scale(scales.y).orient("left");

  plot.append("g")
    .attr("id", "x")
    .attr("class", "axis")
    .attr("transform", translate(0, config.height))
    .call(xaxis);

  plot.select("g#x")
    .append("text")
    .attr("text-anchor", "end")
    .attr("x", d3.max(scales.x.range()))
    .attr("y", 0)
    .attr("dx", 0)
    .attr("dy", "-5px")
    .text(config.cols.x);

  plot.append("g")
    .attr("id", "y")
    .attr("class", "axis")
    .call(yaxis);

  plot.select("g#y")
    .append("text")
    .attr("text-anchor", "end")
    .attr("x", 0)
    .attr("y", d3.min(scales.y.range()))
    .attr("dx", 0)
    .attr("dy", "1em")
    .attr("transform", "rotate(-90,0," + d3.min(scales.y.range()) + ")")
    .text(config.cols.y);
}

function drawCircles(plot) {
  var bubbles = plot.append("g").attr("class", "bubbles")
    .selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("id", function(d) { return d.State; });

  bubbles.append("circle")
    .attr("cx", function(d) { return scales.x(d[config.cols.x]); })
    .attr("cy", function(d) { return scales.y(d[config.cols.y]); })
    .attr("r", function(d) { return scales.area(d[config.cols.area]); })
    .style("fill", function(d) { return scales.fill(d[config.cols.fill]); });

  bubbles.append("text")
    .attr("x", function(d) { return scales.x(d[config.cols.x]); })
    .attr("y", function(d) { return scales.y(d[config.cols.y]); })
    .attr("dx", 0)
    .attr("dy", "4px")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.State; });
}

function drawAreaLegend(plot) {
  var legend = plot.append("g")
    .attr("id", "area-legend")
    .attr("class", "legend");

  legend.append("text")
    .attr("text-anchor", "middle")
    .attr("x", config.r.max)
    .attr("y", config.r.max + config.r.max)
    .attr("dx", 0)
    .attr("dy", "12px")
    .text(config.cols.area);

  legend.append("circle")
    .attr("cx", config.r.max)
    .attr("cy", config.r.max)
    .attr("r", config.r.max);

  legend.append("text")
    .attr("text-anchor", "middle")
    .attr("x", config.r.max)
    .attr("y", 0)
    .attr("dx", 0)
    .attr("dy", "12px")
    .text(Math.round(scales.area.invert(config.r.max)));

  var mid = config.r.min + (config.r.max - config.r.min) / 2;

  legend.append("circle")
    .attr("cx", config.r.max)
    .attr("cy", config.r.max + config.r.max - mid)
    .attr("r", mid);

  legend.append("text")
    .attr("text-anchor", "middle")
    .attr("x", config.r.max)
    .attr("y", config.r.max + config.r.max - mid - mid)
    .attr("dx", 0)
    .attr("dy", "12px")
    .text(Math.round(scales.area.invert(mid)));

  var bounds = legend.node().getBBox();
  var yshift = config.height - bounds.height;

  legend.attr("transform", translate(5, yshift));
}

/*
 * draw plot title in upper left margin
 * will center the text in the margin
 */
var drawTitle = function(svg) {
  var title = svg.append("text")
    .text("Zillow Market Health Index by State")
    .attr("id", "title")
    .attr("x", config.pad.left)
    .attr("y", 0)
    .attr("dx", 0)
    .attr("dy", "18px")
    .attr("text-anchor", "left")
    .attr("font-size", "18px");

  // shift text so it is centered in plot area
  var bounds = title.node().getBBox();
  var yshift = (config.pad.top - bounds.height) / 2;
  title.attr("transform", translate(0, yshift));
};

/*
 * draws a fill legend in the top right corner
 * adapted from heatmap demo
 */
var drawFillLegend = function(svg) {
  // map our color domain to percentage stops for our gradient
  // we know min is 0% and max is 100%
  // but we have to find where the average falls between there
  var percentScale = d3.scale.linear()
    .domain(d3.extent(scales.fill.domain()))
    .rangeRound([0, 100]);

  // setup gradient for legend
  // http://bl.ocks.org/mbostock/1086421
  svg.append("defs")
    .append("linearGradient")
    .attr("id", "gradient")
    .selectAll("stop")
    .data(scales.fill.domain())
    .enter()
    .append("stop")
    .attr("offset", function(d) {
      return "" + percentScale(d) + "%";
    })
    .attr("stop-color", function(d) {
      return scales.fill(d);
    });

  // create group for legend elements
  // will translate it to the appropriate location later
  var legend = svg.append("g")
    .attr("id", "fill-legend");

  // draw the color rectangle with gradient
  legend.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", config.legend.width)
    .attr("height", config.legend.height)
    .attr("fill", "url(#gradient)");

  // create another scale so we can easily draw an axis on the color box
  var legendScale = d3.scale.linear()
    .domain(percentScale.domain())
    .range([0, config.legend.width]);

  // use an axis generator to draw axis under color box
  var legendAxis = d3.svg.axis()
    .scale(legendScale)
    .orient("bottom")
    .innerTickSize(4)
    .outerTickSize(4)
    .tickPadding(4)
    .tickValues(scales.fill.domain());

  // draw it!
  legend.append("g")
    .attr("id", "fill")
    .attr("class", "axis")
    .attr("transform", translate(0, config.legend.height))
    .call(legendAxis);

  legend.select("g#fill")
    .append("text")
    .attr("class", "axis")
    .attr("text-anchor", "middle")
    .attr("x", config.legend.width / 2.0)
    .attr("y", 8)
    .attr("dx", 0)
    .attr("dy", ".71em")
    .text(config.cols.fill);

  // calculate how much to shift legend group to fit in our plot area nicely
  var bounds = legend.node().getBBox();
  var xshift = config.svg.width - bounds.width - config.pad.right;
  var yshift = config.pad.top - bounds.height;
  legend.attr("transform", translate(xshift, yshift));
};

function translate(x, y) {
  return "translate(" + x + "," + y + ")";
}

## colorbrewer.js
// This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
var colorbrewer = {YlGn: {
3: ["#f7fcb9","#addd8e","#31a354"],
4: ["#ffffcc","#c2e699","#78c679","#238443"],
5: ["#ffffcc","#c2e699","#78c679","#31a354","#006837"],
6: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"],
7: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
8: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
9: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]
},YlGnBu: {
3: ["#edf8b1","#7fcdbb","#2c7fb8"],
4: ["#ffffcc","#a1dab4","#41b6c4","#225ea8"],
5: ["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"],
6: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"],
7: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
8: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
9: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]
},GnBu: {
3: ["#e0f3db","#a8ddb5","#43a2ca"],
4: ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"],
5: ["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"],
6: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"],
7: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
8: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
9: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]
},BuGn: {
3: ["#e5f5f9","#99d8c9","#2ca25f"],
4: ["#edf8fb","#b2e2e2","#66c2a4","#238b45"],
5: ["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"],
6: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"],
7: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
8: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
9: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]
},PuBuGn: {
3: ["#ece2f0","#a6bddb","#1c9099"],
4: ["#f6eff7","#bdc9e1","#67a9cf","#02818a"],
5: ["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"],
6: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"],
7: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
8: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
9: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]
},PuBu: {
3: ["#ece7f2","#a6bddb","#2b8cbe"],
4: ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"],
5: ["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"],
6: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"],
7: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
8: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
9: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"]
},BuPu: {
3: ["#e0ecf4","#9ebcda","#8856a7"],
4: ["#edf8fb","#b3cde3","#8c96c6","#88419d"],
5: ["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"],
6: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"],
7: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
8: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
9: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"]
},RdPu: {
3: ["#fde0dd","#fa9fb5","#c51b8a"],
4: ["#feebe2","#fbb4b9","#f768a1","#ae017e"],
5: ["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"],
6: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"],
7: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
8: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
9: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]
},PuRd: {
3: ["#e7e1ef","#c994c7","#dd1c77"],
4: ["#f1eef6","#d7b5d8","#df65b0","#ce1256"],
5: ["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"],
6: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"],
7: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
8: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
9: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"]
},OrRd: {
3: ["#fee8c8","#fdbb84","#e34a33"],
4: ["#fef0d9","#fdcc8a","#fc8d59","#d7301f"],
5: ["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"],
6: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"],
7: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
8: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
9: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]
},YlOrRd: {
3: ["#ffeda0","#feb24c","#f03b20"],
4: ["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"],
5: ["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"],
6: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"],
7: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
8: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
9: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]
},YlOrBr: {
3: ["#fff7bc","#fec44f","#d95f0e"],
4: ["#ffffd4","#fed98e","#fe9929","#cc4c02"],
5: ["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"],
6: ["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"],
7: ["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
8: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
9: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]
},Purples: {
3: ["#efedf5","#bcbddc","#756bb1"],
4: ["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"],
5: ["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"],
6: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"],
7: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
8: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
9: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]
},Blues: {
3: ["#deebf7","#9ecae1","#3182bd"],
4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"],
5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"],
6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"],
7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]
},Greens: {
3: ["#e5f5e0","#a1d99b","#31a354"],
4: ["#edf8e9","#bae4b3","#74c476","#238b45"],
5: ["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"],
6: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"],
7: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
8: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
9: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"]
},Oranges: {
3: ["#fee6ce","#fdae6b","#e6550d"],
4: ["#feedde","#fdbe85","#fd8d3c","#d94701"],
5: ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"],
6: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"],
7: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
8: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
9: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"]
},Reds: {
3: ["#fee0d2","#fc9272","#de2d26"],
4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"],
5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"],
6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"],
7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]
},Greys: {
3: ["#f0f0f0","#bdbdbd","#636363"],
4: ["#f7f7f7","#cccccc","#969696","#525252"],
5: ["#f7f7f7","#cccccc","#969696","#636363","#252525"],
6: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"],
7: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
8: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
9: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]
},PuOr: {
3: ["#f1a340","#f7f7f7","#998ec3"],
4: ["#e66101","#fdb863","#b2abd2","#5e3c99"],
5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"],
6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"],
7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"],
8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"],
9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"],
10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],
11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]
},BrBG: {
3: ["#d8b365","#f5f5f5","#5ab4ac"],
4: ["#a6611a","#dfc27d","#80cdc1","#018571"],
5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"],
6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"],
7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"],
8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"],
9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"],
10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],
11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]
},PRGn: {
3: ["#af8dc3","#f7f7f7","#7fbf7b"],
4: ["#7b3294","#c2a5cf","#a6dba0","#008837"],
5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"],
6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"],
7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"],
8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],
11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]
},PiYG: {
3: ["#e9a3c9","#f7f7f7","#a1d76a"],
4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"],
5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"],
6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"],
7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"],
8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],
11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]
},RdBu: {
3: ["#ef8a62","#f7f7f7","#67a9cf"],
4: ["#ca0020","#f4a582","#92c5de","#0571b0"],
5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"],
6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"],
7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"],
8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],
11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]
},RdGy: {
3: ["#ef8a62","#ffffff","#999999"],
4: ["#ca0020","#f4a582","#bababa","#404040"],
5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"],
6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"],
7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"],
8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"],
9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"],
10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],
11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]
},RdYlBu: {
3: ["#fc8d59","#ffffbf","#91bfdb"],
4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"],
5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"],
6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"],
7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"],
8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"],
9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"],
10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],
11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]
},Spectral: {
3: ["#fc8d59","#ffffbf","#99d594"],
4: ["#d7191c","#fdae61","#abdda4","#2b83ba"],
5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"],
6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"],
7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"],
8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"],
9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"],
10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],
11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]
},RdYlGn: {
3: ["#fc8d59","#ffffbf","#91cf60"],
4: ["#d7191c","#fdae61","#a6d96a","#1a9641"],
5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"],
6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"],
7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"],
8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],
11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]
},Accent: {
3: ["#7fc97f","#beaed4","#fdc086"],
4: ["#7fc97f","#beaed4","#fdc086","#ffff99"],
5: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"],
6: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f"],
7: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"],
8: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"]
},Dark2: {
3: ["#1b9e77","#d95f02","#7570b3"],
4: ["#1b9e77","#d95f02","#7570b3","#e7298a"],
5: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e"],
6: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02"],
7: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"],
8: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"]
},Paired: {
3: ["#a6cee3","#1f78b4","#b2df8a"],
4: ["#a6cee3","#1f78b4","#b2df8a","#33a02c"],
5: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"],
6: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"],
7: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"],
8: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"],
9: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"],
10: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"],
11: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"],
12: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]
},Pastel1: {
3: ["#fbb4ae","#b3cde3","#ccebc5"],
4: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4"],
5: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6"],
6: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc"],
7: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd"],
8: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec"],
9: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]
},Pastel2: {
3: ["#b3e2cd","#fdcdac","#cbd5e8"],
4: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4"],
5: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9"],
6: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae"],
7: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc"],
8: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"]
},Set1: {
3: ["#e41a1c","#377eb8","#4daf4a"],
4: ["#e41a1c","#377eb8","#4daf4a","#984ea3"],
5: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00"],
6: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33"],
7: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"],
8: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"],
9: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]
},Set2: {
3: ["#66c2a5","#fc8d62","#8da0cb"],
4: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3"],
5: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854"],
6: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"],
7: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"],
8: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"]
},Set3: {
3: ["#8dd3c7","#ffffb3","#bebada"],
4: ["#8dd3c7","#ffffb3","#bebada","#fb8072"],
5: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"],
6: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"],
7: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"],
8: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"],
9: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"],
10: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"],
11: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"],
12: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
}};

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css">

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

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

// csv file to visualize
// downloaded from http://www.zillow.com/research/data/
var filename = "MarketHealthIndex_State.csv";

// global to store data
var data = [];

// global to store config parameters (size, padding, etc.)
var config = {
  svg: {width: 960, height: 500},
  pad: {top: 50, bottom: 30, left: 40, right: 10},
  r: {min: 8, max: 40},
  fill: {min: "#f7fcb9", max: "#31a354"}
};

config.width = config.svg.width - config.pad.left - config.pad.right;
config.height = config.svg.height - config.pad.top - config.pad.bottom;

config.legend = {width: 200, height: 20};

// columns we plan to encode
config.cols = {
  x: "MarketHealthIndex",
  y: "DaysOnMarket",
  area: "SellForGain",
  fill: "ForeclosureRatio"
};

// global to store scales (used by axis and draw methods)
var scales = {
  x: d3.scale.linear().range([0, config.width]),
  y: d3.scale.linear().range([config.height, 0]),
  area: d3.scale.sqrt().range([config.r.min, config.r.max]),
  fill: d3.scale.linear().range([config.fill.min, config.fill.max])
};

// fetch csv, use accessor to process each row, and then call the callback
d3.csv(filename, accessor, callback);

/*
 * Converts cell values into appropriate data types.
 * Also calculates domains for certain headers.
 *
 * The headers are hard-coded to work with this specific csv.
 */
function accessor(row) {
  var out = {};

  for (var col in row) {
    switch(col) {
      case "RegionName":
      case "State":
        out[col] = row[col];
        break;

      case "DaysOnMarket":
      case "ZHVI":
        out[col] = (row[col] !== "") ? parseInt(row[col]) : null;
        break;

      case "MarketHealthIndex":
      case "SellForGain":
      case "PrevForeclosed":
      case "ForeclosureRatio":
      case "MoM":
      case "YoY":
      case "ForecastYoYPctChange":
      case "StockOfREOs":
      case "NegativeEquity":
      case "Delinquency":
        out[col] = (row[col] !== "") ? parseFloat(row[col]) : null;
        break;
    }
  }

  return out;
}

/*
 * Called when the CSV is loaded. Outputs some debugging information,
 * and then calls the draw() method.
 */
function callback(error, csv) {
  if (error) {
    console.warn(error);
    return;
  }
  else if (csv.length < 1) {
    console.warn("Warning: No rows found!");
    return;
  }

  console.log("Loaded " + csv.length + " rows from " + filename + ".");

  var headers = d3.map(csv[0]).keys();
  console.log("Headers:", headers);
  console.log("Last Row:", csv[csv.length - 1]);

  // lets filter out rows with null values for our important columns
  data = csv.filter(function(row) {
    // for all the columns we are encoding
    for (var key in config.cols) {
      // if the data for this (row, col) is null
      if (row[config.cols[key]] === null) {
        return false; // filter out this row
      }
    }

    return true; // else keep the row
  });

  // we should also sort our data by the area column
  data.sort(function(a, b) {
    return b[config.cols.area] - a[config.cols.area];
  });

  console.log("Filtered out " + (csv.length - data.length) + " rows.");

  // lets get the values we will encode to set our domains
  // var values = {};
  // values["x"] = data.map(function(row) { return row[config.cols.x]; });
  // values["y"] = data.map(function(row) { return row[config.cols.y]; });
  // values["area"] = data.map(function(row) { return row[config.cols.area]; });
  // values["fill"] = data.map(function(row) { return row[config.cols.fill]; });
  // console.log("Values:", values);

  // calculate the extent of each
  // var extent = {};
  // extent["x"] = d3.extent(values["x"]);
  // extent["y"] = d3.extent(values["y"]);
  // extent["area"] = d3.extent(values["area"]);
  // extent["fill"] = d3.extent(values["fill"]);
  // console.table(extent);

  // finally we can set the scales of each
  // scales["x"].domain(extent["x"]);
  // scales["y"].domain(extent["y"]);
  // scales["area"].domain(extent["area"]);
  // scales["fill"].domain(extent["fill"]);

  // or, we can do everything above programatically instead!
  for (var key in config.cols) {
    // grab the associated column from our dataset
    var col = config.cols[key];
    scales[key].domain(           // set domain of key (x, y, area, fill)
      d3.extent(                  // find the min/max
        data.map(function(row) {  // grab col value from our dataset
          return row[col];
        })
      )
    );
  }

  // sanity check we are setting our scales properly
  for (var key in scales) {
    console.log(key, config.cols[key], scales[key].domain());
  }

  // now we are ready to draw!
  drawBubble();
}

console.log("Page loaded.");

</script>
</body>

## MarketHealthIndex_State.csv

          
            RegionType
            RegionName
            City
            State
            Metro
            CBSATitle
            SizeRank
            MarketHealthIndex
            SellForGain
            PrevForeclosed
            ForeclosureRatio
            ZHVI
            MoM
            YoY
            ForecastYoYPctChange
            StockOfREOs
            NegativeEquity
            Delinquency
            DaysOnMarket

            
              State
              Alaska
              
              AK
              
              
              9.6
              85.46
              
              
              263900
              0.456794822992006
              3.00546448087432
              0.0544410761652141
              12.2
              0.133051017998153
              0.0127879928929157
              89

            
              State
              Alabama
              
              AL
              
              
              2
              79.11
              11.2475
              5.3108
              122700
              0.0815660685154976
              0.491400491400491
              0.033716381418093
              25.8
              0.163747493402736
              0.03344252224344
              128

            
              State
              Arkansas
              
              AR
              
              
              4.2
              77.42
              6.4771
              2.5227
              115100
              0.261324041811847
              3.3213644524237
              0.0291920069504779
              31.5
              0.146923643975339
              0.030851303923143
              110

            
              State
              Arizona
              
              AZ
              
              
              4.6
              81.91
              7.9186
              3.357
              204200
              0.789733464955577
              7.58693361433088
              0.0365915768854064
              73
              0.176208332385921
              0.0250151422782854
              76

            
              State
              California
              
              CA
              
              
              7.4
              88.7
              6.412
              2.2965
              454700
              0.530621269069202
              6.31283610007014
              0.029566747305916
              56.8
              0.0944519577924134
              0.0339595696138096
              74

            
              State
              Colorado
              
              CO
              
              
              9.4
              94.72
              4.1451
              1.7056
              288400
              0.663176265270506
              12.5243854857589
              0.041140776699029
              48.4
              0.0781744724582258
              0.0157317861144281
              69

            
              State
              Connecticut
              
              CT
              
              
              1
              68.88
              4.6326
              0.9774
              237000
              -0.0843170320404722
              -0.294488851493479
              0.00572995780590713
              44.1
              0.161659353592864
              0.0660956785085172
              128

            
              State
              District of Columbia
              
              DC
              
              
              8
              93.91
              1.4805
              1.0222
              497800
              0.443906376109766
              5.6675864996816
              
              39.2
              0.108698156682028
              0.0596184419713831
              62.5

            
              State
              Delaware
              
              DE
              
              
              4.4
              74.77
              1.7209
              0.4051
              206600
              0.437530384054448
              1.3241785188818
              0.0136544046466602
              8.5
              0.151377575178907
              0.0777452728607814
              108

            
              State
              Florida
              
              FL
              
              
              2.4
              80.22
              
              
              181800
              0.553097345132743
              8.6670651524208
              0.00987348734873494
              81.5
              0.155867559820654
              0.0701959466382152
              102

            
              State
              Georgia
              
              GA
              
              
              3.6
              73.25
              
              
              142700
              0.492957746478873
              4.69552457813646
              0.0408128941836019
              52.9
              0.182943606388428
              0.0391921258545321
              105

            
              State
              Hawaii
              
              HI
              
              
              7.6
              88.99
              4.4882
              1.2476
              552900
              0.363042294427301
              5.55555555555556
              0.0215644782058237
              39
              0.0565569399903978
              0.0693669673533878
              88

            
              State
              Iowa
              
              IA
              
              
              6.6
              85.86
              2.4798
              1.6684
              130700
              0.153256704980843
              2.99448384554768
              0.0348890589135424
              9.5
              0.114892532817561
              0.0246954429708859
              92

            
              State
              Idaho
              
              ID
              
              
              8.6
              85.25
              
              
              171900
              0.29171528588098
              4.94505494505495
              0.0478417684700407
              12.6
              0.159728867110669
              0.0207675294176652
              80

            
              State
              Illinois
              
              IL
              
              
              0.6
              68.33
              
              
              157500
              0.127145581691036
              1.35135135135135
              0.0289015873015872
              69.2
              0.198274902155552
              0.0475238367206265
              118

            
              State
              Indiana
              
              IN
              
              
              5.2
              85.79
              
              
              115500
              0.260416666666667
              3.49462365591398
              0.0336363636363637
              23.1
              0.159386671457181
              0.0350856304087337
              105

            
              State
              Kansas
              
              KS
              
              
              6.8
              87.8
              
              
              123000
              0.081366965012205
              4.59183673469388
              0.0407398373983741
              2.3
              0.127992545652083
              0.0246999017892182
              86

            
              State
              Kentucky
              
              KY
              
              
              5.8
              81.21
              1.8468
              1.0153
              127000
              0.157728706624606
              2.6677445432498
              0.0034960629921259
              4.2
              0.127820860910438
              0.030873740724274
              98

            
              State
              Massachusetts
              
              MA
              
              
              4
              88.06
              10.6525
              3.4052
              341000
              0.264628050573361
              5.50742574257426
              0.0184105571847508
              23.9
              0.0814421566976887
              0.0622595424013301
              90

            
              State
              Maryland
              
              MD
              
              
              0.2
              75.78
              14.9845
              4.9674
              249800
              0.120240480961924
              0.0801282051282051
              0.00624099279423529
              55
              0.189386283054485
              0.0631656963363796
              123

            
              State
              Maine
              
              ME
              
              
              3.8
              100
              
              1.7975
              
              
              0.156144261114115
              0.0666754605136737
              107

            
              State
              Michigan
              
              MI
              
              
              1.8
              80.23
              
              
              120800
              0.24896265560166
              2.89608177172061
              0.0274834437086093
              82.7
              0.165168568585707
              0.0261425817740477
              100

            
              State
              Minnesota
              
              MN
              
              
              5.4
              79.46
              8.5976
              2.7348
              184500
              0.490196078431373
              3.76827896512936
              0.0304661246612465
              35.3
              0.119573706240902
              0.0213872614281052
              96

            
              State
              Missouri
              
              MO
              
              
              2.6
              76.83
              
              
              133600
              0.225056264066016
              3.80730380730381
              0.0308682634730539
              42.7
              0.177042302194854
              0.0261514405050138
              88

            
              State
              Mississippi
              
              MS
              
              
              2.8
              87.5
              
              
              113000
              -0.0884173297966401
              0.177304964539007
              0.0315486725663716
              2.4
              0.164672706941273
              0.0380722133747935
              111

            
              State
              Montana
              
              MT
              
              
              8.4
              88.04
              
              
              186300
              0
              4.54545454545455
              0.0225067096081588
              8
              0.110721658966204
              0.0159961014556571
              96

            
              State
              North Carolina
              
              NC
              
              
              3.2
              78.52
              7.3583
              3.3867
              148800
              0.269541778975741
              3.19001386962552
              0.0283333333333333
              26.5
              0.127546036729209
              0.0390260572650456
              105

            
              State
              North Dakota
              
              ND
              
              
              9.2
              98.22
              
              
              198800
              0.862506341958397
              3.81201044386423
              0.00980885311871238
              11.6
              0.0896525381345252
              0.00610976309586885
              78

            
              State
              Nebraska
              
              NE
              
              
              9.8
              87.22
              1.9723
              1.3395
              139900
              0.792507204610951
              6.54988575780655
              0.0326233023588278
              7.6
              0.0968317778763969
              0.0147733542432719
              74

            
              State
              New Hampshire
              
              NH
              
              
              6
              81.64
              
              
              225200
              0.267141585040071
              3.11355311355311
              0.0208214920071048
              22.5
              0.120115377089286
              0.0289117427513203
              107

            
              State
              New Jersey
              
              NJ
              
              
              0.8
              76.74
              5.6157
              3.1697
              286500
              0.174825174825175
              0.069856793573175
              0.000432809773123877
              41.9
              0.148851274960199
              0.135650947811223
              147

            
              State
              New Mexico
              
              NM
              
              
              0.4
              70.9
              
              
              163500
              -0.0611246943765281
              -1.26811594202899
              0.0254128440366972
              20.1
              0.205557794686556
              0.0489998014500204
              108

            
              State
              Nevada
              
              NV
              
              
              2.2
              81.19
              11.0443
              4.7904
              212300
              0.616113744075829
              10.2284527518172
              0.0554168629298164
              75.2
              0.196690951196553
              0.0694865373848108
              79

            
              State
              New York
              
              NY
              
              
              3.4
              87.04
              4.0446
              2.4583
              262300
              -0.114242193450114
              0.190985485103132
              0.00949675943576067
              34.1
              0.104849098783273
              0.105548844976493
              153

            
              State
              Ohio
              
              OH
              
              
              1.2
              78.93
              11.0344
              4.0424
              118800
              0.337837837837838
              2.7681660899654
              0.0301094276094276
              41.3
              0.158591751618505
              0.0399340260224462
              97

            
              State
              Oklahoma
              
              OK
              
              
              6.2
              85.66
              2.8653
              1.3054
              113400
              0.353982300884956
              2.99727520435967
              0.0300440917107583
              43.6
              0.114799756243294
              0.0294596891695425
              92

            
              State
              Oregon
              
              OR
              
              
              6.4
              89.81
              7.8771
              4.7563
              263100
              0.68886337543054
              9.99163879598662
              0.0383010262257697
              34.7
              0.0888086331447225
              0.0462554168175015
              77

            
              State
              Pennsylvania
              
              PA
              
              
              1.6
              82.06
              8.8267
              3.6411
              152000
              0.131752305665349
              1.13107119095143
              0.0149342105263157
              28.7
              0.132700000846174
              0.0483065004035325
              112

            
              State
              Rhode Island
              
              RI
              
              
              3
              75.94
              7.2019
              4.3131
              229100
              0.526546731022378
              3.94736842105263
              0.0340419030990833
              42.2
              0.15227281597576
              0.0561703358364075
              111

            
              State
              South Carolina
              
              SC
              
              
              1.4
              76.63
              9.3408
              3.103
              135100
              0.148257968865827
              2.73764258555133
              0.027720207253886
              36.7
              0.126592703350879
              0.0500215956550187
              119

            
              State
              South Dakota
              
              SD
              
              
              10
              
              
              174500
              0.345025876940771
              13.5328562134027
              
              8.7
              0.0960165630535205
              0.0112106507117507

            
              State
              Tennessee
              
              TN
              
              
              5.6
              83.4
              
              
              130100
              0.30840400925212
              3.83080606544294
              0.0362720983858571
              49.8
              0.130069926709116
              0.0283741345810648
              103

            
              State
              Texas
              
              TX
              
              
              9
              89.12
              
              
              151700
              0.397088021178028
              8.20256776034237
              0.0456624917600528
              37.5
              0.0819460424258414
              0.0219254421863602
              76

            
              State
              Utah
              
              UT
              
              
              7
              83.02
              
              
              222100
              0.406871609403255
              5.91320934668574
              0.0467041873030167
              33.6
              0.162004332949875
              0.0182526732573478
              80

            
              State
              Virginia
              
              VA
              
              
              4.8
              78.77
              4.8876
              1.8243
              232000
              0.215982721382289
              1.08932461873638
              0.00943965517241385
              14.5
              0.150786442330875
              0.0277317434392384
              98

            
              State
              Vermont
              
              VT
              
              
              8.2
              92.22
              2.3966
              0.9011
              218300
              -0.182898948331047
              -0.365130077590141
              0.0421942281264316
              21.5
              
              
              129

            
              State
              Washington
              
              WA
              
              
              7.2
              89.15
              6.8105
              3.4292
              286300
              0.597329585382994
              9.23311713086608
              0.0510583304226335
              36.2
              0.106468729394489
              0.0367920580786563
              74

            
              State
              Wisconsin
              
              WI
              
              
              5
              75.87
              3.8706
              1.3611
              156800
              0.0638162093171666
              3.43007915567282
              0.0292474489795918
              25.6
              0.135819218652556
              0.031677777868676
              108

            
              State
              West Virginia
              
              WV
              
              
              7.8
              83.94
              4.3123
              1.128
              93000
              0.431965442764579
              -1.16896918172157
              0.0304301075268818
              3.7
              0.147985447754243
              0.0231932999663267
              129

            
              State
              Wyoming
              
              WY
              
              
              8.8
              93.15
              
              
              192500
              0.051975051975052
              3.99783900594273
              0.0382077922077921
              11
              
              
              75

## style.css
body {
  font-family: sans-serif;
  background-color: whitesmoke;
}

svg {
  background-color: white;
}

.axis path,
.axis line,
.legend circle  {
  stroke: dimgrey;
  fill: none;
}

.axis text,
.legend text {
  fill: dimgrey;
  font-size: 12px;
}

.bubbles circle {
  stroke: white;
  stroke-width: 1px;
}

.bubbles text {
  font-size: 10px;
}


## thumbnail.png

      
    Raw
  

              thumbnail.png
	/*
	* Draws our parallel coordinates. Assumes the following globals:
	* - data
	* - config
	* - scales
	*
	* Note: Want to avoid these kinds of globals, and/or passing these values
	* around to related functions? Look into closures in JavaScript!
	*/
	function drawBubble() {
	var svg = d3.select("body").append("svg")
	.attr("width", config.svg.width)
	.attr("height", config.svg.height);

	var plot = svg.append("g")
	.attr("id", "plot")
	.attr("transform", translate(config.pad.left, config.pad.top));

	// oh noes when we draw our bubbles fall off our plot!
	// we need to adjust to account for the radius size

	// we could try to subtract the max radius size from our range...
	// var xrange = scales.x.range();
	// var xdomain = scales.x.domain();
	// var xshift = config.r.max / (xrange[1] - xrange[0]);

	// xrange[0] += config.r.max;
	// xrange[1] -= config.r.max;
	// scales.x.range(xrange);

	// var yrange = scales.y.range();
	// yrange[0] -= config.r.max;
	// yrange[1] += config.r.max;
	// scales.y.range(yrange);

	// the above approach means our axis lines do not connect anymore
	// instead we can shift the domain---but by how much? a shift by 10
	// in the x-direction is different than 10 in the y-direction. we
	// will calculate what percent the max radius size is of each range
	// and shift the domain by that percent
	var xrange = scales.x.range();
	var xdomain = scales.x.domain();
	var xshift = (config.r.max + 5) / (xrange[1] - xrange[0]); // plus 5 padding
	xshift = xshift * (xdomain[1] - xdomain[0]);
	scales.x.domain([xdomain[0] - xshift, xdomain[1] + xshift]);

	var yrange = scales.y.range();
	var ydomain = scales.y.domain();
	var yshift = (config.r.max + 5) / (yrange[0] - yrange[1]);
	yshift = yshift * (ydomain[1] - ydomain[0]); // note not swapped
	scales.y.domain([ydomain[0] - yshift, ydomain[1] + yshift]);

	drawAxisLines(plot);
	drawCircles(plot);

	drawAreaLegend(plot);
	drawFillLegend(svg);

	drawTitle(svg);

	console.log("drawing complete");
	}

	function drawAxisLines(plot) {
	var xaxis = d3.svg.axis().scale(scales.x).orient("bottom");
	var yaxis = d3.svg.axis().scale(scales.y).orient("left");

	plot.append("g")
	.attr("id", "x")
	.attr("class", "axis")
	.attr("transform", translate(0, config.height))
	.call(xaxis);

	plot.select("g#x")
	.append("text")
	.attr("text-anchor", "end")
	.attr("x", d3.max(scales.x.range()))
	.attr("y", 0)
	.attr("dx", 0)
	.attr("dy", "-5px")
	.text(config.cols.x);

	plot.append("g")
	.attr("id", "y")
	.attr("class", "axis")
	.call(yaxis);

	plot.select("g#y")
	.append("text")
	.attr("text-anchor", "end")
	.attr("x", 0)
	.attr("y", d3.min(scales.y.range()))
	.attr("dx", 0)
	.attr("dy", "1em")
	.attr("transform", "rotate(-90,0," + d3.min(scales.y.range()) + ")")
	.text(config.cols.y);
	}

	function drawCircles(plot) {
	var bubbles = plot.append("g").attr("class", "bubbles")
	.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("id", function(d) { return d.State; });

	bubbles.append("circle")
	.attr("cx", function(d) { return scales.x(d[config.cols.x]); })
	.attr("cy", function(d) { return scales.y(d[config.cols.y]); })
	.attr("r", function(d) { return scales.area(d[config.cols.area]); })
	.style("fill", function(d) { return scales.fill(d[config.cols.fill]); });

	bubbles.append("text")
	.attr("x", function(d) { return scales.x(d[config.cols.x]); })
	.attr("y", function(d) { return scales.y(d[config.cols.y]); })
	.attr("dx", 0)
	.attr("dy", "4px")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.State; });
	}

	function drawAreaLegend(plot) {
	var legend = plot.append("g")
	.attr("id", "area-legend")
	.attr("class", "legend");

	legend.append("text")
	.attr("text-anchor", "middle")
	.attr("x", config.r.max)
	.attr("y", config.r.max + config.r.max)
	.attr("dx", 0)
	.attr("dy", "12px")
	.text(config.cols.area);

	legend.append("circle")
	.attr("cx", config.r.max)
	.attr("cy", config.r.max)
	.attr("r", config.r.max);

	legend.append("text")
	.attr("text-anchor", "middle")
	.attr("x", config.r.max)
	.attr("y", 0)
	.attr("dx", 0)
	.attr("dy", "12px")
	.text(Math.round(scales.area.invert(config.r.max)));

	var mid = config.r.min + (config.r.max - config.r.min) / 2;

	legend.append("circle")
	.attr("cx", config.r.max)
	.attr("cy", config.r.max + config.r.max - mid)
	.attr("r", mid);

	legend.append("text")
	.attr("text-anchor", "middle")
	.attr("x", config.r.max)
	.attr("y", config.r.max + config.r.max - mid - mid)
	.attr("dx", 0)
	.attr("dy", "12px")
	.text(Math.round(scales.area.invert(mid)));

	var bounds = legend.node().getBBox();
	var yshift = config.height - bounds.height;

	legend.attr("transform", translate(5, yshift));
	}

	/*
	* draw plot title in upper left margin
	* will center the text in the margin
	*/
	var drawTitle = function(svg) {
	var title = svg.append("text")
	.text("Zillow Market Health Index by State")
	.attr("id", "title")
	.attr("x", config.pad.left)
	.attr("y", 0)
	.attr("dx", 0)
	.attr("dy", "18px")
	.attr("text-anchor", "left")
	.attr("font-size", "18px");

	// shift text so it is centered in plot area
	var bounds = title.node().getBBox();
	var yshift = (config.pad.top - bounds.height) / 2;
	title.attr("transform", translate(0, yshift));
	};

	/*
	* draws a fill legend in the top right corner
	* adapted from heatmap demo
	*/
	var drawFillLegend = function(svg) {
	// map our color domain to percentage stops for our gradient
	// we know min is 0% and max is 100%
	// but we have to find where the average falls between there
	var percentScale = d3.scale.linear()
	.domain(d3.extent(scales.fill.domain()))
	.rangeRound([0, 100]);

	// setup gradient for legend
	// http://bl.ocks.org/mbostock/1086421
	svg.append("defs")
	.append("linearGradient")
	.attr("id", "gradient")
	.selectAll("stop")
	.data(scales.fill.domain())
	.enter()
	.append("stop")
	.attr("offset", function(d) {
	return "" + percentScale(d) + "%";
	})
	.attr("stop-color", function(d) {
	return scales.fill(d);
	});

	// create group for legend elements
	// will translate it to the appropriate location later
	var legend = svg.append("g")
	.attr("id", "fill-legend");

	// draw the color rectangle with gradient
	legend.append("rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", config.legend.width)
	.attr("height", config.legend.height)
	.attr("fill", "url(#gradient)");

	// create another scale so we can easily draw an axis on the color box
	var legendScale = d3.scale.linear()
	.domain(percentScale.domain())
	.range([0, config.legend.width]);

	// use an axis generator to draw axis under color box
	var legendAxis = d3.svg.axis()
	.scale(legendScale)
	.orient("bottom")
	.innerTickSize(4)
	.outerTickSize(4)
	.tickPadding(4)
	.tickValues(scales.fill.domain());

	// draw it!
	legend.append("g")
	.attr("id", "fill")
	.attr("class", "axis")
	.attr("transform", translate(0, config.legend.height))
	.call(legendAxis);

	legend.select("g#fill")
	.append("text")
	.attr("class", "axis")
	.attr("text-anchor", "middle")
	.attr("x", config.legend.width / 2.0)
	.attr("y", 8)
	.attr("dx", 0)
	.attr("dy", ".71em")
	.text(config.cols.fill);

	// calculate how much to shift legend group to fit in our plot area nicely
	var bounds = legend.node().getBBox();
	var xshift = config.svg.width - bounds.width - config.pad.right;
	var yshift = config.pad.top - bounds.height;
	legend.attr("transform", translate(xshift, yshift));
	};

	function translate(x, y) {
	return "translate(" + x + "," + y + ")";
	}
	// This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
	var colorbrewer = {YlGn: {
	3: ["#f7fcb9","#addd8e","#31a354"],
	4: ["#ffffcc","#c2e699","#78c679","#238443"],
	5: ["#ffffcc","#c2e699","#78c679","#31a354","#006837"],
	6: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"],
	7: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
	8: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
	9: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]
	},YlGnBu: {
	3: ["#edf8b1","#7fcdbb","#2c7fb8"],
	4: ["#ffffcc","#a1dab4","#41b6c4","#225ea8"],
	5: ["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"],
	6: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"],
	7: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
	8: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
	9: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]
	},GnBu: {
	3: ["#e0f3db","#a8ddb5","#43a2ca"],
	4: ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"],
	5: ["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"],
	6: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"],
	7: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
	8: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
	9: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]
	},BuGn: {
	3: ["#e5f5f9","#99d8c9","#2ca25f"],
	4: ["#edf8fb","#b2e2e2","#66c2a4","#238b45"],
	5: ["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"],
	6: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"],
	7: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
	8: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
	9: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]
	},PuBuGn: {
	3: ["#ece2f0","#a6bddb","#1c9099"],
	4: ["#f6eff7","#bdc9e1","#67a9cf","#02818a"],
	5: ["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"],
	6: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"],
	7: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
	8: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
	9: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]
	},PuBu: {
	3: ["#ece7f2","#a6bddb","#2b8cbe"],
	4: ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"],
	5: ["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"],
	6: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"],
	7: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
	8: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
	9: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"]
	},BuPu: {
	3: ["#e0ecf4","#9ebcda","#8856a7"],
	4: ["#edf8fb","#b3cde3","#8c96c6","#88419d"],
	5: ["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"],
	6: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"],
	7: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
	8: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
	9: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"]
	},RdPu: {
	3: ["#fde0dd","#fa9fb5","#c51b8a"],
	4: ["#feebe2","#fbb4b9","#f768a1","#ae017e"],
	5: ["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"],
	6: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"],
	7: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
	8: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
	9: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]
	},PuRd: {
	3: ["#e7e1ef","#c994c7","#dd1c77"],
	4: ["#f1eef6","#d7b5d8","#df65b0","#ce1256"],
	5: ["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"],
	6: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"],
	7: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
	8: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
	9: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"]
	},OrRd: {
	3: ["#fee8c8","#fdbb84","#e34a33"],
	4: ["#fef0d9","#fdcc8a","#fc8d59","#d7301f"],
	5: ["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"],
	6: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"],
	7: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
	8: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
	9: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]
	},YlOrRd: {
	3: ["#ffeda0","#feb24c","#f03b20"],
	4: ["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"],
	5: ["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"],
	6: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"],
	7: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
	8: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
	9: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]
	},YlOrBr: {
	3: ["#fff7bc","#fec44f","#d95f0e"],
	4: ["#ffffd4","#fed98e","#fe9929","#cc4c02"],
	5: ["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"],
	6: ["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"],
	7: ["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
	8: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
	9: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]
	},Purples: {
	3: ["#efedf5","#bcbddc","#756bb1"],
	4: ["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"],
	5: ["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"],
	6: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"],
	7: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
	8: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
	9: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]
	},Blues: {
	3: ["#deebf7","#9ecae1","#3182bd"],
	4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"],
	5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"],
	6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"],
	7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
	8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
	9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]
	},Greens: {
	3: ["#e5f5e0","#a1d99b","#31a354"],
	4: ["#edf8e9","#bae4b3","#74c476","#238b45"],
	5: ["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"],
	6: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"],
	7: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
	8: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
	9: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"]
	},Oranges: {
	3: ["#fee6ce","#fdae6b","#e6550d"],
	4: ["#feedde","#fdbe85","#fd8d3c","#d94701"],
	5: ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"],
	6: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"],
	7: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
	8: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
	9: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"]
	},Reds: {
	3: ["#fee0d2","#fc9272","#de2d26"],
	4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"],
	5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"],
	6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"],
	7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
	8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
	9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]
	},Greys: {
	3: ["#f0f0f0","#bdbdbd","#636363"],
	4: ["#f7f7f7","#cccccc","#969696","#525252"],
	5: ["#f7f7f7","#cccccc","#969696","#636363","#252525"],
	6: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"],
	7: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
	8: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
	9: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]
	},PuOr: {
	3: ["#f1a340","#f7f7f7","#998ec3"],
	4: ["#e66101","#fdb863","#b2abd2","#5e3c99"],
	5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"],
	6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"],
	7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"],
	8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"],
	9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"],
	10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],
	11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]
	},BrBG: {
	3: ["#d8b365","#f5f5f5","#5ab4ac"],
	4: ["#a6611a","#dfc27d","#80cdc1","#018571"],
	5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"],
	6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"],
	7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"],
	8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"],
	9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"],
	10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],
	11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]
	},PRGn: {
	3: ["#af8dc3","#f7f7f7","#7fbf7b"],
	4: ["#7b3294","#c2a5cf","#a6dba0","#008837"],
	5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"],
	6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"],
	7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"],
	8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
	9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
	10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],
	11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]
	},PiYG: {
	3: ["#e9a3c9","#f7f7f7","#a1d76a"],
	4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"],
	5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"],
	6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"],
	7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"],
	8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
	9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
	10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],
	11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]
	},RdBu: {
	3: ["#ef8a62","#f7f7f7","#67a9cf"],
	4: ["#ca0020","#f4a582","#92c5de","#0571b0"],
	5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"],
	6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"],
	7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"],
	8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
	9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
	10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],
	11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]
	},RdGy: {
	3: ["#ef8a62","#ffffff","#999999"],
	4: ["#ca0020","#f4a582","#bababa","#404040"],
	5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"],
	6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"],
	7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"],
	8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"],
	9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"],
	10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],
	11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]
	},RdYlBu: {
	3: ["#fc8d59","#ffffbf","#91bfdb"],
	4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"],
	5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"],
	6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"],
	7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"],
	8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"],
	9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"],
	10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],
	11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]
	},Spectral: {
	3: ["#fc8d59","#ffffbf","#99d594"],
	4: ["#d7191c","#fdae61","#abdda4","#2b83ba"],
	5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"],
	6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"],
	7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"],
	8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"],
	9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"],
	10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],
	11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]
	},RdYlGn: {
	3: ["#fc8d59","#ffffbf","#91cf60"],
	4: ["#d7191c","#fdae61","#a6d96a","#1a9641"],
	5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"],
	6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"],
	7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"],
	8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
	9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
	10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],
	11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]
	},Accent: {
	3: ["#7fc97f","#beaed4","#fdc086"],
	4: ["#7fc97f","#beaed4","#fdc086","#ffff99"],
	5: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"],
	6: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f"],
	7: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"],
	8: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"]
	},Dark2: {
	3: ["#1b9e77","#d95f02","#7570b3"],
	4: ["#1b9e77","#d95f02","#7570b3","#e7298a"],
	5: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e"],
	6: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02"],
	7: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"],
	8: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"]
	},Paired: {
	3: ["#a6cee3","#1f78b4","#b2df8a"],
	4: ["#a6cee3","#1f78b4","#b2df8a","#33a02c"],
	5: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"],
	6: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"],
	7: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"],
	8: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"],
	9: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"],
	10: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"],
	11: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"],
	12: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]
	},Pastel1: {
	3: ["#fbb4ae","#b3cde3","#ccebc5"],
	4: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4"],
	5: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6"],
	6: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc"],
	7: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd"],
	8: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec"],
	9: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]
	},Pastel2: {
	3: ["#b3e2cd","#fdcdac","#cbd5e8"],
	4: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4"],
	5: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9"],
	6: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae"],
	7: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc"],
	8: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"]
	},Set1: {
	3: ["#e41a1c","#377eb8","#4daf4a"],
	4: ["#e41a1c","#377eb8","#4daf4a","#984ea3"],
	5: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00"],
	6: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33"],
	7: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"],
	8: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"],
	9: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]
	},Set2: {
	3: ["#66c2a5","#fc8d62","#8da0cb"],
	4: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3"],
	5: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854"],
	6: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"],
	7: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"],
	8: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"]
	},Set3: {
	3: ["#8dd3c7","#ffffb3","#bebada"],
	4: ["#8dd3c7","#ffffb3","#bebada","#fb8072"],
	5: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"],
	6: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"],
	7: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"],
	8: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"],
	9: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"],
	10: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"],
	11: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"],
	12: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
	}};
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link href="style.css" rel="stylesheet" type="text/css">

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

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

	// csv file to visualize
	// downloaded from http://www.zillow.com/research/data/
	var filename = "MarketHealthIndex_State.csv";

	// global to store data
	var data = [];

	// global to store config parameters (size, padding, etc.)
	var config = {
	svg: {width: 960, height: 500},
	pad: {top: 50, bottom: 30, left: 40, right: 10},
	r: {min: 8, max: 40},
	fill: {min: "#f7fcb9", max: "#31a354"}
	};

	config.width = config.svg.width - config.pad.left - config.pad.right;
	config.height = config.svg.height - config.pad.top - config.pad.bottom;

	config.legend = {width: 200, height: 20};

	// columns we plan to encode
	config.cols = {
	x: "MarketHealthIndex",
	y: "DaysOnMarket",
	area: "SellForGain",
	fill: "ForeclosureRatio"
	};

	// global to store scales (used by axis and draw methods)
	var scales = {
	x: d3.scale.linear().range([0, config.width]),
	y: d3.scale.linear().range([config.height, 0]),
	area: d3.scale.sqrt().range([config.r.min, config.r.max]),
	fill: d3.scale.linear().range([config.fill.min, config.fill.max])
	};

	// fetch csv, use accessor to process each row, and then call the callback
	d3.csv(filename, accessor, callback);

	/*
	* Converts cell values into appropriate data types.
	* Also calculates domains for certain headers.
	*
	* The headers are hard-coded to work with this specific csv.
	*/
	function accessor(row) {
	var out = {};

	for (var col in row) {
	switch(col) {
	case "RegionName":
	case "State":
	out[col] = row[col];
	break;

	case "DaysOnMarket":
	case "ZHVI":
	out[col] = (row[col] !== "") ? parseInt(row[col]) : null;
	break;

	case "MarketHealthIndex":
	case "SellForGain":
	case "PrevForeclosed":
	case "ForeclosureRatio":
	case "MoM":
	case "YoY":
	case "ForecastYoYPctChange":
	case "StockOfREOs":
	case "NegativeEquity":
	case "Delinquency":
	out[col] = (row[col] !== "") ? parseFloat(row[col]) : null;
	break;
	}
	}

	return out;
	}

	/*
	* Called when the CSV is loaded. Outputs some debugging information,
	* and then calls the draw() method.
	*/
	function callback(error, csv) {
	if (error) {
	console.warn(error);
	return;
	}
	else if (csv.length < 1) {
	console.warn("Warning: No rows found!");
	return;
	}

	console.log("Loaded " + csv.length + " rows from " + filename + ".");

	var headers = d3.map(csv[0]).keys();
	console.log("Headers:", headers);
	console.log("Last Row:", csv[csv.length - 1]);

	// lets filter out rows with null values for our important columns
	data = csv.filter(function(row) {
	// for all the columns we are encoding
	for (var key in config.cols) {
	// if the data for this (row, col) is null
	if (row[config.cols[key]] === null) {
	return false; // filter out this row
	}
	}

	return true; // else keep the row
	});

	// we should also sort our data by the area column
	data.sort(function(a, b) {
	return b[config.cols.area] - a[config.cols.area];
	});

	console.log("Filtered out " + (csv.length - data.length) + " rows.");

	// lets get the values we will encode to set our domains
	// var values = {};
	// values["x"] = data.map(function(row) { return row[config.cols.x]; });
	// values["y"] = data.map(function(row) { return row[config.cols.y]; });
	// values["area"] = data.map(function(row) { return row[config.cols.area]; });
	// values["fill"] = data.map(function(row) { return row[config.cols.fill]; });
	// console.log("Values:", values);

	// calculate the extent of each
	// var extent = {};
	// extent["x"] = d3.extent(values["x"]);
	// extent["y"] = d3.extent(values["y"]);
	// extent["area"] = d3.extent(values["area"]);
	// extent["fill"] = d3.extent(values["fill"]);
	// console.table(extent);

	// finally we can set the scales of each
	// scales["x"].domain(extent["x"]);
	// scales["y"].domain(extent["y"]);
	// scales["area"].domain(extent["area"]);
	// scales["fill"].domain(extent["fill"]);

	// or, we can do everything above programatically instead!
	for (var key in config.cols) {
	// grab the associated column from our dataset
	var col = config.cols[key];
	scales[key].domain( // set domain of key (x, y, area, fill)
	d3.extent( // find the min/max
	data.map(function(row) { // grab col value from our dataset
	return row[col];
	})
	)
	);
	}

	// sanity check we are setting our scales properly
	for (var key in scales) {
	console.log(key, config.cols[key], scales[key].domain());
	}

	// now we are ready to draw!
	drawBubble();
	}

	console.log("Page loaded.");

	</script>
	</body>
RegionType	RegionName	City	State	Metro	CBSATitle	SizeRank	MarketHealthIndex	SellForGain	PrevForeclosed	ForeclosureRatio	ZHVI	MoM	YoY	ForecastYoYPctChange	StockOfREOs	NegativeEquity	Delinquency	DaysOnMarket
State	Alaska		AK				9.6	85.46			263900	0.456794822992006	3.00546448087432	0.0544410761652141	12.2	0.133051017998153	0.0127879928929157	89
State	Alabama		AL				2	79.11	11.2475	5.3108	122700	0.0815660685154976	0.491400491400491	0.033716381418093	25.8	0.163747493402736	0.03344252224344	128
State	Arkansas		AR				4.2	77.42	6.4771	2.5227	115100	0.261324041811847	3.3213644524237	0.0291920069504779	31.5	0.146923643975339	0.030851303923143	110
State	Arizona		AZ				4.6	81.91	7.9186	3.357	204200	0.789733464955577	7.58693361433088	0.0365915768854064	73	0.176208332385921	0.0250151422782854	76
State	California		CA				7.4	88.7	6.412	2.2965	454700	0.530621269069202	6.31283610007014	0.029566747305916	56.8	0.0944519577924134	0.0339595696138096	74
State	Colorado		CO				9.4	94.72	4.1451	1.7056	288400	0.663176265270506	12.5243854857589	0.041140776699029	48.4	0.0781744724582258	0.0157317861144281	69
State	Connecticut		CT				1	68.88	4.6326	0.9774	237000	-0.0843170320404722	-0.294488851493479	0.00572995780590713	44.1	0.161659353592864	0.0660956785085172	128
State	District of Columbia		DC				8	93.91	1.4805	1.0222	497800	0.443906376109766	5.6675864996816		39.2	0.108698156682028	0.0596184419713831	62.5
State	Delaware		DE				4.4	74.77	1.7209	0.4051	206600	0.437530384054448	1.3241785188818	0.0136544046466602	8.5	0.151377575178907	0.0777452728607814	108
State	Florida		FL				2.4	80.22			181800	0.553097345132743	8.6670651524208	0.00987348734873494	81.5	0.155867559820654	0.0701959466382152	102
State	Georgia		GA				3.6	73.25			142700	0.492957746478873	4.69552457813646	0.0408128941836019	52.9	0.182943606388428	0.0391921258545321	105
State	Hawaii		HI				7.6	88.99	4.4882	1.2476	552900	0.363042294427301	5.55555555555556	0.0215644782058237	39	0.0565569399903978	0.0693669673533878	88
State	Iowa		IA				6.6	85.86	2.4798	1.6684	130700	0.153256704980843	2.99448384554768	0.0348890589135424	9.5	0.114892532817561	0.0246954429708859	92
State	Idaho		ID				8.6	85.25			171900	0.29171528588098	4.94505494505495	0.0478417684700407	12.6	0.159728867110669	0.0207675294176652	80
State	Illinois		IL				0.6	68.33			157500	0.127145581691036	1.35135135135135	0.0289015873015872	69.2	0.198274902155552	0.0475238367206265	118
State	Indiana		IN				5.2	85.79			115500	0.260416666666667	3.49462365591398	0.0336363636363637	23.1	0.159386671457181	0.0350856304087337	105
State	Kansas		KS				6.8	87.8			123000	0.081366965012205	4.59183673469388	0.0407398373983741	2.3	0.127992545652083	0.0246999017892182	86
State	Kentucky		KY				5.8	81.21	1.8468	1.0153	127000	0.157728706624606	2.6677445432498	0.0034960629921259	4.2	0.127820860910438	0.030873740724274	98
State	Massachusetts		MA				4	88.06	10.6525	3.4052	341000	0.264628050573361	5.50742574257426	0.0184105571847508	23.9	0.0814421566976887	0.0622595424013301	90
State	Maryland		MD				0.2	75.78	14.9845	4.9674	249800	0.120240480961924	0.0801282051282051	0.00624099279423529	55	0.189386283054485	0.0631656963363796	123
State	Maine		ME				3.8	100		1.7975						0.156144261114115	0.0666754605136737	107
State	Michigan		MI				1.8	80.23			120800	0.24896265560166	2.89608177172061	0.0274834437086093	82.7	0.165168568585707	0.0261425817740477	100
State	Minnesota		MN				5.4	79.46	8.5976	2.7348	184500	0.490196078431373	3.76827896512936	0.0304661246612465	35.3	0.119573706240902	0.0213872614281052	96
State	Missouri		MO				2.6	76.83			133600	0.225056264066016	3.80730380730381	0.0308682634730539	42.7	0.177042302194854	0.0261514405050138	88
State	Mississippi		MS				2.8	87.5			113000	-0.0884173297966401	0.177304964539007	0.0315486725663716	2.4	0.164672706941273	0.0380722133747935	111
State	Montana		MT				8.4	88.04			186300	0	4.54545454545455	0.0225067096081588	8	0.110721658966204	0.0159961014556571	96
State	North Carolina		NC				3.2	78.52	7.3583	3.3867	148800	0.269541778975741	3.19001386962552	0.0283333333333333	26.5	0.127546036729209	0.0390260572650456	105
State	North Dakota		ND				9.2	98.22			198800	0.862506341958397	3.81201044386423	0.00980885311871238	11.6	0.0896525381345252	0.00610976309586885	78
State	Nebraska		NE				9.8	87.22	1.9723	1.3395	139900	0.792507204610951	6.54988575780655	0.0326233023588278	7.6	0.0968317778763969	0.0147733542432719	74
State	New Hampshire		NH				6	81.64			225200	0.267141585040071	3.11355311355311	0.0208214920071048	22.5	0.120115377089286	0.0289117427513203	107
State	New Jersey		NJ				0.8	76.74	5.6157	3.1697	286500	0.174825174825175	0.069856793573175	0.000432809773123877	41.9	0.148851274960199	0.135650947811223	147
State	New Mexico		NM				0.4	70.9			163500	-0.0611246943765281	-1.26811594202899	0.0254128440366972	20.1	0.205557794686556	0.0489998014500204	108
State	Nevada		NV				2.2	81.19	11.0443	4.7904	212300	0.616113744075829	10.2284527518172	0.0554168629298164	75.2	0.196690951196553	0.0694865373848108	79
State	New York		NY				3.4	87.04	4.0446	2.4583	262300	-0.114242193450114	0.190985485103132	0.00949675943576067	34.1	0.104849098783273	0.105548844976493	153
State	Ohio		OH				1.2	78.93	11.0344	4.0424	118800	0.337837837837838	2.7681660899654	0.0301094276094276	41.3	0.158591751618505	0.0399340260224462	97
State	Oklahoma		OK				6.2	85.66	2.8653	1.3054	113400	0.353982300884956	2.99727520435967	0.0300440917107583	43.6	0.114799756243294	0.0294596891695425	92
State	Oregon		OR				6.4	89.81	7.8771	4.7563	263100	0.68886337543054	9.99163879598662	0.0383010262257697	34.7	0.0888086331447225	0.0462554168175015	77
State	Pennsylvania		PA				1.6	82.06	8.8267	3.6411	152000	0.131752305665349	1.13107119095143	0.0149342105263157	28.7	0.132700000846174	0.0483065004035325	112
State	Rhode Island		RI				3	75.94	7.2019	4.3131	229100	0.526546731022378	3.94736842105263	0.0340419030990833	42.2	0.15227281597576	0.0561703358364075	111
State	South Carolina		SC				1.4	76.63	9.3408	3.103	135100	0.148257968865827	2.73764258555133	0.027720207253886	36.7	0.126592703350879	0.0500215956550187	119
State	South Dakota		SD				10				174500	0.345025876940771	13.5328562134027		8.7	0.0960165630535205	0.0112106507117507
State	Tennessee		TN				5.6	83.4			130100	0.30840400925212	3.83080606544294	0.0362720983858571	49.8	0.130069926709116	0.0283741345810648	103
State	Texas		TX				9	89.12			151700	0.397088021178028	8.20256776034237	0.0456624917600528	37.5	0.0819460424258414	0.0219254421863602	76
State	Utah		UT				7	83.02			222100	0.406871609403255	5.91320934668574	0.0467041873030167	33.6	0.162004332949875	0.0182526732573478	80
State	Virginia		VA				4.8	78.77	4.8876	1.8243	232000	0.215982721382289	1.08932461873638	0.00943965517241385	14.5	0.150786442330875	0.0277317434392384	98
State	Vermont		VT				8.2	92.22	2.3966	0.9011	218300	-0.182898948331047	-0.365130077590141	0.0421942281264316	21.5			129
State	Washington		WA				7.2	89.15	6.8105	3.4292	286300	0.597329585382994	9.23311713086608	0.0510583304226335	36.2	0.106468729394489	0.0367920580786563	74
State	Wisconsin		WI				5	75.87	3.8706	1.3611	156800	0.0638162093171666	3.43007915567282	0.0292474489795918	25.6	0.135819218652556	0.031677777868676	108
State	West Virginia		WV				7.8	83.94	4.3123	1.128	93000	0.431965442764579	-1.16896918172157	0.0304301075268818	3.7	0.147985447754243	0.0231932999663267	129
State	Wyoming		WY				8.8	93.15			192500	0.051975051975052	3.99783900594273	0.0382077922077921	11			75
	body {
	font-family: sans-serif;
	background-color: whitesmoke;
	}

	svg {
	background-color: white;
	}

	.axis path,
	.axis line,
	.legend circle {
	stroke: dimgrey;
	fill: none;
	}

	.axis text,
	.legend text {
	fill: dimgrey;
	font-size: 12px;
	}

	.bubbles circle {
	stroke: white;
	stroke-width: 1px;
	}

	.bubbles text {
	font-size: 10px;
	}