Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div id="viz_container">
<svg id="powerplants" width="1000" height="1000"></svg>
<div id="controls">
<h2>U.S. Power Plants</h2>
<div>
<button id="btn-COAL" class="COAL">COAL</button>
<button id="btn-BIOMASS" class="BIOMASS">BIOMASS</button>
<button id="btn-HYDRO" class="HYDRO">HYDRO</button>
<button id="btn-OIL" class="OIL">OIL</button>
<button id="btn-GAS" class="GAS">GAS</button>
<button id="btn-NUCLEAR" class="NUCLEAR">NUCLEAR</button>
<button id="btn-GEOTHERMAL" class="GEOTHERMAL">GEOTHERMAL</button>
<button id="btn-WIND" class="WIND">WIND</button>
<button id="btn-SOLAR" class="SOLAR">SOLAR</button>
<button id="btn-OTHERFOSL" class="OTHRFOSL">OTHERFOSL</button>
<button id="btn-WSTHTOTPUR" class="WSTHTOTPUR">WSTHTOTPUR</button>
<br /><br />
<button id="btn-dimAll">Dim All</button>
<button id="btn-showAll">Show All</button>
<br /><br />
Choose a state: <select id="states"></select>
</div>
<div style="margin-top: 30px;">
· Color of bubble represents fuel type<br />
· Size of bubble represents plant generation capacity<br />
· Height of bubble represents equivalent CO2 emissions (CO2e), or change it's factor with the buttons.<br />
· Left to right is plant location in the US, by longitude.<br /> (latitude is not represented)
</div>
</div>
</div>
data = FileAttachment("powerplants_allUS_2010.csv").csv()
toNum = (text) => Number(text.replace(/,/g,''));
viz = d3.select(viz_container).select("#powerplants") // have d3 grab the SVG (by it's ID) for us to use.
vizWidth = Number(viz.attr("width"))
vizHeight = Number(viz.attr("height"))
baseline = vizHeight - 150 // the 0 line to work up from in the graphic visual
rFromArea = (area) => Math.sqrt(toNum(area)/Math.PI); // get radius from an area value. A = PI * r^2
scaleLon = d3.scaleLinear()
.domain([-175, -65]) // take in values between -175 longitude (west of Hawaii) and -65 longitude (Atlantic ocean)
.range([0,vizWidth]) // and interpolate them into the width of the visual space in pixels, from 0 to the SVG width.
scaleHeight = d3.scaleLinear()
.domain([0,30000000]) // input values on a fixed numeric domain. This could also look for a d3.max value.
.range([baseline,0]) // convert to SVG pixel position, starting at the bottom (baseline) and going to 0 (which is at SVG top)
rScale = 0.03 // OK this one is just a static constant to use as a visual scalar
circles = viz.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => scaleLon(toNum(d["Plant longitude"])))
.attr("cy", d => scaleHeight(toNum(d["Plant annual CO2 equivalent emissions (tons)"])))
.attr("r", d => rFromArea(d["Plant annual net generation (MWh)"]) * rScale || 1)
.attr("class", d => d["Plant primary fuel generation category"])
<style>
circle {
stroke: gray;
fill: yellow;
opacity: 0.6;
}
/* Use style classes to set colors by fuel type */
.COAL {fill:#000000; background-color:#000000; color: #dddddd;} /* black */
.BIOMASS {fill:#00ff00; background-color:#00ff00;} /* green */
.HYDRO {fill:#0000ff; background-color:#0000ff; color: #dddddd;} /* blue */
.OIL {fill:#777700; background-color:#777700;} /* brown */
.GAS {fill:#E8BD0C; background-color:#E8BD0C;} /* orange */
.NUCLEAR {fill:#00ffff; background-color:#00ffff;} /* cyan */
.GEOTHERMAL {fill:#A6A277; background-color:#A6A277;} /* brown */
.WIND {fill: #FF66FF; background-color: #FF66FF;} /* pink */
.SOLAR {fill: #ffff00; background-color: #ffff00;} /* yellow */
.OTHRFOSL {fill: #888888; background-color: #888888;} /* gray */
.WSTHTOTPUR {fill: #aa0000; background-color: #aa0000;} /* gray */
.stateLabel {font-size: 8px;}
</style>
stateAvgLongs = d3.rollup(data, v => d3.mean(v, d => d["Plant longitude"]), d => d["Plant state abbreviation"]);
stateLabels = viz.selectAll(".stateLabel")
.data(stateAvgLongs)
.join("text")
.attr("x", d => scaleLon(d[1])) // use the rollup data's value
.attr("y", baseline + 30) // 30 pixels below the baseline
.text(d => d[0]) // use the rollup data's key
.classed("stateLabel", true)
function dimAll() {circles.style("opacity","0.02")}
function showAll() {circles.style("opacity","")}
function filter(field,value) {
dimAll();
circles.filter(d => d[field] == value).style("opacity","");
}
function filterValue(field,value) {
dimAll();
circles.filter(d => toNum(d[field]) > value).style("opacity","");
}
{
// set the buttons to call the filter function when clicked.
const btns = d3.select(viz_container).select("#controls");
// register event listeners
btns.select("#btn-COAL").on("click", () => filter('Plant primary fuel generation category','COAL'));
btns.select("#btn-BIOMASS").on("click", () => filter('Plant primary fuel generation category','BIOMASS'));
btns.select("#btn-HYDRO").on("click", () => filter('Plant primary fuel generation category','HYDRO'));
btns.select("#btn-OIL").on("click", () => filter('Plant primary fuel generation category','OIL'));
btns.select("#btn-GAS").on("click", () => filter('Plant primary fuel generation category','GAS'));
btns.select("#btn-NUCLEAR").on("click", () => filter('Plant primary fuel generation category','NUCLEAR'));
btns.select("#btn-GEOTHERMAL").on("click", () => filter('Plant primary fuel generation category','GEOTHERMAL'));
btns.select("#btn-WIND").on("click", () => filter('Plant primary fuel generation category','WIND'));
btns.select("#btn-SOLAR").on("click", () => filter('Plant primary fuel generation category','SOLAR'));
btns.select("#btn-OTHERFOSL").on("click", () => filter('Plant primary fuel generation category','OTHERFOSL'));
btns.select("#btn-WSTHTOTPUR").on("click", () => filter('Plant primary fuel generation category','WSTHTOTPUR'));
btns.select("#btn-dimAll").on("click", dimAll);
btns.select("#btn-showAll").on("click", showAll);
}
// create a dropdown select list from all of the states in the data
stateSelects = d3.select(viz_container).select("#states")
.selectAll("option")
.data(d3.group(data, d=>d["Plant state abbreviation"]).keys()) // groups all states together and then pulls the key (state name)
.join("option") // create a new option element for each state
.text(d => d); // labeled by the data value (state name)
{
const stateSelectSet = d3.select(viz_container).select("#states");
stateSelectSet.on("change", (evt) => filter('Plant state abbreviation',evt.target.value)) // uses the event to get the value
}
highlight = (evt,d) => {
let thisElem = evt.currentTarget;
d3.select(thisElem)
.style("stroke","yellow")
.style("stroke-width","2")
//.raise();
}
unhighlight = (evt) => {
d3.select(evt.currentTarget)
.style("stroke","")
.style("stroke-width","");
}
{
circles.on("mouseover", highlight);
circles.on("mouseout", unhighlight);
}
<style>
#viz_container {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#controls {
position: absolute;
top: 50px;
left: 5px;
width: 300px;
font-size: 12px;
text-align: center;
}
#controls button {
border-radius: 10px;
border: 1px solid gray;
margin: 2px;
}
#controls button:hover {
cursor: pointer;
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
