Coal Plant Afterlives

This project was conceptualized as a news application site to be completed during the Spring quarter of 2022 while enrolled in COMM 289P: Journalism Thesis.

A version of this project was submitted to the Communications Department on June 1, 2022, in partial fulfillment of the requirements for a degree of Master of Arts in Communications, Journalism Track at Stanford University.

Many thanks to my mentor and thesis advisor, Serdar Tumgoren.

Methodology & Resources

This news application was built primarily with Svelte.js, an open-source compiler for building web apps. Interactive visualizations were built with D3.js, a JavaScript library for visualizing data and building graphs. Images were edited and designed using Adobe Photoshop, Adobe Illustrator, and ai2html, an open-source Adobe Illustrator script that converts Illustrator documents into HTML for the web.

This news application uses Russell Goldenberg's Scrollytelling Svelte.js component. The IBM Plex Mono and Chivo fonts were imported from Google Fonts. The HK Grotesk font is a free font created by Hanken Design Co.

Data Sources

Satellite images were taken between 2010 and 2022, and compiled using Google Earth Engine Pro and satellite imagery from Maxar Technologies and Landsat Missions.

Power plant retirement data was collected by the U.S. Energy Information Administration through their Form EIA-860. Detailed documentation regarding data cleaning and analysis can be found below.

Data on repurposing and redevelopment projects were manually compiled from news searches and data from the U.S. Environmental Protection Agency’s RE-Powering America Tracking Index.

Power Plant Retirements

To show information related to retired, currently operating, and planned retirements of power plants across the U.S., I am using data provided by the U.S. Energy Information Administration (EIA), which they prepare from the Form EIA-860.

The Form EIA-860 collects generator-level information about existing and planned generators with 1 megawatt (MW) or greater of combined nameplate capacity. The EIA also supplements the annual survey form with a monthly survey, Form EIA-860M. Monthly data is the most updated, but has not been fully verified by the EIA.

The most recent annual dataset is from 2020, so I am using a monthly dataset from the month of February 2022 for the current inventory of power plants.

First, I concated concatenate the sheets Operating, Planned, and Retired and deleted unnecessary columns. Then, I used OpenRefine to group technology into types:

Wood/Wood Waste Biomass, Other Waste Biomass → Biomass
Solar Thermal with Energy Storage, Solar Thermal without Energy Storage, and Solar Photovoltaic → Solar
Onshore Wind Turbine, Offshore Wind Turbine → Wind Turbine
Hydroelectric Pumped Storage, Conventional Hydroelectric → Hydroelectric
Petroleum Coke, Petroleum Liquids → Petroleum Coke & Liquids
Natural Gas with Compressed Air Storage, Natural Gas Fired Combustion Turbine, Natural Gas Fired Combined Cycle, Natural Gas Steam Turbine, Natural Gas Internal Combustion Engine, Other Natural Gas → Natural Gas
Coal Integrated Gasification Combined Cycle, Conventional Steam Coal → Coal
Landfills, Municipal Solid Waste → Landfills & Municipal Solid Waste
Flywheels, Other Gases, All Other → Other

and to give full names for state abbreviations:

AZ → Arizona

Building & Deploying the Svelte App

To create a new project based on the Svelte template using degit:

npx degit sveltejs/template svelte-app
cd svelte-app

Install the dependencies

cd svelte-app
npm install

and then start Rollup and navigate to localhost:8080, where you should see your app running.

npm run dev

Requirements

Install d3:

npm install --save-dev d3

Install topojson:

npm install --save-dev topojson

Install svelte-image-gallery:

npm install --save-dev svelte-image-gallery

Deploy

These instructions are adapted from this tutorial.

To deploy the Svelte app with GitHub Pages, first create a gh-pages branch in the root of the repository.

git checkout -b "gh-pages"

After creating the static Svelte site, download the gh-pages package:

npm i gh-pages

After installation, create a new file called gh-pages.js at the root of the repository with the following contents:

const ghpages = require("gh-pages");
ghpages.publish(
	"public", // path to public directory
	{
		branch: "gh-pages",
		repo: "https://github.com/elenals/coal-plant-afterlives", // point to your repo on GitHub
		user: {
			name: "NAME",
			email: "EMAIL",
		},
		dotfiles: true,
	},
	() => {
		console.log("Deploy Complete!");
	}
);

Update the links in the index.html (located at /public/index.html) so that they are relative paths.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />

		<title>Coal Plant Afterlives</title>

		<link rel="icon" type="image/png" href="./favicon.png" />
		<link rel="stylesheet" href="./global.css" />
		<link rel="stylesheet" href="./build/bundle.css" />

		<script defer src="./build/bundle.js"></script>
	</head>

	<body></body>
</html>

In the .gitignore file, make sure to comment out the contents of the /public/build/ directory.

/node_modules/
# /public/build/
.DS_Store

Now, build and deploy your Svelte application:

# Build
npm run build
# Commit and push changes
git add .
git commit -m "commit message"
git push origin gh-pages
# Deploy
node ./gh-pages.js

If you had already set up GitHub pages previously, make sure to update the the Source to /root of the gh-pages Branch.

This project's site is now published at: https://elenals.github.io/coal-plant-afterlives/.

elenals / coal-plant-afterlives