GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

Canvas D3v3

【D3.js】約97,000件の位置情報を地図にプロットしてみた。

投稿日:

医療経済研究機構にて、公開されている「全国保険薬局一覧」と「全国保険医療機関(病院・診療所)一覧」データをD3.jsを使って地図上にプロットしてみた。

全国保険医療機関(病院・診療所)一覧

データの数は、保険薬局一覧が56,341件、医療機関一覧が95,762件となっている。

保険薬局一覧(56,341件)

1万件を超えるとSVGではレンタリングの負荷が高すぎてまったく動かない。パン/ズームに対応させるためにはcanvasを使う必要がある。CanvasRenderingContext2Dインターフェイスの、drowing機能を使って保険薬局位置を描画した。

保険薬局位置 56,341件プロット

example

全体的に結構重い。rect(四角)ではなく、arc(円)を使って描画するとさらに遅くなる。
医療機関一覧データはさらに件数が多いので、別の手段を使って描画する。

全国保険医療機関一覧(95,762件)

日本列島はsvgで描画し、その上に重ねたcanvasのイメージデータを取得してピクセルの値を直接変更する方法で描画した。

病院位置 95,762件プロット

example

この方法だと、位置をドットとしてしか表現できないが、早い。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。