lennyburdette · December 28, 2015 22:09
diff --git a/index.html b/index.html
 <html>
 <head>
  <title>stuff</title>
  <style type="text/css">
  body {
    font: 12px helvetica;
  }
  </style>
 </head>
 <body>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    var dataset =[[0.79397623257292449, 0.47522821761787826, 0.29310619390531145, 1.2647319686369869], [0.60675005394298342, 0.43239052568645464, 0.56943934600060986, 0.0806352176614831], [0.70114457621271309, 0.2415444947619281, 0.24855550151819705, 0.12679694512938167], [13.022426812327259, 19.735206633021956, 6.2591200477799855, 8.0723571227549122], [19.691835013697666, 12.275757419918344, 7.9030217810738463, 7.6598119026118887], [18.383836317677574, 11.479979602713868, 9.205954539239082, 8.3728413087719762], [23.377451918511134, 17.580718959462779, 11.712809868405863, 0.45420005950833142], [15.55709541958519, 6.4655545663196419, 7.5172179157301597, 3.4052780883143638], [7.7238226417434106, 18.138006010966624, 9.4792263731945781, 16.356881882136406], [15.483028672673962, 15.936518643289041, 6.7652777498317231, 2.7953312602668809], [22.893593032051147, 12.633981703517454, 18.083910178123414, 25.076236028052861], [41.322079827502577, 13.572896818477785, 19.40989570972182, 7.0538720257754921], [19.695601439159546, 40.353511232707014, 13.317404663806629, 5.4707719093103009], [24.764578729682114, 44.346115641005724, 17.224742842093395, 1.1057204498373503], [32.53976041159747, 11.659832758964395, 37.292920569622694, 14.726284110570347], [9.3615958475757601, 11.45547879953709, 3.3847648529226801, 4.4077328551322248]];

    var w = 800;
    var h = 500;

    var colorScale = d3.scale.linear()
      .domain([0, 25]) // I picked this domain arbitrarily. Normalizing will help.
      .range(['#fff', '#f00']);

    // append the chart
    var chart = d3.select('body')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

    // append one group for each row
    var bars = chart.selectAll('g')
      .data(dataset)
      .enter()
        .append('g')
          // position each group another 20 pixels in the y direction
          // these are magic numbers and should be replaced with d3.scale function
          .attr('transform', function (d, i) { return translate(0, i * 20); });
    // bars now holds an "enter" selection, joined to the outer-most array

    // append one group per cell
    var cells = bars.selectAll('g')
      .data(identity) // see helper function below
      .enter()
        .append('g')
          // position each group another 170 pixels in the x direction
          .attr('transform', function (d, i) { return translate(i * 170, 0); });
    // cells now holds another "enter" selection, joined to the inner arrays

    // these are still "enter" selections, so they're joined to the same data as the cells groups
    cells
      .append('rect')
        .attr('width', 168)
        .attr('height', 18)
        .attr('fill', colorScale);

    cells
      .append('text')
        .text(identity)
        .attr('dx', '2px')
        .attr('dy', '12px');
    // Text position (dx, dy) is the baseline. I picked a type size of 12, so I moved it 12px down
    // so the baseline is inside the rectangle.

    // helper functions are super useful with d3
    function translate (x, y) {
      return ['translate(', x, ',', y, ')'].join('');
    }

    function identity (x) {
      return x;
    }
  </script>
 </body>
 </html>
	<html>
	<head>
	<title>stuff</title>
	<style type="text/css">
	body {
	font: 12px helvetica;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	var dataset =[[0.79397623257292449, 0.47522821761787826, 0.29310619390531145, 1.2647319686369869], [0.60675005394298342, 0.43239052568645464, 0.56943934600060986, 0.0806352176614831], [0.70114457621271309, 0.2415444947619281, 0.24855550151819705, 0.12679694512938167], [13.022426812327259, 19.735206633021956, 6.2591200477799855, 8.0723571227549122], [19.691835013697666, 12.275757419918344, 7.9030217810738463, 7.6598119026118887], [18.383836317677574, 11.479979602713868, 9.205954539239082, 8.3728413087719762], [23.377451918511134, 17.580718959462779, 11.712809868405863, 0.45420005950833142], [15.55709541958519, 6.4655545663196419, 7.5172179157301597, 3.4052780883143638], [7.7238226417434106, 18.138006010966624, 9.4792263731945781, 16.356881882136406], [15.483028672673962, 15.936518643289041, 6.7652777498317231, 2.7953312602668809], [22.893593032051147, 12.633981703517454, 18.083910178123414, 25.076236028052861], [41.322079827502577, 13.572896818477785, 19.40989570972182, 7.0538720257754921], [19.695601439159546, 40.353511232707014, 13.317404663806629, 5.4707719093103009], [24.764578729682114, 44.346115641005724, 17.224742842093395, 1.1057204498373503], [32.53976041159747, 11.659832758964395, 37.292920569622694, 14.726284110570347], [9.3615958475757601, 11.45547879953709, 3.3847648529226801, 4.4077328551322248]];

	var w = 800;
	var h = 500;

	var colorScale = d3.scale.linear()
	.domain([0, 25]) // I picked this domain arbitrarily. Normalizing will help.
	.range(['#fff', '#f00']);

	// append the chart
	var chart = d3.select('body')
	.append('svg')
	.attr('width', w)
	.attr('height', h);

	// append one group for each row
	var bars = chart.selectAll('g')
	.data(dataset)
	.enter()
	.append('g')
	// position each group another 20 pixels in the y direction
	// these are magic numbers and should be replaced with d3.scale function
	.attr('transform', function (d, i) { return translate(0, i * 20); });
	// bars now holds an "enter" selection, joined to the outer-most array

	// append one group per cell
	var cells = bars.selectAll('g')
	.data(identity) // see helper function below
	.enter()
	.append('g')
	// position each group another 170 pixels in the x direction
	.attr('transform', function (d, i) { return translate(i * 170, 0); });
	// cells now holds another "enter" selection, joined to the inner arrays

	// these are still "enter" selections, so they're joined to the same data as the cells groups
	cells
	.append('rect')
	.attr('width', 168)
	.attr('height', 18)
	.attr('fill', colorScale);

	cells
	.append('text')
	.text(identity)
	.attr('dx', '2px')
	.attr('dy', '12px');
	// Text position (dx, dy) is the baseline. I picked a type size of 12, so I moved it 12px down
	// so the baseline is inside the rectangle.

	// helper functions are super useful with d3
	function translate (x, y) {
	return ['translate(', x, ',', y, ')'].join('');
	}

	function identity (x) {
	return x;
	}
	</script>
	</body>
	</html>