D3.jsで地図を描く

以前買った、インタラクティブ・データビジュアライゼーションはひとまず読了しました。
ちゃんと覚えたか?と問われれば、まだですが、少し感想を。

感想

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もちゃんと扱えるようになりたいところです。本当に。

※記事書いてから、少しいじっているので、↑のコードではなくなっています作ったサンプル

typeof Diary

VimとかJSとか。やったことのメモ。自分のため。

D3.jsで地図を描く

感想

Sample