以前買った、インタラクティブ・データビジュアライゼーションはひとまず読了しました。
ちゃんと覚えたか?と問われれば、まだですが、少し感想を。
感想
D3.jsのチュートリアルの拡張のような内容で、
チュートリアルにある内容はもちろん、パイチャートやスタック、ジオコーディングまで、
幅広く基礎が学べる内容でした。
ページ数も250Pに及ばないぐらいで、調度良い分量でした。
さすがに1回では学びきれないので、少しずつ覚えていけたらと思っています。
そういえば、フォースレイアウトなんかも項目としてあって、すごく感動しました。
改めてD3.js使いこなせたらかっこよさそうと思いました。
Sample
いろいろ調べまして、日本地図の描画を行ってみました。
TopoJSONで地図を描くなど、googleとかいう素晴らしいサイトで検索すれば、
大体内容は同じです
コード
// width height var w = 500, h = 400, // projection projection = d3.geo.mercator() .center([139.5, 35.7]) .translate([w/2, h/2]) .scale([800]), // path generator path = d3.geo.path() .projection(projection), // svg svg = d3.select('body') .append('svg') .attr({ 'width': w, 'height': h }); // json d3.json('./japan.topojson', function(data){ // features var features = topojson.feature(data, data.objects.japan); svg.append('path') .datum(features) .attr({ 'stroke': 'black', 'stroke-width': '0.5', 'd': path }) .style('fill', '#669966'); });
w hは、そのまま横幅と高さに使います。
次にgeo系のやつです。projectionとpath。。
ちゃんと意味理解できてないので、そのうち。
そして、描画するエリアとして、svg要素を追加します。
d3.select('body')で、body要素を選択し、
.append('svg')で、svg要素を追加。
attrとして、横・縦を決めてやります。
d3.json()は、見たままですが、JSONを読み込みます。
他にはd3.csv()だとCSVなんか読み込めたりします。
いろいろあって便利です。
読み込んだデータを使って、
topojson.feature(data, data.objects.japan)で、フィーチャーを作成。
あとは似たようなことをしてます。
また要素追加→datumで今作ったフィーチャーを入れてやる。
attributes設定して、styleで・・・といった感じです。
すいません。今回は説明雑です。
Git扱えるようにと、Githubでレポジトリ作って、サンプル公開してみました！
Gitもちゃんと扱えるようになりたいところです。本当に。
※記事書いてから、少しいじっているので、↑のコードではなくなっています 作ったサンプル
