lucguillemot · November 24, 2015 00:41
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style type="text/css">
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    dominant-baseline:central;
    text-anchor:middle;
  }

  .hoods {
    fill:none;
    stroke-width:.3px;
    stroke:#fff;
  }

 </style>
 <body>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/queue.v1.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script>
 $(function(){
  var width = 660,
      height = 450,
      legend_width = 200,
      divisions = 100;

  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height),
      legend = svg.append("g").attr("class", "legend").attr("transform", "translate(430,405)"),
      prop = svg.append("g").attr("class", "propSelection").attr("transform", "translate(430,30)");

 var projection = d3.geo.mercator()
        .center([-122.3871, 37.7729])
        .scale(140000)
        .translate([width/2, height/2]);

  var EqualColor = "#f7f7f7",
      YesColorMax = "#2d004b",
      NoColorMin = "#673006";

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

  queue()
      .defer(d3.json, "SFprecincts.json")
      .defer(d3.json, "SFhoods.json")
      .defer(d3.csv, "propJ.csv")
      .await(ready);

  function ready(error, map, hoods, data) {
    var PercById = {},
        WinnerById = {};

    data.forEach(function(d) {
        PercById[d.PrecinctID] = +d.Perc;
        WinnerById[d.PrecinctID]=d.Win
    });

    // I use the same maximum value for 'Yes' and 'No' to have an equal color scale on both sides
    var YesNoMax = d3.max(data, function(d){return d.Perc;});

    var YesColor = d3.scale.linear()
        .range([EqualColor, YesColorMax])
        .domain([0.5,YesNoMax])
        .interpolate(d3.interpolateLab);
    var NoColor = d3.scale.linear()
        .range([EqualColor, NoColorMin])
        .domain([0.5,YesNoMax])
        .interpolate(d3.interpolateLab);

    svg.append("g")
        .attr("class", "precinct")
        .selectAll("path")
        .data(topojson.feature(map, map.objects.precincts).features)
        .enter().append("path")
        .attr("id", function(d){return PercById[d.properties.Pid];})
        .attr("d", path)
        .style("fill", function(d) {
          if (WinnerById[d.properties.Pid]=="Yes"){
            return YesColor(PercById[d.properties.Pid]); 
          }
          else {
            return NoColor(PercById[d.properties.Pid]); 
          }
        });

    svg.append("g")
        .attr("class", "hoods")
        .selectAll("path")
        .data(topojson.feature(hoods, hoods.objects.hoods).features)
        .enter().append("path")
        .attr("d", path);

    // LEGEND //////////////////////////////////////////////
    var fakeData = [];
    var rectWidth = Math.floor(legend_width / divisions);

    for (var i=0; i < legend_width/2; i+= rectWidth ) {
        fakeData.push(i);
    }

    var YesColorScaleLegend = d3.scale.linear()
          .domain([0, fakeData.length-1])
          .interpolate(d3.interpolateLab)
          .range([EqualColor, YesColorMax]);
    var NoColorScaleLegend = d3.scale.linear()
          .domain([fakeData.length-1,0])
          .interpolate(d3.interpolateLab)
          .range([EqualColor, NoColorMin]);

    var YesLegend = legend.append("g").attr("class", "YesLegend").attr("transform", "translate("+(legend_width/2)+",0)"),
        NoLegend = legend.append("g").attr("class", "NoLegend");

    YesLegend.selectAll("rect")
        .data(fakeData)
        .enter()
        .append("rect")
            .attr("x", function(d) { return d; })
            .attr("y", 10)
            .attr("height", 10)
            .attr("width", rectWidth)
            .attr("fill", function(d, i) { return YesColorScaleLegend(i)});
    
    NoLegend.selectAll("rect")
        .data(fakeData)
        .enter()
        .append("rect")
            .attr("x", function(d) { return d; })
            .attr("y", 10)
            .attr("height", 10)
            .attr("width", rectWidth)
            .attr("fill", function(d, i) { return NoColorScaleLegend(i)});
    
    legend.append("text").text("YES").attr("transform", "translate("+(legend_width/2+25)+",0)");
    legend.append("text").text("NO").attr("transform", "translate("+(legend_width/2-25)+",0)");
    legend.append("text").text(function(){return (0.5*100).toFixed(0) + "%";}).attr("transform","translate("+(legend_width/2)+",30)");
    legend.append("text").text(function(){return (YesNoMax*100).toFixed(0);}).attr("transform","translate(0,30)");
    legend.append("text").text(function(){return (YesNoMax*100).toFixed(0);}).attr("transform","translate("+(legend_width)+",30)");
  };

 });

 </script>
 </body>
 </html>
