D3.jsのenter()が分からなかったのでコードリーディングしたメモ - bati11 の 日記
前回、D3.jsでレーダーチャート書いてて、enter() で何が起きてるのかよく分からなかったのでソースコードを読んでみました。そのときのメモです。 長くなりました。一番下の方にまとめもあります。 読んだD3.jsのバージョンは、3.4.2です。 読んでみたらenter()はただのgetterメソッドで特に何の処理もしてませんでした。代わりにdata()ががんばってたんですねー。 ソースコード読んでみて、やっとD3 - セレクションの仕組みに書いてある意味が分かった気がします。 下のような円を描くコードを元にソースコードを読んでみました。 var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h); svg.selectAll('path') .data(dataset) .enter()
D3.jsのscale, transition, data binding覚え書き - AOI-CAT's diary
前回のエントリー！では、とりあえず表示できるところまでやりました。今回はもう少しD3らしい形にしていきます。 d3.scale, selection.data() var minHeight = d3.min(member, function(d){return d.height}); var maxHeight = d3.max(member, function(d){return d.height}); var hScale = d3.scale.linear() .domain([minHeight, maxHeight]) .range([h - offset, offset]); 入力領域はdomain、出力範囲はrangeで指定する。 ここではminHeightからmaxHeightの入力領域を、表示領域（svgのサイズ）の端からoffsetを引いたところからoffset分ずら
stylesslab-annex D3.jsとTopoJSONで地図を表示してみた その２
さて。前回、TopoJSONファイルを作るためのツールが揃いました。 今回は先人たちの轍をたどりながら、TopoJSONデータを作成してみます。 とは言え、 そのまま真似ると面白くないので、日本の地図データを作成する事にします。 なお、引き続き、使用しているのはubuntuです。 まずは地図データのダウンロードです。 Natural Earthからデータを頂くとしましょう。 $ wget http://goo.gl/kOniZ $ wget http://goo.gl/0Jsqx 前者は国のポリゴンデータ、後者は居住地域の位置と名前だそうです。 google url shorterを使っているので、ダウンロードしたzipファイルが kOniZと0Jsqxになってますが、気にしない事にします。 それぞれ、展開後のファイルを格納するためのディレクトリを作成します。 ここは分かりやすいディレクト
【D3.js】D3.jsを使ってSVGで地図を描く
//プロジェクション設定 var projection = d3 .geoMercator() //投影法の指定 .scale(16000) //スケール（ズーム）の指定 .rotate([-0.25, 0.25, 0]) //地図を回転する [x,y,z] .center([139.0032936, 36.3219088]); //中心の座標を指定 //パスジェネレーター生成 var path = d3.geoPath().projection(projection); //地図用のステージ(SVGタグ)を作成 var map = d3.select("body") .append("svg") .attr("width", 960) .attr("height", 500); //地理データ読み込み d3.json("gunma.geojson", drawMaps); //地図を描画
【D3.js】d3.zoomオブジェクトを使って Pan/Zoon を実装する。
D3.js v4ではd３.zoomオブジェクトを使用することで、簡単にパン／ズームを実装することができます。 var w = 900; var h = 500; var data = d3.range(0, 100).map(function(d){ return {"x": ~~(Math.random() * w ), "y": ~~(Math.random() * h), "r": ~~(Math.random() * 90) + 10 }; }); var svg = d3.select("svg") .attr("width", w) .attr("height", h) //ズーム対象とするレイヤーを生成 var zoomLayer = svg.append("g") //カラージェネレーター var color = d3.scaleOrdinal(d3.schemeCateg
【D3.js】地図上に都市と都市を結ぶ線を引く
example 都市と都市を結ぶ線を引くサンプルです。 地図をY軸方向に回転などさせてみました。 サンプルコード 基本的には d3.geo.path().projection で作成したパスジェネレーターにgeoJSON形式にした都市の緯度経度を渡してあげれば、あとはいつも通りsvgのpathを使ってラインを生成するだけです。 地図を回転させたりしても各要素のd属性をアップデートするだけで再計算し描画してくれるので便利です。 d3.json("conuntries.topojson", function(json) { d3main(json); }); function d3main(json){ var width = 960; var height = 480; var svg = d3.select("svg") .attr("width", width) .attr("heigh
D3.js と GeoJSON でポリゴンを描く
こちらの記事を参考にして、東京都のポリゴンを描いてみます。 D3.jsとTopoJSONで地図を作る 違いは２点です。 イギリスではなく「東京都」のポリゴンを使う TopoJSON に変換せず GeoJSON を使う 作成したものは下記のページに置いてみました。 http://s.kitazaki.name/apps/tokyo-polygon/ 「２３区」と「島しょ部除く」のデータはすんなり表示されると思いますが、 「全域」のデータは大きいのでかなり時間がかかります。 これは TopoJSON を使う動機付けになりそうです。 目次 データを探す ツール類のインストール データの変換 データの読み込み ポリゴンの表示 ポリゴンのスタイル設定 インタラクションの追加 終わりに データを探す まずは境界線を持つポリゴンデータを探します。 国土交通省の国土政策局という部署が「国土数値情報ダウンロ
Adding tooltips to a d3.js graph
The following post is a portion of the D3 Tips and Tricks document which it free to download. To use this post in context, consider it with the others in the blog or just download the pdf and / or the examples from the downloads page:-) Tooltips have a marvelous duality. They are on one hand a pretty darned useful thing that aids in giving context and information where required and on the other h
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 animate rotation
I'm having trouble when I try to correctly execute a rotation animation using the D3.js library. The problem has to do with the point at which I want to rotate the element about. Here is a fiddle I made to show what I mean (in slow motion): http://jsfiddle.net/74mCb/ It seems like the source of the problem lies here: .attr("transform", "rotate(-60, 150,130)"); And then I rotate it like so: .attr("
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ
「データビジュアライゼーション（D3.js）を学ぶための教材まとめ」も大分量が増えてきて、初めてD3.jsを学ぶという人にはどこから手をつけて良いものか解りづらくなってきました。 そこで、ゴールデンウィーク中にD3.jsを学んでみたいという方に、いくつか厳選してお勧めしてみたいと思います。 スライドを眺める まずはD3.jsがどんなライブラリなのか把握しましょう。 ・about d3.js チュートリアルを学ぶ とりあえず分量・内容的に下記のチュートリアルがお勧めです。 ・D3 チュートリアル｜スコット・マレイ｜alignedleft 余裕があっていろんなレイアウトのグラフを描いてみたいなら、下記サイトを。 ・svg要素の基本的な使い方まとめ コード共有サイトを使って実践 チュートリアルを手軽に試すなら、コード共有サイトを利用するのが楽チンです。 jsdo.it, jsfiddle, Tr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://build-podcast.com/d3js/
http://daily.d3js.info/?p=296
GitHub - d3/d3: Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
Learning D3 Part 5: Axes | Synthesis | Scott Becker
javascript - Linear/Incremental rotation animation with transition - Stack Overflow
Koalas to the Max dot Com
Ben McMahen - Blog
Graphene | Dashboard
GitHub - jondot/graphene: Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.
