d3_sample.html

## d3_sample.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Visualize the benchmark by d3.js</title>
<style>
body {
  font: 12px sans-serif;
}

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

.bar {
  fill: darkgreen;
}

.bar:hover {
  fill: #6fdb57;
}

.x.axis path {
  display: none;
}

.label {
  word-wrap: break-word;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 30, bottom: 120, left: 60},
    width = window.innerWidth - margin.left - margin.right,
    height = 730 - margin.top - margin.bottom;

// スケールと出力レンジの定義
var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
        .range([height, 0]);

// 軸の定義
var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        ;

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(d3.timeMillisecond, 1)
        ;

// svgの定義
var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 描画
d3.json("sample.json", function(error, data) {

  if (error !== null) {
    console.log(error);
    return;
  }

  // データを入力ドメインとして設定
  x.domain(data.map(function(d) { return d.label; }));
  y.domain([0, d3.max(data, function(d) { return d.benchmark; })]);

  // x軸をsvgに表示
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll('text')
      .each(function(d, i) {
        var el = d3.select(this);
        var parent = d3.select(this.parentNode);
        // x軸ラベルのラッパー
        var xAxisWrapperObj = parent.append('foreignObject')
                                    .attr("width", x.rangeBand())
                                    .attr("height", "100%")
                                    .attr("x", function () { // 左揃えにする
                                      return -(x.rangeBand() / 2);
                                    })
                                    .attr("y", "10")
                                    ;

        // ラベルの値
        xAxisWrapperObj
          .append('xhtml:p')
          .style({"font-size":".9rem", "letter-spacing": ".09rem"})
          .attr("class", "label")
          .html(function() {
            return data[i].label;
          });

        // ベンチマークの値
        xAxisWrapperObj
          .append('xhtml:p')
          .style({
            "font-size":".8rem",
            "letter-spacing": ".08rem",
            "margin-top": "-0.5rem"
          })
          .attr("class", "label")
          .html(function() {
            return data[i].benchmark;
          });

        el.remove(); // 中身を入れ替えたら消す
      });

  // y軸をsvgに表示
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 16)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Benchmark");

  // 棒グラフを表示
  svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.label); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.benchmark); })
        .attr("height", function(d) { return height - y(d.benchmark); });
});
</script>

<!--
# dataset

## sample.json
[
    {
        "label": "bench1",
        "benchmark": "0.014902"
    },
    {
        "label": "bench2",
        "benchmark": "0.016097"
    },
    {
        "label": "bench3",
        "benchmark": "0.011161"
    },
    {
        "label": "bench4",
        "benchmark": "0.008717"
    },
    {
        "label": "bench5",
        "benchmark": "0.0055937"
    },
    {
        "label": "bench6",
        "benchmark": "0.010131"
    },
    {
        "label": "bench7",
        "benchmark": "0.020344"
    },
    {
        "label": "bench8",
        "benchmark": "0.017515"
    },
    {
        "label": "bench9",
        "benchmark": "0.012232"
    },
    {
        "label": "bench10",
        "benchmark": "0.017162"
    }
]

## line 67
## d3.csv("sample.csv", function(error, data) {
## sample.csv
label,benchmark
bench1,0.014902
bench2,0.016097
bench3,0.011161
bench4,0.008717
bench5,0.005593
bench6,0.010131
bench7,0.020344
bench8,0.017515
bench9,0.012232
bench10,0.017162

## line 67
## d3.tsv("sample.tsv", function(error, data) {
## sample.tsv
label	benchmark
bench1	0.014902
bench2	0.016097
bench3	0.011161
bench4	0.008717
bench5	0.005593
bench6	0.010131
bench7	0.020344
bench8	0.017515
bench9	0.012232
bench10	0.017162
-->