楽しい時計作り、2012年にスタートした一日一創でも時間にまつわる色々作りました。
一日一創2012 #time
中でもお気に入りだったのが、SVGライブラリD3.jsを使った、ふわふわする円の中を時針分針秒針の円が動く「やわらか時計」です。 ただ、かつて読み込んでいたライブラリのURLが変わってしまったかで動かなくなっていたので最新ライブラリでメンテナンス。

softime」↑は動画で、今を表していないので注意
滑らかでいい動きですね。D3.js、いろいろ使いこなせると楽しそうです。


時計部分をクリックすると黒背景の全画面(フルスクリーン)になるおまけ付きです。 高フレームレートなディスプレイでの展示に使うとインパクトあるかもしれません。

links
- D3.js で作った「やらわか時計」D3再入門(2017年にもリニューアル)

日本政府のデータカタログサイト「DATA GO JP」には、現在27,526のデータセット。

CKANの構造では、データセット内に複数のリソース。CKAN APIを使って、実際のリソース数を数えてみたところ、348,243コありました。

chart-pie demosrc on GitHub
リソースに記載されているデータフォーマットのナンバーワンは、36.4%を占めるExcel(XLS)! XLSXは別にあるので、古いExcelということでしょうか。

続いて、ページそのままオープンデータにするHTML(28.5%)、PDF(19,2%)、扱いやすい3つ星以上のオープンデータCSVは8.1%と4位。 フォーマット全件は data_go_jp_format.csv をご参照ください。

CSVデータでもデータ項目がURLで他のデータと連携できるたら4つ星オープンデータ、標準化された語彙を使っていれば5つ星オープンデータです。 全28,057件の調査や、解析もおもしろそうです。

ESモジュールに対応していた、SVGを使ったグラフィックライブラリ「D3.js」を使って円グラフタグをHTMLElementで作成。 <script type="module" src="./chart-pie.js"></script> <chart-pie style="height:400px;width:600px;"> name,count 農林水産業,96777 行財政,47496 司法・安全・環境,44875 企業・家計・経済,28641 教育・文化・スポーツ・生活,28012 情報通信・科学技術,20507 人口・世帯,19872 住宅・土地・建設,12329 社会保障・衛生,9975 労働・賃金,9638 エネルギー・水,7369 国土・気象,6442 国際,5767 鉱工業,4470 商業・サービス業,2690 その他,2138 運輸・観光,1245 </chart-pie> こんな感じでHTMLを書くだけすぐに円グラフで表現できるようになりました。
chart-pie tag - src on GitHub

河川の状況、D3.jsを使って親しみやすく、かわいいゲージを見つけたので、改良してみました。

鯖江市 論手川 水位メーター D3.js version

台風時には気になる河川の水位、鯖江市の川、論手川に設置されたリアルタイム5つ星オープンデータ化された水位計でも大幅な上昇が記録されています。

(鯖江市論手川の水位の推移 2017.10.22 / 2017.10.23

sakura.ioなどIoTを使った身近な安心につながるオープンデータ、どんどん増やしていけるといいですね!

links
- 5つ星リアルタイムオープンデータ SPARQLを使った鯖江市論手川排水機場の水位表示アプリ
- 5分でできるオリジナル鯖江論手川排水機場水位表示iPhoneアプリ / Swift2入門

SVGを使った美しい描画を簡単につくれる D3.js
再入門しようと、2012年作品「やわらか時計」から復習開始!


softtime / やわらか時計」 フルスクリーン対応


Macでフルスクリーン表示した図
プロジェクターで映したり、iPadで表示して飾っておくなどもいいかもしれません

D3.jsを使ったオープンデータビジュアライズをいろいろ試していきます!

links
- Gallery · d3/d3 Wiki
- D3 入門 | スコット・マレイ | alignedleft

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS