Add new graphs to Release Notes & tidy About

.eslintrc.js

@@ -24,13 +24,27 @@ module.exports = {
       // Fixes errors in HTML files with long links
       'ignoreUrls': true,
     }],
+
     'vue/multi-word-component-names': ['off'],
     // This rule is for Vue3, and Gridsome uses Vue2
     'vue/no-deprecated-filter': ['off'],
+    // Don't make <g-link> multiline, it adds spaces
+    "vue/multiline-html-element-content-newline": ["error", {
+      "ignores": [
+        "g-link",
+        // Original inline elements from: https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json
+        "a", "abbr", "audio", "b", "bdi", "bdo", "canvas", "cite", "code", "data", "del", "dfn", "em", "i", "iframe", "ins", "kbd", "label", "map", "mark", "noscript", "object", "output", "picture", "q", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "svg", "time", "u", "var", "video"
+      ],
+    }],
+    "vue/singleline-html-element-content-newline": ["error", {
+      "externalIgnores": ["g-link"]
+    }],
+
     '@typescript-eslint/indent': ['error', 2],
     "semi": ["error", "always"],
     "arrow-parens": ["error", "always"],
     "comma-dangle": ["error", "always-multiline"],
+
     "@typescript-eslint/explicit-function-return-type": ["error", {
       "allowExpressions": true,
       "allowHigherOrderFunctions": true,

src/pages/About.vue

@@ -37,44 +37,50 @@ export default class About extends Vue {
         patients at a hospital.
       </p>
 
-      <p class="large-text bold">
-        Our Goal: Get Large Buildings to <u>Electrify</u> & Use Less Energy
+      <p class="our-why large-text bold">
+        Our Goal? Get Large Buildings to <em>Electrify</em> And Use Less Energy
       </p>
 
       <h2>But Why Electrify?</h2>
 
+      <div class="power-chart">
+        <img
+          alt="Pie chart showing that 67% of Illinois power is Carbon-Free, with 58% from Nuclear
+            and 9% from Wind. Then 18% comes from Coal and 14% from Natural Gas."
+          class="-shadowed"
+          src="/il-power-chart.webp"
+          width="350"
+        >
+
+        <p class="footnote -img">
+          Source:
+          <a
+            href="https://decarbmystate.com/illinois#power"
+            target="_blank"
+            rel="noopener"
+          >
+            Illinois Power | Decarb My State <NewTabIcon />
+          </a>
+        </p>
+      </div>
+
       <p class="constrained">
         In simple terms, because we can scalably produce electricity without emitting CO<sub>2</sub>
         and exacerbating the climate crisis. In fact, <em>this decade</em> (the 2020s) is an
         especially crucial one for tackling climate change
-        (<a href="https://www.nytimes.com/2023/03/20/climate/global-warming-ipcc-earth.html">&ldquo;World Has Less Than a Decade to Stop Catastrophic Warming&hellip;&rdquo;
-          | The New York Times</a>), and shifting away from burning fossil fuels to using
+        (<a href="https://www.nytimes.com/2023/03/20/climate/global-warming-ipcc-earth.html">
+          &ldquo;World Has Less Than a Decade to Stop Catastrophic Warming&hellip;&rdquo;
+          | The New York Times
+        </a>), and shifting away from burning fossil fuels to using
         electricity
         <strong>today</strong> is a crucial step in that journey.
       </p>
 
       <p class="constrained">
-        Even better, <strong>Illinois' grid in particular is already powered mostly by carbon-free
-          energy</strong> and is improving every year!
-      </p>
-
-      <img
-        alt="Pie chart showing that 67% of Illinois power is Carbon-Free, with 58% from Nuclear and
-        9% from Wind. Then 18% comes from Coal and 14% from Natural Gas."
-        class="-shadowed"
-        src="/il-power-chart.png"
-        width="500"
-      >
-
-      <p class="footnote -img">
-        Source:
-        <a
-          href="https://decarbmystate.com/illinois#power"
-          target="_blank"
-          rel="noopener"
-        >
-          Illinois Power | Decarb My State <NewTabIcon />
-        </a>
+        Even better, <strong>
+          Illinois' grid in particular is already powered mostly by carbon-free
+          energy
+        </strong> and is improving every year!
       </p>
 
       <p>
@@ -85,6 +91,19 @@ export default class About extends Vue {
       </p>
 
 
+      <h2>Updates</h2>
+
+      <p>
+        See our <g-link
+          to="/release-notes"
+          class="bold"
+        >Release Notes</g-link> page to see data
+        updates and other changes, or check activity on our
+        <a href="https://github.com/vkoves/electrify-chicago">
+          GitHub repository
+        </a>!
+      </p>
+
       <h2>Other Interesting Pages</h2>
 
       <p>
@@ -105,20 +124,16 @@ export default class About extends Vue {
         </li>
       </ul>
 
-      <h2>Updates</h2>
-
-      See our <g-link to="/release-notes">
-        Release Notes
-      </g-link> page to see data updates and other
-      information, or check activity on our
-      <a href="https://github.com/vkoves/electrify-chicago">GitHub repo</a>!
-
       <h2>Authors</h2>
 
       <p>
         Electrify Chicago is a volunteer project led by
-        <a href="https://viktorkoves.com/">Viktor Köves</a>, a Chicago native and climate developer
-        part of the volunteer team behind <a href="https://decarbmystate.com/">DecarbMyState</a>.
+        <a href="https://viktorkoves.com/">
+          Viktor Köves
+        </a>, a Chicago native and climate developer
+        part of the volunteer team behind <a href="https://decarbmystate.com/">
+          DecarbMyState
+        </a>.
       </p>
 
       <p>
@@ -150,18 +165,40 @@ export default class About extends Vue {
       <p>
         Found a bug or have a feature request?
         <a href="https://github.com/vkoves/electrify-chicago/issues/new">
-          File an issue on the Electrify Chicago GitHub</a>!
+          File an issue on the Electrify Chicago GitHub
+        </a>!
       </p>
     </div>
   </DefaultLayout>
 </template>
 
 <style lang="scss">
+h2 { margin-top: 1.75rem; }
+
+p.our-why {
+  display: inline-block;
+  line-height: 1.25;
+  border-bottom: solid 0.5rem $chicago-blue;
+}
+
+.power-chart {
+  float: right;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+}
+
 .other-pages {
   li {
     font-size: 1.25rem;
     margin-top: 1rem;
     font-weight: bold;
   }
 }
+
+@media (max-width: $mobile-max-width) {
+  .power-chart {
+    float: none;
+    margin-left: 0;
+  }
+}
 </style>

src/pages/ReleaseNotes.vue

@@ -18,44 +18,117 @@ export default class About extends Vue {
 </script>
 <template>
   <DefaultLayout>
-    <div class="layout-constrained">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        Release Notes
-      </h1>
-
-      <h2>April 2nd, 2024 - Data Update to 2022</h2>
-
-      <p>
-        Updated the source data to the year 2022, and dropped the filter limiting buildings to the
-        latest year on most pages, so that dirty buildings that didn't report in 2022 still show up
-        on our largest emitter lists.
-
-        <strong>Buildings shown that have old data now use a mantel clock emoji (🕰️)</strong>.
-      </p>
-
-      <h2>August 30th, 2023 - Data Update to 2021</h2>
-
-      <p>
-        Updated the source data to the year 2021, which prevents being able to access 2020 data
-        (for now) but also adds all reported buildings, removing the filter for emissions > 1,000
-        tons. Additionally, buildings that did <em>not</em> report in 2020 will have their latest
-        year of data shown, so only buildings with data in 2020 and 2021 have data loss.
-      </p>
-
-      <p>
-        We will be working on showing historical data, including comparisons, in a future update.
-      </p>
-
-      <hr>
-
-      <p>
-        Found a bug or have a feature request?
-        <a href="https://github.com/vkoves/electrify-chicago/issues/new">
-          File an issue on the Electrify Chicago GitHub</a>!
-      </p>
+    <div class="release-notes-page">
+      <section class="layout-constrained">
+        <h1
+          id="main-content"
+          tabindex="-1"
+        >
+          Release Notes
+        </h1>
+
+        <h2>August 30th, 2024 - New Visualizations for Historic Changes & Energy Mix</h2>
+
+        <p>
+          We added new graphs to help visualize how buildings have changed in their emissions,
+          emissions intensity, and energy use over time, and a new pie chart that shows the mix of
+          types of energy a building consumes, making it easy to see at a glance if a building is
+          mostly using electricity, natural gas, or something else!
+        </p>
+      </section>
+
+      <div class="two-cols">
+        <div>
+          <a
+            href="/release-notes/merch-mart-pre-graphs.webp"
+            target="_blank"
+          >
+            <img
+              class="-shadowed"
+              src="/release-notes/merch-mart-pre-graphs.webp"
+              alt="Electrify Chicago Merchandise Mart Page showing just stat tiles with no graphs."
+            >
+          </a>
+
+          <p class="bold">
+            Before
+          </p>
+        </div>
+        <div>
+          <a
+            href="/release-notes/merch-mart-post-graphs.webp"
+            target="_blank"
+          >
+            <img
+              class="-shadowed"
+              src="/release-notes/merch-mart-post-graphs.webp"
+              alt="Electrify Chicago Merchandise Mart Page showing just stat tiles with graphs
+              showing greenhouse gas intensity and total emissions have improved over time, and
+              that Merch Mart's energy use is 44% electricity, 40% natural gas, and 16% district
+              chilling"
+            >
+          </a>
+
+          <p class="bold">
+            After
+          </p>
+        </div>
+      </div>
+
+      <section class="layout-constrained">
+        <h2>April 2nd, 2024 - Data Update to 2022</h2>
+
+        <p>
+          Updated the source data to the year 2022, and dropped the filter limiting buildings to the
+          latest year on most pages, so that dirty buildings that didn't report in 2022 still show
+          up on our largest emitter lists.
+
+          <strong>Buildings shown that have old data now use a mantel clock emoji (🕰️)</strong>.
+        </p>
+
+        <h2>August 30th, 2023 - Data Update to 2021</h2>
+
+        <p>
+          Updated the source data to the year 2021, which prevents being able to access 2020 data
+          (for now) but also adds all reported buildings, removing the filter for emissions > 1,000
+          tons. Additionally, buildings that did <em>not</em> report in 2020 will have their latest
+          year of data shown, so only buildings with data in 2020 and 2021 have data loss.
+        </p>
+
+        <p>
+          We will be working on showing historical data, including comparisons, in a future update.
+        </p>
+
+        <hr>
+
+        <p>
+          Found a bug or have a feature request?
+          <a href="https://github.com/vkoves/electrify-chicago/issues/new">
+            File an issue on the Electrify Chicago GitHub
+          </a>!
+        </p>
+      </section>
     </div>
   </DefaultLayout>
 </template>
+<style lang="scss">
+.release-notes-page {
+  .two-cols {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2%;
+
+    > * { width: 49%; }
+  }
+
+  @media (max-width: $mobile-max-width) {
+    .two-cols {
+      flex-direction: column;
+      gap: 1rem;
+
+      > * { width: 100%; }
+    }
+  }
+}
+</style>

src/scss/global.scss

@@ -127,7 +127,8 @@ img.-shadowed {
   &.-img { margin-top: 0; ;}
 }
 
-// Use .constrained for a reasonable max-width for text readability
+// Use .constrained for a reasonable max-width for text readability and .layout-constrained for a
+// centered version
 .layout-constrained, .constrained {
   max-width: 50rem;
 

src/templates/BuildingDetails.vue

@@ -370,7 +370,8 @@ query ($id: ID!, $ID: String) {
           :href="UtilityCosts.source"
           target="_blank"
           rel="noopener"
-        >Chicago Gas & Electric Costs Source <NewTabIcon />
+        >
+          Chicago Gas & Electric Costs Source <NewTabIcon />
         </a>
         for the original statistics.
       </p>
@@ -388,8 +389,10 @@ query ($id: ID!, $ID: String) {
 
         <p class="constrained">
           In other words,
-          <strong>buildings should look to move all on-site uses of fossil fuels (including
-            space heating, water heating, and cooking) to electrically powered systems</strong> like
+          <strong>
+            buildings should look to move all on-site uses of fossil fuels (including
+            space heating, water heating, and cooking) to electrically powered systems
+          </strong> like
           industrial grade heat pumps, heat pump water heaters, and induction stoves. With Illinois'
           current electric supply, just using the same amount of energy from electricity, rather
           than natural gas (aka methane) will dramatically reduce greenhouse gas emissions.
@@ -398,7 +401,9 @@ query ($id: ID!, $ID: String) {
             href="https://decarbmystate.com/illinois#power"
             target="_blank"
             rel="noopener"
-          >Illinois - Power | DecarbMyState <NewTabIcon /></a>).
+          >
+            Illinois - Power | DecarbMyState <NewTabIcon />
+          </a>).
           This has already been done across the country with a variety of buildings, large and
           small, like the
           <a