unsetbit/README.md

## README.md

      
    Raw
  

              README.md
            
          
    California School Performance in 2012
Academic Performance Index (API) measures the academic performance of schools across a variety of measures. It's used by the California Department of Education to compare the performance of schools against each other (and themselves). 200 is the lowest score and 1000 is the highest score. 800 is the target API score for schools. This map displays  disctrict-level API scores.
Scroll and drag the map to navigate.
The raw API data used in this visualization is publicly available at the CDE website. The district lines are from TIGER.

  
## ca.sd.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ca.sd.topo.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<meta charset="utf-8">
<title>California School Performance (2012)</title>
<style>
.districts path{
  fill:white;
  stroke: white;
  stroke-width:.25px;
}

.districts path:hover{
  stroke-width: 2px;
}

div.tooltip {
  position: absolute;
  text-align: center;
  padding: 5px 15px;
  font-size: 10px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 1px;

  pointer-events: none;
}

.legend {
  font-size: 12px;
}
</style>
<body>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>
var width = 960,
    height = 500;

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

queue()
  .defer(d3.json, "ca.sd.topo.json")
  .await(draw);

var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

function draw(err, sd){
  var projection = d3.geo.albers().scale(3000).translate([width/2, height/2]).rotate([120,1.5]);

  var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height / 8, 80 * height])
    .on("zoom", function zoomed() {
      projection.translate(d3.event.translate).scale(d3.event.scale);
      redraw(d3.event.scale);
    });

  svg.call(zoom);

  var path =  d3.geo.path().projection(projection);
  function redraw(scale){
    svg.selectAll('path').remove();

    var districts = topojson.feature(sd, sd.objects.districts).features;


    var color = d3.scale.linear()
      .range(["hsl(62,100%,100%)", "hsl(228,60%,20%)"])
      .interpolate(d3.interpolateHcl)
      .domain([1000, 200]);

      svg.append('g')
          .attr('class', 'districts')
        .selectAll('path')
          .data(districts)
        .enter().append('path')
          .style('fill', function(d){
            return color(d.properties.API);
          })
          .attr('d', path)
          .on("mousemove", function(){
            tooltip
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY -30) + "px");
          })
          .on("mouseover", function(d) {
            if(!d.properties.District) return;

            tooltip
              .transition()
              .duration(300)
              .style("opacity", 1)
            tooltip.text(d.properties.District + " - " + d.properties.API + " API");
          })
          .on("mouseout", function() {
            tooltip.transition().duration(300)
            .style("opacity", 0);
          });

    var legendLabels = ["200-399", "400-599", "600-799", "800-1000"]
    var legendDomain = [200, 400, 600, 800, 1000]
    var legend = svg.selectAll("g.legend")
    .data(legendDomain)
    .enter().append("g")
    .attr("class", "legend");

    var ls_w = 20, ls_h = 20;

    legend.append("rect")
    .attr("x", 20)
    .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
    .attr("width", ls_w)
    .attr("height", ls_h)
    .style("fill", function(d, i) { return color(d); })
    .style("opacity", 0.8);

    legend.append("text")
    .attr("x", 50)
    .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
    .text(function(d, i){ return legendLabels[i]; });
  }

  redraw();
}
</script>
	<!doctype html>
	<meta charset="utf-8">
	<title>California School Performance (2012)</title>
	<style>
	.districts path{
	fill:white;
	stroke: white;
	stroke-width:.25px;
	}

	.districts path:hover{
	stroke-width: 2px;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	padding: 5px 15px;
	font-size: 10px;
	background: white;
	border: 1px solid #ccc;
	border-radius: 1px;

	pointer-events: none;
	}

	.legend {
	font-size: 12px;
	}
	</style>
	<body>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<script>
	var width = 960,
	height = 500;

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

	queue()
	.defer(d3.json, "ca.sd.topo.json")
	.await(draw);

	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	function draw(err, sd){
	var projection = d3.geo.albers().scale(3000).translate([width/2, height/2]).rotate([120,1.5]);

	var zoom = d3.behavior.zoom()
	.translate(projection.translate())
	.scale(projection.scale())
	.scaleExtent([height / 8, 80 * height])
	.on("zoom", function zoomed() {
	projection.translate(d3.event.translate).scale(d3.event.scale);
	redraw(d3.event.scale);
	});

	svg.call(zoom);

	var path = d3.geo.path().projection(projection);
	function redraw(scale){
	svg.selectAll('path').remove();

	var districts = topojson.feature(sd, sd.objects.districts).features;


	var color = d3.scale.linear()
	.range(["hsl(62,100%,100%)", "hsl(228,60%,20%)"])
	.interpolate(d3.interpolateHcl)
	.domain([1000, 200]);

	svg.append('g')
	.attr('class', 'districts')
	.selectAll('path')
	.data(districts)
	.enter().append('path')
	.style('fill', function(d){
	return color(d.properties.API);
	})
	.attr('d', path)
	.on("mousemove", function(){
	tooltip
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY -30) + "px");
	})
	.on("mouseover", function(d) {
	if(!d.properties.District) return;

	tooltip
	.transition()
	.duration(300)
	.style("opacity", 1)
	tooltip.text(d.properties.District + " - " + d.properties.API + " API");
	})
	.on("mouseout", function() {
	tooltip.transition().duration(300)
	.style("opacity", 0);
	});

	var legendLabels = ["200-399", "400-599", "600-799", "800-1000"]
	var legendDomain = [200, 400, 600, 800, 1000]
	var legend = svg.selectAll("g.legend")
	.data(legendDomain)
	.enter().append("g")
	.attr("class", "legend");

	var ls_w = 20, ls_h = 20;

	legend.append("rect")
	.attr("x", 20)
	.attr("y", function(d, i){ return height - (ils_h) - 2ls_h;})
	.attr("width", ls_w)
	.attr("height", ls_h)
	.style("fill", function(d, i) { return color(d); })
	.style("opacity", 0.8);

	legend.append("text")
	.attr("x", 50)
	.attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
	.text(function(d, i){ return legendLabels[i]; });
	}

	redraw();
	}
	</script>