diff --git a/propJ.csv b/propJ.csv
diff --git a/SFhoods.json b/SFhoods.json
diff --git a/SFprecincts.json b/SFprecincts.json
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style type="text/css">

	body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	dominant-baseline:central;
	text-anchor:middle;
	}

	.hoods {
	fill:none;
	stroke-width:.3px;
	stroke:#fff;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	$(function(){
	var width = 660,
	height = 450,
	legend_width = 200,
	divisions = 100;

	var svg = d3.select("body").append("svg").attr("width", width).attr("height", height),
	legend = svg.append("g").attr("class", "legend").attr("transform", "translate(430,405)"),
	prop = svg.append("g").attr("class", "propSelection").attr("transform", "translate(430,30)");

	var projection = d3.geo.mercator()
	.center([-122.3871, 37.7729])
	.scale(140000)
	.translate([width/2, height/2]);

	var EqualColor = "#f7f7f7",
	YesColorMax = "#2d004b",
	NoColorMin = "#673006";

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

	queue()
	.defer(d3.json, "SFprecincts.json")
	.defer(d3.json, "SFhoods.json")
	.defer(d3.csv, "propJ.csv")
	.await(ready);

	function ready(error, map, hoods, data) {
	var PercById = {},
	WinnerById = {};

	data.forEach(function(d) {
	PercById[d.PrecinctID] = +d.Perc;
	WinnerById[d.PrecinctID]=d.Win
	});

	// I use the same maximum value for 'Yes' and 'No' to have an equal color scale on both sides
	var YesNoMax = d3.max(data, function(d){return d.Perc;});

	var YesColor = d3.scale.linear()
	.range([EqualColor, YesColorMax])
	.domain([0.5,YesNoMax])
	.interpolate(d3.interpolateLab);
	var NoColor = d3.scale.linear()
	.range([EqualColor, NoColorMin])
	.domain([0.5,YesNoMax])
	.interpolate(d3.interpolateLab);

	svg.append("g")
	.attr("class", "precinct")
	.selectAll("path")
	.data(topojson.feature(map, map.objects.precincts).features)
	.enter().append("path")
	.attr("id", function(d){return PercById[d.properties.Pid];})
	.attr("d", path)
	.style("fill", function(d) {
	if (WinnerById[d.properties.Pid]=="Yes"){
	return YesColor(PercById[d.properties.Pid]);
	}
	else {
	return NoColor(PercById[d.properties.Pid]);
	}
	});

	svg.append("g")
	.attr("class", "hoods")
	.selectAll("path")
	.data(topojson.feature(hoods, hoods.objects.hoods).features)
	.enter().append("path")
	.attr("d", path);

	// LEGEND //////////////////////////////////////////////
	var fakeData = [];
	var rectWidth = Math.floor(legend_width / divisions);

	for (var i=0; i < legend_width/2; i+= rectWidth ) {
	fakeData.push(i);
	}

	var YesColorScaleLegend = d3.scale.linear()
	.domain([0, fakeData.length-1])
	.interpolate(d3.interpolateLab)
	.range([EqualColor, YesColorMax]);
	var NoColorScaleLegend = d3.scale.linear()
	.domain([fakeData.length-1,0])
	.interpolate(d3.interpolateLab)
	.range([EqualColor, NoColorMin]);

	var YesLegend = legend.append("g").attr("class", "YesLegend").attr("transform", "translate("+(legend_width/2)+",0)"),
	NoLegend = legend.append("g").attr("class", "NoLegend");

	YesLegend.selectAll("rect")
	.data(fakeData)
	.enter()
	.append("rect")
	.attr("x", function(d) { return d; })
	.attr("y", 10)
	.attr("height", 10)
	.attr("width", rectWidth)
	.attr("fill", function(d, i) { return YesColorScaleLegend(i)});

	NoLegend.selectAll("rect")
	.data(fakeData)
	.enter()
	.append("rect")
	.attr("x", function(d) { return d; })
	.attr("y", 10)
	.attr("height", 10)
	.attr("width", rectWidth)
	.attr("fill", function(d, i) { return NoColorScaleLegend(i)});

	legend.append("text").text("YES").attr("transform", "translate("+(legend_width/2+25)+",0)");
	legend.append("text").text("NO").attr("transform", "translate("+(legend_width/2-25)+",0)");
	legend.append("text").text(function(){return (0.5*100).toFixed(0) + "%";}).attr("transform","translate("+(legend_width/2)+",30)");
	legend.append("text").text(function(){return (YesNoMax*100).toFixed(0);}).attr("transform","translate(0,30)");
	legend.append("text").text(function(){return (YesNoMax*100).toFixed(0);}).attr("transform","translate("+(legend_width)+",30)");
	};

	});

	</script>
	</body>
	</html>