msbarry · August 29, 2015 13:56
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 body {
  text-align: center;
  width: 960px;
  margin: 0 auto;
 }
 .notes {
  font: 12px sans-serif;
  color: gray;
  margin-right: 100px;
 }

 .point {
  fill: red;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 text {
  font: 10px sans-serif;
 }

 .bin {
  shape-rendering: crispEdges;
 }

 .xbin,
 .ybin {
  fill: #ccc;
  shape-rendering: crispEdges;
 }
 </style>
 <body>
 <div id="container"></div>
 <div class="notes">
  List price vs. square feet for 781 home sales between 1997 and 2003 in and around San Luis Obispo county.
  2-dimensional data points in the middle represent the number of home listings at a given price and square footage.
  Additionally, row/column aggregations are included along the x and y axes as described on page 179 of Interactive
  Data Visualization by Ward, Grinstein, and Keim.  The height of a bar on the square footage axis represents the number
  of listings for a given square footage, regardless of price, and the same for bars along the price axis.
  Data courtesy of Cal Poly: <a href="https://wiki.csc.calpoly.edu/datasets/wiki/Houses">https://wiki.csc.calpoly.edu/datasets/wiki/Houses</a>.
 </div>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 // Set up the canvas
 var margin = {top: 10, right: 80, bottom: 30, left: 60},
    sideGraphWidth = 30,
    bottomGraphHeight = 40,
    histogramMargin = 10,
    width = 960 - margin.left - margin.right - sideGraphWidth,
    height = 400 - margin.top - margin.bottom - bottomGraphHeight;

 var svg = d3.select("#container").append("svg")
    .attr("width", width + margin.left + margin.right + sideGraphWidth)
    .attr("height", height + margin.top + margin.bottom + bottomGraphHeight)
  .append("g")
    .attr("transform", "translate(" + (margin.left + sideGraphWidth) + "," + (margin.top) + ")");

 // read in the data
 d3.csv('data.csv', clean, function (data) {

  // group the data into price/bin 2d bins and price and data 1d bins
  var rows = Math.floor(height / 7);
  var cols = Math.floor(width / 7);
  var bins = {};
  var xBins = [];
  var yBins = [];
  var rowScale = d3.scale.linear()
    .range([0, rows])
    .domain([0, d3.max(data, function (d) { return d.Price; })]);
  var colScale = d3.scale.linear()
    .range([0, cols])
    .domain([0, d3.max(data, function (d) { return d.Size; })]);
  data.forEach(function (sale) {
    var row = Math.floor(rowScale(sale.Price));
    var col = Math.floor(colScale(sale.Size));
    var key = row + '-' + col;
    bins[key] = (bins[key] || 0) + 1;
    xBins[col] = (xBins[col] || 0) + 1;
    yBins[row] = (yBins[row] || 0) + 1;
  });
  var binList = [];
  for (var row = 0; row < rows; row++) {
    for (var col = 0; col < cols; col++) {
      binList.push({row: row, col: col, value: bins[row + "-" + col] || 0});
      xBins[col] = xBins[col] || 0;
      yBins[row] = yBins[row] || 0;
    }
  }

  // render the 2D bin field
  var xbinToBands = d3.scale.ordinal()
    .rangeBands([0, width], 0, 0)
    .domain(d3.range(0, cols));
  var ybinToBands = d3.scale.ordinal()
    .rangeBands([height, 0], 0, 0)
    .domain(d3.range(0, rows));
  var color = d3.scale.sqrt()
    .domain([0, d3.max(binList, function (d) { return d.value; })])
    .range(['white', 'black']);
  svg.selectAll('.bin')
      .data(binList)
      .enter()
    .append('rect')
      .attr('class', 'bin')
      .attr('x', function (d) { return xbinToBands(d.col); })
      .attr('y', function (d) { return ybinToBands(d.row); })
      .attr('width', xbinToBands.rangeBand())
      .attr('height', ybinToBands.rangeBand())
      .attr('fill', function (d) { return color(d.value); })
      .attr('stroke', function (d) { return color(d.value); });

  // render the axes
  var x = d3.scale.linear()
    .range([0, width])
    .domain([0, d3.max(data, function (d) { return d.Size; })]);
  var y = d3.scale.linear()
    .range([height, 0])
    .domain([0, d3.max(data, function (d) { return d.Price; })]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(function (d) { return d + ' sq ft'; })
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(d3.format('$,s'))
    .orient("left");

  svg.append('g')
      .attr('class', 'x axis')
      .attr("transform", "translate(0," + (height + bottomGraphHeight) + ")")
      .call(xAxis);

  svg.append('g')
      .attr('class', 'y axis')
      .attr('transform', "translate(-" + sideGraphWidth + ",0)")
      .call(yAxis);

  // draw the x-axis histogram
  var xAxisHeightScale = d3.scale.linear()
      .domain([0, d3.max(xBins)])
      .range([0, bottomGraphHeight - histogramMargin]);
  svg.selectAll('.xbin')
      .data(xBins)
      .enter()
    .append('rect')
      .attr('class', 'xbin')
      .attr('x', function (d, i) { return xbinToBands(i); })
      .attr('y', function (d) { return bottomGraphHeight + height - xAxisHeightScale(d); })
      .attr('width', xbinToBands.rangeBand())
      .attr('height', xAxisHeightScale);

  // draw the y-axis historgram
  var yAxisWidthScale = d3.scale.linear()
      .domain([0, d3.max(yBins)])
      .range([0, sideGraphWidth - histogramMargin]);
  svg.selectAll('.ybin')
      .data(yBins)
      .enter()
    .append('rect')
      .attr('class', 'ybin')
      .attr('x', (-sideGraphWidth) + 1)
      .attr('y', function (d, i) { return ybinToBands(i); })
      .attr('height', ybinToBands.rangeBand())
      .attr('width', yAxisWidthScale);

 });

 function clean(datum) {
  datum.Price = +datum.Price;
  datum.Size = +datum.Size;
  return datum;
 }
 </script>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	text-align: center;
	width: 960px;
	margin: 0 auto;
	}
	.notes {
	font: 12px sans-serif;
	color: gray;
	margin-right: 100px;
	}

	.point {
	fill: red;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	text {
	font: 10px sans-serif;
	}

	.bin {
	shape-rendering: crispEdges;
	}

	.xbin,
	.ybin {
	fill: #ccc;
	shape-rendering: crispEdges;
	}
	</style>
	<body>
	<div id="container"></div>
	<div class="notes">
	List price vs. square feet for 781 home sales between 1997 and 2003 in and around San Luis Obispo county.
	2-dimensional data points in the middle represent the number of home listings at a given price and square footage.
	Additionally, row/column aggregations are included along the x and y axes as described on page 179 of Interactive
	Data Visualization by Ward, Grinstein, and Keim. The height of a bar on the square footage axis represents the number
	of listings for a given square footage, regardless of price, and the same for bars along the price axis.
	Data courtesy of Cal Poly: <a href="https://wiki.csc.calpoly.edu/datasets/wiki/Houses">https://wiki.csc.calpoly.edu/datasets/wiki/Houses</a>.
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	// Set up the canvas
	var margin = {top: 10, right: 80, bottom: 30, left: 60},
	sideGraphWidth = 30,
	bottomGraphHeight = 40,
	histogramMargin = 10,
	width = 960 - margin.left - margin.right - sideGraphWidth,
	height = 400 - margin.top - margin.bottom - bottomGraphHeight;

	var svg = d3.select("#container").append("svg")
	.attr("width", width + margin.left + margin.right + sideGraphWidth)
	.attr("height", height + margin.top + margin.bottom + bottomGraphHeight)
	.append("g")
	.attr("transform", "translate(" + (margin.left + sideGraphWidth) + "," + (margin.top) + ")");

	// read in the data
	d3.csv('data.csv', clean, function (data) {

	// group the data into price/bin 2d bins and price and data 1d bins
	var rows = Math.floor(height / 7);
	var cols = Math.floor(width / 7);
	var bins = {};
	var xBins = [];
	var yBins = [];
	var rowScale = d3.scale.linear()
	.range([0, rows])
	.domain([0, d3.max(data, function (d) { return d.Price; })]);
	var colScale = d3.scale.linear()
	.range([0, cols])
	.domain([0, d3.max(data, function (d) { return d.Size; })]);
	data.forEach(function (sale) {
	var row = Math.floor(rowScale(sale.Price));
	var col = Math.floor(colScale(sale.Size));
	var key = row + '-' + col;
	bins[key] = (bins[key] \|\| 0) + 1;
	xBins[col] = (xBins[col] \|\| 0) + 1;
	yBins[row] = (yBins[row] \|\| 0) + 1;
	});
	var binList = [];
	for (var row = 0; row < rows; row++) {
	for (var col = 0; col < cols; col++) {
	binList.push({row: row, col: col, value: bins[row + "-" + col] \|\| 0});
	xBins[col] = xBins[col] \|\| 0;
	yBins[row] = yBins[row] \|\| 0;
	}
	}

	// render the 2D bin field
	var xbinToBands = d3.scale.ordinal()
	.rangeBands([0, width], 0, 0)
	.domain(d3.range(0, cols));
	var ybinToBands = d3.scale.ordinal()
	.rangeBands([height, 0], 0, 0)
	.domain(d3.range(0, rows));
	var color = d3.scale.sqrt()
	.domain([0, d3.max(binList, function (d) { return d.value; })])
	.range(['white', 'black']);
	svg.selectAll('.bin')
	.data(binList)
	.enter()
	.append('rect')
	.attr('class', 'bin')
	.attr('x', function (d) { return xbinToBands(d.col); })
	.attr('y', function (d) { return ybinToBands(d.row); })
	.attr('width', xbinToBands.rangeBand())
	.attr('height', ybinToBands.rangeBand())
	.attr('fill', function (d) { return color(d.value); })
	.attr('stroke', function (d) { return color(d.value); });

	// render the axes
	var x = d3.scale.linear()
	.range([0, width])
	.domain([0, d3.max(data, function (d) { return d.Size; })]);
	var y = d3.scale.linear()
	.range([height, 0])
	.domain([0, d3.max(data, function (d) { return d.Price; })]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(function (d) { return d + ' sq ft'; })
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.tickFormat(d3.format('$,s'))
	.orient("left");

	svg.append('g')
	.attr('class', 'x axis')
	.attr("transform", "translate(0," + (height + bottomGraphHeight) + ")")
	.call(xAxis);

	svg.append('g')
	.attr('class', 'y axis')
	.attr('transform', "translate(-" + sideGraphWidth + ",0)")
	.call(yAxis);

	// draw the x-axis histogram
	var xAxisHeightScale = d3.scale.linear()
	.domain([0, d3.max(xBins)])
	.range([0, bottomGraphHeight - histogramMargin]);
	svg.selectAll('.xbin')
	.data(xBins)
	.enter()
	.append('rect')
	.attr('class', 'xbin')
	.attr('x', function (d, i) { return xbinToBands(i); })
	.attr('y', function (d) { return bottomGraphHeight + height - xAxisHeightScale(d); })
	.attr('width', xbinToBands.rangeBand())
	.attr('height', xAxisHeightScale);

	// draw the y-axis historgram
	var yAxisWidthScale = d3.scale.linear()
	.domain([0, d3.max(yBins)])
	.range([0, sideGraphWidth - histogramMargin]);
	svg.selectAll('.ybin')
	.data(yBins)
	.enter()
	.append('rect')
	.attr('class', 'ybin')
	.attr('x', (-sideGraphWidth) + 1)
	.attr('y', function (d, i) { return ybinToBands(i); })
	.attr('height', ybinToBands.rangeBand())
	.attr('width', yAxisWidthScale);

	});

	function clean(datum) {
	datum.Price = +datum.Price;
	datum.Size = +datum.Size;
	return datum;
	}
	</script>