joshblum · December 27, 2015 23:39
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 text {
  font: 10px sans-serif;
 }
 rect.bordered {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

      text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        fill: #aaa;
      }

      text.axis-workweek {
        fill: #000;
      }

      text.axis-worktime {
        fill: #000;
      }
    </style>
    <title> 6.885 Lab 8 | joshblum </title>
 <body>
  <p> Joshua Blum | [email protected] | 11/08/13 | 6.885 Lab 8 </p>


  <p> 1. The message in the visualization is to find what are the most popular parts of Boston based on both time of day and the location based on the interest points. </p>
  </p> 2. The dataset is static. <p>
  <p> 3. Two summaries were computed. First, the taxi data was converted to a count for each day/hour creating the time heatmap. The dropoffs were also bucketed to the nearest location to create the bubble map of what locations are most popular. </p>
    <h3> Bubble map indicating most popular locations in Boston. Aggregate count to closest point of interest over entire data set. </h3>
    <div id="flare"></div>
    <h3> Heat map indicating most popular times to use a cab by week/hour. Aggregated across entire dataset. </h3>
    <div id="heatmap"></div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
  var data_file = "taxi_flare.json";
  // {% assets "taxi_flare" %}
  //     var data_file = "{{ ASSET_URL }}";
  //   {% endassets %}
  var diameter = 960,
      format = d3.format(",d"),
      color = d3.scale.category20c();

  var bubble = d3.layout.pack()
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5);

  var svg = d3.select("#flare").append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .attr("class", "bubble");

  d3.json(data_file, function(error, root) {
    var node = svg.selectAll(".node")
        .data(bubble.nodes(classes(root))
        .filter(function(d) { return !d.children; }))
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
        .text(function(d) { return d.className + ": " + format(d.value); });

    node.append("circle")
        .attr("r", function(d) { return d.r; })
        .style("fill", function(d) { return color(d.packageName); });

    node.append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .text(function(d) { return d.className.substring(0, d.r / 3); });
  });

  // Returns a flattened hierarchy containing all leaf nodes under the root.
  function classes(root) {
    var classes = [];

    function recurse(name, node) {
      if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
      else classes.push({packageName: name, className: node.name, value: node.size});
    }

    recurse(null, root);
    return {children: classes};
  }

  d3.select(self.frameElement).style("height", diameter + "px");

 </script>
    <script type="text/javascript">
    var data_file = "taxi_heatmap.csv";
    // {% assets "taxi_heatmap" %}
    //   var data_file = "{{ ASSET_URL }}";
    // {% endassets %}
      var margin = { top: 50, right: 0, bottom: 100, left: 30 },
          width = 960 - margin.left - margin.right,
          height = 430 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 24),
          legendElementWidth = gridSize*2,
          buckets = 9,
          colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
          days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
          times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];


      d3.csv(data_file,
        function(d) {
          return {
            day: +d.day,
            hour: +d.hour,
            value: +d.value
          };
        },
        function(error, data) {
          var colorScale = d3.scale.quantile()
              .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
              .range(colors);

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

          var dayLabels = svg.selectAll(".dayLabel")
              .data(days)
              .enter().append("text")
                .text(function (d) { return d; })
                .attr("x", 0)
                .attr("y", function (d, i) { return i * gridSize; })
                .style("text-anchor", "end")
                .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
                .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });

          var timeLabels = svg.selectAll(".timeLabel")
              .data(times)
              .enter().append("text")
                .text(function(d) { return d; })
                .attr("x", function(d, i) { return i * gridSize; })
                .attr("y", 0)
                .style("text-anchor", "middle")
                .attr("transform", "translate(" + gridSize / 2 + ", -6)")
                .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });

          var heatMap = svg.selectAll(".hour")
              .data(data)
              .enter().append("rect")
              .attr("x", function(d) { return (d.hour - 1) * gridSize; })
              .attr("y", function(d) { return (d.day - 1) * gridSize; })
              .attr("rx", 4)
              .attr("ry", 4)
              .attr("class", "hour bordered")
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", colors[0]);

          heatMap.transition().duration(1000)
              .style("fill", function(d) { return colorScale(d.value); });

          heatMap.append("title").text(function(d) { return d.value; });
              
          var legend = svg.selectAll(".legend")
              .data([0].concat(colorScale.quantiles()), function(d) { return d; })
              .enter().append("g")
              .attr("class", "legend");

          legend.append("rect")
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", height)
            .attr("width", legendElementWidth)
            .attr("height", gridSize / 2)
            .style("fill", function(d, i) { return colors[i]; });

          legend.append("text")
            .attr("class", "mono")
            .text(function(d) { return "≥ " + Math.round(d); })
            .attr("x", function(d, i) { return legendElementWidth * i; })
            .attr("y", height + gridSize);
      });
    </script>
 </body>
 </html>
