3D都市モデル（PLATEAU）のデータを使ってやってみたこと。
概要 国土交通省主導の、都市の3Dデータをオープンデータとして公開するプロジェクト「PLATEAU」 東京以外の都市でも公開されたデータが増えてきて、いろいろと遊べるようになってきました。 私はDeck.glというWebGLベースの3D表現に長けた地図ライブラリをよく使っているのですが、日本ではなかなか建物の3Dデータを手に入れるのはコストが高かったため、ちょっとした思いつきを試してみるのもハードルが高かったのですが、PLATEAUのおかげで思いついたアイデアを色々と試すことができるようになったので、とてもありがたく思ってます。 そこでここ最近、いろいろ試してみたことを一通りのせてみました。 PLATEAUのデータを使ってできることの一部ではありますが、「3D都市データがあると、こんなことができるんだな」という参考になればさいわいです。 CityGMLや3D-tileなど今まで触ったことの
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:
医療機関の医療提供体制の状況を地図にプロットした。
新型コロナウイルス感染症対策推進室（内閣官房）にて、先日公開された「全国医療機関の医療提供体制の状況」のデータを地図にプロットしてみました。 政府CIOポータルの方でも地図にプロットされた状態で公開されているのですが、少し動作が重くて見づらかったのと、 Deck.gl + Material-UI の練習がてら作ってみました。 アプリの説明 データ量(約2MB)が多いため、初回アクセス時は表示されるまでに結構時間がかかります。 スマホでも見れますが、データ量が多いのと操作しづらいのでできればPCで見てください。 ＊ PC（モダンブラウザ）推奨 医療提供体制の状況マップ サークル表示 全ての医療区分データをポイントとして表示しています。遠目でも見やすいようにちょっと大きめに表示しています。 データは一病院ごとではなく、医療区分(外来や救急など）ごとになっているので、同じ病院では同じ位置に重なっ
Uber社の全部盛りデータ可視化ツールスイート「Vis.gl」一覧
Vis.gl – Uber Vis Team Uber社がオープンソースとして公開している可視化ツールでは「deck.gl」が有名ですが、他にもUber社の持つ巨大なデータセットを分析するために作成されたさまざまなデータ可視化ツールがオープンソースとして公開されています。「Vis.gl」はそれらUber社が作成し公開している可視化ツールをまとめた呼び名で、現在では11点ほどのデータ可視化に有用なツールが公開されており今なお増え続けています。 ここでは、「Vis.gl」スイートとして公開されているツールを一通りざっと紹介したいと思います。（一部、Vis.gl以外でUber社が公開しているツールも含んでいます） ■データビジュアライゼーションフレームワーク ・deck.gl WebGLを用いて大量のデータを可視化することに長けたフレームワーク。 レイヤーベースのコンポーネントとして作られていて
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
労働関係法違反リストをcsvにしてみた。
厚生労働省が公開した「労働基準関係法令違反に係る公表事案」のPDFからテーブルデータを抜き出してcsv化してみましたた。 update: 2017/9/15 170510-01.csv pdf-table-extractを使ってサクッとできそう！ とか思っていたのですが、セル内に改行や全角・半角空白が混じっているとうまくパースできないらしいです。 仕方がないので、一部強引な方法で整形しました。 [追記] 公開されているpdf、ちゃんと毎月更新されているんだけど、ファイル名が170510-01.pdfのまま追記されていく形式なのでわかりずらい。 サンプルコード const pdf_table_extractor = require("pdf-table-extractor") const d3 = require("d3-dsv") const fileName = process.argv
Google Earth Engineはじめました。
ここ数週間、ずーとGoogle Earth Engineを触って遊んでいて、なんとか入門的なチュートリアルぐらいなら記事としてかけるのではないかと思ったので、Google Earth / Google Earth Engine Advent Calendar 2018 – Qiitaに参加してみることにしました。 Google Earth Engineとは Google Earth Engine は、日々刻々と変化する地球の様子を、動的なデジタル モデルとして表現するためのオンライン環境監視プラットフォームです。数ペタバイトもの衛星写真データを保持しており、それらの情報を高機能ツールで分析して地図上に視覚化することができます。たとえば、アマゾン河流域の熱帯雨林やコンゴの水資源の変化を視覚化できます。 GEEは、グーグルのクラウドに保存されたペタバイト級の衛星データにアクセスし、ブラウザ上で
巨大な地理空間データをサクッと可視化できる、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
2018年の抱負
もう一月も終わろうかという時期ですが、遅まきながら２０１８年の抱負なんぞを書いておこうかと思います。 ２０１７年は、気の向くまま色々なものに手を出していた年でした。 基本データビジュアライゼーションやGISの勉強は続けてはいたのですが、Micro:bitやWeb bluetooth、WebGLや、A-frame、Reactなどのフレームワークなど、入門的なコードをちょこちょこ書いては動かして遊んでいました。 Get Start的なチュートリアルをちょこっと触っては移り気に別のものに手をだしていたので、ブログに書くネタもあまりなくアウトプットができませんでした。 なので、2018年は、17年に学んだものを少しづつ繋げる年にしたいと思います。 無節操に色々なものに手をだしてはいましたが、それなりに自分の中にテーマはあって、最終的につなぎ合わせて遊べるものを作りたいなと思ってます、 D3とA-F
TEDで学ぶデータビジュアライゼーション
TEDに公開されている日本語字幕の付いた動画のなかから、データビジュアライゼーションに関連する動画をピックアップしてみました。 視覚化 データビジュアライゼーションの美 私のデータセットであなたのマインドセットを変えてみせます 人間性を巧みに描く 人類の知識を表す視覚的表現の歴史 データで描く、示唆に富む肖像画 データの中に自分を見つけるには 統計 誤った統計を見抜く３つの方法 統計を好きになるべき理由 統計に騙される陪審員たち データ分析 ハリウッドに潜む性差別のデータ ビックデータを使ったNYCでの最悪な駐車場の見つけ方 アンドレア・シュライヒャー 「データに基づく学校改革」 地図 スティーブ・ジョンソンの感染地図 広げる価値のあるアイデアの地図作り （場所を示すだけではなく）私達が何者かを示す地図 分かりやすい地図のデザイン
ファクトの価値を取り戻す！ ブロックチェーン技術を用いて分散型ニュースプラットフォームの構築を目指す「DNN」
DNN – Decentralized News Network 猫も杓子もブロックチェーン。最近いろんな意味で話題に上ることの多いブロックチェーンですが、そんな中、現代のニュースメディアがかかえる課題をブロックチェーン技術を用いて解決しようというアイデアが公開されていました。 その名もDNN。 DMMではないです。 Decentralized News Network、略して(DNN) 日本語にするなら「脱・中央集権型ニュースネットワーク」でしょうか。 今の所ティザーサイトがあるのみでで現物はありません。 草案が先月公開されていたらしいのですが、斜め読みしてみたところいろいろ面白そうだったので紹介します。 DNN概要 DNNは、読者、記者、およびレビュアーのコミュニティによってキュレーションされたファクトベースコンテンツを配信する、ニュース作成と分散型ネットワークを組み合わせたプラットフ
1970年から2015年までのテロ発生箇所を地図にプロットしてみた。
日本でも結構な数のテロ事件が発生している。 Demo 概要 The Global Terrorism Database (GTD) で公開されている1970年から2015年までのテロデータの内、ロケーション情報（緯度経度)が判明している152,253件を地図上にプロットしてみました。 全件表示と、各年毎にフィルタリングして表示することができます。 マーカーをクリックすると簡単な詳細をポップアップで表示しています。とくに翻訳などしていないのでChromeの日本語翻訳機能などを使って翻訳してください。 ズームレベルが大きすぎるとマーカーが消えてしまうなどの修正できてないバグがあります。 ※ スマホでも一応表示はされますがめちゃくちゃ重いので、できるだけPCでご覧ください。 備考 テロ事件が少ないといわれる日本ですが、プロットしてみると意外と件数があります。 2014年の「札幌連続ボンベ爆発事件
高崎にて女性向けプログラミングワークショップ「Rails Girls」が開催されます。
イベントページ Takasaki 17 June 2017 参加登録は以下ページより Rails Girls Takasaki #1 Rails Girlsとは？ Rails Girlsは、もともとフィンランドで始まった女性向けのプログラミングのワークショップでしたが、その活動が世界中に広まるにつれ、各地域のコミュニティの名称になりました。 フィンランド発プログラミング女子「レイルズガールズ」 世界で拡散中 そんな、Rails Girlsのワークショップが今月16日・１７日に、高崎で初めて開催されます。 高崎付近で、プログラミングに関心のある女性の方はぜひ参加してみてください。 なお、男性の方はプログラミングに関心のある女性と同伴であれば参加可能だそうです。 FAQ 参加費はどのくらいかかりますか？ 無料です。申し込むときにはわくわくした気持ちだけあればいいです。 どのような人が参加するの
二次元カーネル密度推定プラグイン「d3-contour」
d3-contourは、二次元の値を持つ配列にたいして輪郭ポリゴンを生成するD3プラグインです。 GeoJSON MultiPolygonジオメトリオブジェクトとして出力されるので、散布図以外にも地図上のポイントを元にした等高線やヒートマップの生成などに利用することができます。 サンプル 群馬県オープンデータサイトにて公開されている「AED設置場所情報」から、高崎市のデータを抜き出し、d3.contourDensityメソッドを使用してヒートマップを作成しました。 example d3.contourDensityの利用法はとても簡単で、基本的にはx,yに対応するアクセサを指定してあげれば、閾値に準じた輪郭ポリゴン(geojson)を生成してくれます。 //ポイントデータ var data = d3.range(40).map(function(){ return {x:~~(Math.r
バイナリベクトルタイルの作り方
「全国のガソリンスタンドの位置を地図上にプロットしてみた。」で作成したバイナリベクトルタイルの作業工程メモです。 バイナリベクトルタイルとは 巨大なGeoJSONを分割しタイル化することで必要な情報だけを読みだして地図上に表示します。さらに分割したGeoJSONをバイナリファイルにすることでオーバーヘッドを減らしています。 バイナリベクトルタイル出会うまでの私 １．GeoJSON爆誕 「フロントエンドエンジニアでも簡単に地理情報を扱えるJSON形式の規格考えたよ！」 「素晴らしい！」 ２．TopoJSON誕生 「GeoJSON重くない？ もっと効率のいい規格作った！」 「最高！」 ３．ベクトルタイル到来 「GeoJSONを地図タイルみたいに分割して配信すればいいじゃないか！」 「なるほど。」 ４．バイナリベクトルタイル降臨 ＜ー いまここ 「シリアライズしてバイナリファイルで配信すればより
全国のガソリンスタンドの位置を地図上にプロットしてみた。
大量のデータを地図上にマッピングする練習として、国土数値情報から取得した平成２７年の「燃料給油所データ」をすべて地図上にプロットしてみました。 密度の高い地域と、周囲に全然ガソリンを給油できる場所が見当たらないような地域などが見えて、なかなか面白いですね。 demo 全部で、77,657�件のポイントデータになるためGeoJSONにして掲載すると重くて地図が動きません。 以前、D3.jsとcanvasを使って全国の病院位置を地図上にマッピングしてみたことがありますが、動作が遅く他の地図情報(背景地図など)と組み合わせて表示するのは難しそうでした。 【D3.js】約97,000件の位置情報を地図にプロットしてみた。 そこで今回はバイナリベクトルタイルという技術を使って地図上にマッピングいてみました。 割と現実的に許容できる重さになったかなと思います。 詳しい作業工程については別記事にしてあり
FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る
Gunma.web#23 のLTで知ってからずっと気になっていたFlashAirを買いました。 FlashAirとは FlashAirは、東芝から発売されている「無線LAN内蔵SDカード」です。 無線LAN内蔵SDカードをデジタルカメラの保存メディアとして使用すると、カードを抜き差しせずにPCやiPhoneなどのデバイスに画像を転送することができます。 【レビュー】「FlashAir」を使ってデジカメ画像のワイヤレス転送にチャレンジしてみた – 大容量モデルや高速モデルも揃え、使いやすくなった無線LAN対応SDカード (1) 普通のデジカメがカード一枚で無線LAN接続対応になる | マイナビニュース FlashAirは一般的な無線Lan内蔵SDカードとしての機能以外にも、様々な機能を持ったSDカードで、小型のマイコンとして使用することができます。 どんな機能が用意されているかは公式サイトに
【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で視覚化してみた。 (ちなみにこの表は以下の書籍からの引用とのこと)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
衆院選、投票率と比較第一党議席率の推移を可視化した。
