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.
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.
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.
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
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
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
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/.