Merge pull request #81 from vkoves/data-update-2022

Update Data to 2022 (Latest Year) & Show Old Buildings On Most Pages

gridsome.server.js

@@ -69,8 +69,13 @@ function loadBuildingBenchmarkData(actions) {
   const collection = actions.addCollection({typeName: 'Building'});
 
   for (const building of BuildingsData) {
-    // Make a slugSource that is the property name or the address as a fallback
-    building.slugSource = building.PropertyName || building.Address;
+    // Make a slugSource that is the property name or the address as a fallback (skip one letter
+    // names, e.g. '-)
+    building.slugSource = building.PropertyName.length > 1 ? building.PropertyName : building.Address;
+
+    if (!building.slugSource || typeof building.slugSource !== 'string') {
+      throw new Error('No building slug source (name or address)!', building);
+    }
 
     collection.addNode(building);
   }

src/common-functions.vue

@@ -5,6 +5,8 @@ export interface IBuildingBenchmarkStat {
   count: number;
   min: number;
   max: number;
+  mean: number; // note we should generally lean on the median
+  std: number; // standard deviation
   twentyFifthPercentile: number;
   median: number;
   seventyFifthPercentile: number;
@@ -15,6 +17,22 @@ export interface IBuildingBenchmarkStats {
   [statKey: string]: IBuildingBenchmarkStat;
 }
 
+/** Property stats do not have a mean or standard deviation */
+export interface IPropertyStat {
+  count: number;
+  min: number;
+  max: number;
+  twentyFifthPercentile: number;
+  median: number;
+  seventyFifthPercentile: number;
+}
+
+/** The type of each property type in building-statistics-by-property-type.json */
+export interface IPropertyStats {
+  [statKey: string]: IPropertyStat;
+}
+
+
 /**
  * An individual building object
  *

src/components/BuildingImage.vue

@@ -28,7 +28,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {IBuilding} from '~/common-functions.vue';
+import {IBuilding} from '../common-functions.vue';
 import { getBuildingImage, IBuildingImage } from '../constants/building-images.constant.vue';
 import NewTabIcon from './NewTabIcon.vue';
 

src/components/BuildingsTable.vue

@@ -4,13 +4,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import RankText from '~/components/RankText.vue';
 import OverallRankEmoji from './OverallRankEmoji.vue';
 import OwnerLogo from './OwnerLogo.vue';
-import { IBuilding } from '~/common-functions.vue';
+import { IBuilding, IBuildingBenchmarkStats } from '../common-functions.vue';
 
 
 // This simple JSON is a lot easier to just use directly than going through GraphQL and it's
 // tiny
 import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
-import { IBuildingBenchmarkStats } from '~/common-functions.vue';
 
 @Component({
   components: {

src/components/DataDisclaimer.vue

@@ -1,7 +1,7 @@
 <template>
   <details class="data-disclaimer">
     <summary>
-      Note: Data only includes large Chicago buildings from {{ LatestDataYear }},
+      Note: Data includes large Chicago buildings with data from {{ LatestDataYear }},
       unless explicitly stated otherwise.
     </summary>
 
@@ -21,8 +21,9 @@
     </p>
 
     <p class="constrained">
-      This data is also from {{ LatestDataYear }}, but when new benchmark data
-      is available, we'll update the site.
+      The latest year of data is from {{ LatestDataYear }}, but we update the site regularly when
+      new data is available, and some buildings may have failed to report that year, and only have
+      older data available.
     </p>
   </details>
 </template>

src/components/OverallRankEmoji.vue

@@ -19,14 +19,23 @@
     >
       📷
     </span>
+
+    <span
+      v-if="isOldData && !largeView"
+      class="emoji has-img-emoji"
+      title="Outdated data (did not submit in the latest year)"
+    >
+      🕰️
+    </span>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {getOverallRankEmoji, IBuilding, IBuildingBenchmarkStats} from '~/common-functions.vue';
+import {getOverallRankEmoji, IBuilding, IBuildingBenchmarkStats} from '../common-functions.vue';
 import { getBuildingImage } from '../constants/building-images.constant.vue';
+import { LatestDataYear } from '../constants/globals.vue';
 
 /**
  * A component that shows an emoji to summarize a building, showing the worse of the alarm or flag
@@ -47,6 +56,11 @@ export default class OverallRankEmoji extends Vue {
   get hasBuildingImg(): boolean {
     return Boolean(getBuildingImage(this.building));
   }
+
+  /** Whether this building's latest data is old, not matching the latest data year */
+  get isOldData(): boolean {
+    return parseInt(this.building.DataYear.toString()) < LatestDataYear;
+  }
 }
 </script>
 

src/components/OwnerLogo.vue

@@ -43,11 +43,11 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {IBuilding} from '~/common-functions.vue';
+import {IBuilding} from '../common-functions.vue';
 import {
   IBuildingOwner,
   BuildingOwners,
-} from '~/constants/buildings-custom-info.constant.vue';
+} from '../constants/buildings-custom-info.constant.vue';
 import { getBuildingCustomInfo } from '../constants/buildings-custom-info.constant.vue';
 
 /**

src/components/RankText.vue

@@ -60,7 +60,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import { RankConfig, IBuilding, IBuildingBenchmarkStats } from '~/common-functions';
+import { RankConfig, IBuilding, IBuildingBenchmarkStats } from '../common-functions';
 
 /**
  * A  tile that can show the stats for a building, including whether it's

src/components/StatTile.vue

@@ -102,7 +102,10 @@
           >
             {{ medianMultipleMsgCityWide }} median
           </span>
-          <span v-else>
+          <span
+            v-else
+            class="median-label"
+          >
             Median Chicago Building
           </span>
 
@@ -120,7 +123,10 @@
           >
             {{ medianMultiplePropertyType }} median {{ propertyType }}
           </span>
-          <span v-else>
+          <span
+            v-else
+            class="median-label"
+          >
             Median {{ propertyType }}
           </span>
 
@@ -153,7 +159,9 @@
 
           <p class="smaller">
             This building burned no natural gas on-site and isn't connected to a district heating
-            system, meaning it's fully electric!
+            system, meaning it's fully electric! View <g-link to="/biggest-gas-free-buildings">
+              Chicago's Biggest Gas Free Buildings
+            </g-link>.
           </p>
         </div>
         <div v-else>
@@ -191,15 +199,16 @@ import {
   getRankLabelByProperty,
   IBuilding,
   IBuildingBenchmarkStats,
+  IPropertyStats,
   RankConfig,
 } from '../common-functions.vue';
 
 /**
  * A group of all the core stats by property type (e.g. GHG intensity median)
  */
