-
Notifications
You must be signed in to change notification settings - Fork 3
/
dc_massdrive.html
121 lines (102 loc) · 3.53 KB
/
dc_massdrive.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dc_massdrive</title>
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script type="text/javascript" src="lib/d3.js"></script>
<script type="text/javascript" src="lib/crossfilter.js"></script>
<script type="text/javascript" src="lib/dc.js"></script>
<script>
var aC, dC, bC;
</script>
</head>
<body>
<!--
<div id="area-chart"></div>
<div id="donut-chart"></div>
<div id="bar-chart"></div>
-->
<div id="areaChart" class="dc-chart">
<strong>Area Chart</strong>
<a class="reset" href="javascript:aC.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="donutChart" class="dc-chart">
<strong>Donut Chart</strong>
<a class="reset" href="javascript:dC.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="barChart" class="dc-chart">
<strong>Bar Chart</strong>
<a class="reset" href="javascript:bC.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
<script type="text/javascript">
var yAxis = d3.svg.axis()
.tickFormat(d3.format("s"))
.orient("left");
d3.csv('car_make_10_rows.csv', function(csv){
var data = crossfilter(csv);
var makes = data.dimension(function(d){
return d.make_name;
});
var countByMake = makes.group().reduceSum(function(d){
return d.count;
});
// Although this is inefficient, for other charts use copies of these ("different" dimension
// and group) so that cross filtering will work.
var makes2 = data.dimension(function(d){
return d.make_name;
});
var countByMake2 = makes2.group().reduceSum(function(d){
return d.count;
});
var makes3 = data.dimension(function(d){
return d.make_name;
});
var countByMake3 = makes3.group().reduceSum(function(d){
return d.count;
});
aC = dc.lineChart("#areaChart")
.width(1000)
.height(250)
.dimension(makes)
.group(countByMake)
.x(d3.scale.ordinal().domain(makes))
.elasticY(true)
.renderArea(true)
.xUnits(dc.units.ordinal)
.yAxis(yAxis)
.margins({top: 10, right: 50, bottom: 30, left: 40})
;
dC = dc.pieChart("#donutChart")
.width(250)
.height(250)
.radius(125)
.innerRadius(50)
.dimension(makes2)
.group(countByMake2)
;
bC = dc.barChart("#barChart")
.width(1000)
.height(250)
.dimension(makes3)
.group(countByMake3)
.x(d3.scale.ordinal().domain(makes))
.xUnits(dc.units.ordinal)
.elasticY(true)
.centerBar(true)
.yAxis(yAxis)
.margins({top: 10, right: 50, bottom: 30, left: 40})
;
dc.renderAll();
});
</script>
</body>
</html>