diff --git a/taxi_flare.json b/taxi_flare.json
 {"name": "flare", "children": [{"name": "Institutional", "children": [{"point": "42.366261;-71.062103", "name": "TD Garden/North Station", "size": 216941}, {"point": "42.351818;-71.055138", "name": "South Station", "size": 34448}, {"point": "42.359219;-71.04924", "name": "New England Aquarium", "size": 52854}, {"point": "42.351658;-71.049767", "name": "Children's Museum", "size": 107024}, {"point": "42.342808;-71.08567", "name": "Symphony Hall", "size": 68830}, {"point": "42.366631;-71.016518", "name": "Logan International Airport", "size": 0}, {"point": "42.351776;-71.040306", "name": "World Trade Center", "size": 452619}, {"point": "42.347626;-71.084206", "name": "Hynes Convention Center", "size": 132765}, {"point": "42.348522;-71.036064", "name": "Bank of America Pavilion", "size": 169869}, {"point": "42.350315;-71.064461", "name": "Wang Theater", "size": 48834}, {"point": "42.35154;-71.065109", "name": "Majestic Theater", "size": 66251}, {"point": "42.350712;-71.064713", "name": "Wilbur Theater", "size": 20655}, {"point": "42.350483;-71.06559", "name": "Shubert Theater", "size": 37806}, {"point": "42.349987;-71.066193", "name": "Charles Playhouse", "size": 63611}, {"point": "42.315872;-71.065567", "name": "Strand Theater", "size": 50379}, {"point": "42.352856;-71.042946", "name": "Institute Of Contemporary Art", "size": 158346}]}, {"name": "Misc", "children": [{"point": "42.347534;-71.075111", "name": "Back Bay T Stop", "size": 201958}, {"point": "42.300732;-71.114105", "name": "Forest Hills T Stop", "size": 48129}, {"point": "42.346439;-71.097244", "name": "Fenway Park", "size": 184080}, {"point": "42.353764;-71.04525", "name": "Fan pier", "size": 96825}, {"point": "42.346043;-71.040916", "name": "Waterside Place", "size": 194547}, {"point": "42.345394;-71.051659", "name": "Channel Center", "size": 125517}, {"point": "42.344254;-71.02861", "name": "27 Drydock", "size": 5652}, {"point": "42.354008;-71.062569", "name": "Opera House", "size": 146600}, {"point": "42.355457;-71.060493", "name": "Washington & Winter/Summer", "size": 180888}, {"point": "42.359726;-71.053635", "name": "Faneuil Hall Sq", "size": 20138}, {"point": "42.3592;-71.059608", "name": "Scollay Sq", "size": 94777}, {"point": "42.357574;-71.056396", "name": "Post Office Sq", "size": 100402}, {"point": "42.329704;-71.083717", "name": "Dudley Square T Stop", "size": 232700}, {"point": "42.343365;-71.057114", "name": "Broadway T Stop", "size": 198684}, {"point": "42.347263;-71.073502", "name": "Clarendon Sq", "size": 285885}, {"point": "42.346577;-71.04493", "name": "Boston Convention and Exhibition Center", "size": 74592}]}, {"name": "Historic", "children": [{"point": "42.372738;-71.056969", "name": "USS Constitution", "size": 114610}, {"point": "42.360039;-71.056213", "name": "Faneuil Hall", "size": 71493}]}, {"name": "Area", "children": [{"point": "42.365353;-71.055511", "name": "North End", "size": 84223}, {"point": "42.358086;-71.127762", "name": "Allston", "size": 43529}]}]}
