mcbarlowe/index.html

## index.html
<!DOCTYPE html>
<meta charset = 'utf-8'>
<html>
<head>
  <title>A D3 map</title>
  <script src = 'https://d3js.org/d3.v4.min.js'></script>
  <script src = 'https://d3js.org/d3-scale-chromatic.v1.min.js'></script>
  <script src = 'https://d3js.org/topojson.v2.min.js'></script
</head>
<style>
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
</style>
<body>
  <div id = 'option'>
    <input name = 'updateButton'
           type = 'button'
           value = 'Total'
           onclick = 'ready()'
           />
    <input name = 'defaultButton'
           type = 'button'
           value = 'Default'
           onclick = 'default_data()'
           />
  <script>

    var width = 1200,
        height = 600;

    var percentages = d3.map(us)
    var default_percentages = d3.map(us)

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

    var color = d3.scaleThreshold()
        .domain(d3.range(0, .2, .02))
        .range(d3.schemeGreens[9])

    var default_color = d3.scaleThreshold()
        .domain(d3.range(0, .2, .02))
        .range(d3.schemeReds[9])

    var us = d3.json('https://d3js.org/us-10m.v1.json')
    var loan_percent = d3.map()

    var g = svg.append('g')
        .attr('class', 'key');

    var path = d3.geoPath();

    d3.queue()
      .defer(d3.json, 'https://d3js.org/us-10m.v1.json')
      .defer(d3.csv, 'TotalPercentsbyState.csv', function(d) {percentages.set(d.STATE, +d.Percent_of_Total);})
      .defer(d3.csv, 'PercentDefaultsbyState.csv', function(d) {default_percentages.set(d.STATE, +d.Percent_of_Total);})
      .await(ready);

    function ready(error, us) {
      if (error) throw error;

      svg.append('g')
        .attr('class', 'states')
      .selectAll('path')
      .data(topojson.feature(us, us.objects.states).features)
      .enter()
      .append('path')
        .attr('fill', function(d) { return color(percentages.get(d.id)); })
        .attr('d', path)
      .append('title')
        .text('test');
    }

    function default_data(error) {
      if (error) throw error;

      var us = d3.json('https://d3js.org/us-10m.v1.json')
      svg.append('g')
        .attr('class', 'states')
      .selectAll('path')
      .data(topojson.features(us, us.objects.states).features)
      .enter()
      .append('path')
        .attr('fill', function(d) {return default_color(default_percentages.get(d.id)); })
        .attr('d', path)
      .append('title')
        .text('test')
    }
      </script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset = 'utf-8'>
	<html>
	<head>
	<title>A D3 map</title>
	<script src = 'https://d3js.org/d3.v4.min.js'></script>
	<script src = 'https://d3js.org/d3-scale-chromatic.v1.min.js'></script>
	<script src = 'https://d3js.org/topojson.v2.min.js'></script
	</head>
	<style>
	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}
	</style>
	<body>
	<div id = 'option'>
	<input name = 'updateButton'
	type = 'button'
	value = 'Total'
	onclick = 'ready()'
	/>
	<input name = 'defaultButton'
	type = 'button'
	value = 'Default'
	onclick = 'default_data()'
	/>
	<script>

	var width = 1200,
	height = 600;

	var percentages = d3.map(us)
	var default_percentages = d3.map(us)

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

	var color = d3.scaleThreshold()
	.domain(d3.range(0, .2, .02))
	.range(d3.schemeGreens[9])

	var default_color = d3.scaleThreshold()
	.domain(d3.range(0, .2, .02))
	.range(d3.schemeReds[9])

	var us = d3.json('https://d3js.org/us-10m.v1.json')
	var loan_percent = d3.map()

	var g = svg.append('g')
	.attr('class', 'key');

	var path = d3.geoPath();

	d3.queue()
	.defer(d3.json, 'https://d3js.org/us-10m.v1.json')
	.defer(d3.csv, 'TotalPercentsbyState.csv', function(d) {percentages.set(d.STATE, +d.Percent_of_Total);})
	.defer(d3.csv, 'PercentDefaultsbyState.csv', function(d) {default_percentages.set(d.STATE, +d.Percent_of_Total);})
	.await(ready);

	function ready(error, us) {
	if (error) throw error;

	svg.append('g')
	.attr('class', 'states')
	.selectAll('path')
	.data(topojson.feature(us, us.objects.states).features)
	.enter()
	.append('path')
	.attr('fill', function(d) { return color(percentages.get(d.id)); })
	.attr('d', path)
	.append('title')
	.text('test');
	}

	function default_data(error) {
	if (error) throw error;

	var us = d3.json('https://d3js.org/us-10m.v1.json')
	svg.append('g')
	.attr('class', 'states')
	.selectAll('path')
	.data(topojson.features(us, us.objects.states).features)
	.enter()
	.append('path')
	.attr('fill', function(d) {return default_color(default_percentages.get(d.id)); })
	.attr('d', path)
	.append('title')
	.text('test')
	}
	</script>
	</body>
	</html>