enjalot/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from rogerfischer's block: SF Precincts
forked from enjalot's block: SF Precincts: colored by BART district

  
## 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;

}
.precinct path {
  fill: #afafaf;
  stroke: #545454;
}

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

</style>

</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;

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

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


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

// fancy way of combining AJAX requests
queue()
  .defer(d3.json, 'http://enjalot.github.io/wwsd/data/USA/sf-precincts.topojson')
  .defer(d3.csv, 'http://enjalot.github.io/wwsd/data/USA/sf-precincts.csv') // REF
  .await(ready);

// this function gets called when all the data is loaded from the queue
function ready(error, sfjson, csv) {
  if (error) throw error;

  // Ignore this topojson thing for now
  var precincts = topojson.feature(sfjson, sfjson.objects.precinct);
  console.log("precincts", precincts)
  console.log("ref", csv)

  svg.append("g").attr("class", "precinct")
    .selectAll("path")
    .data(precincts.features)
    .enter()
      .append("path")
      .attr("d", path)
};

</script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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;

	}
	.precinct path {
	fill: #afafaf;
	stroke: #545454;
	}

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

	</style>

	</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;

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

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


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

	// fancy way of combining AJAX requests
	queue()
	.defer(d3.json, 'http://enjalot.github.io/wwsd/data/USA/sf-precincts.topojson')
	.defer(d3.csv, 'http://enjalot.github.io/wwsd/data/USA/sf-precincts.csv') // REF
	.await(ready);

	// this function gets called when all the data is loaded from the queue
	function ready(error, sfjson, csv) {
	if (error) throw error;

	// Ignore this topojson thing for now
	var precincts = topojson.feature(sfjson, sfjson.objects.precinct);
	console.log("precincts", precincts)
	console.log("ref", csv)

	svg.append("g").attr("class", "precinct")
	.selectAll("path")
	.data(precincts.features)
	.enter()
	.append("path")
	.attr("d", path)
	};

	</script>
	</html>