Three.jsとD3.jsで日本の日別降水量を日本地図上にビジュアライズ

公開日: : プログラミング , , ,

久しぶりの更新となりましたが、そろそろ自分の制作物でもちょろっと紹介しようかなと思います。

rainfall

作成したのは2013年の各県庁所在地の日別の降水量を日本地図上に簡単な棒グラフでマッピングしたデモです。

デモのリンクはこちら

※WebGLが表示可能でないブラウザだと表示できません。また、GPUを使用するため、PCによっては重くなるかもしれません。

 

ソースコードはGitHubで公開してるので、こちらからどうぞ。

 

使用している技術について簡単に紹介します。

WebGL

webgl

WebGLとは、Webブラウザ上でOpenGL ES 2.0のグラフィックAPIをHTML5のグラフィックスを描画するcanvas要素にJavaScriptを用いて使えるように開発された3次元コンピュータグラフィックスを表示するためのプラットフォームです。

Three.js

three

Three.jsはWebGLのラッパーライブラリで、WebGLの複雑で冗長な手順をなくし、WebGLを使いやすくするライブラリです。WebGLを使用したアプリケーション開発ではデファクトスタンダードとなっています。

http://threejs.org/

Three.jsの使い方などはヨモツネットさんのこちらの記事ががとても参考になります。

D3.js

d3

D3.jsはデータに基づいてWebページ内のDOMを操作したり、SVGでグラフなどのデータを可視化するためのJavaScriptライブラリで、多様なデータビジュライゼーションを可能にしています。

http://d3js.org/

また、本デモではGeoJSONを読み込みD3.jsのSVGからThree.jsマテリアルへの変換のため、d3-threeDというライブラリを使用しています。

https://github.com/asutherland/d3-threeD

参照データ

降水量データは気象庁の過去の気象データ・ダウンロードで取得したcsvデータを使用しています。

地図データはこちらで公開されている日本全図のメッシュデータをGeoJSONに変換して使用しています。

最後に

今回はデモの簡単な紹介でしたが、これからはちょくちょくWebGLやThree.js、D3.jsなどについての技術記事なども書いていけたらいいなと思います。

ad

  • このエントリーをはてなブックマークに追加
  • Pocket

関連記事

便利なGitの拡張

Gitのバージョン管理は便利ですよね。GitHubだったりGitLabなど利用している方も多

記事を読む

Sublime Text 3のTex環境の導入

情報系の学生は論文やレポートを書くときに欠かせないのがTexです。最近はWordでレポートなどを書く

記事を読む

大学でプログラミングを学ぶということ

高校生の頃からPCでゲームをやったり、動画を見たりするのが好きだった。 受験を勉強頑張って

記事を読む

#RECRUIT_CODE を解いてみた

解読できる学生求む!ターミナルに残された暗号 #RECRUIT_CODE リクルートホール

記事を読む

Three.jsで雪を降らせる

WebGL Advent Calender 16日目の記事です。 何番煎じかわからないですが、

記事を読む

便利なGitの設定

今回は、Git関連第2弾ということでGitの設定について紹介したいと思います。 ちなみにM

記事を読む

Sublime Text 3 導入

Mac Book Proに新しくしたので、ついでにSublime Text 2からSublime T

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

  • chanpu(チャンプ)

    IT系勤務のエンジニア 使用言語はC, Java, JavaScript, Swift, PHP, Perl, Python. 普段はiOS, Android, Webのアプリケーションを作っています。 趣味は料理, イラスト, ギター, ランニング
Raspberry Pi 2と Node.js で温湿度センサーの値を取得する

前々回はPythonを使って温湿度センサーの値を取得しましたが、今回は

Raspberry Pi 2 に Node.js をインストールする

Raspberry Pi にNode.jsをインストールする方

Raspberry Pi 2 と温湿度センサーで部屋の温度を取得する

今回は、温湿度センサー(DHT11)を使って、部屋の温度を取得してみよ

Raspberry Pi 2 Model B の初期セットアップ 続

前回から間が空いてしまいましたが、SSH接続、IPの設定周りの設定方法

Raspberry Pi 2 Model B の初期セットアップ

もてあましていたRaspberry Piをセットアップしたので紹介した

Sublime Text 3のTex環境の導入

情報系の学生は論文やレポートを書くときに欠かせないのがTexです。最近

卒論発表の時に注意するべき3つのこと

あけまして、おめでとうございます。チャンプです。 そろそ

Three.jsで雪を降らせる

WebGL Advent Calender 16日目の記事です。

Sublime Text 3 導入

Mac Book Proに新しくしたので、ついでにSublime Te

朝起きた時から痛い背中の痛みを解消する方法

私はPCで一日中作業しているせいか、背中が張り始めて、発展して

→もっと見る

PAGE TOP ↑