diff --git a/taxi_heatmap.csv b/taxi_heatmap.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	text {
	font: 10px sans-serif;
	}
	rect.bordered {
	stroke: #E6E6E6;
	stroke-width:2px;
	}

	text.mono {
	font-size: 9pt;
	font-family: Consolas, courier;
	fill: #aaa;
	}

	text.axis-workweek {
	fill: #000;
	}

	text.axis-worktime {
	fill: #000;
	}
	</style>
	<title> 6.885 Lab 8 \| joshblum </title>
	<body>
	<p> Joshua Blum \| [email protected] \| 11/08/13 \| 6.885 Lab 8 </p>


	<p> 1. The message in the visualization is to find what are the most popular parts of Boston based on both time of day and the location based on the interest points. </p>
	</p> 2. The dataset is static. <p>
	<p> 3. Two summaries were computed. First, the taxi data was converted to a count for each day/hour creating the time heatmap. The dropoffs were also bucketed to the nearest location to create the bubble map of what locations are most popular. </p>
	<h3> Bubble map indicating most popular locations in Boston. Aggregate count to closest point of interest over entire data set. </h3>
	<div id="flare"></div>
	<h3> Heat map indicating most popular times to use a cab by week/hour. Aggregated across entire dataset. </h3>
	<div id="heatmap"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var data_file = "taxi_flare.json";
	// {% assets "taxi_flare" %}
	// var data_file = "{{ ASSET_URL }}";
	// {% endassets %}
	var diameter = 960,
	format = d3.format(",d"),
	color = d3.scale.category20c();

	var bubble = d3.layout.pack()
	.sort(null)
	.size([diameter, diameter])
	.padding(1.5);

	var svg = d3.select("#flare").append("svg")
	.attr("width", diameter)
	.attr("height", diameter)
	.attr("class", "bubble");

	d3.json(data_file, function(error, root) {
	var node = svg.selectAll(".node")
	.data(bubble.nodes(classes(root))
	.filter(function(d) { return !d.children; }))
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	node.append("title")
	.text(function(d) { return d.className + ": " + format(d.value); });

	node.append("circle")
	.attr("r", function(d) { return d.r; })
	.style("fill", function(d) { return color(d.packageName); });

	node.append("text")
	.attr("dy", ".3em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.className.substring(0, d.r / 3); });
	});

	// Returns a flattened hierarchy containing all leaf nodes under the root.
	function classes(root) {
	var classes = [];

	function recurse(name, node) {
	if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
	else classes.push({packageName: name, className: node.name, value: node.size});
	}

	recurse(null, root);
	return {children: classes};
	}

	d3.select(self.frameElement).style("height", diameter + "px");

	</script>
	<script type="text/javascript">
	var data_file = "taxi_heatmap.csv";
	// {% assets "taxi_heatmap" %}
	// var data_file = "{{ ASSET_URL }}";
	// {% endassets %}
	var margin = { top: 50, right: 0, bottom: 100, left: 30 },
	width = 960 - margin.left - margin.right,
	height = 430 - margin.top - margin.bottom,
	gridSize = Math.floor(width / 24),
	legendElementWidth = gridSize*2,
	buckets = 9,
	colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]
	days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
	times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];


	d3.csv(data_file,
	function(d) {
	return {
	day: +d.day,
	hour: +d.hour,
	value: +d.value
	};
	},
	function(error, data) {
	var colorScale = d3.scale.quantile()
	.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
	.range(colors);

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

	var dayLabels = svg.selectAll(".dayLabel")
	.data(days)
	.enter().append("text")
	.text(function (d) { return d; })
	.attr("x", 0)
	.attr("y", function (d, i) { return i * gridSize; })
	.style("text-anchor", "end")
	.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
	.attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });

	var timeLabels = svg.selectAll(".timeLabel")
	.data(times)
	.enter().append("text")
	.text(function(d) { return d; })
	.attr("x", function(d, i) { return i * gridSize; })
	.attr("y", 0)
	.style("text-anchor", "middle")
	.attr("transform", "translate(" + gridSize / 2 + ", -6)")
	.attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });

	var heatMap = svg.selectAll(".hour")
	.data(data)
	.enter().append("rect")
	.attr("x", function(d) { return (d.hour - 1) * gridSize; })
	.attr("y", function(d) { return (d.day - 1) * gridSize; })
	.attr("rx", 4)
	.attr("ry", 4)
	.attr("class", "hour bordered")
	.attr("width", gridSize)
	.attr("height", gridSize)
	.style("fill", colors[0]);

	heatMap.transition().duration(1000)
	.style("fill", function(d) { return colorScale(d.value); });

	heatMap.append("title").text(function(d) { return d.value; });

	var legend = svg.selectAll(".legend")
	.data([0].concat(colorScale.quantiles()), function(d) { return d; })
	.enter().append("g")
	.attr("class", "legend");

	legend.append("rect")
	.attr("x", function(d, i) { return legendElementWidth * i; })
	.attr("y", height)
	.attr("width", legendElementWidth)
	.attr("height", gridSize / 2)
	.style("fill", function(d, i) { return colors[i]; });

	legend.append("text")
	.attr("class", "mono")
	.text(function(d) { return "≥ " + Math.round(d); })
	.attr("x", function(d, i) { return legendElementWidth * i; })
	.attr("y", height + gridSize);
	});
	</script>
	</body>
	</html>
