Data is fun. | Category | D3.jsチュートリアル
このページはD3.jsチュートリアル基本シリーズの 7 / 7 です。いよいよアニメーションでSVG要素を動かしてみます。といっても簡単にできます。基本的には.transition()の後に続いて、変化させた結果の状態を
【D3.js】クリックした位置の緯度経度を求める
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.jsで読み込んだgeoJSONデータをthree.jsを使って3D表示する。
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で日本地図を作成しデータを反映するサンプル（コロプレス地図） ｜ Tips Note by TAM
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ（平成25年産 主要果樹都道府県別出荷量） まずは必要なデータを準備します。 [準備1] 地図データの取得（日本地図の座標データ / JSONファイル） 日本地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
D3.js で日本地図を描く - y_uti のブログ
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 で地図を作る
D3.js と TopoJSON で地図を作る 2012年12月30日 Mike Bostock (訳:FoD5 ) このチュートリアルの解説 D3.js 日本語化プロジェクトについて D3.jsとTopoJSONで地図を作る このチュートリアルでは D3 と TopoJSON を使って、シンプルな地図を一から作る方法について学習します。オンラインでフリーの地理データが得られるサイトを いくつか紹介し、そのデータを、画面表示効率がよくて使いやすいフォーマットに変換する方法を解説します。このチュートリアルでは thematic mapping（主題図）については触れません。 しかし製作過程で居住地域へのラベルの付け方も説明しますので、そのテクニックを応用すれば graduated symbol maps（等級別記号図） や choropleths（コロプレス／統計表現地図） 等の地図的なデ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ja.d3js.info/mike/selection/
http://ja.d3js.info/alignedleft/tutorials/d3/
D3.jsとThree.jsで日本地図を可視化してみた - データマイニングエンジニアが気まぐれに更新するブログ
http://www.smartjava.org/content/render-geographic-information-3d-threejs-and-d3js/
Streets with soviet names - data story and visualization by Texty -