WebGL Globe形式のデータセットをCesium上に視覚化して表示する
<script type="text/javascript" src="http://shimz.me/libs/Cesium-1.5/Build/Cesium/Cesium.js"></script> /** * This class is an example of a custom DataSource. It loads JSON data as * defined by Google's WebGL Globe, https://github.com/dataarts/webgl-globe. * @alias WebGLGlobeDataSource * @constructor * * @param {String} [name] The name of this data source. If undefined, a name * will be derived from
GeoJSONをバイナリ化して圧縮するFlatGeobuf
FlatGeobufは良い、捗るぞ。 GeoJSON GeoJSON · GIS実習オープン教材 この数年でかなり普及の進んだGeoJSONですが、データ量が増えるとどうしても重くなりファイルサイズも肥大化するため扱いにくくなっていきます。 そこでGeoJSONの良さ(可搬性)を残しつつ、シリアライズ(バイナリ化)することで巨大なデータも扱いやすくしようという試みが行われてきました。 Geobuf mapbox / geobuf ファイルサイズが大きくなりがちなGeoJSONをprotocol buffersを使ってシリアライズすることで圧縮したファイルフォーマットです。GeoJSONに比べて８～６分の１ぐらいファイルサイズを抑えることができます。 GeoJSONをGeobufに変換するツールや、ブラウザ上で読み込んだGeobufファイルをGeoJSONに戻す(デシリアライズ)ためのJav
GeoJSONを使いこなすためのWebサービスまとめ
GitHubが地図表示に対応したり、Google Maps APIでも直接読み込めるようになったりと、着々と利用が進むGeoJSON。 D3.jsで地理情報を視覚化する際にも欠かせないものですが、そんなGeoJSONを扱うのに便利なWebサービスを集めてみました。 資料 GeoJSON フォーマット仕様 GeoJSONの仕組みを理解したい場合は、まずこれを読みましょう。 コンバーター ・mapshaper 地理情報の簡素化を行うためのサービスですが、Shape,geojson,topojsonを相互に変換するWebサービスとしても利用できます。 ・mapbox/csv2geojson 緯度経度を含んだcsvファイルをGeoJSONに変換するnode.jsツール。ポイントデータのみならず、ラインデータやポリゴンデータへの変換も可能。フロントエンドでも動作し、web上でコンバートを提供している
駅すぱあと路線図API Hacks! D3.jsを使ってSVGをオーバーレイする。
新しい地図サービスが始まったとき、誰もが気になるのは「この地図サービスでD3.jsは使えるのだろうか？」という点でしょう。心配ありません。駅すぱあと路線図でD3.jsは使えますよ！ 日本全国シームレスな鉄道路線図API「駅すぱあと路線図」、ヴァル研究所が無償提供を開始 駅すぱあと路線図APIのアクセスキーを取得したので、さっそく遊んでみました。 とりあえず、D3を使うまでの解説を載せておきます。 ※ exampleはフリープランを利用して作成しているため1日100セッションを越えると動作しなくなります。 ゲットスタート 駅すぱあと路線図APIは、汎用地図ライブラリのleaflet.jsを利用しているとのことなので、まずはベーシックなサンプルを作成してD3.jsを使うのに必要となるオブジェクトにアクセスできるか確認します。 開発用のドキュメントやサンプルコードは下記ページにて公開されています
3D都市モデル（PLATEAU）のデータを使ってやってみたこと。
概要 国土交通省主導の、都市の3Dデータをオープンデータとして公開するプロジェクト「PLATEAU」 東京以外の都市でも公開されたデータが増えてきて、いろいろと遊べるようになってきました。 私はDeck.glというWebGLベースの3D表現に長けた地図ライブラリをよく使っているのですが、日本ではなかなか建物の3Dデータを手に入れるのはコストが高かったため、ちょっとした思いつきを試してみるのもハードルが高かったのですが、PLATEAUのおかげで思いついたアイデアを色々と試すことができるようになったので、とてもありがたく思ってます。 そこでここ最近、いろいろ試してみたことを一通りのせてみました。 PLATEAUのデータを使ってできることの一部ではありますが、「3D都市データがあると、こんなことができるんだな」という参考になればさいわいです。 CityGMLや3D-tileなど今まで触ったことの
Mapbox GL JS ver.2はオープンソースではなくなってしまいました。
MAPBOX GL JS V2: 3D MAPS + CAMERA API + SKY API LAUNCH このブログでも何度か紹介したことがあるMapbox社が提供しているWebGLベースの地図ライブラリ Mapbox GL JSのver.2が公開されました。 Camera APIやSky APIなど、三次元での表現力を増すような新しい機能が追加され、またレンダリングスピードも向上しているそうです。 しかし、残念なことにオープンソースではなくなってしまいました。 Mapboxが提供するベースマップ(背景地図)などを使わなければ無料で利用することができたver.1と違い、ver.2はMapboxサービスのアクセストークンが必須となっています。また課金方法も変わっています。 下記、Issuesにver.2での課金について詳しい説明があります。 v2.0 changes merged wit
KMLをGeoJSONに変換する方法と、私が「KMLは爆発しろ」と思う理由
"自治体向けのオープンデータ支援策が明らかに" 『地理空間情報は「.gml」または「.kml」とする』 えぇーっ！ http://t.co/UDzn8RUoeH — 清水正行 (@_shimizu) May 29, 2015 先日、上記のような発表があって驚愕していたのですが、愚痴っても仕方がないので各自治体から公開される地理データがKMLになっても困らないようにと調べたGeoJSONへの変換方法を記載しておきます。 ちなみに今回はGoogle「マイマップ」で公開されている群馬県が誇る「焼まんじゅうマップ」を例題として使用させていただきました。 メニューにある下記の何と呼んでいいのか分からないボタンをクリックするとKMLをダウンロードできます。 なお、KMLが嫌いな理由は最後の方に書いてあります。 （GMLは、また別の機会に） ogr2ogr web client 手っ取り早くKMLをG
巨大な地理空間データをサクッと可視化できる、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地図クライアント「Leaflet」を使おう！
D3.jsと組み合わせても使いやすい、Web地図クライアントライブラリの大本命……だと、個人的には思ってる……たぶん。 leaflet leaflet.jsとは何か leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。 軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。 ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね？」という方も、一度触ってみてください。 そんな訳で、簡単な「Leaflet クイックスタート」的なものを書いてみました。 ベースマップの作成 cdnからcssファイルとjsファイルを読み込みます。 <link rel="stylesheet" href="http://cdn.le
まるでシムシティのような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
新しい地理院地図のソースコードがGitHubに公開されていたので、Fx0(FirefoxOS)にアプリとしてインストールしてみた。
国土地理院、「地理院地図」がスマホ対応、「触地図」特設サイトや西之島のGIFアニメも登場 スマートフォンやタブレット端末に対応して使いやすくなった地理院地図ですが、そのソースコードがGithubにて公開されています。 gsi-cyberjapan/gsimaps (利用する場合の注意点については、README.mdを参照ください) すごい……すごいぞ国土地理院！ これで、誰でも自分専用の地理院地図を作って利用することができますね！ すでに「地図タイルを追加する方法」を書かれている方も。 地理院地図に地図タイルを追加して公開する方法 そこで自分も、最近買ったばっかりのFx0に地理院地図をアプリとしてインストールしてみました。 やったこと 下記からzipファイルをダウンロード。 gsi-cyberjapan/gsimaps １．Firefox Developer EditionのWebIDEで
Googleが「Physical Web」という面白いことを考えているらしい。
Google、アプリを介さずモノのインターネットと会話できる標準規格Physical Webを開発中 – TechCrunch Githubにドキュメントやサンプルが公開されていました。 google/physical-web とりあえず、ざっと読んでみた感じだとモノ（自販機とか車とか）が、常に周囲に対してBluetoothを使ってURLをブロードキャストしていて、それをデバイス（スマホとか）がキャッチするとアプリ上に一覧表示するという仕組みみたい。 現時点ではアプリだけれど、最終的にはデバイスの組み込み機能になるべき！だそうな。Bluetoothを使うのも今のところ一番現実的だからって理由らしい。 で、一覧表示されたリストの中から対象のURLをタップするとモノにアクセスできる。後は当事者どうしご自由にご歓談くださいとのこと。アクセスする方法は、別にブラウザを使うなど決まっているわけでは無
【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
D3.jsの歴史。元になったデータビジュアライゼーションライブラリ一覧
D3.jsの歴史は意外と古く、前身となったライブラリがいくつかありますのでここで紹介してみます。 prefuse 2005年に Jeffrey Heer, Stuart K. Card, James A. Landayらによって作成されたデータビジュアライゼーションツールキットです。 Javaで書かれており、Java SwingアプリケーションやWebアプレットに統合されています。比較的簡単にデータビジュアライゼーションを作成・表示することができるライブラリとして人気を得ました。 prefuse | interactive information visualization toolkit flare 2007年にJeffrey Heerによって作成されたデータビジュアライゼーションツールキットです。 Action Scriptで書かれており、ある意味prefuseのFlash版といえます
2013年に話題になったデータビジュアライゼーション作品
2013年はデータビジュアライゼーション作品が盛んに発表された年でした。 (海外では) 様々なサイトで、去年流行したビジュアライゼーション作品の紹介記事が掲載されます。 2013年に発表されたインフォグラフィック総集編（動画あり） Data and visualization year in review, 2013 The Best Scientific Visualizations of 2013 The Most Amazing, Beautiful and Viral Maps of the Year そこで個人的に、去年みた視覚化作品の中から印象に残ったものを紹介します。 東京風速 東京都の風の流れを可視化した作品。この作品は見たことのある方が多いのではないでしょうか。 世界風速 こちらは、全世界の風の流れを地球議上に表示した作品。とても奇麗です。 Twitter Co. Con
インターネットの物理的な姿を追い求めるドキュメンタリー
私たちはふだん、ウェブサイトやメールが、どこを通って自分の目の前まで来たのかを意識することはまずない。それほどインターネットは日常生活にすっかり溶け込んでいる。しかしそのデータは、誰かが送信し、どこかを通ってきたからこそ届いたのだ。著者ブルームはあるきっかけでそうした“モノとしてのインターネット”を強く意識するようになる。つまり、「人類史上もっとも強力な情報ネットワークが、リスの出っ歯でかじられただけで不調におちいった」のを目撃したのだ。やがてブルームは、インターネットそのものをこの目でしかと見ようと決意して、長い旅に出る。多くの人に話を聞き、世界をまたにかけて飛び回る彼が見つけたものとは… 人に勧めるにはちょっと難しい本なんのですが、個人的に感銘を受けたので紹介します。 なぜ勧めるのが難しいかというと、なにしろ興味の無い人には全然面白くないだろうなーと思ったからなのですが。 本書は、家の
PDFから表データをぶっこ抜く「Nitro Cloud」
DATA GO JPに並んでいるデータセットが「PDFばかりじゃないか！」とお嘆きの方へ。 Nitoro Cloud PDF to Excel PDFで公開されているデータというのは、わりと扱いにくかったりします。 ドキュメント内で表組みされているデータを取得しようと、表を選択してExcelにコピペしても表のレイアウト情報はコピーされないため整形しなおす必要があったりするので、しごくメンドウです。 「Nitro Cloud」は、PDF内の表データをぶっこ抜いてExcelファイルに変換してくれるクラウドサービスです。 かなりの精度で表データを抜き出してくれるため、非常に便利です。 サンプル 月５ドキュメントまで無料で使用できるので、PDFからデータを取得したいと考えている方は、利用してみてはいかがでしょうか。 関連記事 ひとりオープンデータソンやってみました。
スクレーパー共有サイト「ScraperWiki」がリニューアルして凄い事に！
以前、オープンデータまで待てない人の、スクレーパー共有サイト(ScraperWiki)という記事を書きましたが、スクレーパー(クローラー)共有サイトのScraperWikiが大幅にリニューアルされていました。 データを取得するだけでなく、データの可視化、分析などまでも行えるデータサイエンスのプラットフォームとなることを目指すそうです。 ScraperWiki is a platform for doing data science on the web We help individuals and businesses to get, clean, visualise, analyse and manage data from thousands of sources. For science, journalism, lead generation—whatever you need.
Qiitaソーシャルグラフの視覚化。
……失敗かな。 example 各ユーザーのフォローデータはAPIから取得しました。 Qiita API document 関係性(フォローの状態)を Force Layoutにしてみましたが、ぶっちゃけあまり見やすくありません。 分かり易く表示するなら、もっと別の表現を使用した方がよさそうですね。 サンプル pathの先頭に矢印を付けるのと、アイコン画像を丸く切り取るのに、svgのdef要素とclipPath要素を使用しています。 <svg> <clipPath id="cut-off-circle"> <circle cx=0 cy=0 r=15 /> </clipPath> <defs> <marker id="licensing" viewBox="0 -5 10 10" refX="15" refY="-1.5" markerWidth="6" markerHeight="6"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世帯の年間収入マップ