forked from vogievetsky/IntroD3
-
Notifications
You must be signed in to change notification settings - Fork 2
/
example_bar_chart.html
130 lines (102 loc) · 2.89 KB
/
example_bar_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
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
130
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Introduction to D3</title>
<script type="text/javascript" src="d3/d3.v4.js"></script>
<script type="text/javascript" src="data/browsers.js"></script>
<style type="text/css">
body {
padding: 50px;
}
svg {
border: 1px solid black;
}
text {
font: 11px sans-serif;
fill: gray;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
/* Usefull function */
var randomColor = function() {
return '#' + (Math.random().toString(16) + '000000').substr(2, 6);
}
/* Convert the string dates to date objects */
var dateParse = d3.timeParse("%B %Y")
stats.forEach(function(d) {
d.month = dateParse(d.month)
if (d.month == null) {
throw "bad date" // Make sure we have a proper date (no typos in the file).
}
});
stats = stats.reverse()
/* Vis */
var width = 700
var height = 400
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
var sx = d3.scaleTime()
.range([10, width])
var sy = d3.scaleLinear()
.domain([0, 1])
.range([0, height])
var windowSize = 10
var windowPos = 0
labelFormat = d3.timeFormat("%b %y")
var render = function() {
var data = stats.slice(windowPos, windowPos+windowSize)
sx.domain([data[0].month, data[data.length-1].month])
var selBar = svg.selectAll('rect.bar')
.data(data, function(d) { return d.month; })
selBar.enter().append('rect')
.attr('class', 'bar')
//.style('fill', randomColor)
.style('fill', colors['IE6'])
.attr('x', function(d) { return sx(d.month); })
.attr('y', function(d) { return height - sy(d.data['IE6'] || 0); })
.attr('width', 30)
.attr('height', function(d) { return sy(d.data['IE6'] || 0); })
selBar
.transition()
.duration(800)
.attr('x', function(d) { return sx(d.month); })
selBar.exit()
.transition()
.duration(800)
.attr('x', function(d) { return sx(d.month); })
.remove()
// ----------------------------------------
var selLabel = svg.selectAll('text.label')
.data(data, function(d) { return d.month; })
selLabel.enter().append('text')
.attr('class', 'label')
.attr('x', function(d) { return sx(d.month); })
.attr('y', 20)
.text(function(d) { return labelFormat(d.month); })
selLabel
.transition()
.duration(800)
.attr('x', function(d) { return sx(d.month); })
selLabel.exit()
.transition()
.duration(800)
.attr('x', function(d) { return sx(d.month); })
.remove()
}
render()
var interval = setInterval(function() {
windowPos++
if (windowPos > stats.length-windowSize) {
clearInterval(interval)
} else {
render()
}
}, 1000)
</script>
</html>