jm3 · August 29, 2015 13:57
diff --git a/d3 drift JS b/d3 drift JS
 d3 drift JS
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <link type="text/css" href="style.css" rel="stylesheet" media="all" />

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
  <!-- <script src="javascripts/queue.js"></script> -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.4/queue.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">

  function geoStatJoinChart(options, d3, topojson, _, queue) {

    var width       = options.width;
    var height      = options.height;
    var latLong     = options.latLong;
    var scale       = options.scale;
    var geoDataUrl  = options.geoDataUrl;
    var statDataUrl = options.statDataUrl;

    var lng = latLong[0];
    var lat = latLong[1];

    var colorScale = d3.scale.threshold()
      .domain([0.0039062, 0.0078125, 0.015625, 0.03125, 0.0625, 0.125, 0.25, 0.5, 1.0])
      .range(["transparent", "#E0F3DB", "#CCEBC5", "#A8DDB5", "#7BCCC4", "#4EB3D3", "#2B8CBE" , "#0868AC", "#084081"]);

    function capitalize(s){
      return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
    };

    function longName(s) {
      return capitalize(s.replace("-"," ")) + ",CA,US";
    };

    // notice the weird way this has to be done for albers...
    var projection = d3.geo.albers()
      .translate([(width / 2), (height / 2)])
      .scale(scale)
      .rotate([-lng,0])
      .center([0,lat]);

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

    var dsv = d3.dsv("|", "text/plain");

    queue()
      .defer(d3.json, geoDataUrl)
      .defer(dsv, statDataUrl)
      .await(ready);

    function ready(error, geoData, statData) {

      var domElement = document.querySelector("body");

      var regions = document.querySelectorAll("#cities .region");
      _.each(regions, function(region) {
        var name = longName(region.id);
        createChartWithCity({
          highlightedCity: name,
          domElement: region,
          geoData: geoData,
          statData: statData
        });
      });
    }

    function createChartWithCity(options) {

      var highlightedCity = options.highlightedCity;
      var domElement      = options.domElement;
      var geoData         = options.geoData;
      var statData        = options.statData;

      //console.log("createChartWithCity", highlightedCity);

      var svg = d3.select(domElement).append("svg")
        .attr("width", width)
        .attr("height", height);

      var observedInHighlightedCity = _.filter(statData, function(d) {
        return d.end_city == highlightedCity;
      });

      function fillColor(d) {
        var ln = longName(d.id);
        var cityData = _.find(observedInHighlightedCity, function(d) { return d.start_city == ln } );
        var color;
        if (cityData && cityData.prct) {
          color = colorScale(cityData.prct);
        }
        else {
          color = "transparent";
        }
        return color;
      }

      // draw the state
      svg.append("path")
        .datum(topojson.mesh(geoData, geoData.objects.state_border))
        .attr("class", "state-boundary")
        .attr("d", path);

      // fill the cities
      svg.selectAll(".cities-fill")
        .data(topojson.feature(geoData, geoData.objects.cities).features)
        .enter().append("path")
        .attr("class", function(d) {
          if (d.id == highlightedCity.split(",")[0]) {
            return "cities-fill highlighted"
          }
          else {
            return "cities-fill";
          }
        })
        .attr("fill", fillColor)
        .attr("d", path);

      svg.append("text")
        .attr("class","observed-label")
        .text(highlightedCity.split(",")[0])
        .attr("dx",15)
        .attr("dy",25)
    }

    var keySvg = d3.select("#key").append("svg")
      .attr("class", "key")
      .attr("width", 1800)
      .attr("height", 80);

    var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, 1210]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(13)
      .tickValues(colorScale.domain())
      .tickFormat(function(d) { return d >= 0.02 ? parseInt(d*100) : null; });

    keySvg.selectAll("rect")
      .data(colorScale.range().map(function(d, i) {
        return {
          x0: i ? x(colorScale.domain()[i - 1]) : x.range()[0],
          x1: i < colorScale.domain().length ? x(colorScale.domain()[i]) : x.range()[1],
          z: d
        };
      }))
    .enter().append("rect")
      .attr("height", 8)
      .attr("x", function(d) { return d.x0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .style("fill", function(d) { return d.z; });

    keySvg.call(xAxis);

    keySvg.append("text")
      .attr("class","title")
      .attr("dy", "60")
      .attr("dx", "0")
      .text("Percentage of People who say they are in a Stated Region who were seen in the Observed Region.")
  }

  </script>
  </head>

 <body>

  <div class="page">
    <ul id="cities">
      <li id="santa-monica" class="region"></li>
      <li id="los-angeles"  class="region"></li>
      <div id="key"></div>
    </ul>
  </div>

  <script>
    geoStatJoinChart({
      width: 300,
      height: 300,
      latLong: [-118.2428,34.00],
      scale: 18000,
      geoDataUrl: "./los-angeles-cities.json",
      statDataUrl: "./los-angeles-stats.csv"
    }, d3, topojson, _, queue);
  </script>

 </body>
 </html>

diff --git a/los-angeles-stats.csv b/los-angeles-stats.csv
diff --git a/style.css b/style.css
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/los-angeles-cities.json b/los-angeles-cities.json
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link type="text/css" href="style.css" rel="stylesheet" media="all" />

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
	<!-- <script src="javascripts/queue.js"></script> -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.4/queue.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

	function geoStatJoinChart(options, d3, topojson, _, queue) {

	var width = options.width;
	var height = options.height;
	var latLong = options.latLong;
	var scale = options.scale;
	var geoDataUrl = options.geoDataUrl;
	var statDataUrl = options.statDataUrl;

	var lng = latLong[0];
	var lat = latLong[1];

	var colorScale = d3.scale.threshold()
	.domain([0.0039062, 0.0078125, 0.015625, 0.03125, 0.0625, 0.125, 0.25, 0.5, 1.0])
	.range(["transparent", "#E0F3DB", "#CCEBC5", "#A8DDB5", "#7BCCC4", "#4EB3D3", "#2B8CBE" , "#0868AC", "#084081"]);

	function capitalize(s){
	return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
	};

	function longName(s) {
	return capitalize(s.replace("-"," ")) + ",CA,US";
	};

	// notice the weird way this has to be done for albers...
	var projection = d3.geo.albers()
	.translate([(width / 2), (height / 2)])
	.scale(scale)
	.rotate([-lng,0])
	.center([0,lat]);

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

	var dsv = d3.dsv("\|", "text/plain");

	queue()
	.defer(d3.json, geoDataUrl)
	.defer(dsv, statDataUrl)
	.await(ready);

	function ready(error, geoData, statData) {

	var domElement = document.querySelector("body");

	var regions = document.querySelectorAll("#cities .region");
	_.each(regions, function(region) {
	var name = longName(region.id);
	createChartWithCity({
	highlightedCity: name,
	domElement: region,
	geoData: geoData,
	statData: statData
	});
	});
	}

	function createChartWithCity(options) {

	var highlightedCity = options.highlightedCity;
	var domElement = options.domElement;
	var geoData = options.geoData;
	var statData = options.statData;

	//console.log("createChartWithCity", highlightedCity);

	var svg = d3.select(domElement).append("svg")
	.attr("width", width)
	.attr("height", height);

	var observedInHighlightedCity = _.filter(statData, function(d) {
	return d.end_city == highlightedCity;
	});

	function fillColor(d) {
	var ln = longName(d.id);
	var cityData = _.find(observedInHighlightedCity, function(d) { return d.start_city == ln } );
	var color;
	if (cityData && cityData.prct) {
	color = colorScale(cityData.prct);
	}
	else {
	color = "transparent";
	}
	return color;
	}

	// draw the state
	svg.append("path")
	.datum(topojson.mesh(geoData, geoData.objects.state_border))
	.attr("class", "state-boundary")
	.attr("d", path);

	// fill the cities
	svg.selectAll(".cities-fill")
	.data(topojson.feature(geoData, geoData.objects.cities).features)
	.enter().append("path")
	.attr("class", function(d) {
	if (d.id == highlightedCity.split(",")[0]) {
	return "cities-fill highlighted"
	}
	else {
	return "cities-fill";
	}
	})
	.attr("fill", fillColor)
	.attr("d", path);

	svg.append("text")
	.attr("class","observed-label")
	.text(highlightedCity.split(",")[0])
	.attr("dx",15)
	.attr("dy",25)
	}

	var keySvg = d3.select("#key").append("svg")
	.attr("class", "key")
	.attr("width", 1800)
	.attr("height", 80);

	var x = d3.scale.linear()
	.domain([0, 1])
	.range([0, 1210]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickSize(13)
	.tickValues(colorScale.domain())
	.tickFormat(function(d) { return d >= 0.02 ? parseInt(d*100) : null; });

	keySvg.selectAll("rect")
	.data(colorScale.range().map(function(d, i) {
	return {
	x0: i ? x(colorScale.domain()[i - 1]) : x.range()[0],
	x1: i < colorScale.domain().length ? x(colorScale.domain()[i]) : x.range()[1],
	z: d
	};
	}))
	.enter().append("rect")
	.attr("height", 8)
	.attr("x", function(d) { return d.x0; })
	.attr("width", function(d) { return d.x1 - d.x0; })
	.style("fill", function(d) { return d.z; });

	keySvg.call(xAxis);

	keySvg.append("text")
	.attr("class","title")
	.attr("dy", "60")
	.attr("dx", "0")
	.text("Percentage of People who say they are in a Stated Region who were seen in the Observed Region.")
	}

	</script>
	</head>

	<body>

	<div class="page">
	<ul id="cities">
	<li id="santa-monica" class="region"></li>
	<li id="los-angeles" class="region"></li>
	<div id="key"></div>
	</ul>
	</div>

	<script>
	geoStatJoinChart({
	width: 300,
	height: 300,
	latLong: [-118.2428,34.00],
	scale: 18000,
	geoDataUrl: "./los-angeles-cities.json",
	statDataUrl: "./los-angeles-stats.csv"
	}, d3, topojson, _, queue);
	</script>

	</body>
	</html>