はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

Canvas で東京電力の電力使用状況を可視化してみた

Canvas で東京電力の電力使用状況を可視化してみた

Canvas の棒グラフ、円グラフの描画 + 東京電力の電力使用状況API を組み合わせて、可視化してみたのでメモ。

なお、他の電力会社の電力使用状況データを取得できないか調べてみたところ、 yahoo の電力使用状況API 震災関連情報:電力使用状況API - Yahoo!デベロッパーネットワーク

(APIキーが必要)でないと取得できなさそうでした。 github pagesでは、APIキーを隠す手段がないので今回は使いませんでした。

サンプル

円グラフで、現在の使用状況を示しています。 棒グラフは、昨日の毎時使用量(24本)を示しています。24時間の中で最大使用量のみ赤色にしてあります。

このサンプルは、ECMA Script2015 のclass を使っており、現在Chrome42 のみ対応しています。

cartman0.github.io

使用したAPI

こちら

東京電力電力供給状況API

 のAPI をJSONP で使用しました。

簡単なコード解説

EcmaScript2015のclass

今回はAPIで取得した情報をEcmaScript2015 のclass を使用したオブジェクトに格納しました。 現時点では、'strict'モードで Chrome42、NightlyモードのFirefoxに対応しているようです。 

Classes - JavaScript | MDN

作ってみたclass は、以下です。


'use strict'

class ElectricPowerInfo {
  constructor(jsonp) {
    this.year = jsonp.year;
    this.month = jsonp.month;
    this.day = jsonp.day;
    this.hour = jsonp.hour;
    this.capacity_TenThousandKW = jsonp.capacity; //供給可能最大電力(万kW)
    this.usage_TenThousandKW = jsonp.usage; //この時間帯の消費電力(万kW)
    this.usage_ratio = jsonp.usage / jsonp.capacity;
    this.usage_update_DateUTC = new Date(jsonp.usage_updated + ' UTC');
    this.saving = jsonp.saving;//計画停電ありならtrue
  }
};