D3.jsのスケッチ

README

D3.jsの練習

jsdoit.css

body {
  background: #dfd;
  font: 30px "ヒラギノ角ゴ Pro W3", Hiragino Kaku GothicPro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
}

div#graph {
    min-width : auto;
    min-height : auto;
    padding : 10px;
    background : coral;
}

.axis path,
.axis line {
   fill: none;
   stroke: black;
   shape-rendering: crispEdges;
}

.axis text {
   font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku GothicPro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
   font-size: 11px;
}

jsdoit.html

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div id="graph">
    
</div>

jsdoit.js

//適当な構造化されたデータ
var dataset = [
    {
        title : "android",
        amount : 100,
        use : 30,
        developper : 10
    },{
        title : "iPhone",
        amount : 150,
        use : 100,
        developper : 20
    },{
        title : "WindowsPhone",
        amount : 50,
        use : 10,
        developper : 5
    },{
        title : "BlackBerry",
        amount : 40,
        use : 5,
        developper : 2
    },{
        title : "FireFoxPhone",
        amount : 10,
        use : 2,
        developper : 1
    }  
];

var width = 300;
var height = 100;
var barPadding = 1;

var svg = d3.select('#graph')
            .append('svg')
            .attr('width',width) // 描画領域の幅を決定
            .attr('height',height + 50); //描画領域の高さを決定

// グラフを描画
svg.selectAll("rect") // 描画する形を事前に設定
    .data(dataset) // データを入力
    .enter()
    .append('rect') // 描画する形を設定
    .attr('x', 85) // xの開始位置を決定
    .attr('y', function(d, i) {
        return i * (height / dataset.length);
    }) // yの開始位置を決定
    .attr("width", function(d) {
        return d.amount; 
    }) //幅を計算して返す
    .attr("height", height / dataset.length - barPadding) // 高さを計算して返す
    .attr("fill", function(d) { // 各グラフに色を塗る
        return "rgb(0, 0, " + (d.amount * 3) + ")";
    });

//テキストを入力
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .attr('x', 5) // xの開始位置を決定
    .attr('y', function(d, i) {
        return i * (height / dataset.length) + 12;
    }) // yの開始位置を決定
    .text(function(d){
        return d.title;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "13px")
    .attr("fill", "white");

//スケールを設定
var scale = d3.scale.linear()
                    .domain([0, 200])
                    .range([0, 200]);

//x軸の目盛を追加
svg.append('g')
   .attr("class", "axis")
   .attr("transform", "translate(85," + (height) + ")")
    .call(d3.svg.axis()
                 .scale(scale)
                 .orient('bottom'));