Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

D3.jsで日本地図を描いてみた

2,498 views

Published on

2015年03月18日に開催した『うずらインキューベータ #5』の発表資料となります。

https://atnd.org/events/63703

Published in: Technology
  • Be the first to comment

D3.jsで日本地図を描いてみた

  1. 1. D3.JSを利用して 日本地図を描いてみた H27/03/18 うずらインキューベータ #5 株式会社マップクエスト 岩崎優奈
  2. 2. 自己紹介 ・株式会社マップクエスト 在籍 http://www.mapquest.co.jp/ → 豊橋商業高校卒業から5年間、 GIS(地理情報システム)開発者。 ・スピード入力が得意 [1分160文字] ・日本大好き!旅行大好き! 月に一回はどこか行きます。 ただし雨女なので、周囲にはご迷惑をお掛けしております。 他・・・読書、カラオケ etc MapQuest
  3. 3. D3.JSって?
  4. 4. D3.jsとは? ・D3.js = Data-Driven Dobuments ・Webブラウザで動的コンテンツ(※1) を描画する JavaScriptライブラリ。 ”ドキュメントに対する操作を支援する”というイメージ。 ※今回は、”SVG”に対する操作を主に行いました。 ・2011年~ Mike Bostock氏が開発。BSDライセンス 採用。 (※1) 今回のテーマ『日本地図』では、 円グラフ、棒グラフ等が当てはまります。
  5. 5. SVGとは? ・SVG = Scalable Vector Graphics =ベクター画像フォーマット D3.jsで扱う上では「XML形式の画像記述言語」。 <svg> <circle cx="120" cy="120" r="100" fill="red" /> <rect x="130" y="130" width="300" height="200" fill="blue" /> </svg> SVG
  6. 6. SVGには、いくつかの描画要素が用意されている − Line 2点の座標を与えることでその間に線を引く − Polygon 多角形を構成する座標群を与えることで多角形を描画 − Path 始点と経由点の座標を与えることで最後の経由点まで一筆書を行う − Circle 中心座標と半径を与えることで円を描画 描画要素の例 SVGの描画要素
  7. 7. CanvasSVG • ベクター形式 • 画像を数値データを基に描画 • 拡大縮小に強い • 描画要素が増えると低速化 • 線でのみ構成される画像に向く • ビットマップ形式 • 画像をドットで表現 • 拡大縮小に弱い • 複雑な画像でも高速描画 • 絵など複雑な画像に向く HTML5においての描画方法
  8. 8. SVGの普及状況 ・2001年に SVG 1.0 が W3C勧告。しかし、流行らず。 近年、徐々に注目を集めている―― ・HTML5より svg要素 が追加! ・IE9(2014年4月)にてHTML5対応!(=SVG対応) 背景:スマートフォンなどの普及により、 拡縮対応の需要が高まってきたため。
  9. 9. SVGの各種ブラウザ対応状況 2015年2月26日時点でのSVG対応状況 ブラウザ名 対応Ver. 対応時期 最新Ver. Internet Explorer 9.0 2011年04月26日 (2011年03月15日) 11.0 Firefox 3.0 2008年06月18日 (2008年06月17日) 36.0 Chrome 4.0.249 2010年01月25日 40.02214 Safari 3.2 2008年11月13日 8.0.3 Opera 9.0 2006年06月20日 27.0 iOS Safari 3.2 2008年11月13日 8.0 Opera Mini 5.0 2009年08月16日 8.0 Android Browser 3.0 - (未調査) 37.0 Blackberry Browser 7.0 - (未調査) 10.0 Internet Explorer Mobile 10.0 - (未調査) 11.0 参考:http://caniuse.com/#feat=svg
  10. 10. 懸念点は… 参考:http://gigazine.net/news/20141203-windows-7-growth/ ・IE8(SVG非対応)のシェアがまだ高い…(2014年11月時点) 2014年9月のWinXPのサポート終了を経て、徐々に減少。
  11. 11. SVGを取り扱う手段 Level.1 Level.2 Level.3 単純な文字列連結によるSVG操作 SVGに特化した javascriptライブラリによる SVG操作(D3.jsやSnap.svg) SVG DOMによるSVG操作
  12. 12. を描いてみた DEMO
  13. 13. • 達成! − Web上での地図描画 − ベクトル描画 − D3.jsの使用 − スムーズな読み込みと描画 • 実装機能 − 拡大縮小移動 − 色塗り − 円グラフ表示 − ラベル表示 − グラフ表示切替 使用ブラウザ Chrome ver : 40.0.2214.115 m 描画時間: ポリゴン数: 座標数: 0.07秒 164個 9,569点 デモアプリ
  14. 14. サンプルの要素構成図 HTML (Webページ) SVG (地図) HTMLに 貼り付け JavaScript SVGを生成 データの読込 (座標、属性値) CSV (属性データ) KML (地図データ) コードで 対応 Input Output メモリ上で 作成D3.jsを 利用 SVG描画 NetBeans 開発環境
  15. 15. • KMLファイルは地図情報を管理するためのXMLベースのマークアップ言語 − GoogleEarthやGoogleマップで用いられている − ポリゴン(座標など)がタグで囲まれているため プログラム中で扱いやすい • CSVファイルはカンマで各データが区切られたファイル − 本デモアプリにおいては属性データが入ったデータベース的な扱い KML内の各ポリゴンとCSV内の各属性データは コードによってリンクさせている Input情報
  16. 16. 属性と図形のリンク CSVファイルから属性値を読み取りデータベース化し、 Polygonの持つコードと、CSVファイルの持つコードをリンクさせる 属性データベース コード:1 コ ー ド 一 致 0000~1000:薄い緑 1001~2000:緑 2001~3000:濃い緑 属性値に対応した色で塗る コード 属性 1 500 2 1800 3 3000
  17. 17. 作成までの道のり
  18. 18. SVGを取り扱う手段 Level.1 Level.2 Level.3 単純な文字列連結によるSVG操作 SVGに特化した javascriptライブラリによる SVG操作(D3.jsやSnap.svg) SVG DOMによるSVG操作
  19. 19. 単純な文字列連結によるSVG操作Level.1 var svg = ‘<SVG>' + '<line x1=“' + point[0][0] + ‘” y1=“' + point[0][1] + ‘” x2= ”' + point[1][0] + ‘” y2=“' + point[1][1] + “/> </svg>”; document.getElementById(“map").innerHTML = svg; JavaScript : <div id = "map"> </div> : HTML 例:<SVG> <line x1="0" y1="0" x2="200" y2="200“> </svg> point=[[0,0],[200,200]] ・SVGは文字列によって形成されている → 文字列連結によってSVGそのものを作成
  20. 20. 単純な文字列連結によるSVG操作Level.1 ・SVGを理解するための練習としては ○ ・ソースコードの見栄えが悪くなる ・動的に扱うことが難しい (SVGのどの行を書き換えるか指定が難しい) ・実用的か? → NG 座標数:196,280、ポリゴン数:595のデータを描画 Lineとして描画 PCフリーズ Polygonとして描画 動作はするが、大変重い 描画に 10 秒ほど要する
  21. 21. SVG DOMによるSVG操作 ・HTMLにセットされたSVGに対して 描画要素やパラメータを追加する → 手作業の文字列連結と比べてミスは減る。 ただし、速度含め、可能なことは文字列連結と大差無い Level.2 var svg = document.createElementNS(http://www.w3.org/2000/svg, “svg”); var rect = document.createElementNS(http://www.w3.org/2000/svg, “rect”); rect.x.baseVal.value = 10; rect.y.baseVal.value = 10; rect.width.baseVal.value = 100; rect.height.baseVal.value = 100; rect.style.fill = “red”; svg.appendChild(rect); document.getElementById(“map").innerHTML = svg; JavaScript
  22. 22. javascriptライブラリによるSVG操作Level.3 D3.js Snap.svg Raphaël.js 開発元 Mike Bostock氏 Adobe Systems社 Dmitry Baranovskiy氏 ライセンス BSDライセンス Apacheライセンス MITライセンス 公式サイト http://d3js.org/ http://snapsvg.io/ http://raphaeljs. com/ 特徴 ・既存のSVG操作 ・データ可視化 (地図、グラフ) ・既存のSVG操作 ・アニメーション ・Raphaël.jsの 開発者が制作 ・IE8以前の IEサポート
  23. 23. javascriptライブラリによるSVG操作Level.3 ・select処理にてHTML内の要素を取得 append処理を行うことで新たな要素が追加される 更にattr処理を行うことでパラメータが設定される var svg = d3.select("#map") .append("svg") .attr("width", 1200) .attr(“height”, 1000); d3.select(”#svg”) .append(“polygon”) .attr(points, “200,10 250,190, 160,210“) .attr(”stroke”, ”black”) .attr(”fill”, ”red”); JavaScript #map #svg 1200 1 0 0 0
  24. 24. javascriptライブラリによるSVG操作Level.3 ・ 一度描画を行ったSVGの書き換えが可能 ・SVGに対してイベント処理を容易に適用可能 例:ドラッグイベント、マウスホイールイベント ・SVGには型として存在しない”円グラフ”等の描画要素も D3.jsが作成の補助をしてくれる ・速度も高速。 座標数:196,280、ポリゴン数:595のデータを描画 Pathとして描画 0.9秒程度。非常に軽い。 Polygonとして描画 0.6秒程度。非常に軽い。 一般的には Pathの方が 速いらしい ただし 移動拡縮処理は 自前…
  25. 25. javascriptライブラリによるSVG操作Level.3 ・SVGには型として存在しない”円グラフ”等の描画要素も D3.jsが作成の補助をしてくれる PickUP! セイコーマート数 セブンイレブン数 ローソン数 [1000,900,600] D3の円グラフ 作成関数 円グラフの図形を 生成してくれる 属性データ 位置情報 座標値 {xxx , yyy} :1000 : 900 : 600
  26. 26. javascriptライブラリによるSVG操作Level.3 ・同じようにテキスト(ラベル)も描画可能PickUP! D3のテキスト 表示関数 属性データ 位置情報 座標値 {xxx , yyy} 北海道 青森県 岩手県 秋田県 県コード 人口 1 2 3 547万人 138万人 132万人 青森県 北海道 都道府県名 岩手県 秋田県4 108万人 <g>タグ利用により レイヤのように表示 設定を変更可能
  27. 27. Map ポリゴン外にポイントが出てしまう ポリゴンの幅と高さの中間点にポイントを描くと 高さの中間点から伸ばした線とポリゴンの辺との交点を 求め、交点間の距離が長い方の中間点にポイントを描画 ポリゴン内にポイントを確実に収めることが可能 円グラフの表示位置
  28. 28. Map 面積値による個別描画切り替え 面積が非常に小さい島・地域に 円グラフを描画するとポリゴンが 見えなくなってしまう D3のremove関数使用 円グラフ追加時と拡大時に 面積と拡大率を参照し 描画要素の表示切替 地図が見える状態に!
  29. 29. 余談?
  30. 30. を使ってみた DEMO
  31. 31. ご清聴ありがとうございます

×