D3の投影法を使ってDeck.glに地図を表示する
概要 Deck.glでサポートされている地図の投影法は、基本webメルカトルになるのですが、d3-geo-projectionを使ってwebメルカトル以外の投影法で地図を表示します。 サンプルコード ウインドが小さいと何やっているか分かりづらいので、こちらで確認してください。 概要 やっていることは単純で、読み込んだgeojsonのgeometry.coordinates(緯度経度)の値を値をd3のプロジェクション関数を使ってスクリーン上の座表に変換し、それをDeck.glのPolygonLayerでポリゴンとして表示しています。 const layer = new PolygonLayer({ id: 'polygon-layer', coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, data: data.features, stroked:
deck.glとD3.jsを組み合わせて、地図上にボロノイ図を描画する
概要 deck.glを使ってWebGLで描画した地図の上に、D3.jsを使ってsvgをオーバーレイしボロノイ図を描画します。 ソースコード 解説 deck.glでは、緯度経度と画面上の座標の投影変換をViewportクラスが担っています。 Viewportクラスは通常外部から利用できるような形でインタンス化されていませんが、サブクラスであるWebMercatorViewportを利用することで、投影変換を行うためのprojectメソッドを外部から利用することができます。 WebMercatorViewport Class projectメソッドを使って母点の画面上の座標を取得し、それらを基にd3-voronoiモジュールを用いてボロノイ図を描画するための座標を算出しています。 あとは、webGL上にオーバーレイしたSVG要素にPathエレメントを設置してボロノイを描画しています。 impo
18世紀〜19世紀の情報伝達速度を視覚化してみた。
物語そのものも面白いのだけれど、途中にはさまれたコラムが充実した内容でとても勉強になる。 なかでも「女騎士でも屈しない会計講座④ ニュースを加速せよ」という記事に掲載されていた「1798年〜1891年におけるロンドンまでの情報伝達速度」の表が興味深かったのでD3で視覚化してみた。 (ちなみにこの表は以下の書籍からの引用とのこと)
住んでる地域の世帯年収が一目瞭然 最も低いエリアはあそこだった！ - エキサイトニュース
市町村ごとの世帯別年収を地図上にマッピングしたウェブサイト「世帯の年間収入マップ」が公開され話題となっている。総務省が公開している「平成25年住宅・土地統計調査」のデータをもとに、エンジニアの清水正行さんが作成した。 地図上で任意の市町村にカーソルをのせると「300万円未満」「300万円～500万円」「500万円～700万円」「700万円～1000万円」「1000万円以上」の世帯がどれほどの割合いるかが表示される。また、画面左下のバーを調節すれば「年収300万円未満世帯が40％を超える地域」などが指定でき、該当地域が赤く塗られる。 年収1000万円以上が最も多い地域 高年収の世帯が特に多い地域はどこなのだろうか。年収1000万円以上の世帯が20％を超える地域という条件でフィルタリングしたところ、「東京都千代田区」「東京都中央区」「東京都港区」「神奈川県青葉区」が該当した。特に東京都港区は、
ウクライナのデータジャーナリズムサイト「Texty.org.ua」
Texty.org.uaは専門家と市民ジャーナリズムによる、社会的、政治的、分析的な報道を行うインターネットニュースメディアです。インフォグラフィクやデータビジュアライゼーションなどを活用したグラフィカルなニュース記事を2010年から配信しています。 クオリティの高いデータジャーナリズムが活発に行われているので、ビジュアライゼーション等に関心がある方にはとても参考になるサイトです。 Infoviz – Texty.org.ua How to find the Lenin’s Square Як знайти площу Леніна(English version) 先日登壇させていただいた「地理情報システム学会研究発表大会」の中で、D3.jsを使ったデータジャーナリズム事例の一つとして紹介させていただいた記事です。 この記事は、ウクライナの各都市にソ連式の名称がついた通りがどのくらい残っ
「地理情報システム学会研究発表大会」で発表したスライド
先日、行われた「第24回学術研究発表大会」にて発表したスライドです。 「データビジュアライゼーションの現在」というセッションの中で、「最新のジオビジュアライゼーション事例」を紹介させていただきました。 最新のジオビジュアライゼーション事例 基本的には、「最近、こんなサービスやライブラリが話題だよ！」「最近、こんな作品があったよー」といった内容です。スライドの中の画像はリンクになっているので、興味があるかたはクリックしてみてください。 紹介しきれなかった事例などもあるので、それらについてはこのブログで補足していこうかなと思います。 なお、Hackpadも公開されているので、興味がある方はそちらもどうぞ。 GISA特別セッション(6)「データビジュアライゼーションの現在」12:40〜14:20@443教室 – hackpad.com
大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。
[2016/6/8 data update] 以前、大阪都構想住民投票結果の地図を作った際に、大阪市のオープンデータの中に犯罪発生個所データがあるのを発見したので、そのなかから「ひったくり発生個所」データを視覚化してみました。 大阪市市民の方へ 大阪市の犯罪発生情報 example データの読み込みと整形処理が結構重いので、ページが表示されるまでに時間がかかります。 画面上位にある「被害者の年齢」や「事件発生時刻」のヒストグラムは、バーをクリックするとデータの絞り込みを行えます。グラフの空白部分をクリックすると、絞り込みを解除します。 地図上のエリアをクリックすると下に事件に関するデータを表示します。 めんどうだったこと 公開されているcsvの町名の一部が旧漢字だったため、e-statから取得した町丁目境データと名寄せするのがめんどくさかったです。 本来は新漢字に寄せた方がよいのでしょうが
「線グラフを群馬県にする」のはできたので、今度は都道府県を散布図にしてみた。
迷走中。 example 前回、線グラフを群馬県にしましたが、今回は都道府県を散布図にしてみました。 クリックすると、都道府県になったり散布図になったりします。（値はランダムです） 散布図から都道府県に戻るときのアニメーションが個人的に好きです。 （ちなみに北方領土や佐渡島などがないのは政治的な主張とかではなくて、ただたんに円形に変形する際に島ポリゴンの扱いに困った結果、めんどうになったので消すという所業にでた結果です） 技術的には線グラフを〜より「群馬県をバブルっぽくしてみた」のやりかたに近いです。 地形のパスを円系に変形したのちTranslateを使って位置を変更しています。 【関連】 【D3.js】Shape Tweening 練習中
GIS - Shapefile を GeoJSON に変換！
mk-mode.com Linux, Debian, IT, Server, PG, Ruby, Rails, Python, C++, Fortran, PC, MariaDB, math, GIS, etc... こんにちは。 地理情報データの業界標準である Shapefile を GeoJSON 形式に変換する方法についての記録です。 0. 前提条件 Linux Mint 17.1(64bit) での作業を想定。 今回、Shapefile は国土交通省・国土数値情報を使用する。（参照「QGIS(Quantum GIS) - 国土交通省・国土数値情報からの地図表示！」） ポリゴン（地物）を都道府県単位で融合済み。（参照「QGIS(QuantumGIS) - 国土数値情報・ポリゴンの融合！」） 全都道府県分の Shapefile を１つ（ファイル名： “japan.shp”）に統合済み。
GIS - GeoJSON を TopoJSON に変換！
mk-mode.com Linux, Debian, IT, Server, PG, Ruby, Rails, Python, C++, Fortran, PC, MariaDB, math, GIS, etc... こんにちは。 Web サイトで地図を表示するのに D3.js というものを使用するのですが、データ形式が GeoJSON か TopoJSON でなければなりません。 GeoJSON はファイル容量が非常に大きいので、TopoJSON に変換して容量を小さくするとパフォーマンスも向上するでしょう。 以下、 GeoJSON 形式のデータを TopoJSON 形式に変換する方法についての記録です。 0. 前提条件 Linux Mint 17.1(64bit) での作業を想定。 GeoJSON 形式のデータファイル準備済み。（参照「GIS - Shapefile を GeoJSON
【D3.js】Shape Tweening 練習中
D3.jsを使ったPathのアニメーションについて勉強中です。 path要素のアニメーションはcircle要素やrect要素を使ったアニメーションより、いろいろと手間がかかるのですが、その中でも地理情報を元に作成したPathを動かすのは結構難儀だったりします。 でも、これができるといろいろと表現の幅が広がるので、知恵熱だしながら下記サンプルを元に習作をつくってみました。 Shape Tweening Bubbly Gunma 上記サンプルを元に群馬県をバブルっぽくしてみました。 example ほとんど上記サンプルのままですが、簡単に説明すると、各市ポリゴンの中心座標を取得し三角関数を使って円の座標データを別に作成しています。円の描き方に関しては下記記事がとても参考になります。 openFrameworks – いろいろな方法で円を描く、インタラクションを付加する 線グラフを群馬県にする
戦後・復興期と現在の空中写真を重ねて比較してみた
昨日の続き。 example Facebookにて、レイヤーを重ねて比較するサンプルコードを教えていただいたので、やってみました。 サンプルをちょっと弄っただけですが、一応Y軸にもスライドできるようにしてみました。 上のスライダーを動かすとY軸が、下のスライダーを動かすとX軸の表示領域が変わります。 重ねたレイヤーをcssのclip機能で切り抜いて表示・非表示を操作しています。 サンプル var ort = L.tileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { attribution: "GSI Ortho", maxNativeZoom: 17, maxZoom: 20 }); var ort1940 = L.tileLayer( 'http://cyberjapandata.gsi.go.jp
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Sandbox を知っていますか？ -ArcGIS API for JavaScript をより身近に-
Sandbox とは、Esri が公開している ArcGIS API for JavaScript のサンプル アプリケーションのソースコードを開発環境なしで書き換えて動作を確認できるサービスです。開発環境を持っていなくても、Web ブラウザさえあれば、だれでも Sandbox を利用することができます。以下では、Sandbox へのアクセス方法と使い方をご紹介します。 ■ArcGIS API for JavaScript のサンプル ページからアクセス ArcGIS for Developers の ArcGIS API for JavaScript サンプル ページ（英語ページ）では、各機能に対応したサンプル アプリケーションが公開されており、実際に動かしたり、ソースコードを確認したりできるだけでなく、アプリケーションのファイルをダウンロードして利用することもできます。現在では、[Ex
Adventar
12月1日から25日まで1日に1つ、みんなで記事を投稿するAdvent Calendarの作成や管理をおこなうことができます。
D3.jsとFabric.jsを使ってcanvasに描画する
d3.js Advent Calendar 2013 4日目の参加記事です。 以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。 Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。 最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2015年までに発売されたD3.js参考書をまとめてみた。
Linkis.com - Brand shared links with your info
Linkis.com - Brand shared links with your info
d3.js Advent Calendar 2013 - Adventar