Chi Hack Night data visualization project to measure the state and progress of decarbonization for all States in the USA.
This is a Gatsby app built on top of the DataMade Gatsby starter template, which was adapted from the default Gatsby starter repo.
- Docker
- Docker Compose
- Node 16.X
-
Grab the repo:
git clone git@github.com:chihacknight/decarbonize-my-state.git cd decarbonize-my-state
-
Start developing
docker-compose up --build
or
yarn install
to install dependencies, then
yarn develop
Your site should now be up and running at
http://localhost:8000
!
This starter has a minimal number of dependencies in order to stay lean, but you'll likely want to add more to suit your needs. To add a dependency, run:
docker-compose run --rm app add <dependency name> --save
or
yarn add <dependency name>
To remove a dependency:
docker-compose run --rm app remove <dependency name>
or
yarn remove <dependency name>
When you run docker-compose up
locally, ESLint makes sure you're following the right JS style conventions and not importing or exporting anything extraneously. If you are, the build will fail.
If you want to check the linter on its own you can run:
docker-compose run --rm app run test
or
yarn test
If you want to reformat with the linter, you can run:
docker-compose run --rm app run format
or
yarn format
All data that appears on the frontend of this site should come directly from a file in data/final
βfor more on that line of thinking, see this guide to data handling in Gatsby. The data processing pipeline for this project lives in data/
and follows DataMade's data making guidelines. As these files are relatively small, we keep both raw and final data under version control.
To recreate the data, run:
cd data
docker-compose up --build
We wanted the social cards to include what number emitter the state is and what their emissions breakdown is. To do this, we created a social card page and used puppeteer to take screenshots to output get the dynamic social cards. The new screenshots can be found in /static/social-cards
To generate them:
First make sure yarn develop
is running
Then run yarn generate-social-all
to generate all social images (~3,500), or run:
yarn generate-social-states
for just state social images (50)yarn generate-social-power-plants
for just powerplants (~3,500)
To then show progress logs, just tack on --debugging
, e.g. yarn generate social-power-plants --debugging
.
Finally: Copy paste /power-plant-social-out/social-cards/power-plant
directory into
static/social-cards
. You have to do this because writing a file to the /static
directory causes
Gatsby develop to rebuild, so we cannot have the power plant generation with (> 3K plants) to static
while relying on develop.
Taken from gatsby-starter-default
A quick look at the top-level files and directories you'll see in a Gatsby project.
.
βββ .github/workflows
βββ src
βββ static
βββ .gitignore
βββ .prettierrc
βββ gatsby-browser.js
βββ gatsby-config.js
βββ gatsby-node.js
βββ gatsby-ssr.js
βββ LICENSE
βββ package-lock.json
βββ package.json
βββ README.md
-
/.github/workflows
: This directory contains the project's Github Actions. By default,test.yml
runs a linter. -
/src
: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template.src
is a convention for βsource codeβ. -
/static
: This directory contains files you'll need to access directly on the frontend, like images for social cards. -
.eslintrc.js
: This is a configuration file for ESLint, a Javascript linter. -
.gitignore
: This file tells git which files it should not track / not maintain a version history for. -
gatsby-browser.js
: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins youβd like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js
: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
gatsby-ssr.js
: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. -
LICENSE
: Gatsby is licensed under the MIT license. -
package.json
: A manifest file for Node.js projects, which includes things like metadata (the projectβs name, author, etc). This manifest is how npm knows which packages to install for your project. -
README.md
: A text file containing useful reference information about your project.
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
DataMade deploys static sites using Netlify. This project's staging URL is decarbonizemystate.com.