blech/.block

## .block
---
height: 800
scrolling: no
border: no

## cb_2014_us_county_5m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              cb_2014_us_county_5m.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>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>California Votes: Mercator projection</title>

    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3-scale.v2.min.js"></script>

    <style type="text/css">

      body {
        margin: 0;
        background-color: #ffffff;
        font-family: sans-serif;
      }

      #container {
        width: 800px;
        margin-left: 0px;
        margin-right: auto;
        margin-top: 0px;
        padding: 30px;
        background-color: white;
      }

      h1 {
        font-size: 24px;
        margin: 0;
      }

      p {
        font-size: 16px;
        margin: 15px 0 10px 0;
      }

      a {
        color: #799DCB;
        text-decoration: none;
        transition: color .3s, background .3s, border .3s;
      }
      a:hover {
        color: #48494b;
        background: #e7e8e9;
      }

      svg {
        background-color: white;
        padding-left: 20px;
      }

      path {
        stroke: #000;
        }
      path:hover {
        /*fill:#48494b;*/
        cursor:pointer;
      }

      #tooltip {
        width: 150px;
        height: auto;
        padding: 5px;
        background-color: #fff;
        color: #000;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
        pointer-events: none;
        position: absolute;
        }

      #tooltip.hidden {
        display: none;
      }

      #tooltip p {
      margin: 0;
      font-size: 14px;
      line-height: 18px;
      }

    </style>
  </head>
  <body>

      <body>

    <div id="container">

      <h1>Votes on Prop 6</h1>
      <p>Sources: <a href="https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html" target="new">U.S. Census Bureau</a>,
          <a href="https://vote.sos.ca.gov/returns/maps/ballot-measures/prop/6" target="new">California Secretary of State</a>
      </p>
      <p>Red is no, blue is yes</p>
    </div>

    <div id="tooltip" class="hidden">
            <p>County: <span id="county">County Name</span></p>
        </div>
    <script type="text/javascript">

      //Width and height
      var w = 760;
      var h = 600;

      //Define map projection
      var projection = d3.geo.mercator()
                   .center([ -120, 37 ])
                   .translate([ w/2, h/2 ])
                   .scale([ w*3.3 ]);

      //Define path generator
      var path = d3.geo.path()
               .projection(projection);

      //Create SVG
      var svg = d3.select("#container")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

      // color scale
      var colors = d3.scaleLinear()
          .domain([15, 85])
          .range(["#ff0000", "#0000ff"]);

      //This is very un-d3-ish because I can't wrap my head around it today, evidently
      max_yes = 800000;
      max_total = 2000000;

      //Load in GeoJSON data
      d3.json("https://gist.githubusercontent.com/threestory/ed0f322d7bb2e3be8ded/raw/2aa8df2f15817985c60b67d726e6d13197e8ffb6/cb_2014_us_county_5m.json", function(geojson) {
        //Get votes
        d3.json("https://api.sos.ca.gov/returns/maps/ballot-measures/prop/6", function(votes) {
          //Bind data and create one path per GeoJSON feature
          svg.selectAll("path")
            .data(geojson.features)
            .enter()
            .append("path")
            .attr("d", path)
            .attr('fill', function(d) {
              color = "#f0f0f0";
              county_name = d.properties.NAME.toLowerCase();
              county_name = county_name.replace(/ /g, '-');

              counties = d3.keys(votes);
              counties.forEach(function(k, i) {
                if (k == county_name) {
                  yes = parseFloat(votes[k]['ballot-measures'][0]['yesPercent']);
                  color = colors(yes);
                }
              });
              return color;
            })
              .on("mouseover", function(d){
                var xPosition = w/2 + 150;
                var yPosition = h/2;
                // var xPosition = parseFloat(path.centroid(this).attr("cx"));
                // var yPosition = parseFloat(path.centroid(this).attr("cy"));
                d3.select("#tooltip")
                .style("left", xPosition + "px")
                .style("top", yPosition + "px");
                d3.select("#county")
                .text(d.properties.NAME);
                d3.select("#tooltip")
                .classed("hidden", false);
              })
              .on("mouseout", function(){
                d3.select("#tooltip").classed("hidden", true);
              })
              .style("opacity", function(d) {
                county_name = d.properties.NAME.toLowerCase();
                county_name = county_name.replace(/ /g, '-');
                counties = d3.keys(votes);
                counties.forEach(function(k, i) {
                  if (k == county_name) {
                    yes_votes = parseInt(votes[k]['ballot-measures'][0]['yesVotes']);
                    no_votes = parseInt(votes[k]['ballot-measures'][0]['noVotes']);
                    opacity = (yes_votes+no_votes)*1.0/max_total;
                    // leaving this in but it produces really weird maps,
                    // so I'm hardcoding it anyway \o/
                  }
                });
                return 1.0;
              });

        });
      });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>California Votes: Mercator projection</title>

	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://d3js.org/d3-scale.v2.min.js"></script>

	<style type="text/css">

	body {
	margin: 0;
	background-color: #ffffff;
	font-family: sans-serif;
	}

	#container {
	width: 800px;
	margin-left: 0px;
	margin-right: auto;
	margin-top: 0px;
	padding: 30px;
	background-color: white;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 16px;
	margin: 15px 0 10px 0;
	}

	a {
	color: #799DCB;
	text-decoration: none;
	transition: color .3s, background .3s, border .3s;
	}
	a:hover {
	color: #48494b;
	background: #e7e8e9;
	}

	svg {
	background-color: white;
	padding-left: 20px;
	}

	path {
	stroke: #000;
	}
	path:hover {
	/fill:#48494b;/
	cursor:pointer;
	}

	#tooltip {
	width: 150px;
	height: auto;
	padding: 5px;
	background-color: #fff;
	color: #000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	position: absolute;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	}

	</style>
	</head>
	<body>

	<body>

	<div id="container">

	<h1>Votes on Prop 6</h1>
	<p>Sources: <a href="https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html" target="new">U.S. Census Bureau</a>,
	<a href="https://vote.sos.ca.gov/returns/maps/ballot-measures/prop/6" target="new">California Secretary of State</a>
	</p>
	<p>Red is no, blue is yes</p>
	</div>

	<div id="tooltip" class="hidden">
	<p>County: <span id="county">County Name</span></p>
	</div>
	<script type="text/javascript">

	//Width and height
	var w = 760;
	var h = 600;

	//Define map projection
	var projection = d3.geo.mercator()
	.center([ -120, 37 ])
	.translate([ w/2, h/2 ])
	.scale([ w*3.3 ]);

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	// color scale
	var colors = d3.scaleLinear()
	.domain([15, 85])
	.range(["#ff0000", "#0000ff"]);

	//This is very un-d3-ish because I can't wrap my head around it today, evidently
	max_yes = 800000;
	max_total = 2000000;

	//Load in GeoJSON data
	d3.json("https://gist.githubusercontent.com/threestory/ed0f322d7bb2e3be8ded/raw/2aa8df2f15817985c60b67d726e6d13197e8ffb6/cb_2014_us_county_5m.json", function(geojson) {
	//Get votes
	d3.json("https://api.sos.ca.gov/returns/maps/ballot-measures/prop/6", function(votes) {
	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(geojson.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr('fill', function(d) {
	color = "#f0f0f0";
	county_name = d.properties.NAME.toLowerCase();
	county_name = county_name.replace(/ /g, '-');

	counties = d3.keys(votes);
	counties.forEach(function(k, i) {
	if (k == county_name) {
	yes = parseFloat(votes[k]['ballot-measures'][0]['yesPercent']);
	color = colors(yes);
	}
	});
	return color;
	})
	.on("mouseover", function(d){
	var xPosition = w/2 + 150;
	var yPosition = h/2;
	// var xPosition = parseFloat(path.centroid(this).attr("cx"));
	// var yPosition = parseFloat(path.centroid(this).attr("cy"));
	d3.select("#tooltip")
	.style("left", xPosition + "px")
	.style("top", yPosition + "px");
	d3.select("#county")
	.text(d.properties.NAME);
	d3.select("#tooltip")
	.classed("hidden", false);
	})
	.on("mouseout", function(){
	d3.select("#tooltip").classed("hidden", true);
	})
	.style("opacity", function(d) {
	county_name = d.properties.NAME.toLowerCase();
	county_name = county_name.replace(/ /g, '-');
	counties = d3.keys(votes);
	counties.forEach(function(k, i) {
	if (k == county_name) {
	yes_votes = parseInt(votes[k]['ballot-measures'][0]['yesVotes']);
	no_votes = parseInt(votes[k]['ballot-measures'][0]['noVotes']);
	opacity = (yes_votes+no_votes)*1.0/max_total;
	// leaving this in but it produces really weird maps,
	// so I'm hardcoding it anyway \o/
	}
	});
	return 1.0;
	});

	});
	});

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