seemantk · November 16, 2015 03:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <style>
    body, html {
      width: 100%;
      height: 100%;
    }
    circle.airbnb {
      fill: #e00007;
      opacity: 0.6;
    }

    .axis {
        font-family: arial;
        font-size: 0.7em;
      }
      text {
        fill: none;
      }
      .label {
        font-size: 2em;
      }
      path {
        fill: none;
        stroke: none;
        stroke-width: 2px;
      }
      .tick {
        fill: none;
        stroke: none;
      }
      circle {
        opacity: 0.9;
        stroke: none;
        fill: red;
      }
      .line {
        fill: none;
        stroke: #e00007;
        stroke-width: 1px;
      }
  </style>
  <script>
    function draw(geo_data) {
    "use strict";

    /*
    D3.js setup code
    */

    var margin = 75,
        width = 1050 - margin,
        height = 1100 - margin;

    // https://github.com/mbostock/d3/wiki/Time-Formatting
    var format = d3.time.format("%Y-%m-%d");
    
    var projection = d3.geo.mercator()
                          .center([-122.433701, 37.767683])
                          .scale(230000)
                          .translate([width / 1.95, height / 1.74]);
    
    var path = d3.geo.path()
                     .projection(projection);

    var map = d3.select('#map')
                  .attr("width", 1050)
                  .attr("height",1100)
                .append("g")
                  .attr("transform", "translate(0,300)")
                .selectAll('path')
                 .data(geo_data.features)
                 .enter()
                 .append('path')
                 .attr('d', path)
                 .style('fill', '#eee')
                 .style('stroke', 'black')
                 .style('stroke-width', 1);

    map.datum(function(d) {
      var normalized = d.properties.neighbourhood
                        .replace(/ /g, '_')
                        .replace(/\//g, '_');

      d.properties.neighbourhood = normalized;
      return d;
    });

    map.attr('class', function(d) {
                    return d.properties.neighbourhood;
                 });

    d3.json("listing_count.json", function(data) {
        var listings_extent = d3.extent(d3.values(data));

        var bubbles = d3.select('#map').append("g")
              .attr("transform", "translate(0,300)")
               .attr("class", "bubble")
               .selectAll("circle")
               .data(geo_data.features)
               .enter()
               .append("circle")
               .attr('class', 'airbnb');

        bubbles.datum(function(d) {
          d.count = data[d.properties.neighbourhood];
          return d;
        });

        var radius = d3.scale.pow().exponent(1.2)
                       .domain(listings_extent)
                       .range([3, 25]);

        bubbles
           .attr("cx", function(d) { return path.centroid(d.geometry)[0]; })
           .attr("cy", function(d) { return path.centroid(d.geometry)[1]; })
           .attr("r", function(d) { return radius(d.count); });

        d3.csv('neighborhood_reviews_timeseries.csv',
          function(timeseries) {
            var field = "Mission";

            // maximum reviews
            var max_y = d3.max(timeseries, function(d) {
                var max = 0;

                d3.values(d).forEach(function(i) {
                  if (+i && (+i > max)) {
                    max = +i;
                  }
                });

                return max;
            });

            // Create y-axis scale mapping price -> pixels
            var measure_scale = d3.scale.linear()
                .range([height, 100])
                .domain([0, max_y]);

            // Create D3 axis object from measure_scale for the y-axis
            var measure_axis = d3.svg.axis()
                .scale(measure_scale)
                .orient("left");

            // Append SVG to page corresponding to the D3 y-axis
              d3.select('#chart')
                  .attr("width", 1050)
                  .attr("height", 400)
                .append('g')
                  .attr('class', 'y axis')
                  .call(measure_axis);

            var drawChart = function(field) {
              d3.select('#chart').select('.x.axis').remove();
              d3.select('#chart').select('#chart path').remove();

              // remove missing values
              timeseries = timeseries.filter(function(d) {
                return d[field];
              });

              // get min/max dates
              var time_extent = d3.extent(timeseries, function(d){
                return format.parse(d['timestamp']);
              });

              // Create x-axis scale mapping dates -> pixels
              var time_scale = d3.time.scale()
                  .range([0, width - 50])
                  .domain(time_extent);

              // Create D3 axis object from time_scale for the x-axis
              var time_axis = d3.svg.axis()
                  .scale(time_scale)
                  .tickFormat(d3.time.format("%b '%y"));

              // Append SVG to page corresponding to the D3 x-axis
              d3.select('#chart').append('g')
                  .attr('class', 'x axis')
                  .attr('transform', "translate(0," + (height - margin) + ")")
                  .call(time_axis);
              
              // define the values to map for x and y position of the line
              var line = d3.svg.line()
                           .x(function(d) { return time_scale(format.parse(d['timestamp'])); })
                           .y(function(d) { return measure_scale(+d[field]); });

              // append a SVG path that corresponds to the line chart
              d3.select('#chart').append("path")
                .datum(timeseries)
                .attr("class", "line")
                .attr("d", line);
            };

            drawChart(field);

            var index = 0;
            setInterval(tourbus, 1000);

            var tour = [
                  "South_of_Market"
                , "Downtown_Civic_Center"
                , "Castro_Upper_Market"
                , "Mission"
                , "Potrero_Hill"
                , "Western_Addition"
                , "Haight_Ashbury"
                , "Noe_Valley"
                , "Bernal_Heights"
                , "Nob_Hill"
              ]
            ;

            function tourbus() {
              d3.select("#map").selectAll("path")
                .each(function(d) {
                  d3.select(this)
                    .style("fill", d.properties.neighbourhood === tour[index] ? "black" : "#eee");
                    if(d.properties.neighbourhood === tour[index])
                        drawChart(tour[index]);
                })
              ;
              index++;
              if(index === 10)
                index = 0;
            } // tourbus()
            


            var mover = function(d) {
              var neigh = d.properties.neighbourhood;
              d3.select('#map path.' + neigh).style('fill', 'black');
              
              drawChart(neigh);
            };

            var mout = function(d) {
              var neigh = d.properties.neighbourhood;
              d3.select('path.' + neigh).style('fill', '#eee');
            }

            map.on("mouseover", mover);
            map.on("mouseout", mout);

            bubbles.on('mouseover', mover);
            bubbles.on('mouseout', mout);
        });
    });
    }
  </script>
 </head>
 <body>
    <svg id="map"></svg>
    <svg id="chart"></svg>
  <script>
    d3.json("neighborhoods.geojson", draw);
  </script>
 </body>
 </html>
diff --git a/listing_count.json b/listing_count.json
 {"Bayview":67,"Bernal_Heights":286,"Castro_Upper_Market":355,"Chinatown":57,"Crocker_Amazon":28,"Diamond_Heights":10,"Downtown_Civic_Center":197,"Excelsior":64,"Financial_District":63,"Glen_Park":49,"Golden_Gate_Park":24,"Haight_Ashbury":308,"Inner_Richmond":146,"Inner_Sunset":104,"Lakeshore":44,"Marina":242,"Mission":752,"Nob_Hill":232,"Noe_Valley":217,"North_Beach":120,"Ocean_View":56,"Outer_Mission":83,"Outer_Richmond":98,"Outer_Sunset":136,"Pacific_Heights":137,"Parkside":57,"Potrero_Hill":222,"Presidio":7,"Presidio_Heights":35,"Russian_Hill":164,"Seacliff":11,"South_of_Market":400,"Treasure_Island_YBI":8,"Twin_Peaks":58,"Visitacion_Valley":24,"West_of_Twin_Peaks":68,"Western_Addition":496}
diff --git a/neighborhood_reviews_timeseries.csv b/neighborhood_reviews_timeseries.csv
diff --git a/neighborhoods.geojson b/neighborhoods.geojson
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style>
	body, html {
	width: 100%;
	height: 100%;
	}
	circle.airbnb {
	fill: #e00007;
	opacity: 0.6;
	}

	.axis {
	font-family: arial;
	font-size: 0.7em;
	}
	text {
	fill: none;
	}
	.label {
	font-size: 2em;
	}
	path {
	fill: none;
	stroke: none;
	stroke-width: 2px;
	}
	.tick {
	fill: none;
	stroke: none;
	}
	circle {
	opacity: 0.9;
	stroke: none;
	fill: red;
	}
	.line {
	fill: none;
	stroke: #e00007;
	stroke-width: 1px;
	}
	</style>
	<script>
	function draw(geo_data) {
	"use strict";

	/*
	D3.js setup code
	*/

	var margin = 75,
	width = 1050 - margin,
	height = 1100 - margin;

	// https://github.com/mbostock/d3/wiki/Time-Formatting
	var format = d3.time.format("%Y-%m-%d");

	var projection = d3.geo.mercator()
	.center([-122.433701, 37.767683])
	.scale(230000)
	.translate([width / 1.95, height / 1.74]);

	var path = d3.geo.path()
	.projection(projection);

	var map = d3.select('#map')
	.attr("width", 1050)
	.attr("height",1100)
	.append("g")
	.attr("transform", "translate(0,300)")
	.selectAll('path')
	.data(geo_data.features)
	.enter()
	.append('path')
	.attr('d', path)
	.style('fill', '#eee')
	.style('stroke', 'black')
	.style('stroke-width', 1);

	map.datum(function(d) {
	var normalized = d.properties.neighbourhood
	.replace(/ /g, '_')
	.replace(/\//g, '_');

	d.properties.neighbourhood = normalized;
	return d;
	});

	map.attr('class', function(d) {
	return d.properties.neighbourhood;
	});

	d3.json("listing_count.json", function(data) {
	var listings_extent = d3.extent(d3.values(data));

	var bubbles = d3.select('#map').append("g")
	.attr("transform", "translate(0,300)")
	.attr("class", "bubble")
	.selectAll("circle")
	.data(geo_data.features)
	.enter()
	.append("circle")
	.attr('class', 'airbnb');

	bubbles.datum(function(d) {
	d.count = data[d.properties.neighbourhood];
	return d;
	});

	var radius = d3.scale.pow().exponent(1.2)
	.domain(listings_extent)
	.range([3, 25]);

	bubbles
	.attr("cx", function(d) { return path.centroid(d.geometry)[0]; })
	.attr("cy", function(d) { return path.centroid(d.geometry)[1]; })
	.attr("r", function(d) { return radius(d.count); });

	d3.csv('neighborhood_reviews_timeseries.csv',
	function(timeseries) {
	var field = "Mission";

	// maximum reviews
	var max_y = d3.max(timeseries, function(d) {
	var max = 0;

	d3.values(d).forEach(function(i) {
	if (+i && (+i > max)) {
	max = +i;
	}
	});

	return max;
	});

	// Create y-axis scale mapping price -> pixels
	var measure_scale = d3.scale.linear()
	.range([height, 100])
	.domain([0, max_y]);

	// Create D3 axis object from measure_scale for the y-axis
	var measure_axis = d3.svg.axis()
	.scale(measure_scale)
	.orient("left");

	// Append SVG to page corresponding to the D3 y-axis
	d3.select('#chart')
	.attr("width", 1050)
	.attr("height", 400)
	.append('g')
	.attr('class', 'y axis')
	.call(measure_axis);

	var drawChart = function(field) {
	d3.select('#chart').select('.x.axis').remove();
	d3.select('#chart').select('#chart path').remove();

	// remove missing values
	timeseries = timeseries.filter(function(d) {
	return d[field];
	});

	// get min/max dates
	var time_extent = d3.extent(timeseries, function(d){
	return format.parse(d['timestamp']);
	});

	// Create x-axis scale mapping dates -> pixels
	var time_scale = d3.time.scale()
	.range([0, width - 50])
	.domain(time_extent);

	// Create D3 axis object from time_scale for the x-axis
	var time_axis = d3.svg.axis()
	.scale(time_scale)
	.tickFormat(d3.time.format("%b '%y"));

	// Append SVG to page corresponding to the D3 x-axis
	d3.select('#chart').append('g')
	.attr('class', 'x axis')
	.attr('transform', "translate(0," + (height - margin) + ")")
	.call(time_axis);

	// define the values to map for x and y position of the line
	var line = d3.svg.line()
	.x(function(d) { return time_scale(format.parse(d['timestamp'])); })
	.y(function(d) { return measure_scale(+d[field]); });

	// append a SVG path that corresponds to the line chart
	d3.select('#chart').append("path")
	.datum(timeseries)
	.attr("class", "line")
	.attr("d", line);
	};

	drawChart(field);

	var index = 0;
	setInterval(tourbus, 1000);

	var tour = [
	"South_of_Market"
	, "Downtown_Civic_Center"
	, "Castro_Upper_Market"
	, "Mission"
	, "Potrero_Hill"
	, "Western_Addition"
	, "Haight_Ashbury"
	, "Noe_Valley"
	, "Bernal_Heights"
	, "Nob_Hill"
	]
	;

	function tourbus() {
	d3.select("#map").selectAll("path")
	.each(function(d) {
	d3.select(this)
	.style("fill", d.properties.neighbourhood === tour[index] ? "black" : "#eee");
	if(d.properties.neighbourhood === tour[index])
	drawChart(tour[index]);
	})
	;
	index++;
	if(index === 10)
	index = 0;
	} // tourbus()



	var mover = function(d) {
	var neigh = d.properties.neighbourhood;
	d3.select('#map path.' + neigh).style('fill', 'black');

	drawChart(neigh);
	};

	var mout = function(d) {
	var neigh = d.properties.neighbourhood;
	d3.select('path.' + neigh).style('fill', '#eee');
	}

	map.on("mouseover", mover);
	map.on("mouseout", mout);

	bubbles.on('mouseover', mover);
	bubbles.on('mouseout', mout);
	});
	});
	}
	</script>
	</head>
	<body>
	<svg id="map"></svg>
	<svg id="chart"></svg>
	<script>
	d3.json("neighborhoods.geojson", draw);
	</script>
	</body>
	</html>