巨大な地理空間データをサクッと可視化できる、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
D3.js version.4を学ぶための学習リソースの紹介。
この記事は「D3.js Advent Calendar 2016」 参加記事です。 D3.jsメジャーバージョンアップ 2016年6月28日に、約４年ぶりとなるメジャーアップデート、D3.js ver.4が公開されました。 ながらく利用されてきたver.3から大幅な変更が行われ、とくに命名規則が大きく変わったため、ver.3のコードはver.4ではほとんど動かなくなっています。 どちらを使うべきか 各種プラグインなどのver.4への移行はだいぶ進んでいるとはいえ、ネット上のドキュメントなどはいまだver.3を対象としたものが多く、また現在出版されている日本語の参考書は全てver.3を元に書かれています。 しかし、ver.4には、ver.3での反省点も含め、アルゴリズムの最適化や、モジュール化、ver.3にはなかった便利な機能が多数追加されているので、個人的にはver.4をお勧めします。 私
「ライフゲームの世界」という動画が面白すぎて眠れなくなったのでブログ書く。
ネタが無いので更新する予定では無かったのですが、ニコニコ動画でたまたま観た動画が面白すぎて感動したので紹介。 ライフゲームについては動画１で丁寧に説明されているのでそちらを。 一つの動画につきだいたい５分から１０分程度なので、最初からちゃんとみることをお勧めします。 ８個目の動画で、背中がゾクゾクとするような感動をきっと味わえるはずです。 非常に単純なルールによって、とても複雑な仕組み(世界/生態系)が形成されるのがライフゲームの醍醐味、魅力ですがその神髄を味わえます。 いやー、良い動画と巡りあった。 ライフゲームはJavaScriptでも作成することが可能です。 P5.jsを使って書いたサンプルコードを掲載しておきます。 （右画面をクリックすると実行されます）
【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
Web地図のあり方をかえるかもしれない?! 地図専用アクセス解析サービス「Maptiks」
MaptiksはLeafletやOpenLayers、Google Maps APIなどで作成された地図にたいするユーザーのアクティビティログを収集することができるWeb地図専用のアクセス解析サービスです。 Welcome to Maptiks – Analytics for Web Maps from will cadell on Vimeo. Maptiksを利用すると、地図上の各レイヤーごとの読み込み時間や表示回数、ユーザーが良く見ている位置やズームレベル、マーカーごとのクリック数などを集計し分析することができます。 サンプル 下記は先日公開した「大阪市ひったくり発生個所マップ」のアクセス解析画面です。 ・地図全体とタイルレイヤーごとのステータス ・ズームレベルアクティビティのヒートマップ 感想 ユーザーがWeb地図上で「どこらへんのエリアをよく見ているのか」や「どのマーカーをクリッ
D3.jsで棒グラフを広げるUIを作ってみた。
example 棒グラフをクリックしたら、画面いっぱいまで広がって詳細を表示するというUIを作ってみました。 詳細情報を沢山表示したい場合には便利かもしれません。 D3を使えば簡単に作れるかな？と思っていたのですが、SVGの表示順の罠にはまって結構面倒なことに。 SVGにもz-indexが欲しくなりました。 表示順の罠 SVGでは要素の順番で重なり方が決まります。 下記の例では、赤いcircle要素の後に青いcircle要素が設置されているため、青い円が赤い円の上に重なって表示されています。 <svg width="300" height="100"> <circle cx="100" cy="50" r="50" fill="red" /> <circle cx="150" cy="50" r="50" fill="blue" /> </svg>
大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。
[2016/6/8 data update] 以前、大阪都構想住民投票結果の地図を作った際に、大阪市のオープンデータの中に犯罪発生個所データがあるのを発見したので、そのなかから「ひったくり発生個所」データを視覚化してみました。 大阪市市民の方へ 大阪市の犯罪発生情報 example データの読み込みと整形処理が結構重いので、ページが表示されるまでに時間がかかります。 画面上位にある「被害者の年齢」や「事件発生時刻」のヒストグラムは、バーをクリックするとデータの絞り込みを行えます。グラフの空白部分をクリックすると、絞り込みを解除します。 地図上のエリアをクリックすると下に事件に関するデータを表示します。 めんどうだったこと 公開されているcsvの町名の一部が旧漢字だったため、e-statから取得した町丁目境データと名寄せするのがめんどくさかったです。 本来は新漢字に寄せた方がよいのでしょうが
大阪都構想住民投票結果、各区毎の得票差
自分は大阪から遠く離れている群馬に住んでいるので地元の感覚とかわからないのですが、ちょっと気になったので作ってみました。 地域差 青が「賛成」、赤が「否定」である。投票総数で観ると、賛・否の差は総数でわずか1万票強足らずで大差ないが、地域別に見てみるとはっきりとその地域差に傾向があることがわかる。一目瞭然のように、大阪市北部は「賛」、大阪市南部は「否」と区分されている 確かに２極化して塗り分けると、北部と南部で明確な差があるように見えます。 しかし、上記記事で「投票総数で観ると、賛・否の差は総数でわずか1万票強足らずで大差ない」と言っている通り、今回の選挙はかなりの僅差だったので区毎の得票数の差というのも考慮しないと何とも言えないのではないかと思います。 例えば、東成区などは賛成票が過半数を超えてはいますが、その得票数の差はわずか22票だったりするので、これをもって「東成区は大阪都構想へ賛
新しい地理院地図のソースコードがGitHubに公開されていたので、Fx0(FirefoxOS)にアプリとしてインストールしてみた。
国土地理院、「地理院地図」がスマホ対応、「触地図」特設サイトや西之島のGIFアニメも登場 スマートフォンやタブレット端末に対応して使いやすくなった地理院地図ですが、そのソースコードがGithubにて公開されています。 gsi-cyberjapan/gsimaps (利用する場合の注意点については、README.mdを参照ください) すごい……すごいぞ国土地理院！ これで、誰でも自分専用の地理院地図を作って利用することができますね！ すでに「地図タイルを追加する方法」を書かれている方も。 地理院地図に地図タイルを追加して公開する方法 そこで自分も、最近買ったばっかりのFx0に地理院地図をアプリとしてインストールしてみました。 やったこと 下記からzipファイルをダウンロード。 gsi-cyberjapan/gsimaps １．Firefox Developer EditionのWebIDEで
Excel上でD3.jsを使ったグラフを表示する「E2D3」を使ってオリジナルなグラフを表示してみた。
※記事内の情報が古くなっています。 ファーストインプレッション！ E2D3 ver. 0.2 (Excel to D3) | MA【エム・エー】 by Mashup Awards Excelでいつも作っているグラフをもっと恰好良くしたくないですか？でも，デザインソフトを自分で習得するには時間がかかりますし，グラフ作成をデザイナーに依頼にはお金がかかります．そこで我々は，ExcelからD3ライブラリーを簡単に呼び出せるOffice用アプリE2D3（Excel to D3）を開発しました．D3は2014年，世界で最も注目されているグラフィックライブラリーです．E2D3を使えば，D3の詳細な中身を理解する必要なく，簡単なExcel操作のみでビジュアルインパクトが強烈なグラフを作成できるようになります！ 以前から注目していた「E2D3」がリリースされたそうなので使ってみました。 詳しい内容は以下の
Leaflet.jsを使って、巨大な画像を地図のように表示するプラグイン「Leaflet.Zoomify」
下記は画像なので動きません。 「Leaflet.Zoomify」は、地図ライブラリのLeaflet.jsを使用して画像を地図のように表示するプラグインです。 下処理として、「ZoomifyExpress4」というアプリケーションを使って画像をタイル化します。（解凍したファイルの中から「Zoomify Converter.exe」を実行し、タイル化する画像を選択すれば後は自動で処理がおこなわれます） タイルに変換すると容量がかなり増えるので気を付けてください。 サンプル STARMEN.NETからダウンロードした「Full Map of MOTHER / EarthBound Zero」画像をZoomifyExpress4を使ってタイル化し、Leaflet.Zoomifyで地図として表示しました。 ※下記の地図は動きます。 leaflet.jsを読み込んだ後に、L.TileLayer.Zoo
【D3.js】データを絞り込むユーザインタフェースとしても使える、パラレルコーディネート図を作成する
example 昨日の「オンライン学習部 #0」で作成したグラフです。 下記dot appendのチュートリアルビデオをみて作りました。 [dot append: 11] parallel coordinates from Ian Johnson on Vimeo. ファンキーな音楽とともにイケメンなお兄さんがライブコーディングしながらD3.jsのプログラミングを教えてくれます。 パラレルコーディネートは、項目数(次元)の多いデータの概観把握に適したグラフですが、D3.jsを使ってインタラクティブに操作できるグラフとして作成することで、単にデータを可視化するだけでなく、多次元データの絞り込みが行えるユーザインタフェースとして利用できるところが面白いですね。 今回作成した図では、下記のように「年齢は20代で身長は180cm以上でぇ、年収が800万以上の人♪」みたいなちょっとイラっとする(?)
【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
[Autocomplete] かな入力で名前（漢字）を絞り込むセレクトボックス
example 入力した「ひらがな」を元に名前(漢字)の一覧を絞り込むセレクトボックスが必要になったのですが、なかなか用途に見合うサジェストプラグインがなかったのでjQuery UIのカスタムコンボボックスを改良して作ってみました。 サンプル jQuery, jQuery Uiのライブラリとともに「autocomplete.kana.js」を読み込むんでください。 option要素に設定したdata-kana属性の値で絞り込みを行うコンボボックスを表示します。 <!doctype html> <html lang="jp"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete かな絞り込み</title> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/lib
![[Autocomplete] かな入力で名前（漢字）を絞り込むセレクトボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/61c228aa2713b54e8d497e894cd3b82fd67cf6f7/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F04%2Fautocompletekana201404.jpg)
Google Map上にGeoJSONデータを表示する | GUNMA GIS GEEK
Google、地図アプリのデベロッパー向けJavaScript APIでGeoJSONをサポート Google Maps APIでGeoJSONデータがサポートされたらしいので、試してみました。（一部、D3.jsを使用しています） 【参考】 Combining and visualising multiple data sources – Google Maps API — Google Developers ポイントデータを表示 ポイント(点)データは、スタイルを指定しないとマーカーで表示される。 example サンプルコード google.maps.event.addDomListener(window, 'load', function() { //Google Maps初期化 var map = new google.maps.Map(document.getElementByI
D3.js勉強会（地図入門）を開催しました。
example D3.js勉強会（地図入門）が無事終了しました。 前回は、ネタ不足で時間が余りましたが、今回はそんなこともなくそれなりに内容のある勉強会になったのではないかと。 逆に時間が足りず伝えきれなかった部分もあるとは思うのですが、目標であった「塗り分け地図(コロプレス図)の作成」まで出来たので良しとしようかなと。 勉強会で使用したスライドとコードを置いておきます。 D3で地図を描こう！ 1 D3で地図を描こう！ 2 サンプルコード (サンプルコードはローカル環境では動きません。サーバーにアップロードするか、同梱したserver.jsを使用してください) スライドの方は内容をまとめきれず、口頭で補足・説明した部分も多いので、これだけみてもよくわからないかもしれません。 まぁ、それでも多少参考になれば良いかなぁと。 ひとまず、やりたかったD3 geoに関する勉強会が開催できたので満足で
D3.jsで再利用可能なコードの書き方を教えてくれる参考書
Developing a D3.js Edge D3.jsを取り扱った参考書としては、「Getting Started with D3（D3をはじめよう）」や「Interactive Data Visualization for the Web」、「D3 Tips and Tricks」などがありますが、「Developing a D3.js Edge」は、一連の参考書より深く踏み込んだ内容となっています。 本書の概要は以下となります。 再利用可能なD3プラグインの作成 Jasmineを用いてのユニットテストやTDD/BDD Crossfilter.jsとD3.jsの連動 アプリケーションへブラッシングを組み込む 地図APIの作成 最終的に以下のような、円形のヒストグラム図と地図が連動するビジュアライゼーションを再利用可能なプラグイン(オリジナルなグラフレイアウト)として作成します。 現時
RPGを作るのに便利なアルゴリズムを提供する「rot.js」
rot.js: ROguelike Toolkit in JavaScript 「rot.js」はローグライクゲームを作成するのに便利なライブラリです。 “ローグライクゲーム”とは、ダンジョンが自動作成されるタイプのRPG(トルネコの不思議なダンジョン、風来のシレン等）のことですが、rot.jsによって提供される機能は、通常のRPGやシュミレーションゲームなどを作るのにも便利そうです。 ■ マップ自動作成 さまざまなタイプのマップを自動で作成することができます。 HEXタイプのマップも作成できます。 ■ 最短距離探索 ２点間で、障害物をよけながら最短の経路を検出します。 ■ FOV プレイキャラクターの現在位置から見えるエリア(視界)を検出します。 その他、ターンを管理する機能などがあります。
データビジュアライゼーション「d3.js」 | GUNMA GIS GEEK
最近、「データビジュアライゼーション」に興味を持ち始め d3.js というjavascriptのデータビジュアライゼーションライブラリの使い方を学び始めました。海外では、結構有名なライブラリらいしいのですが、日本では利用者が少ないようなので、勉強がてら紹介をしてみたいと思います。 d3.js http://d3js.org/ 「データビジュアライゼーション」については以下を。 データビジュアライゼーションの美 ■データ駆動ドキュメント d3.jsは、データを基にDOM(ドキュメントオブジェクトモデル）を操作するためのライブラリです。 データとDOMのエレメントを結びつけ、データの変化をドキュメントへと反映させることができます。 d3.jsは、配列を渡すだけでグラフィカルな結果を出力してくれるようなフレームワークではありません。 その代わりに、柔軟なカスタマイズが可能で、webの標準の機能（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
