-
Notifications
You must be signed in to change notification settings - Fork 0
/
D3JS-11-Bar.html
105 lines (91 loc) · 3.62 KB
/
D3JS-11-Bar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 8px;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 300;
var h = 150;
var margin = {x:50, y:20, title:15};
// Browser Share (2012-05)
var dataset = [
{"browser":"IE","share":28.87},
{"browser":"Chrome","share":29.15},
{"browser":"Firefox","share":22.97},
{"browser":"Safari","share":8.68},
{"browser":"Opera","share":3.80},
{"browser":"Android","share":2.13}
];
var scaleX = d3.scale.ordinal()
.domain(dataset.map(function(d){return d.browser;}))
.rangeRoundBands([0,w],0.05);
var axisX = d3.svg.axis()
.scale(scaleX)
.orient("bottom")
.tickSize(0); // 棒グラフなので X 軸から、値ラベルまでの伸びるヒゲは無しにする
// min value
var minY = d3.min(dataset, function(d) {
return d.share;
});
// max value
var maxY = d3.max(dataset, function(d) {
return d.share;
});
var scaleY = d3.scale.linear()
.domain([minY, maxY])
.nice()
.rangeRound([margin.y, h - margin.y - margin.title])
.clamp(true);
var svg = d3.select("body").append("svg").attr({width: w, height: h});
svg.append("rect").attr({x:0, y:0, width:w, height:h, stroke:"black", fill:"snow"});
svg.append("g").selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
"x" : function(d){ return scaleX(d.browser); },
"y" : function(d){ return h - margin.y - scaleY(d.share); },
"width" : scaleX.rangeBand(),
"height" : function(d){ return scaleY(d.share); },
"fill" : function(d){ return "rgb(64, 64, " + Math.floor(d.share * 255 / maxY) + ")";}
});
svg.append("g").selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){ return d.share; })
.attr({
"x" : function(d){ return scaleX(d.browser) + scaleX.rangeBand() / 2; },
"y" : function(d){ return h - margin.y - scaleY(d.share) + 14; },
"fill" : "white",
"text-anchor" : "middle"
});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - margin.y) + ")")
.call(axisX);
svg.append("text")
.attr({
"font-size" : 15,
"text-anchor" : "middle",
"x" : w/2,
"y" : 15})
.text("Browser Share");
</script>
</body>
</html>