ohdebby/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## fertilityState.txt
"Notes"	"State"	"State Code"	Births	Female Population	Fertility Rate
	"Alabama"	"01"	59422	961109	61.83
	"Alaska"	"02"	11392	147302	77.34
	"Arizona"	"04"	86887	1308000	66.43
	"Arkansas"	"05"	38511	574772	67.00
	"California"	"06"	502879	8061479	62.38
	"Colorado"	"08"	65830	1084623	60.69
	"Connecticut"	"09"	36285	684158	53.04
	"Delaware"	"10"	10972	180400	60.82
	"District of Columbia"	"11"	9509	177568	53.55
	"Florida"	"12"	219991	3687140	59.66
	"Georgia"	"13"	130946	2104573	62.22
	"Hawaii"	"15"	18550	267712	69.29
	"Idaho"	"16"	22876	314852	72.66
	"Illinois"	"17"	158556	2596483	61.07
	"Indiana"	"18"	84080	1295431	64.91
	"Iowa"	"19"	39687	585645	67.77
	"Kansas"	"20"	39223	560331	70.00
	"Kentucky"	"21"	56170	853601	65.80
	"Louisiana"	"22"	64497	942656	68.42
	"Maine"	"23"	12698	233832	54.30
	"Maryland"	"24"	73921	1201916	61.50
	"Massachusetts"	"25"	71908	1369202	52.52
	"Michigan"	"26"	114375	1887778	60.59
	"Minnesota"	"27"	69904	1053340	66.36
	"Mississippi"	"28"	38736	601260	64.42
	"Missouri"	"29"	75360	1176158	64.07
	"Montana"	"30"	12432	185661	66.96
	"Nebraska"	"31"	26794	364075	73.59
	"Nevada"	"32"	35861	566250	63.33
	"New Hampshire"	"33"	12302	243625	50.50
	"New Jersey"	"34"	103305	1723218	59.95
	"New Mexico"	"35"	26052	397580	65.53
	"New York"	"36"	238773	4045782	59.02
	"North Carolina"	"37"	120975	1982894	61.01
	"North Dakota"	"38"	11359	144130	78.81
	"Ohio"	"39"	139467	2211573	63.06
	"Oklahoma"	"40"	53339	762653	69.94
	"Oregon"	"41"	45556	776108	58.70
	"Pennsylvania"	"42"	142268	2407045	59.10
	"Rhode Island"	"44"	10823	210111	51.51
	"South Carolina"	"45"	57627	943512	61.08
	"South Dakota"	"46"	12283	157896	77.79
	"Tennessee"	"47"	81602	1295676	62.98
	"Texas"	"48"	399766	5654684	70.70
	"Utah"	"49"	51154	639388	80.00
	"Vermont"	"50"	6130	115981	52.85
	"Virginia"	"51"	103300	1684103	61.34
	"Washington"	"53"	88585	1398464	63.34
	"West Virginia"	"54"	20301	336741	60.29
	"Wisconsin"	"55"	67161	1087273	61.77
	"Wyoming"	"56"	7696	110821	69.45

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">
  body {
    font-family: arial, sans;
    font-size: 14px;
    width: 960px;
    margin: 40px auto;
  }
  svg {
    border: 1px solid #ccc;
  }
  .states {
    stroke:#fff;
    fill:none;
  }
  .counties {
    stroke: #fff;
    fill: green;
    stroke-width: .3px;
  }
  .county-bubble {
    stroke:#fff;
    stroke-width: .3;
  }
</style>

<body>

</body>

<script src="http://d3js.org/d3.v4.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>


<script type="text/javascript">

var width = 960,
    height = 500;
var color = d3.scaleLinear()
	.range(["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"])
	.domain([80,75,70,65,60,55,50]);
var radius = d3.scaleSqrt()
    .range([0,20])
    .domain([0,500000]);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  d3.queue()
    .defer(d3.tsv, "fertilityState.txt")
    .defer(d3.json, "us.json")
    .await(ready);

  function ready(error, births, us) {
  if (error) return console.warn(error);
  console.log(births);
  console.log(us);
  console.log(topojson.feature(us, us.objects.states).features);
  birthsByFips = {};
  births.forEach(function(d) {
    d.Births = +d.Births;
    d["Fertility Rate"] = +d["Fertility Rate"];
    birthsByFips[+d["State Code"]] = d;
  });
  var path = d3.geoPath()
    .projection(d3.geoAlbersUsa());
  var subset = topojson.feature(us, us.objects.states).features.filter(function(d) {
    return d.id in birthsByFips;
  });
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(subset)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) {
        return color(birthsByFips[d.id]["Fertility Rate"])
      });
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
}
</script>