day	hour	value
1	1	232424
1	2	203360
1	3	133221
1	4	44713
1	5	36076
1	6	44843
1	7	66443
1	8	114581
1	9	157406
1	10	157695
1	11	151398
1	12	166801
1	13	171659
1	14	180286
1	15	188288
1	16	187502
1	17	201862
1	18	218360
1	19	252115
1	20	259070
1	21	241316
1	22	251609
1	23	273018
1	24	252415
2	1	232424
2	2	203360
2	3	133221
2	4	44713
2	5	36076
2	6	44843
2	7	66443
2	8	114581
2	9	157406
2	10	157695
2	11	151398
2	12	166801
2	13	171659
2	14	180286
2	15	188288
2	16	187502
2	17	201862
2	18	218360
2	19	252115
2	20	259070
2	21	241316
2	22	251609
2	23	273018
2	24	252415
3	1	232424
3	2	203360
3	3	133221
3	4	44713
3	5	36076
3	6	44843
3	7	66443
3	8	114581
3	9	157406
3	10	157695
3	11	151398
3	12	166801
3	13	171659
3	14	180286
3	15	188288
3	16	187502
3	17	201862
3	18	218360
3	19	252115
3	20	259070
3	21	241316
3	22	251609
3	23	273018
3	24	252415
4	1	232424
4	2	203360
4	3	133221
4	4	44713
4	5	36076
4	6	44843
4	7	66443
4	8	114581
4	9	157406
4	10	157695
4	11	151398
4	12	166801
4	13	171659
4	14	180286
4	15	188288
4	16	187502
4	17	201862
4	18	218360
4	19	252115
4	20	259070
4	21	241316
4	22	251609
4	23	273018
4	24	252415
5	1	232424
5	2	203360
5	3	133221
5	4	44713
5	5	36076
5	6	44843
5	7	66443
5	8	114581
5	9	157406
5	10	157695
5	11	151398
5	12	166801
5	13	171659
5	14	180286
5	15	188288
5	16	187502
5	17	201862
5	18	218360
5	19	252115
5	20	259070
5	21	241316
5	22	251609
5	23	273018
5	24	252415
6	1	232424
6	2	203360
6	3	133221
6	4	44713
6	5	36076
6	6	44843
6	7	66443
6	8	114581
6	9	157406
6	10	157695
6	11	151398
6	12	166801
6	13	171659
6	14	180286
6	15	188288
6	16	187502
6	17	201862
6	18	218360
6	19	252115
6	20	259070
6	21	241316
6	22	251609
6	23	273018
6	24	252415
7	1	232424
7	2	203360
7	3	133221
7	4	44713
7	5	36076
7	6	44843
7	7	66443
7	8	114581
7	9	157406
7	10	157695
7	11	151398
7	12	166801
7	13	171659
7	14	180286
7	15	188288
7	16	187502
7	17	201862
7	18	218360
7	19	252115
7	20	259070
7	21	241316
7	22	251609
7	23	273018
7	24	252415