Last active
December 31, 2016 11:20
-
-
Save shimabox/3a2c6d43ab9996b58df3b366b14ff7db to your computer and use it in GitHub Desktop.
Visualize the benchmark by d3.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 | |
| --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment