Skip to content

Instantly share code, notes, and snippets.

@jmharkins

jmharkins/consumption.csv

Created November 8, 2013 19:31
Show Gist options
  • Save jmharkins/7376305 to your computer and use it in GitHub Desktop.
Save jmharkins/7376305 to your computer and use it in GitHub Desktop.
Download ZIP
US Energy Choropleth
Raw
consumption.csv
state consumption renewable expend
Alabama 19 11 24
Alaska 6 1 8
Arizona 14 7 22
Arkansas 11 5 14
California 79 59 136
Colorado 15 5 19
Connecticut 7 1 15
Delaware 3 0 4
Florida 42 5 68
Georgia 30 7 42
Hawaii 3 1 8
Idaho 5 10 7
Illinois 40 5 51
Indiana 29 4 33
Iowa 15 10 17
Kansas 12 3 15
Kentucky 19 3 23
Louisiana 41 4 47
Maine 4 8 7
Maryland 14 2 23
Massachusetts 14 2 27
Michigan 28 4 39
Minnesota 19 7 24
Mississippi 12 2 15
Missouri 19 3 27
Montana 4 10 6
Nebraska 9 2 10
Nevada 6 4 10
New Hampshire 3 3 6
New Jersey 24 1 43
New Mexico 7 2 9
New York 36 32 66
North Carolina 26 7 36
North Dakota 5 6 6
Ohio 38 1 51
Oklahoma 16 7 20
Oregon 10 35 15
Pennsylvania 37 7 55
Rhode Island 2 0 4
South Carolina 16 4 21
South Dakota 4 7 5
Tennessee 22 9 30
Texas 122 29 169
Utah 8 1 10
Vermont 1 2 3
Virginia 24 4 34
Washington 21 75 27
West Virginia 7 2 9
Wisconsin 18 5 24
Wyoming 6 4 5
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mapping US Energy</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
div.hd {
position: absolute;
text-align: left;
width: 195px;
height: 35px;
left: 85px;
top: 40px;
padding: 0px;
font: 20px sans-serif;
background: none;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
div.dyntext {
position: absolute;
text-align: left;
width: 500px;
height: 35px;
left: 285px;
top: 40px;
padding: 0px;
font: 20px sans-serif;
color: #a50f15;
background: none;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
div.units {
position: absolute;
text-align: left;
width: 125px;
height: 35px;
left: 85px;
top: 110px;
padding: 0px;
font: 10px sans-serif;
background: none;
border: 0px;
pointer-events: none;
}
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 15px;
padding: 2px;
font: 10px sans-serif;
background: #FFFFE0;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 960;
var h = 500;
//
var head = d3.select("body").append("div")
.attr("class", "hd");
head.text("Mapping a year of US");
//
var dyntext = d3.select("body").append("div")
.attr("class", "dyntext");
dyntext.text("Energy Consumption");
// set div variable, toolip opacity default to 0
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Start state at 0
var state = 0;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([750]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//
var color1 = d3.scale.threshold()
.range(["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"]);
var color2 = d3.scale.threshold()
.range(["#fcbba1","#fc9272","#fb6a4a","#de2d26","#BD0026","#a50f15"]);
var color3 = d3.scale.threshold()
.range(["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"]); // legend, width and height, labels
var legend;
var l_w = 20;
var l_h = 20;
var labels1 = ["<2", "2-4","4-5","5-8","8-33", "33+"];
var labels2 = ["< 6", "6-11","12-18","18-28","28-41", "42+"];
var labels3 = ["< 7", "8-15","15-24","24-39","39-67", "67+"];
var ext_1 = [0,2,4,5,8.2,33.65]
var ext_2 = [0,5.8,11.6,18.4,28.2,41.55]
var ext_3 = [0,7.8,15,24,39.6,67.1];
var units = d3.select("body").append("div")
.attr("class", "units");
units.text("Units: Hundred Billion BTU");
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
//load csv
d3.csv("consumption.csv", function(data) {
// variable for storing state properties
var curState;
var curVal;
// change color domain
color3.domain([7.8,15,24,39.6,67.1]);
color2.domain([5.8,11.6,18.4,28.2,41.55]);
color1.domain([2,4,5,8.2,33.65]);
// merge data
for (var i = 0; i < data.length; i++) {
//Grab state name
var dataState = data[i].state;
//Grab data value, and convert from string to float
var dataCons = parseFloat(data[i].consumption);
var dataRenew = parseFloat(data[i].renewable);
var dataExpend = parseFloat(data[i].expend);
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
//Copy the data value into the JSON
json.features[j].properties.consumption = dataCons;
json.features[j].properties.renewable = dataRenew;
json.features[j].properties.expend = dataExpend;
//Stop looking through the JSON
break;
}
}
};
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("id", function(d) {
return d.properties.name;
})
.attr("cons", function(d) {
return d.properties.consumption;
})
.attr("ren", function(d) {
return d.properties.renewable;
})
.attr("exp", function(d) {
return d.properties.expend;
})
.attr("d", path)
.attr("stroke", "black")
.style("fill", function(d) {
return color2(d.properties.consumption);
})
// mouseover tooltips
.on("mouseover", function(d) {
curState = d3.select(this).attr("id");
curVal = d3.select(this).attr("cons");
div.transition().duration(300)
.style("opacity",1)
div.text(function(d) {
return curState + ": " + curVal;
})
.style("left", (d3.event.clientX) + "px")
.style("top", (d3.event.clientY) + "px")
})
// mouseout
.on("mouseout", function(d) {
div.transition().duration(300)
.style("opacity", 0)
});
// click event listener
svg.selectAll("path").on("click", function(d){
change(d);
});
// add legend
var legend = svg.selectAll("g.legend")
.data(ext_2)
.enter().append("g")
.attr("class","legend");
legend.append("rect")
.attr("id", "lbox")
.attr("x",100)
.attr("y", function(d,i) {
return 125 + i*l_h;
})
.attr("height", l_h)
.attr("width", l_w)
.attr("fill", function(d,i) {
return color2(d)
});
legend.append("text")
.attr("id","ltxt")
.attr("x", 125)
.attr("y",function(d,i) {
return 125 + i*l_h + 15;
})
.text(function(d,i) {
return labels2[i];
})
.attr("font-size", "10px");
// CHANGE FUNCTION
var change = function(d) {
// red -> green (0 ->1)
if (state == 0) {
state = 1;
div.transition().duration(300)
.style("opacity", 0);
svg.selectAll("path")
.transition()
.duration(1500)
.delay()
.style("fill", function(d) {
return color1(d.properties.renewable);
})
.text(function(d) {
return d.properties.name + ": " + d.properties.renewable;
});
svg.selectAll("path")
.on("mouseover", function(d) {
curState = d3.select(this).attr("id");
curVal = d3.select(this).attr("ren");
div.transition().duration(300)
.style("opacity",1)
.style("left", (d3.event.clientX) + "px")
.style("top", (d3.event.clientY) + "px")
div.text(function(d) {
return curState + ": " + curVal;
})
})
dyntext.transition().duration(1500)
.style("color", "#006d2c")
dyntext.text("Renewable Energy Generation");
// change legend
svg.selectAll("#lbox").data(ext_1);
svg.selectAll("#lbox").transition().duration(1500)
.attr("fill", function(d,i) {
return color1(d)
});
svg.selectAll("#ltxt").data(ext_1);
svg.selectAll("#ltxt").text(function(d,i) {
return labels1[i];
});
// change units
units.text("Units: Net Gigawatt Hours");
// green -> blue (1->2)
} else if (state == 1) {
svg.selectAll("path")
.transition()
.duration(1500)
.delay()
.style("fill", function(d) {
return color3(d.properties.expend);
})
svg.selectAll("path")
.on("mouseover", function(d) {
curState = d3.select(this).attr("id");
curVal = d3.select(this).attr("exp");
div.transition().duration(300)
.style("opacity",1)
.style("left", (d3.event.clientX) + "px")
.style("top", (d3.event.clientY) + "px")
div.text(function(d) {
return curState + ": " + curVal;
});
});
dyntext.transition().duration(1500)
.style("color", "#08519c")
dyntext.text("Expenditure on Energy");
// change legend
svg.selectAll("#lbox").data(ext_3);
svg.selectAll("#lbox").transition().duration(1500)
.attr("fill", function(d,i) {
return color3(d);
})
svg.selectAll("#ltxt").data(ext_3);
svg.selectAll("#ltxt").text(function(d,i) {
return labels3[i];
});
// change units
units.text("Units: US Dollars (Billions)");
state = 2;
// blue -> red (2 -> 0)
} else if (state == 2) {
// change color
svg.selectAll("path")
.transition()
.duration(1500)
.delay()
.style("fill", function(d) {
return color2(d.properties.consumption);
});
// change tooltip
svg.selectAll("path")
.on("mouseover", function(d) {
curState = d3.select(this).attr("id");
curVal = d3.select(this).attr("cons");
div.transition().duration(300)
.style("opacity",1)
.style("left", (d3.event.clientX) + "px")
.style("top", (d3.event.clientY) + "px")
div.text(function(d) {
return curState + ": " + curVal;
});
});
// change header
dyntext.transition().duration(1500)
.style("color", "#a50f15")
dyntext.text("Energy Consumption");
// change legend
svg.selectAll("#lbox").data(ext_2);
svg.selectAll("#lbox").transition().duration(1500)
.attr("fill", function(d,i) {
return color2(d);
});
svg.selectAll("#ltxt").data(ext_2);
svg.selectAll("#ltxt").text(function(d,i) {
return labels2[i];
});
units.text("Units: Hundred Billion BTU")
state = 0;
}
};
});
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
us-states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment