SARC 5400 Data Visualization, School of Architecture / School of Data Science, University of Virginia
<svg width="1000" height="1000">
<text x="20" y="35" style="font-size:24px; font-family: sans-serif">U.S. Power Plants</text>
</svg>
powerplants_allUS_2021.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = FileAttachment("powerplants_allUS_2021.csv").csv() // parse the CSV file into an Array (list)
toNum = (text) => Number(text.replace(/,/g,'')); // a function to strip commas and make a number
data.forEach(d => {
// iterate through the full dataset and clean two columns that we need.
if (d["Plant annual net generation (MWh)"] != null) {d["Plant annual net generation (MWh)"] = toNum(d["Plant annual net generation (MWh)"])}
if (d["Plant annual CO2 equivalent emissions (tons)"] != null) {d["Plant annual CO2 equivalent emissions (tons)"] = toNum(d["Plant annual CO2 equivalent emissions (tons)"])}
})
viz = d3.select(powerplants) // select the SVG cell as a D3 object called viz
vizWidth = Number(viz.attr("width")) // get width
vizHeight = Number(viz.attr("height")) // get height
baseline = vizHeight - 150 // the 0 data location in Y (negative values below)
circles = viz.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => scaleX(d["Plant longitude"]))
.attr("cy", d => scaleY(d["Plant annual CO2 equivalent emissions (tons)"]))
.attr("r", d => rFromArea(d["Plant annual net generation (MWh)"]) * rScale)
.attr("class", d => d["Plant primary fuel category"])
scaleX = d3.scaleLinear()
.domain([-175,-55])
.range([0,vizWidth])
scaleY = d3.scaleLinear()
.domain([0,30000000])
.range([baseline,0])
rFromArea = (area) => Math.sqrt(area/Math.PI);
rScale = 0.03
<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.
