このページはD3.jsチュートリアル基本シリーズの 7 / 7 です。いよいよアニメーションでSVG要素を動かしてみます。といっても簡単にできます。基本的には.transition()の後に続いて、変化させた結果の状態を
d3.json("japan.topojson", function(json) { d3main(json); }); function d3main(json){ var geodata = topojson.object(json, json.objects.japan).geometries; projection = d3.geo .mercator() //投影法の指定 .scale(1500) //スケール(ズーム)の指定 .translate([300,350]) .center([139.0032936, 36.3219088]); //中心の座標を指定 var path = d3.geo.path().projection(projection); //投影 var svg = d3.select("svg"); var map = svg.append("svg:g"
d3.json("japan.geojson", function(json) { d3main(json); }); function d3main(json) { var container; var camera, scene, renderer; var mesh; initScene(); function initScene() { container = document.createElement('div'); document.body.appendChild(container); //シーンの追加 scene = new THREE.Scene(); //カメラの設定 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000); camera.p
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ(平成25年産 主要果樹都道府県別出荷量) まずは必要なデータを準備します。 [準備1] 地図データの取得(日本地図の座標データ / JSONファイル) 日本地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
D3.js と TopoJSON を使って、ブラウザ上に地図を描くことが簡単にできるようです。ウェブ上の解説記事を参考にしながら私も試してみました。作成にあたっては、主に下記ウェブページの解説を参考にしました。 D3.js と TopoJSON で地図を作る できあがりは以下のとおりです。地図データは Natural Earth で公開されているものを利用しました。 D3.js と TopoJSON で日本地図を描く 作業の流れは次のようになります。 Shape 形式の地図データを入手する GeoJSON 形式に変換する TopoJSON 形式に変換する D3.js と TopoJSON プラグインを使って TopoJSON 形式のデータをブラウザ上に描画する 私は普段 CentOS を利用しているのですが、CentOS 6.5 では、一連の作業に必要なソフトウェアは EPEL に揃ってい
お問い合わせ 広告掲載・メディア紹介などのお問い合わせは、下記のメールアドレスまでお願いいたします。 tactsh(at)gmail.com
D3.js と TopoJSON で地図を作る 2012年12月30日 Mike Bostock (訳:FoD5 ) このチュートリアルの解説 D3.js 日本語化プロジェクトについて D3.jsとTopoJSONで地図を作る このチュートリアルでは D3 と TopoJSON を使って、シンプルな地図を一から作る方法について学習します。オンラインでフリーの地理データが得られるサイトを いくつか紹介し、そのデータを、画面表示効率がよくて使いやすいフォーマットに変換する方法を解説します。このチュートリアルでは thematic mapping(主題図)については触れません。 しかし製作過程で居住地域へのラベルの付け方も説明しますので、そのテクニックを応用すれば graduated symbol maps(等級別記号図) や choropleths(コロプレス/統計表現地図) 等の地図的なデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く