-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (104 loc) · 3.16 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
<!DOCTYPE html>
<html>
<head>
<title>Data Visualization Dashboard</title>
<meta charset="UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.4/crossfilter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/4.2.7/dc.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/4.2.7/style/dc.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="chart-wrapper pie">
<h2>Hometown</h2>
<div id="chart-hometown"></div>
</div>
<div class="chart-wrapper bar">
<h2>Years in Hawaii</h2>
<div id="chart-years"></div>
</div>
<div class="chart-wrapper bar">
<h2>Industry</h2>
<div id="chart-industry"></div>
</div>
</div>
<script>
const pieChartColors = d3.scaleOrdinal().range([
'#74c2f6',
'#7fc97f',
'#beaed4',
'#fdc086',
'#ffff99',
'#f0027f',
'#386cb0',
'#bf5b17',
'#666666'
]);
const barChartColors = d3.scaleOrdinal().range([
'#74c2f6',
]);
d3.csv("data.csv").then(function(data) {
// Convert strings to numbers where needed
data.forEach(function(d) {
d.years_in_hawaii = +d.years_in_hawaii;
});
// Create a crossfilter instance
const cf = crossfilter(data);
// Define dimensions
const dimHometown = cf.dimension(function(d) { return d.hometown; });
const dimIndustry = cf.dimension(function(d) { return d.industry; });
// Define groups
const groupHometown = dimHometown.group();
const groupIndustry = dimIndustry.group();
// Create the "Years in Hawaii" dimension and group
const yearsDimension = cf.dimension(function(d) { return d.years_in_hawaii; });
const yearsGroup = yearsDimension.group().reduceCount();
// Create charts
const chartHometown = dc.pieChart("#chart-hometown");
const chartIndustry = dc.barChart("#chart-industry");
const chartYears = dc.barChart("#chart-years");
// Set chart properties
chartHometown
.width(300)
.height(300)
.dimension(dimHometown)
.group(groupHometown)
.innerRadius(50)
.colors(pieChartColors);
chartIndustry
.width(900)
.height(300)
.dimension(dimIndustry)
.group(groupIndustry)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.elasticX(true)
.colors(barChartColors)
chartYears
.width(500)
.height(300)
.dimension(yearsDimension)
.group(yearsGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.ordering(function(d) { return d.key; }) // Use d3.ascending to sort by number
.elasticY(true)
.margins({ top: 10, right: 50, bottom: 30, left: 50 })
.colors(barChartColors)
.xAxis().tickFormat(function(d) {
if (d === 5) {
return '5+';
}
return d;
});
chartIndustry.yAxis().ticks(0);
chartYears.yAxis().ticks(0);
// Render charts
dc.renderAll();
});
</script>
</body>
</html>