rogerfischer · April 12, 2016 22:19
diff --git a/README.md b/README.md
diff --git a/DATA_prop_f_election_day_yes_percentage_20151103_20151119.csv b/DATA_prop_f_election_day_yes_percentage_20151103_20151119.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
  <title>San Francisco Precincts / Prop F</title>
 <style>

 body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: #272a2f;
 }

 #mapcanvas {
  width: 960px;
  height: 600px;
  margin: 10px 10px 10px 10px;
  /*padding: 5px 5px 5px 5px;*/
  border: 0.2px solid #555;

 }

 .precinct {
  fill: #f6f6f6;
  /*fill: #eee;*/
 }

 .precinct-boundary {
  fill: none;
  stroke: #fff;
  stroke-width: none;
 }

 </style>

 <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 </head>

 <body>
 <div id="mapcanvas" ></div> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
 <script src="https://d3js.org/queue.v1.min.js"></script>

 <script>



 var width = 960,
    height = 600;

 // PROJECTION   

 // SF_DOE_Precincts_20120702.prj
 // You can also center the map on: -122.51494800050519,37.70813100002812 like in the TopoJSON
 /*var projection = d3.geo.conicConformal() 
    .rotate([0, 0, 0])  
    .center([-122.433701, 37.767683])
    .scale(235000)
    .parallels([37.06666666666667, 38.43333333333333])
    .translate([width / 2, height / 2])
    .precision(.1);*/

 // MERCATOR
 var projection = d3.geo.mercator()
    .center([-122.433701, 37.767683])
    .scale(211000)
    .translate([width / 2, 310]);

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


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

 // Title inside the Map
 svg.append("text")
    .attr("x", "50")             
    .attr("y", "29")
    .attr("text-anchor", "start")  
    .style("font-size", "16px") 
    .style("text-decoration", "none")  
    .text("Prop F, Election Day, November 3, 2015");



 var linear = d3.scale.linear()
             .domain([0, 0.5, 1])
             .range(["red", "white", "green"]);

 // Linear 2
 // Excluding outliers (but please check the data first)
 var linear2 = d3.scale.linear()
             .domain([0.25, 0.5, 0.75])
             .range(["red", "white", "green"]);


 var threshold = d3.scale.threshold()
             .domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])
             .range(["#8e0152", "#c51b7d", "#de77ae", "#f1b6da", "#fde0ef", "#f7f7f7", "#e6f5d0", "#b8e186", "#7fbc41", "#4d9221", "#276419"]);



 queue()
      .defer(d3.json, 'san_francisco_precinct_20120702.topojson')               
      .defer(d3.csv, 'DATA_prop_f_election_day_yes_percentage_20151103_20151119.csv') // REPLACE REF WITH DATA
      .await(ready);

 function ready(error, MAP, DATA) {    // REPLACE REF WITH DATA
  if (error) throw error; 
  console.log(MAP)   // CHECK YOUR MAP
  console.log(DATA)  // CHECK YOUR DATA


  var precincts = topojson.feature(MAP, MAP.objects.precinct);  

  var pctname = {};
  DATA.forEach(function(d) { pctname[d.id] = d.precinct_names})

  var nh = {};
  DATA.forEach(function(d) { nh[d.id] = d.neighborhood})

  var yesp = {};
  DATA.forEach(function(d) { yesp[d.id] = +d.yes_percentage; });

  svg.append("g")
      .attr("class", "precinct")
      .selectAll("path")
      .data(precincts.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("fill", function(d) { return linear(yesp[d.id]); }) // yes percentage
      .append('svg:title').text(function(d) {        
      // return ("GeoID: " + d.id); });
         return (nh[d.id] + ", " + pctname[d.id] +": " + (yesp[d.id]*100) + "% Yes"); });


  //Borders 
  svg.append("path")
      .datum(topojson.mesh(MAP, MAP.objects.precinct, function(a, b) { return a !== b; }))
      .attr("class", "precinct-boundary")
      .attr("d", path);  

 };


 </script>
 </body>
 </html>
diff --git a/san_francisco_precinct_20120702.topojson b/san_francisco_precinct_20120702.topojson
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>San Francisco Precincts / Prop F</title>
	<style>

	body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	color: #272a2f;
	}

	#mapcanvas {
	width: 960px;
	height: 600px;
	margin: 10px 10px 10px 10px;
	/padding: 5px 5px 5px 5px;/
	border: 0.2px solid #555;

	}

	.precinct {
	fill: #f6f6f6;
	/fill: #eee;/
	}

	.precinct-boundary {
	fill: none;
	stroke: #fff;
	stroke-width: none;
	}

	</style>

	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<div id="mapcanvas" ></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>

	<script>



	var width = 960,
	height = 600;

	// PROJECTION

	// SF_DOE_Precincts_20120702.prj
	// You can also center the map on: -122.51494800050519,37.70813100002812 like in the TopoJSON
	/*var projection = d3.geo.conicConformal()
	.rotate([0, 0, 0])
	.center([-122.433701, 37.767683])
	.scale(235000)
	.parallels([37.06666666666667, 38.43333333333333])
	.translate([width / 2, height / 2])
	.precision(.1);*/

	// MERCATOR
	var projection = d3.geo.mercator()
	.center([-122.433701, 37.767683])
	.scale(211000)
	.translate([width / 2, 310]);

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


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

	// Title inside the Map
	svg.append("text")
	.attr("x", "50")
	.attr("y", "29")
	.attr("text-anchor", "start")
	.style("font-size", "16px")
	.style("text-decoration", "none")
	.text("Prop F, Election Day, November 3, 2015");



	var linear = d3.scale.linear()
	.domain([0, 0.5, 1])
	.range(["red", "white", "green"]);

	// Linear 2
	// Excluding outliers (but please check the data first)
	var linear2 = d3.scale.linear()
	.domain([0.25, 0.5, 0.75])
	.range(["red", "white", "green"]);


	var threshold = d3.scale.threshold()
	.domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])
	.range(["#8e0152", "#c51b7d", "#de77ae", "#f1b6da", "#fde0ef", "#f7f7f7", "#e6f5d0", "#b8e186", "#7fbc41", "#4d9221", "#276419"]);



	queue()
	.defer(d3.json, 'san_francisco_precinct_20120702.topojson')
	.defer(d3.csv, 'DATA_prop_f_election_day_yes_percentage_20151103_20151119.csv') // REPLACE REF WITH DATA
	.await(ready);

	function ready(error, MAP, DATA) { // REPLACE REF WITH DATA
	if (error) throw error;
	console.log(MAP) // CHECK YOUR MAP
	console.log(DATA) // CHECK YOUR DATA


	var precincts = topojson.feature(MAP, MAP.objects.precinct);

	var pctname = {};
	DATA.forEach(function(d) { pctname[d.id] = d.precinct_names})

	var nh = {};
	DATA.forEach(function(d) { nh[d.id] = d.neighborhood})

	var yesp = {};
	DATA.forEach(function(d) { yesp[d.id] = +d.yes_percentage; });

	svg.append("g")
	.attr("class", "precinct")
	.selectAll("path")
	.data(precincts.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", function(d) { return linear(yesp[d.id]); }) // yes percentage
	.append('svg:title').text(function(d) {
	// return ("GeoID: " + d.id); });
	return (nh[d.id] + ", " + pctname[d.id] +": " + (yesp[d.id]*100) + "% Yes"); });


	//Borders
	svg.append("path")
	.datum(topojson.mesh(MAP, MAP.objects.precinct, function(a, b) { return a !== b; }))
	.attr("class", "precinct-boundary")
	.attr("d", path);

	};


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