## us.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us.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.
	"Notes" "State" "State Code" Births Female Population Fertility Rate
	"Alabama" "01" 59422 961109 61.83
	"Alaska" "02" 11392 147302 77.34
	"Arizona" "04" 86887 1308000 66.43
	"Arkansas" "05" 38511 574772 67.00
	"California" "06" 502879 8061479 62.38
	"Colorado" "08" 65830 1084623 60.69
	"Connecticut" "09" 36285 684158 53.04
	"Delaware" "10" 10972 180400 60.82
	"District of Columbia" "11" 9509 177568 53.55
	"Florida" "12" 219991 3687140 59.66
	"Georgia" "13" 130946 2104573 62.22
	"Hawaii" "15" 18550 267712 69.29
	"Idaho" "16" 22876 314852 72.66
	"Illinois" "17" 158556 2596483 61.07
	"Indiana" "18" 84080 1295431 64.91
	"Iowa" "19" 39687 585645 67.77
	"Kansas" "20" 39223 560331 70.00
	"Kentucky" "21" 56170 853601 65.80
	"Louisiana" "22" 64497 942656 68.42
	"Maine" "23" 12698 233832 54.30
	"Maryland" "24" 73921 1201916 61.50
	"Massachusetts" "25" 71908 1369202 52.52
	"Michigan" "26" 114375 1887778 60.59
	"Minnesota" "27" 69904 1053340 66.36
	"Mississippi" "28" 38736 601260 64.42
	"Missouri" "29" 75360 1176158 64.07
	"Montana" "30" 12432 185661 66.96
	"Nebraska" "31" 26794 364075 73.59
	"Nevada" "32" 35861 566250 63.33
	"New Hampshire" "33" 12302 243625 50.50
	"New Jersey" "34" 103305 1723218 59.95
	"New Mexico" "35" 26052 397580 65.53
	"New York" "36" 238773 4045782 59.02
	"North Carolina" "37" 120975 1982894 61.01
	"North Dakota" "38" 11359 144130 78.81
	"Ohio" "39" 139467 2211573 63.06
	"Oklahoma" "40" 53339 762653 69.94
	"Oregon" "41" 45556 776108 58.70
	"Pennsylvania" "42" 142268 2407045 59.10
	"Rhode Island" "44" 10823 210111 51.51
	"South Carolina" "45" 57627 943512 61.08
	"South Dakota" "46" 12283 157896 77.79
	"Tennessee" "47" 81602 1295676 62.98
	"Texas" "48" 399766 5654684 70.70
	"Utah" "49" 51154 639388 80.00
	"Vermont" "50" 6130 115981 52.85
	"Virginia" "51" 103300 1684103 61.34
	"Washington" "53" 88585 1398464 63.34
	"West Virginia" "54" 20301 336741 60.29
	"Wisconsin" "55" 67161 1087273 61.77
	"Wyoming" "56" 7696 110821 69.45
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">
	body {
	font-family: arial, sans;
	font-size: 14px;
	width: 960px;
	margin: 40px auto;
	}
	svg {
	border: 1px solid #ccc;
	}
	.states {
	stroke:#fff;
	fill:none;
	}
	.counties {
	stroke: #fff;
	fill: green;
	stroke-width: .3px;
	}
	.county-bubble {
	stroke:#fff;
	stroke-width: .3;
	}
	</style>

	<body>

	</body>

	<script src="http://d3js.org/d3.v4.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>


	<script type="text/javascript">

	var width = 960,
	height = 500;
	var color = d3.scaleLinear()
	.range(["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"])
	.domain([80,75,70,65,60,55,50]);
	var radius = d3.scaleSqrt()
	.range([0,20])
	.domain([0,500000]);
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.queue()
	.defer(d3.tsv, "fertilityState.txt")
	.defer(d3.json, "us.json")
	.await(ready);

	function ready(error, births, us) {
	if (error) return console.warn(error);
	console.log(births);
	console.log(us);
	console.log(topojson.feature(us, us.objects.states).features);
	birthsByFips = {};
	births.forEach(function(d) {
	d.Births = +d.Births;
	d["Fertility Rate"] = +d["Fertility Rate"];
	birthsByFips[+d["State Code"]] = d;
	});
	var path = d3.geoPath()
	.projection(d3.geoAlbersUsa());
	var subset = topojson.feature(us, us.objects.states).features.filter(function(d) {
	return d.id in birthsByFips;
	});
	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(subset)
	.enter().append("path")
	.attr("d", path)
	.style("fill", function(d) {
	return color(birthsByFips[d.id]["Fertility Rate"])
	});
	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
	.attr("class", "states")
	.attr("d", path);
	}
	</script>