Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div id="viz_container">
<h2>U.S. Power Plants</h2>
<svg id="powerplants" width="1000" height="1000"></svg>
</div>
data = FileAttachment("powerplants_allUS_2010.csv").csv()
viewof table = Inputs.table(data, {})
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;} /* black */
.BIOMASS {fill:#00ff00;} /* green */
.HYDRO {fill:#0000ff;} /* blue */
.OIL {fill:#777700;} /* brown */
.GAS {fill:#E8BD0C;} /* orange */
.NUCLEAR {fill:#00ffff;} /* cyan */
.GEOTHERMAL {fill:#A6A277;} /* brown */
.WIND {fill: #FF66FF;} /* pink */
.SOLAR {fill: #ffff00;} /* yellow */
.OTHRFOSL {fill: #888888;} /* gray */
.WSTHTOTPUR {fill: #aa0000;} /* gray */
</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.