-export interface PropertyByBuildingStats
+export interface IStatsByPropertyType
 {
-  [propertyType: string]: IBuildingBenchmarkStats;
+  [propertyType: string]: IPropertyStats;
 }
 
 /**
@@ -208,7 +217,9 @@ export interface PropertyByBuildingStats
   */
 @Component
 export default class StatTile extends Vue {
-  readonly BuildingStatsByPropertyType: PropertyByBuildingStats = buildingStatsByPropertyType;
+  readonly BuildingStatsByPropertyType: IStatsByPropertyType = buildingStatsByPropertyType;
+
+  readonly ColsToHideComparison = ['DistrictSteamUse', 'DistrictChilledWaterUse'];
 
   @Prop({required: true}) building!: IBuilding;
   @Prop({required: true}) statKey!: string;
@@ -279,7 +290,24 @@ export default class StatTile extends Vue {
 
   get isAboveMedian(): boolean {
     return this.building[this.statKey] !== null &&
-    this.building[this.statKey] as number > this.stats[this.statKey].median;
+      this.building[this.statKey] as number > this.stats[this.statKey].median;
+  }
+
+  /**
+   * Whether this stat is > one standard deviation above the mean value (e.g. if GHG intensity has a
+   * mean of 7.5 kg/sqft CO2e with a std of 5.5, values over 13 kg/sqft return true)
+   */
+  get isOneStdDeviationAboveMean(): boolean {
+    const statStdDeviation = this.stats[this.statKey]?.std;
+    const statMean = this.stats[this.statKey]?.mean;
+
+    console.log({ key: this.statKey, statStdDeviation, statMean });
+
+    if (this.building[this.statKey] === null || !statStdDeviation) {
+      return false;
+    }
+
+    return this.building[this.statKey] as number > statMean + statStdDeviation;
   }
 
   // Square footage isn't directly climate related, so we show stats but treat it as
@@ -453,17 +481,24 @@ export default class StatTile extends Vue {
   // 0 = outstanding performer in category
   // 1 = no concern
   // 2 = medium concern (above median)
-  // 3 = high category (top 30)
+  // 3 = high category (top 30 or > 1 std. deviation above the the mean)
   // 4 = very high concern (top 10 in category)
   get concernLevel(): number | null {
-    // Return null if we have no stats
-    if (!this.statRank) {
+    // Some columns never show comparisons, because there's incomplete data (e.g. district steam and
+    // district chilling)
+    if (this.ColsToHideComparison.includes(this.statKey)) {
       return null;
     }
 
-    if (this.statRank <= 10) {
+    // If an older building with no ranking on this stat, pretend its very low ranking and just run
+    // checks against  the mean and median
+    const statRank = this.statRank ?? 1000;
+
+    // Very high concern if top 10
+    if (statRank <= 10) {
       return 4;
-    } else if (this.statRank <= 30) {
+    // High concern if top 30 or well above mean
+    } else if (statRank <= 30 || this.isOneStdDeviationAboveMean) {
       return 3;
     } else if (this.isAboveMedian) {
       return 2;
@@ -552,7 +587,11 @@ export default class StatTile extends Vue {
       font-weight: 500;
     }
 
-    .median-val { font-size: small; }
+    .median-val  { font-size: small; }
+    .median-label {
+      font-size: 0.825rem;
+      font-weight: 600;
+    }
   }
 
   .median, .percentile { font-size: 0.75rem; }

src/constants/globals.vue

@@ -6,5 +6,5 @@
 export default {};
 
 /** The latest year we have emissions data for, shown in global disclaimers */
-export const LatestDataYear = 2021;
+export const LatestDataYear = 2022;
 </script>

src/data/dist/building-benchmark-stats.json

@@ -1 +1 @@
-{"GHGIntensity":{"count":2559.0,"mean":8.0,"min":0.3,"max":555.1,"twentyFifthPercentile":5.1,"median":6.5,"seventyFifthPercentile":8.2},"TotalGHGEmissions":{"count":2559.0,"mean":1919.9,"min":23.8,"max":137220.8,"twentyFifthPercentile":478.2,"median":873.9,"seventyFifthPercentile":1849.8},"ElectricityUse":{"count":2559.0,"mean":9290047.0,"min":0.0,"max":619040524.7999999523,"twentyFifthPercentile":1756855.0,"median":3656138.7999999998,"seventyFifthPercentile":8495098.5999999996},"NaturalGasUse":{"count":2559.0,"mean":9506402.5,"min":-4774717.7999999998,"max":346816224.6999999881,"twentyFifthPercentile":2601144.7000000002,"median":5147647.2000000002,"seventyFifthPercentile":10379648.1999999993},"SourceEUI":{"count":2559.0,"mean":157.1,"min":5.8,"max":10063.4,"twentyFifthPercentile":100.3,"median":126.8,"seventyFifthPercentile":162.0},"SiteEUI":{"count":2559.0,"mean":91.0,"min":2.1,"max":8332.4,"twentyFifthPercentile":57.4,"median":73.6,"seventyFifthPercentile":95.4},"YearBuilt":{"count":2559.0,"mean":1965.1,"min":1872.0,"max":2020.0,"twentyFifthPercentile":1928.0,"median":1970.0,"seventyFifthPercentile":2001.0},"GrossFloorArea":{"count":2559.0,"mean":270206.0,"min":16333.0,"max":9245333.0,"twentyFifthPercentile":77694.0,"median":130550.0,"seventyFifthPercentile":287052.0},"DistrictSteamUse":{"count":2559.0,"mean":853546.6,"min":0.0,"max":730978743.7999999523,"twentyFifthPercentile":0.0,"median":0.0,"seventyFifthPercentile":0.0},"DistrictChilledWaterUse":{"count":2559.0,"mean":582525.0,"min":0.0,"max":190418694.3000000119,"twentyFifthPercentile":0.0,"median":0.0,"seventyFifthPercentile":0.0}}
+{"GHGIntensity":{"count":2549.0,"mean":7.5,"std":5.5,"min":0.3,"max":114.8,"twentyFifthPercentile":5.0,"median":6.4,"seventyFifthPercentile":8.1},"TotalGHGEmissions":{"count":2549.0,"mean":1912.1,"std":4656.8,"min":4.8,"max":135875.8,"twentyFifthPercentile":485.2,"median":885.8,"seventyFifthPercentile":1858.9},"ElectricityUse":{"count":2549.0,"mean":9573668.8000000007,"std":24582595.1999999993,"min":0.0,"max":623023572.6000000238,"twentyFifthPercentile":1808639.8,"median":3796376.7000000002,"seventyFifthPercentile":8744977.5},"NaturalGasUse":{"count":2549.0,"mean":11076092.1999999993,"std":21654400.5,"min":0.0,"max":412348801.5,"twentyFifthPercentile":2913684.2999999998,"median":5818399.5999999996,"seventyFifthPercentile":11964909.1999999993},"SourceEUI":{"count":2549.0,"mean":153.8,"std":114.3,"min":5.9,"max":2440.1,"twentyFifthPercentile":103.3,"median":132.2,"seventyFifthPercentile":166.4},"SiteEUI":{"count":2549.0,"mean":89.0,"std":62.0,"min":3.7,"max":1440.9,"twentyFifthPercentile":59.7,"median":78.4,"seventyFifthPercentile":100.7},"YearBuilt":{"count":2549.0,"mean":1966.4,"std":38.0,"min":1865.0,"max":2021.0,"twentyFifthPercentile":1928.0,"median":1971.0,"seventyFifthPercentile":2002.0},"GrossFloorArea":{"count":2549.0,"mean":280384.4,"std":447416.8,"min":16333.0,"max":9245333.0,"twentyFifthPercentile":80449.5,"median":139707.0,"seventyFifthPercentile":303490.0},"DistrictSteamUse":{"count":2549.0,"mean":620184.1,"std":16730898.9000000004,"min":-11882688.3000000007,"max":804899285.5,"twentyFifthPercentile":0.0,"median":0.0,"seventyFifthPercentile":0.0},"DistrictChilledWaterUse":{"count":2549.0,"mean":384779.2,"std":3356083.1000000001,"min":-1344840.0,"max":60385415.5,"twentyFifthPercentile":0.0,"median":0.0,"seventyFifthPercentile":0.0}}