小金井市トライアスロン連合ホームページ統計データ
•Download as PPTX, PDF•
0 likes•1,744 views
公開する統計情報ファイルの作成について、資料を作成しました。
More Related Content
Similar to 小金井市トライアスロン連合ホームページ統計データ
Similar to 小金井市トライアスロン連合ホームページ統計データ (20)
小金井市トライアスロン連合ホームページ統計データ
- 2. ホームページ管理においては、連合メンバの情 報に加えて、小金井アクアスロン大会に関連す る統計情報も散在している。 しかしながら、担当者交代などで、公開されて いないデータ、集計されていないデータが多数 あるのが現状 これらの情報を、連合内だけで共有するのでは なく、ホームページ上で連合外へも共有したい
- 3. 公開を考えているのは、アクアスロン大会関連 大会完走統計（完走タイム、順位） 大会エントリ統計（申し込み日時） 大会参加者属性（年代、競技結果） 大会開催統計（天候、参加人数、全体記録）
- 4. サーバ担当者の交代等で作業負担が少なくする ため、静的ページとして作成 データファイルやライブラリ類は、ひとつの HTMLファイルに埋め込む。（ファイル数を減 らし、引き継ぎ時等に悩む箇所を減らす） 無料で使える、統計可視化ライブラリである、 「jqPlot」と「D3.js」を利用する。
- 5. 静的ページのメンテは、FTPツールという ファイルアップロードツールの操作を覚え るだけで良く、15分もあれば引き継ぎが可 能であるので問題ない。 統計可視化ライブラリ「jqPlot」は簡単なの で誰でも使えるが、「D3.js」は少し敷居が 高い。 ⇒そのため以降のページで使い方を説明。
- 6. D3.jsを一言で述べると、ブラウザの描画機 能を利用したデータビジュアライゼーショ ン用途のための、JavaScriptライブラリで す。 最近話題に出るキーワードなのに、製品そ のものが出回っていないので見逃しやすい ですよね。。(カタログも体験版も無いわけ で、、、) 一般的な可視化ツールとは根本的に違って います。
- 7. とりあえず、デモサイトを紹介します。 東京の風 http://air.nullschool.net/ 東京の風の様子を可視化。 バイク練のときは、この サイトを見てから出発♪ 出来るだけ追い風となるよう 綿密に経路を設定します。 風の流れが アニメーション してます。
- 8. K-Means法 http://tech.nitoyon.com/ja/blog/2013/11/07/k-means/ クラスタリングによる分類 アルゴリズムのサンプル。 大会参加者の属性情報を分析 して、より喜ばれる大会運営を 目指します。 ランニングを得意 とする選手 大会参加に特に積 極的な選手
- 9. 他にも色々な手法で、統計情報の可視化が出来ま す。時間内には説明しきれないので、リンクを紹 介しておきます。 折りたたみ可能な力有向グラフ http://javascript-demo. e1blue.net/demo/graph/d3/demo/collapsible-force-layout/ ストリームグラフ http://javascript-demo. e1blue.net/demo/graph/d3/demo/streamgraph/ 折りたたみ可能なツリーレイアウト http://javascript-demo.e1blue.net/demo/graph/d3/demo/collapsible-tree- layout/
- 10. デモサイト紹介の続き 折り畳み可能なインデントツリー http://javascript-demo. e1blue.net/demo/graph/d3/demo/collapsible-indented-tree/ エッジバンドリング http://javascript-demo.e1blue.net/demo/graph/d3/demo/hierarchical-edge- bundling/ ソート可能なヒートマップ http://javascript-demo.e1blue.net/demo/graph/d3/demo/data-heatmap- sorting/ ダッシュボードの例 http://javascript-demo.e1blue.net/demo/graph/d3/demo/simple-dashboard/
- 11. デモサイト紹介の続き 密度と分位グラフ http://javascript-demo. e1blue.net/demo/graph/d3/demo/density-quantile-graphs/ ドロネー三角形 http://javascript-demo.e1blue.net/demo/image-effect/trianglify-gh-pages/ テトリス（頑張ればゲーム作成も可能） http://javascript-demo.e1blue.net/demo/graph/d3/demo/tetris/ 時間データをカレンダ表示 http://javascript-demo.e1blue.net/demo/graph/d3/demo/d3- calendar/
- 12. デモサイト紹介の続き 有向グラフ編集 http://javascript-demo. e1blue.net/demo/graph/d3/demo/directed-graph-editor/ 風邪に関するツイート可視化 http://kazemiru.jp/ 海底ケーブルの可視化 http://submarine-cable-map-2014.telegeography.com/ サイバー攻撃のリアルタイム表示 http://cybermap.kaspersky.com/
- 13. HTML化したデータを作成すればOKで、 下記の手順を踏むと利用できるのです。 可視化したいデータをHTML化し それをWebブラウザで開き、 目的の結果(グラフ画像やアニメーション)を閲 覧する ということで、単純が集計や概要把握を目的としたグラフ作成するだけであれば、 Excel(Power View機能を使えば、地図上へのプロットなども可能)だけでも充分ですし、jqPlotとかGoogle Charts APIとかGoogle Visualization APIとか楽に早く可視化を実現できる便利ツールがたくさん世の中に出て おり、こちらをお勧めします。 小金井市トラ連のページでは、基本的にはjqPlotで統一して頂き、どうしても可視化できないケースについて はD3.jsを使うルールとします。 ※「jqPlot」はjQueryのプラグインとして動作するライブラリ。 ※「Google Charts API」はGoogleが提供しているWebAPI。 ※「Google Visualization API」はGoogleが提供しているライブラリ。
- 14. D3.jsでデータの可視化を行う際に必要な材料は、 テキストエディタ Webブラウザ D3.js 本体（Webで落としてきます。） 可視化したい統計データ 可視化したいイメージ（ここが一番重要か！） （上記は最小構成。馴染みのある開発ツール類があれば、何を使ってもよい。）
- 15. JavaScriptを使った描画系処理スキルが必要で、 HTMLのDOM要素 Canvas要素 SVG要素 などについて、色などの属性や、表示座標を個別 に適用する実装能力があればOKです。 ここまでで、D3.jsが難しいとの評価の意味がお分かりになる方も。。。。 （前提知識としては、HTML、JavaScriptを書けることが求められている だけでなく、統計データの値を脳内プロセスにより、可視化の画用紙 上の座標系に変換する営みまでもが求められるからです。D3.jsは単に、 変換計算をしてくれるライブラリであるだけなのです。）
- 16. デモページと同じ可視化形式でよければ、、 元のソースコードだけ持ってきて、表示し たい統計データをCopy&Pasteするだけで 作成可能です。（ただし著作権的なものは守って） （HTMLとJavaScriptの、本当の基本的な大原則だけ守れば良いので誰でも可能） カスタマイズしたり、発明に近い可視化方 式により実現したい場合は、、、 ⇒HTML&JavaScriptの実装スキルを身につけてください。 ⇒この方法については、以降で概要を説明。
- 18. ① HTMLを用意する。 ② 表示したいデータを読み込ませる。 ③ 適用したいグラフ形式を指定する。 ④ グラフを表示するためのSVG図形を作成する。 ⑤ グラフ要素を追加したり属性値を変更する。 ⑥ 必要に応じてアニメーション処理を定義する。 ⑦ 必要に応じてイベントに対応した動作を定義する。
- 19. 手順①～⑦は、 実際のHTMLファイルを 編集しながら説明します Web公開用のHTMLページやCGIページなど でもよいし、最近はやりのHTML5アプリで も何でもよい。 ただしhtaで作った分析ツール類では、IE10環境であってもデフォルトで InternetExploler8モードでレンダリングされてしまうなど色々あるらしく、ま ともに動くバージョンに手動で変更する必要がある。 ※追記例<meta http-equiv="X-UA-Compatible" content="IE=9" />
- 20. CSV,TSV,JSONなどを用意する。 外部ファイルとしてでも、HTMLに埋め込ん でもどちらでも作成は可能。
- 21. D3で用意している形式を指定。用意されているのは、 Chord Force ヒストグラム 円グラフ 積み上げグラフ クラスターレイアウト 樹形図 ツリーマップ などがあり、適用したいグラフ形式を指定します。 また、地図連携(GeoJSON,TopoJSON連携)も可能です。
- 26. D3.js本家サイト http://d3js.org/ ドットインストール（D3.js入門編） http://dotinstall.com/lessons/basic_d3js Excel to D3（ExcelからD3ライブラリを呼び出す ことが出来る。E2D3とか表記されることも） http://mashupaward.jp/works/622 →「Office アプリアイデアコンテスト」に採択され，日本マ イクロソフトが仕様書作成と開発費用を全面サポートしてくれ ることになり、開発が進められているようですね。。