【D3プラグイン】フロアマップを表示する「Floor Plan」
example 「Floor Plan」は図面上にレイヤーを重ねて、ポリンゴンデータやパスデータ、ヒートマップデータなどを表示できる、D3プラグインです。 簡単に使えてわりと実用的かも。 間取り図の表示なんかに使えるかもしれません。 サンプルコード var w = 720; var h = 487; //スケールの指定 var xscale = d3.scale.linear() .domain([0,50.0]) .range([0, w]); var yscale = d3.scale.linear() .domain([0,33.79]) .range([0, h]); //初期化 var map = d3.floorplan().xScale(xscale).yScale(yscale); var imagelayer = d3.floorplan.imagelayer(); va
D3.js と TopoJSON で地図を作る
D3.js と TopoJSON で地図を作る 2012年12月30日 Mike Bostock (訳:FoD5 ) このチュートリアルの解説 D3.js 日本語化プロジェクトについて D3.jsとTopoJSONで地図を作る このチュートリアルでは D3 と TopoJSON を使って、シンプルな地図を一から作る方法について学習します。オンラインでフリーの地理データが得られるサイトを いくつか紹介し、そのデータを、画面表示効率がよくて使いやすいフォーマットに変換する方法を解説します。このチュートリアルでは thematic mapping（主題図）については触れません。 しかし製作過程で居住地域へのラベルの付け方も説明しますので、そのテクニックを応用すれば graduated symbol maps（等級別記号図） や choropleths（コロプレス／統計表現地図） 等の地図的なデ
D3.jsで地図を作る。
DEMO PAGE ウェブサイトで地図を扱うときgoogle mapカスタマイズしたり、leaflet.jsを使ったりしてたのですが、 データビジュアルで地図をよりインタラクティブなものにしたいという思いもあり、 今回はd3.jsを使って地図を作ってみました。 Let’s make mapを参考に、地図を作ってみました。 今回使ったライブラリー: D3.js TopoJson 1. データをダウンロードする Natural Earthという無料で世界地図に関する様々なデータをダウンロードできます。 今回は北海道、本州などと色分けする日本地図を作りたいので、「1:10m Cultural Vectors」から「Admin 0 – Details」にある Download map subunits からデータをダウンロードします。 2.データをjsonに書き換える。 JavaScriptでデー
【D3.js】地図上にHexbin(六角形)を表示する
地図上に表示するポイントが多くなるとゴチャゴチャして見難くなります。 「そんな時は六角形にまとめて表示すると見やすくなるよ！」と聞いたのでやってみました。 国土数値情報サイトがらいただいた竜巻等の突風（点）情報を表示しています。竜巻等の突風の多いエリア程、色が濃く表示されます。 example サンプルコード D3.jsと一緒にHexbinプラグインを読み込んでください。 <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/d3.hexbin.v0.min.js"></script> window.onload = function(){ 日本地図データの読み込み d3.json("japan.topojson", function(json) { d3main(json); }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
