Map Projection TransitionsSmoothly animated map projections.
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
DVVX：データビジュアライゼーション入門 | OpenCU | Learning Platform Designed for Creative（クリエイティブの学びを共有するプラットフォーム）
そのD3.jsですが、まだまだ使いこなすユーザーが少なく、その可能性からしてまだまだポテンシャルがあるのが現状です。 有志によりスタートしたコミュニティ【DVVX（Data Visualization version X）】では、＜データビジュアライゼーションのための基礎知識＞と実際に＜D3.jsハンズオンセミナー＞をセットにしたワークショップを開催します。 講師は、日経新聞編集局のエンジニア清水正行さん。数年前から個人活動として多くのデータビジュアルをD3.jsによって作成し発表も行ってきました。今回、DVVXの活動において＜プログラム＞のメンターとしてワークを行っていただきます。 ＜こんな人におすすめ＞・情報デザインに挑戦したいエンジニア ・多量のデータを共有し積極的に活用してみたい人 ・Webサイトでデータプレゼンテーションしてみたい人 ・データとデザインの関係に関心がある人 ※様々
Civic Techのカレンダー | Advent Calendar 2016 - Qiita
Civic Tech （シビックテック）に関するアドベントカレンダーです。 シビックテック/シビック・テクノロジーとは、市民がテクノロジーを活用して自分たちの住む街を改善する取り組みの事を指します。 例えば・・・ 全国のシビックテック活動の紹介 各地のCode for Japan Brigade活動の紹介 地域の活動を初めて気づいたこと パパ・ママの為のシビックテック Code for America 研究 コミュニティデザインとシビックテック D3.js でオープンデータをビジュアライズしてみた Code for ◯◯立ちあげたった Code for Japan への提言 Code for Japanフェローからの報告 オープンデータ活用事例 などなど、お気軽にご参加下さい！ 参考： * 2015年：Civic Tech Advent Calendar 2015 * 2014年：Civi
地理空間情報 x ビジネス x オープンソースGIS 勉強会！ (2016/07/13 19:30〜)
注意 現在X(旧Twitter)でのソーシャルログインができない事象を確認しています。事前にX(旧Twitter)側で再ログインした上でconnpassのソーシャルログインを行うか、 「ユーザー名(またはメールアドレス)」と「パスワード」の組み合わせでのログインをお試しください。合わせてFAQもご確認ください。 お知らせ 2024年9月1日よりconnpassサービスサイトへのスクレイピングを禁止とし、利用規約に禁止事項として明記します。 9月1日以降のconnpassの情報取得につきましては イベントサーチAPI の利用をご検討ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用
青山スタートアップアクセラレーションセンター
青山スタートアップアクセラレーションセンター（ASAC）は、創業予定者や創業間もないスタートアップ企業をアクセラレートすることにフォーカスしたインキュベーション施設です。ASACのミッションは、ASACから世界のリーディングカンパニーを輩出することです。 ASACはコワーキングスペース、イベントスペース、先輩起業家等のオフィス及び宿泊施設から構成されており、アクセラレーションプログラム受講者が事業の成長に集中できる環境を提供します。
リクルート、バイト募集時の平均時給情報をオープンデータ化＆データを可視化した特設サイト公開
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
【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
18世紀〜19世紀の情報伝達速度を視覚化してみた。
物語そのものも面白いのだけれど、途中にはさまれたコラムが充実した内容でとても勉強になる。 なかでも「女騎士でも屈しない会計講座④ ニュースを加速せよ」という記事に掲載されていた「1798年〜1891年におけるロンドンまでの情報伝達速度」の表が興味深かったのでD3で視覚化してみた。 (ちなみにこの表は以下の書籍からの引用とのこと)
【D3.js】同じ面積の四角形で地図を描くプラグイン「Squaire.js」
最近アメリカのニュースサイトなどで見かけることが多くなった等面積の四角形で行政区等を表示する地図ですが、それらを簡単に作成するためのD3.jsプラグインが「Squaire.js」です。 Squaire.js プラグインを公開しているのはウォール・ストリート・ジャーナルです。 面積に惑わされずにコロプレス図を作成したいときに便利です。 サンプル bl.ocks.orgにSquaire.jsのカスタム機能を使って作った日本地図のサンプルを載せてあります。 日本地図だとどうしても、左上と右下の余白が大きくなって収まり悪いですね。 example 各都道府県の配置は「デザイン日本地図-フリー画像」を参考にさせていただきました。
アメリカの銃乱射事件をカレンダーに視覚化してみた。
Mass Shooting Trackerというサイトで2013年から2105年現在までの銃乱射事件に関するデータがcsvファイルで公開されていたのでカレンダーにして表示してみました。ついでにジオコーディングにかけてマッピングもしてみました。元データには大まかな住所データしかなかったのであくまで目安です。 Mass Shooting Maps Mass shootingの定義は媒体によってまちまちなのですが上記サイトでは「四人以上の死傷者がでた発砲事件」としているようです。 つまり、すべての発砲事件が掲載されているわけではないのですが、それでもカレンダーに表示してみるとほぼ毎日のようにどこかしらで事件が発生しているようです。びっくりですね。 距離的に近い事件は、発生日もちかかったりするのかなと思い、地図上で範囲を選択できるようにしてみたのですが、実際には日時も場所もバラバラで役に立ちません
住んでる地域の世帯年収が一目瞭然 最も低いエリアはあそこだった！ - エキサイトニュース
市町村ごとの世帯別年収を地図上にマッピングしたウェブサイト「世帯の年間収入マップ」が公開され話題となっている。総務省が公開している「平成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”）に統合済み。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Use E2D3 | E2D3
2015年までに発売されたD3.js参考書をまとめてみた。
