巨大な地理空間データをサクッと可視化できる、Uber社製オープンソースwebGIS「Kepler.gl」
kepler.gl Uber社では、自社で集めた地理空間データを可視化するためのフレームワーク deck.gl をオープンソースとして公開していますが、deck.glを用いて作成されたwebGIS「Kepler.gl」のver.1.0が公開されました。 webGLに対応したブラウザであれば、サイトにアクセスするだけで利用できるので大規模な位置情報などを可視化するソフトウェアをお探しの方は試してみてはいかがでしょう。 1分でわかるKepler.glの使い方 「Add Data」ボタンでデータを追加して、「Add Layer」ボタンで可視化方法を選ぶというのが基本的な操作方法になります。 csvデータをアップロード 「Add Data」ボタンをクリックし、下記画像の赤枠で囲まれた部分に、緯度、経度のデータが含まれるcsvファイルをドラッグ＆ドロップします。 レイヤーを追加 「Add Layer
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
RESAS-APIを使ってみた。
RESAS(地域経済分析システム)に掲載しているデータをプログラムから取得できるAPIが、11月1日公開されました。今週末から開催される「RESAS API ハッカソン」に参加するので、予習がてら少し触ってみました。 RESAS-API – 地域経済分析システム（RESAS）のAPI提供情報 東京で考える地方創生！RESAS API ハッカソン – dots. [ドッツ] D3からAPIを使う RESAS-APIを利用するにはリクエストヘッダにAPI-KEYを含める必要があります。 D3.jsでリクエストにカスタムヘッダを含むには以下のように記述します。 var url = "https://opendata.resas-portal.go.jp/api/v1-rc.1/oldCities?prefCode=2&cityCode=02201" d3.request(url) .header
【D3.js】約97,000件の位置情報を地図にプロットしてみた。
医療経済研究機構にて、公開されている「全国保険薬局一覧」と「全国保険医療機関（病院・診療所）一覧」データをD3.jsを使って地図上にプロットしてみた。 全国保険医療機関（病院・診療所）一覧 データの数は、保険薬局一覧が56,341件、医療機関一覧が95,762件となっている。 保険薬局一覧(56,341件) １万件を超えるとSVGではレンタリングの負荷が高すぎてまったく動かない。パン／ズームに対応させるためにはcanvasを使う必要がある。CanvasRenderingContext2Dインターフェイスの、drowing機能を使って保険薬局位置を描画した。 example d3.select("canvas") .call(zoom.on("zoom", zoomed)) .call(zoom.event); function zoomed() { translate = zoom.tra
【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush)
下位のグラフで選択された範囲を上位のグラフで拡大表示します。 複雑なことをやっているように見えますが、D3.jsでは比較的簡単に実装することができます。 example サンプルコード データ範囲の選択機能を追加するためにd3.svg.brush()を使用しています。 ヘルパー関数として、こちらの記事で作成した関数を使用しています。 d3.csv("access.csv", function(data){ var parseDate = d3.time.format("%Y/%m/%d").parse; //データセット型変換 data.forEach(function(d) { d.date = parseDate(d.date); d.access = parseInt(d.access); }); var dateExtent = d3.extent( data.map( F('da
D3で地図を描こう２
D3で地図を描こう！ ２ D3.jsで表示する データセットを読み込む d3.json("dataset/japank.geojson", function(geojson){ d3.csv("dataset/jinkou.csv", function(csv){ d3main(geojson, csv); }); }); function d3main(geojson, csv){ //ここに地図を表示する処理を書く } D3.js Geo(Geography) ライブラリ Projections 緯度経度を投影法を用いてピクセル座標に変換する Paths 地理形状をSVGのPathとして表示します 投影法 ３次元の立法体を２次元の平面上にに表現する方法 平面の紙に地図を描く場合、必ず歪みが生じてしまい面積・角度・距離を同時に全て正しく表示することはできない。そのため地図の使用用途に合わ
「地理情報システム学会研究発表大会」で発表したスライド
先日、行われた「第24回学術研究発表大会」にて発表したスライドです。 「データビジュアライゼーションの現在」というセッションの中で、「最新のジオビジュアライゼーション事例」を紹介させていただきました。 最新のジオビジュアライゼーション事例 基本的には、「最近、こんなサービスやライブラリが話題だよ！」「最近、こんな作品があったよー」といった内容です。スライドの中の画像はリンクになっているので、興味があるかたはクリックしてみてください。 紹介しきれなかった事例などもあるので、それらについてはこのブログで補足していこうかなと思います。 なお、Hackpadも公開されているので、興味がある方はそちらもどうぞ。 GISA特別セッション(6)「データビジュアライゼーションの現在」12:40〜14:20@443教室 – hackpad.com
地理情報システム学会学術研究発表大会に出ます。
10月10日に慶應義塾大学三田キャンパスにて開催される「地理情報システム学会研究発表大」に登壇させていただくこととなりました。 第24回学術研究発表大会（2015年）｜GISA 地理情報システム学会 12:40-14:20の間で行われる「データビジュアライゼーションの現在」という特別セッションに出ます。 特別セッションについては下記に詳しい内容が掲載されています。 第24回GIS学会大会特別セッション D3.jsやTurf.js、Mapbox、CartoDBなどの事例を紹介する予定です。 他に、パネルディスカッションも行われるそうです。 特別セッションは一般の方でも参加可能で無料だそうなので、興味がありましたら是非ご参加ください。
まだAPIで消耗してるの？ サクッとデータが欲しいなら「Blockspring」を使おう！ – GUNMA GIS GEEK
各サービスのAPIの仕様なんて覚えてらんねぇ！という人は是非。 Blockspringとは Blockspringは、TwitterやFacebookなどのソーシャルメディアをはじめ、Amazon、Youtubeなど様々なサービスからのデータを、プログラマがAPIを直接触ることなく表データとして取得することができるサービスです。サービスごとに規格の異なるWebAPIを利用するには学習コストが結構かかるわけですが、Blockspringはそういったサービスとプログラマーの間に立ち、データ取得のインターフェイスを抽象化してくれます。 非常に沢山のサービスに対応しています。 「ちょこっとデータが欲しいだけなのに、サービス毎のWebAPIを勉強するのもう疲れた」 そんな時はBlockspringを利用してみてください。 インストール BlockspringはGoogle スプレッドシートとエクセル
悲劇的なデータを美しく視覚化することの是非
HIROSHIMA VISUALIZED 広島市への原子爆弾投下を視覚化したデータビジュアライゼーションが、興味深い議論を巻き起こしていたので紹介します。 Why You Don’t Make A Mindlessly Beautiful Visualization Of A Horrific Event データの視覚化は、時として冷たい印象を与えてしまうことがあります。 上記記事では、特に悲劇的なデータ(今回の場合は広島市への原子爆弾投下について)を美しく表現することの是非についてTwitterで生まれた議論を掲載しています。 問題点としては、「美しい」ということより、美しく表現することが目的化してしまっているように見えるデータビジュアライゼーションは、戦争被害などのデータを視覚化する際の表現として適切なのか？ が焦点となっています。 自分自身としては、ビジュアルを主軸としたメディアアー
Charlotte(シャーロット)２話に出てきた地図のleaflet版作った。
地理院地図……お前、地理院地図じゃないか！ というわけで、leaflet版作ってみました。 ズームもパンもできるよ！＼(^ω^＼)( /^ω^)/ ホントは地図の向きも合わせようかと思ったのですが、見づらくなるのと操作しづらくなるのでやめました。 example 一応、最新版のChromeとFirefoxで動作確認してます。IEもver.10なら動くみたいです。 制作委員会に怒られたら、やめるね！ 解説 地図部分を透明色でくり抜いた画像をLeafletの上に重ねているだけです。 地図の奥行を出すのにCSS transformを利用しています。 example <!doctype html> <html lang="jp"> <head> <meta charset="utf-8" /> <title>charlotte Maps</title> <link rel="stylesheet"
【D3.js】サーマーウォーズのワールドクロックを作る
アノ時計っぽいものを作ってみました。 example 解説 基本的には下記事のコードをちょこちょこっと改良しただけです。 【D3.js】 SVGで地球儀を描く 地軸を傾けながらSVGで地球儀を表示する ポイントとしては地形を裏用(グレー)と表用(ピンク)に２重に描画しているところでしょうか。 clipAngleメソッドを使って描画される範囲を変えています。 ・裏用地形描画 var projection180 = d3.geo.orthographic() .scale(windowWidht/4) .rotate([0,0,0]) .translate([windowWidht / 2, windowHeight / 2]) .clipAngle(180); var backPath = d3.geo.path().projection(projection180); //地形(裏) va
[leaflet]地図タイル画像にCSSフィルターを適用する
example こちらの記事では、重ねたレイヤーをCSSクリップを使って表示領域を操作していますが、CSS Clipが効くのであればCSS Filterだって効くだろうと思ってやってみたのが上記です。 地図タイル画像に対してCSS Filterを適用しコンストラストや彩度、ボカシなどの画像処理を行い増す。CSS Filterには他にもセピア化やグレイスケール化などのフィルターがあるのですが、重ねがけするのが難しかったので外してあります。興味ある方は試してみてはいかがでしょうか。 ちなみに最新のChromeとFirefoxでは動くことを確認していますが、IEでは動きません。 サンプル 上のサンプルはいろいろごちゃごちゃしているので、コントラストフィルターを適用するだけのシンプルなコードを載せておきます。 「戦後・復興期と現在の空中写真を重ねて比較してみた」のコードとほとんど変わりません。38
![[leaflet]地図タイル画像にCSSフィルターを適用する](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e221af01917cf76284b89739c05533d4564d7d0/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2015%2F04%2Fleafletcssfilter1504161.jpg)
ぬるぬる動く！Web地図クライアント「Leaflet」を使おう！
D3.jsと組み合わせても使いやすい、Web地図クライアントライブラリの大本命……だと、個人的には思ってる……たぶん。 leaflet leaflet.jsとは何か leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。 軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。 ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね？」という方も、一度触ってみてください。 そんな訳で、簡単な「Leaflet クイックスタート」的なものを書いてみました。 ベースマップの作成 cdnからcssファイルとjsファイルを読み込みます。 <link rel="stylesheet" href="http://cdn.le
【D3.js】地図上にボロノイ図を描く
各黒い点(母点)がガソリンスタンドの位置です。 国土数値情報 燃料給油所データ(点)を使って、高崎市の地図上にボロノイ図を書いてみました。 example 【参考】 ボロノイ図とは サンプルコード const width = 980; const height = 500; const svg = d3.select("svg"); const mapLayer = svg.append("g"); const voronoiLayer = svg.append("g"); const projection = d3.geoMercator(); const path = d3.geoPath(); const q = d3.queue(); q .defer(d3.json, "takasaki.topojson") .defer(d3.json, "gasStation.geojson
ボロノイ図を使って、地図上の特定の位置から最も近い施設を見つけ出す。
昨日は「Code for SAITAMA ハッカソン ( Hack for クリテリウム)」に参加してきました。 ハッカソンに関する感想は後ほど記事にするとして、ハッカソンの中で「地図上の特定のポイントから、もっとも近くの施設を見つけ出す」という処理をD3.js使って描いたボロノイ図を利用して実装したので、ボロノイ図の活用方法の一つとして紹介したいと思います。 （ここでの”近く”とは直線距離が一番短くなる施設の事を指します。道なりに移動してもほぼ近似するという研究結果があるので、おおよそ一番近くの施設と言えます) 作ったもの 実際にハッカソンで使ったものとは別のコードです。 地図のクリックした地点から最も近くの施設を見つけ出します。 example 以前「ボロノイ図を使ってラベルの重なり合いを解消する」という記事を書きましたが、基本的にはやっていることは変わりません。 まず、施設の点データ
あなたがInstagramにアップした写真は全世界に向けて公開されています。
「そんなの分かってるよ！」という人も多いと思いますが。 Whatsthereという、地図上でInstagramの写真を検索できるサイトが面白くて最近よく見ています。 左上の検索窓に「Tokyo」とか「Takasaki」とか「Maebashi」とか入れて検索すると、Instagramにアップされた各地の写真が一覧として出力されるのですが、たぶん、こういったサイトで検索されるようなことを想定していないんじゃないかという写真が結構出てきます。写真を中心としたSNSってTwitterとかに比べるとプライベート感みたいなものが発生しやすいのかもしれません。フォロアーだけに見せているつもりでもAPIを通じていろんなサービスで見れる状態になっていたりします。その辺りわかっていてアップしているなら全然問題ないのですが、なんとなく心配になったので記事にしてみました。 Instagramの公開設定 Insta
オープンでないオープンデータに注意
インターナショナルオープンデータデイに向けて「オープンデータ＆公開データのまとめ」のリンクを整理していたら、自治体がオープンデータとして公開しているデータの中に、商業利用不可であったり改変・２次利用禁止のデータが含まれているのを知ったので別途まとめてみました。 （あくまで自分が見つけた範囲内で、全て掲載できているわけではありません） オープンではないオープンデータまとめ これらのデータをハッカソンで使う分には問題ないはずですが、ハッカソン後、ビジネス目的で利用したりすると問題になる可能性があるので確認しましょう。 ちなみに、上記で表示しているオープンデータの広報用ロゴマークも使用制限がいまいち不明瞭だったり、改変時には連絡が必要です。ぶっちゃけ、民間企業の公式アカウントが自らコラ素材を配布しているご時世に狭量なことよのう……と思ったりします。ゆるキャラ狙いのデザインなんでしょうけど、ゆるキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ファンタジー世界の地図の書き方参考書
線グラフを群馬県にする