Animated United States Drought Map. Toggle the dates in the slider to see the drought data change on the map. Data from the U.S. Drought Monitor.
Colors from Color Brewer. Map design inspired by this NY Times Drought Map.
forked from dhoboy‘s block: Drought Map
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state { fill: #D0D0D0; }
.state-boundary {
fill: none;
stroke: #F0FFFF;
stroke-width: 1;
}
.DM0 { fill: #ffffd4; }
.DM1 { fill: #fed98e; }
.DM2 { fill: #fe9929; }
.DM3 { fill: #d95f0e; }
.DM4 { fill: #993404; }
.slider_axis text {
font: 12px sans-serif;
}
.slider_axis path,
.slider_axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.slider_axis path {
display: none;
}
#slider_input {
position: absolute;
left: 600px;
top: 30px;
width: 300px;
}
#slider_label, #slider_label_date {
font: 15px sans-serif;
}
#slider_label {
position: absolute;
left: 635px;
top: 15px;
}
#slider_label_date {
position: absolute;
left: 775px;
top: 15px;
}
.key text {
font: 13px sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
// html elements
var slider = d3.select("body").append("input")
.attr("id", "slider_input")
.attr("type", "range")
.attr("min", 0)
.attr("max", 22)
.attr("step", 1)
.attr("value", 0)
var label = d3.select("body").append("label")
.attr("id", "slider_label")
.attr("for", "slider_input")
.text("Drought Data taken: ")
var label_date = d3.select("body").append("label")
.attr("id", "slider_label_date")
.text("Nov. 11, 2014")
// svg elements
var margin = {top: 30, slider: 360},
width = 960,
height = 560 - margin.top;
var slider_scale = d3.scale.ordinal()
.domain(["Dec.", "Jan.", "Feb.", "March", "April"])
.rangeRoundBands([0, 300], .1);
var slider_axis = d3.svg.axis()
.scale(slider_scale)
.orient("bottom");
// parent svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height + margin.top)
// slider axis g
svg.append("g")
.attr("class", "slider_axis")
.attr("transform", "translate(" + (width - margin.slider) + ",40)")
.call(slider_axis);
// key g
var key = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(5," + margin.top + ")");
key.append("rect")
.attr("class", "DM0")
.attr("x", 0)
.attr("y", 0)
.attr("width", 25)
.attr("height", 25)
.attr("stroke", "#404040")
.attr("stroke-width", 1)
key.append("rect")
.attr("class", "DM1")
.attr("x", 0)
.attr("y", 30)
.attr("width", 25)
.attr("height", 25)
.attr("stroke", "#404040")
.attr("stroke-width", 1)
key.append("rect")
.attr("class", "DM2")
.attr("x", 0)
.attr("y", 60)
.attr("width", 25)
.attr("height", 25)
.attr("stroke", "#404040")
.attr("stroke-width", 1)
key.append("rect")
.attr("class", "DM3")
.attr("x", 0)
.attr("y", 90)
.attr("width", 25)
.attr("height", 25)
.attr("stroke", "#404040")
.attr("stroke-width", 1)
key.append("rect")
.attr("class", "DM4")
.attr("x", 0)
.attr("y", 120)
.attr("width", 25)
.attr("height", 25)
.attr("stroke", "#404040")
.attr("stroke-width", 1)
key.append("text")
.attr("x", 30)
.attr("y", 19)
.text("Abnormally Dry")
key.append("text")
.attr("x", 30)
.attr("y", 49)
.text("Moderate Drought")
key.append("text")
.attr("x", 30)
.attr("y", 79)
.text("Severe Drought")
key.append("text")
.attr("x", 30)
.attr("y", 109)
.text("Extreme Drought")
key.append("text")
.attr("x", 30)
.attr("y", 139)
.text("Exceptional Drought")
// map g
var map = svg.append("g")
.attr("transform", "translate(60," + margin.top + ")");
var projection = d3.geo.albersUsa();
var path = d3.geo.path()
.projection(projection);
d3.json("usa.json", function(err, usa) {
d3.json("all_drought_data.json", function(errr, all_drought_data) {
var states = topojson.feature(usa, usa.objects.states);
// draw the USA
map.selectAll(".state")
.data(states.features)
.enter()
.append("path")
.attr("class", "state")
.attr("d", path);
// drought data
var drought_data = [
{"date": "Nov. 11, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_11_11)},
{"date": "Nov. 18, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_11_18)},
{"date": "Nov. 25, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_11_25)},
{"date": "Dec. 2, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_12_02)},
{"date": "Dec. 9, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_12_09)},
{"date": "Dec. 16, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_12_16)},
{"date": "Dec. 23, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_12_23)},
{"date": "Dec. 30, 2014", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2014_12_30)},
{"date": "Jan. 6, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_01_06)},
{"date": "Jan. 13, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_01_13)},
{"date": "Jan. 20, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_01_20)},
{"date": "Jan. 27, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_01_27)},
{"date": "Feb. 3, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_02_03)},
{"date": "Feb. 10, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_02_10)},
{"date": "Feb. 17, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_02_17)},
{"date": "Feb. 24, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_02_24)},
{"date": "March 3, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_03_03)},
{"date": "March 10, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_03_10)},
{"date": "March 17, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_03_17)},
{"date": "March 24, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_03_24)},
{"date": "March 31, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_03_31)},
{"date": "April 7, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_04_07)},
{"date": "April 14, 2015", "features": topojson.feature(all_drought_data, all_drought_data.objects.USDM_2015_04_14)}
];
// bind first drought data
var drought = map.selectAll(".drought")
.data(drought_data[0].features.features);
// draw drought data
drought.enter()
.append("path")
.attr("class", function(d) {
return "drought DM" + d.id;
})
.attr("d", path);
// draw state lines on top
map.append("path")
.datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a !== b; }))
.attr("d", path)
.attr("class", "state-boundary");
// show new drought data as you move the slider
slider.on("change", function(){
var current = this.value;
label_date.text(drought_data[current].date);
// bind new data
var drought = map.selectAll(".drought")
.data(drought_data[current].features.features, function(d){ return d.id; });
// update
drought.attr("d", path);
// enter
drought.enter()
.append("path")
.attr("class", function(d,i) {
return "drought DM" + d.id;
})
.attr("d", path);
// exit
drought.exit().remove();
})
})
})
d3.select(self.frameElement).style("height", (height + margin.top) + "px").style("width", width + "px");
</script>