shimabox/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
-->
	<!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
	-->