The drought in California has been going on for a few years now, and the talk of an El Niño winter bringing much needed relief makes me wonder about the latest state of the drought situation as we move through a hopefully wet winter. Surprisingly, I was hard-pressed to find good, up-to-date sources of California drought conditions data that show changes over time.
For starters, the United States Drought Monitor provides great percentile data for different drought level intensities, updated on a weekly basis. However, the tables do a poor job of depicting the progression of the drought conditions on a weekly basis, even though that data is readily available and dates all the way back to 2000. The best visualization of this data that I’ve found, in time-series form, is the graph from the US Drought Monitor that almost gets the job done but lacks some fine grained control. So, I made a slightly tweaked version of this graph that is hopefully a solid dashboard that can serve as an up-to-date summary of drought conditions. The graph can be easily manipulated for comparisons over different time periods, and always loads the latest data from the aforementioned sources.
October 2016 Update: Unfortunately, California is still in a drought and some of the aforementioned links and data sources no longer work. Nevertheless, the code used to generate the custom dashboard is reproduced here (requires Google Charts and jQuery):
$(document).ready(function() {
var yearsAgo = 5;
var parseDate = function(str) {
var date = Date.parse(str.substring(0, 4) + "-" +
str.substring(4, 6) + "-" +
str.substring(6, 8));
return new Date(date);
};
var graph = function(raw) {
var columns = ["Exceptional", "Extreme", "Severe", "Moderate", "Abnormal"];
var colors = ["#730000", "#E60000", "#FFAA00", "#FCD37F", "#FFFF00"];
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
columns.forEach(function(col) { data.addColumn("number", col); });
data.addRows(raw.map(function(row) {
return Array.of(parseDate(row[0])).concat(row.slice(1).map(parseFloat));
}));
var latest = parseDate(raw[raw.length-1][0]);
var chart = new google.visualization.AnnotationChart(document.getElementById("graph"));
var options = {
displayAnnotations: false,
displayZoomButtons: false,
colors: ["#730000", "#E60000", "#FFAA00", "#FCD37F", "#FFFF00"],
fill: 40,
legendPosition: 'newRow',
min: 0,
max: 100,
thickness: 2,
zoomStartTime: new Date(latest.getTime() - yearsAgo*365*24*60*60*1000)
};
chart.draw(data, options);
};
var updateTimestamp = function(raw) {
var text = $('#updated').text();
text += parseDate(raw[raw.length-1][0]);
$('#updated').text(text);
$('#updated').show();
};
var init = function() {
$.get("http://www.drought.gov/dcpaws/data/CA/d0,d1,d2,d3,d4", function(data) {
data = data.replace(/(^.*values\>|\<\/values.*$)/g, "")
.trim()
.split("\n")
.map(function(line) {
return line.split(/,\s+/);
});
updateTimestamp(data);
graph(data);
});
};
google.load('visualization', '1.0', {'packages':['annotationchart']});
google.setOnLoadCallback(init);
});
Comments