Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.