bigeasy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    US Median Age by County

A display of US median age by county using the census.ide.org API.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <script type="text/javascript" src="https://raw.github.com/IntoMethod/Lightweight-JSONP/master/jsonp.js"></script>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
    <style type="text/css">

#counties path {
  stroke: #fff;
  stroke-width: .25px;
}

#states path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <div id="body">
      <div id="footer">
        U.S. Unemployment, 2008
        <div class="hint">use the menu to change the color scale</div>
        <div><select>
          <optgroup label="Colors by Cynthia Brewer.">
            <option value="YlGn">YlGn</option>
            <option value="YlGnBu">YlGnBu</option>
            <option value="GnBu">GnBu</option>
            <option value="BuGn">BuGn</option>
            <option value="PuBuGn">PuBuGn</option>
            <option value="PuBu">PuBu</option>
            <option value="BuPu">BuPu</option>
            <option value="RdPu">RdPu</option>
            <option value="PuRd">PuRd</option>
            <option value="OrRd">OrRd</option>
            <option value="YlOrRd">YlOrRd</option>
            <option value="YlOrBr">YlOrBr</option>
            <option value="Purples">Purples</option>
            <option value="Blues" selected>Blues</option>
            <option value="Greens">Greens</option>
            <option value="Oranges">Oranges</option>
            <option value="Reds">Reds</option>
            <option value="Greys">Greys</option>
          </optgroup>
        </select></div>
      </div>
    </div>
    <script type="text/javascript">

var path = d3.geo.path()
    .projection(d3.geo.albersUsa()
    .scale(1400)
    .translate([680, 360]));

var svg = d3.select("#body").append("svg:svg")
    .attr("class", "Blues")
    .attr("width", 1280)
    .attr("height", 800);

var counties = svg.append("svg:g")
    .attr("id", "counties");

var states = svg.append("svg:g")
    .attr("id", "states");


d3.json("us-counties.json", function(json) {
  var pad = d3.format("05d"),
//      quantize = d3.scale.quantile().domain([0, 15]).range(d3.range(9)),
      quantize = d3.scale.quantile().domain([20, 60]).range(d3.range(9)),
      queue = json.features.slice(0).map(function (feature) { return pad(feature.id) }).sort(),
      features = [];

  // http://arf.hrsa.gov/indep.htm 02201 Defunct as of 5/19/08
  var defunct = [ "02201", "02232", "02280" ];
  queue = queue.filter(function (feature) { return defunct.indexOf(feature) == -1  });

  function obtained (data) {
    features = features.concat(json.features.filter(function (feature) { return data[pad(feature.id)] }));
    counties.selectAll("path")
        .data(features)
      .enter().append("svg:path")
        .attr("class", function(d) { return "q" + quantize(data[pad(d.id)].data[2010]["P13"]["P013001"]) + "-9"; })
        .attr("d", path)
      .append("svg:title")
        .text(function(d) { return d.properties.name + ": " + data[pad(d.id)].data[2010]["P13"]["P013001"] + ""; });
    if (queue.length) obtain();
    else alert("done");
  }

  function obtain () {
    var range = queue.splice(0, 90),
        params = { url: "http://census.ire.org/data/" + range.join(",") + ".json?tables=P13" };
    console.log(range);
    JSONP.get("http://census.prettyrobots.com/", params, obtained, "jsonp");
  }

  //obtain();
alert('loaded');
});

d3.json("us-states.json", function(json) {
  states.selectAll("path")
      .data(json.features)
    .enter().append("svg:path")
      .attr("d", path);
});

d3.select("select").on("change", function() {
  d3.selectAll("svg").attr("class", this.value);
});

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

## us-counties.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-counties.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## us-states.json

      
    Raw
  

              us-states.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
	<script type="text/javascript" src="https://raw.github.com/IntoMethod/Lightweight-JSONP/master/jsonp.js"></script>
	<link type="text/css" rel="stylesheet" href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css"/>
	<style type="text/css">

	#counties path {
	stroke: #fff;
	stroke-width: .25px;
	}

	#states path {
	fill: none;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	</style>
	</head>
	<body>
	<div id="body">
	<div id="footer">
	U.S. Unemployment, 2008
	<div class="hint">use the menu to change the color scale</div>
	<div><select>
	<optgroup label="Colors by Cynthia Brewer.">
	<option value="YlGn">YlGn</option>
	<option value="YlGnBu">YlGnBu</option>
	<option value="GnBu">GnBu</option>
	<option value="BuGn">BuGn</option>
	<option value="PuBuGn">PuBuGn</option>
	<option value="PuBu">PuBu</option>
	<option value="BuPu">BuPu</option>
	<option value="RdPu">RdPu</option>
	<option value="PuRd">PuRd</option>
	<option value="OrRd">OrRd</option>
	<option value="YlOrRd">YlOrRd</option>
	<option value="YlOrBr">YlOrBr</option>
	<option value="Purples">Purples</option>
	<option value="Blues" selected>Blues</option>
	<option value="Greens">Greens</option>
	<option value="Oranges">Oranges</option>
	<option value="Reds">Reds</option>
	<option value="Greys">Greys</option>
	</optgroup>
	</select></div>
	</div>
	</div>
	<script type="text/javascript">

	var path = d3.geo.path()
	.projection(d3.geo.albersUsa()
	.scale(1400)
	.translate([680, 360]));

	var svg = d3.select("#body").append("svg:svg")
	.attr("class", "Blues")
	.attr("width", 1280)
	.attr("height", 800);

	var counties = svg.append("svg:g")
	.attr("id", "counties");

	var states = svg.append("svg:g")
	.attr("id", "states");


	d3.json("us-counties.json", function(json) {
	var pad = d3.format("05d"),
	// quantize = d3.scale.quantile().domain([0, 15]).range(d3.range(9)),
	quantize = d3.scale.quantile().domain([20, 60]).range(d3.range(9)),
	queue = json.features.slice(0).map(function (feature) { return pad(feature.id) }).sort(),
	features = [];

	// http://arf.hrsa.gov/indep.htm 02201 Defunct as of 5/19/08
	var defunct = [ "02201", "02232", "02280" ];
	queue = queue.filter(function (feature) { return defunct.indexOf(feature) == -1 });

	function obtained (data) {
	features = features.concat(json.features.filter(function (feature) { return data[pad(feature.id)] }));
	counties.selectAll("path")
	.data(features)
	.enter().append("svg:path")
	.attr("class", function(d) { return "q" + quantize(data[pad(d.id)].data[2010]["P13"]["P013001"]) + "-9"; })
	.attr("d", path)
	.append("svg:title")
	.text(function(d) { return d.properties.name + ": " + data[pad(d.id)].data[2010]["P13"]["P013001"] + ""; });
	if (queue.length) obtain();
	else alert("done");
	}

	function obtain () {
	var range = queue.splice(0, 90),
	params = { url: "http://census.ire.org/data/" + range.join(",") + ".json?tables=P13" };
	console.log(range);
	JSONP.get("http://census.prettyrobots.com/", params, obtained, "jsonp");
	}

	//obtain();
	alert('loaded');
	});

	d3.json("us-states.json", function(json) {
	states.selectAll("path")
	.data(json.features)
	.enter().append("svg:path")
	.attr("d", path);
	});

	d3.select("select").on("change", function() {
	d3.selectAll("svg").attr("class", this.value);
	});

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