[D3] 事始め

D3 (Data-Driven Documents) を試した。今回の着目点は、
１．SVGに要素を追加
２．追加した要素に読み込んだデータをアサインする data(dataset)
３．アサインしたデータに基づいた要素属性の設定(特に色
４．描画系とデータという異なる座標値を変換する scale
５．軸の追加

参考ページ: http://alignedleft.com/tutorials/d3
上記ページは、D3の概要を知るには、よくまとめられていて大変参考にさせて頂きました。

サンプルついて
散布図の描画をイメージしたものでRunボタンを押すとランダムな位置に大きさの異なる。5つの円が描画されます。円の色については、色のrangeを使って自身の大きさが小さいほど青、大きいほど赤になるようにしています([A])。
Updateボタンを押すとその都度円の位置が変わります([B])。

ソース
ScatterSample.prototype = {
    constructor: ScatterSample,

    circleFillColor: function(d)
    {
        var color = d3.scale.linear().domain([0,30]).range(['blue','red']); //[A]
        return color(d);
    },

    mkCirclePosData: function()
    {
        var random = Math.random();
        random = (random - 0.5) * 2.0;
        return random;
    },

    changeCirclesPos: function() // [B]
    {

        svg = d3.selectAll('svg');
        circles = svg.selectAll('circle');
        circles.attr("cx", function(){
                        pos = ScatterSample.prototype.mkCirclePosData();
                        return ScatterSample.xScale(pos);
                    })
               .attr("cy", function(){
                        pos = ScatterSample.prototype.mkCirclePosData();
                        return ScatterSample.yScale(pos);
                    })
 
         return;
    }

};

function ScatterSample()
{

    var dataset = [5, 10, 15, 20, 25];

    this.width  = 500;
    this.height = 300;

    ScatterSample.xScale = d3.scale.linear()
                         .domain([-1, 1])
                         .range([50, this.width-50]);

    ScatterSample.yScale = d3.scale.linear()
                         .domain([-1, 1])
                         .range([50, this.height-50]);

    var svg = d3.select("#drawArea")
                .append("svg") // 1.
                .attr("width" , this.width)
                .attr("height", this.height);

    var circles = svg.selectAll("circle")
                     .data(dataset) // 2.
                     .enter()
                     .append("circle");
    circles.attr("cx", function(){
                    pos = ScatterSample.prototype.mkCirclePosData();
                    return ScatterSample.xScale(pos); // 4.
                })
           .attr("cy", function(){
                    pos = ScatterSample.prototype.mkCirclePosData();
                    return ScatterSample.yScale(pos);
                })
           .attr("r", function(d){
                   return d;
               })
            .style("fill", function(d){ // 3.
                    return ScatterSample.prototype.circleFillColor(d);
               });

    var yAxis = d3.svg.axis()
                      .scale(ScatterSample.yScale)
                      .ticks(5)
                      .orient("left");
    svg.append("g") // 5.
       .attr("transform", "translate(50,0)")
       .call(yAxis)
       .selectAll("path,line")
       .attr("fill","none").attr("stroke","black")
       .attr("shape-redering","crispEdges");

    var xAxis = d3.svg.axis()
                      .scale(ScatterSample.xScale)
                      .ticks(5)
                      .orient("bottom");

    svg.append("g")
       .attr("transform", "translate(0,250)")
       .call(xAxis)
       .selectAll("path,line")
       .attr("fill","none").attr("stroke","black")
       .attr("shape-redering","crispEdges");
}