-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
129 lines (119 loc) · 3.51 KB
/
index.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<title>A Stack Example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h2>A Stack Example</h2>
<p>Adapted from Scott Murray's Book.</p>
<svg></svg>
<script>
//Width and height
var w = 500;
var h = 300;
var margin = {left: 20, right: 20, top: 20, bottom: 60};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
//Original data
var dataset = [
[
{ y: 5 },
{ y: 4 },
{ y: 2 },
{ y: 7 },
{ y: 23 }
],
[
{ y: 10 },
{ y: 12 },
{ y: 19 },
{ y: 23 },
{ y: 17 }
],
[
{ y: 22 },
{ y: 28 },
{ y: 32 },
{ y: 35 },
{ y: 43 }
]
];
//Set up stack method
var stack = d3.layout.stack();
//Data, stacked
stack(dataset);
//Set up scales
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset[0].length))
.rangeRoundBands([0, width], 0.05);
var yScale = d3.scale.linear()
.domain([0,
d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
//Easy colors accessible via a 10-step ordinal scale
var colors = d3.scale.category10();
// Names for the categories
var categories = ["Apples", "Bananas", "Grapes"];
//Create SVG element
var svg = d3.select("svg")
.attr("width", w)
.attr("height", h);
// Add a group for each row of data
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("transform","translate(" + [margin.left, margin.top] + ")")
.style("fill", function(d, i) {
return colors(i);
});
// Add a rect for each data value
var rects = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return yScale(d.y0 + d.y);
})
.attr("height", function(d) {
return height - yScale(d.y);
})
.attr("width", xScale.rangeBand());
// Add the x axis
svg.append("g").attr({
"class": "x axis",
"transform": "translate(" + [margin.left, height + margin.top] + ")"
}).call(xAxis);
var legend = svg.append("g").attr({
"class": "legend",
"transform": "translate(" + [margin.left, height + margin.top + 10] + ")"
});
dataset.forEach(function(d,i) {
legend.append("rect").attr({
"transform": "translate(" + [ 10 + (i * 140), 20] + ")",
"x": 0,
"y": 0,
"width": 14,
"height":14,
"fill": colors(i)
});
legend.append("text").attr({
"transform": "translate(" + [ 30 + (i * 140), 33] + ")",
"fill": colors(i)
}).text(categories[i]);
});
</script>
</body>
</html>