-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart.html
97 lines (85 loc) · 4.25 KB
/
chart.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg{
height: 160px;
width: 320px;
}
text{ font-family: sans-serif; font-size: 13px;}
</style>
</head>
<body>
<svg id="in-and-out"></svg>
<script src="./js/d3.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script>
var svg = d3.select('#in-and-out');
var g = svg.append('g');
queue()
.defer(d3.csv, './data/ageBreakdownIn.csv')
.defer(d3.csv, './data/ageBreakdownOut.csv')
.await(function(error, ageIn, ageOut){
var height = document.querySelector('svg').clientHeight,
width = document.querySelector('svg').clientWidth;
var barHeight = d3.scaleLinear().domain([0,70000]).range([0, height-12]);
var inBars = d3.select('g').selectAll('.in-bars')
.data(ageIn);
var outBars = g.selectAll('.out-bars')
.data(ageOut);
var labels = g.selectAll('.label')
.data(ageOut);
var key = g.selectAll('.key')
.data(['In', 'Out']);
var keyText = g.selectAll('.key-text')
.data(['In', 'Out']);
key.enter().append('rect')
.attr('class', 'key')
.attr('height', 15)
.attr('width', 15)
.attr('fill', function(d){
if(d == 'In'){
return 'rgb(255,93,93)';
}else{
return 'rgb(93,93,255)';
}
})
.attr('x', width - 100)
.attr('y', function(d, i){
return (i*17);
});
keyText.enter()
.append('text')
.attr('class', 'key-text')
.text(function(d){ return d; })
.attr('x',width - 80)
.attr('y', function(d,i){
return i*17 + 14;
})
inBars.enter()
.append('rect')
.attr('class', 'in-bars')
.attr('height', function(d){ return barHeight(d.number) })
.attr('width', 24)
.attr('fill', 'rgb(255,93,93)')
.attr('x', function(d,i){ return (i * 55); })
.attr('y', function(d, i){ return (height-12) - barHeight(d.number); });
outBars.enter()
.append('rect')
.attr('class', 'out-bars')
.attr('height', function(d){ return barHeight(d.number) })
.attr('width', 24)
.attr('fill', 'rgb(93,93,255)')
.attr('x', function(d,i){ return 25 + (i * 55); })
.attr('y', function(d, i){ return (height - 12) - barHeight(d.number); });
labels.enter()
.append('text')
.attr('class', 'label')
.text(function(d){ return d.category; })
.attr('y', height)
.attr('x', function(d,i){ return i*55 + 5});
});
</script>
</body>
</html>