ここ最近のWeb地図周辺の動向をまとめてみた
Web地図の歴史というのは Google Maps 登場以前と登場後に分けられるのですが、2015年現在、まさにGoogle Maps登場と同じぐらいの変革がWeb地図の世界に訪れているのではないか？ と勝手に思っているので自分の観測範囲内でまとめてみました。 概要 簡単に要点をまとめると、CanvasとかSVGとかWebGLとかブラウザ周りの表現力の進化がWeb地図にも影響を及ぼしていて、そこにGeoJSONのようなそれまでGISなどに疎かったフロントエンドエンジニアにも気軽に扱うことができるフォーマットが普及し始めたことと、降って湧いたようなデータビジュアライゼーションブームなどによって爆発的にエコシステムが増殖し、さらにフロントエンド回りの新技術、仮想DOMとか Web Components とかFRPだとかもろもろいろいろ絡まってよくわからないけど地味に凄いことになっています。 G
新しい地理院地図のソースコードがGitHubに公開されていたので、Fx0(FirefoxOS)にアプリとしてインストールしてみた。
国土地理院、「地理院地図」がスマホ対応、「触地図」特設サイトや西之島のGIFアニメも登場 スマートフォンやタブレット端末に対応して使いやすくなった地理院地図ですが、そのソースコードがGithubにて公開されています。 gsi-cyberjapan/gsimaps (利用する場合の注意点については、README.mdを参照ください) すごい……すごいぞ国土地理院！ これで、誰でも自分専用の地理院地図を作って利用することができますね！ すでに「地図タイルを追加する方法」を書かれている方も。 地理院地図に地図タイルを追加して公開する方法 そこで自分も、最近買ったばっかりのFx0に地理院地図をアプリとしてインストールしてみました。 やったこと 下記からzipファイルをダウンロード。 gsi-cyberjapan/gsimaps １．Firefox Developer EditionのWebIDEで
D3.jsとFabric.jsを使ってcanvasに描画する
d3.js Advent Calendar 2013 4日目の参加記事です。 以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。 Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。 最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一
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"
【D3.js】グラフと地図を連動させる
散布図上でドラッグすると、選択した範囲の都道府県に色が付きます。 d3.svg.brushを使って、散布図と地図を連動させるサンプルを作成しました。 example データセットの作成 有効求人倍率と充足率の情報は「社会生活統計指標」より。 都道府県の地図データは以下よりいただきました。 都道府県色塗り用shapeファイル（英語表記） 社会生活統計指標からダウンロードした「労働」統計表をExcel上で編集してcsvに。 作成したcsvと都道府県色塗り用shapeファイルをQuantum GISに読み込み結合。(結合の方法は以下を) 属性データにCSVまたはDBFファイルを結合したい 結合したデータをgeojsonで出力し、さらにtopojsonに変換します。 topojsonへの変換は「TopoJSONを使う」を参照してください。 出来上がったデータセットは以下。 todofuken.to
D3.jsはなぜ人気があるのか？ そして、なぜ難しいのか？
個人的なD3愛についてはこちらに。 日本ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか？ その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを
【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する
example WordPressもくもく勉強会@群馬 #1で作成したものです。 サンプルコードが公開されているのでそれを元に作成しました。 Githubのカレンダー表示機能はD3.jsで作成されているのですが、そのBlog版のようなものです。 ↓これ 色がついているセルが記事を描いた日、同じ日に書いた記事が多いほど濃い緑色で表示されるようになってます。 セルにマウスオーバーすると記事のタイトルが表示されクリックするとその日のブログ記事へ飛びます。 カレンダーにしてみると、ブログ記事を頑張って書いた月とそうでもない月が一瞥できてなかなか面白いですね。 データセットの作成 WordPressのダッシュボードから「ツール→エクスポート」を選択し、投稿記事をエクスポートします。 エクスポートしたxmlファイルをnode.jsを使ってjsonに変換しました。 変換スクリプトは、以前RSSリーダーを
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル｜スコット・マレイ｜alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3.jsを使ったグラフを簡単に作成できるChromeアプリ「datamatic.io」 – GUNMA GIS GEEK