-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (124 loc) · 4.52 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!-- General header stuff, don't bother your pretty head too much about this -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Demonstration - crossfilter.js and dc.js</title>
<meta charset="UTF-8">
<!-- These are the style libraries -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/dc.css"/>
<style>
/* This is the CSS portion - it styles the page*/
html {
min-height: 100%;
}
body {
height: 100%; /* or min-height */
padding:0;
margin:0;
background: #1d8acb;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
/*Style for the headers*/
h5 {
color: #ff4c51;
}
/*Custom the style of the dc.js charts here*/
/*Anything else you want to customise, just go to developer tools to find out the relevant classes/ids*/
.dc-chart .axis path, .dc-chart .axis line {
stroke: white;
}
.dc-chart .axis text {
fill: white;
}
.dc-chart .pie-slice{
fill: white;
font-size: 10px;
}
</style>
</head>
<body>
<!-- What you see on your browser -->
<div class='row'>
<h5>Super simple charts with crossfilter.js and dc.js</h5>
</div>
<div class='row'>
<hr/>
</div>
<div class="row">
<div class="col-6" id = 'rowchart'></div>
<div class="col-6" id = 'piechart'></div>
</div>
<!-- These are the javascript libraries -->
<script type="text/javascript" src="./js/d3.js"></script>
<script type="text/javascript" src="./js/crossfilter.js"></script>
<script type="text/javascript" src="./js/dc.js"></script>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<!-- Where the meaty part of the code should reside. This can also be in a separate javascript file -->
<script type="text/javascript">
// Data for loading, can also use d3.csv or d3.json
var portfolioData = [
{Year: 2014, Asset: 'Equity', Return: 0.045},
{Year: 2014, Asset: 'Bond', Return: 0.025},
{Year: 2014, Asset: 'Gold', Return: 0.015},
{Year: 2014, Asset: 'Cash', Return: 0.005},
{Year: 2015, Asset: 'Equity', Return: 0.035},
{Year: 2015, Asset: 'Bond', Return: 0.035},
{Year: 2015, Asset: 'Gold', Return: 0.005},
{Year: 2015, Asset: 'Cash', Return: 0.005},
{Year: 2016, Asset: 'Equity', Return: 0.045},
{Year: 2016, Asset: 'Bond', Return: 0.025},
{Year: 2016, Asset: 'Gold', Return: 0.015},
{Year: 2016, Asset: 'Cash', Return: 0.005},
{Year: 2017, Asset: 'Equity', Return: 0.055},
{Year: 2017, Asset: 'Bond', Return: 0.035},
{Year: 2017, Asset: 'Gold', Return: 0.015},
{Year: 2017, Asset: 'Cash', Return: 0.005},
{Year: 2018, Asset: 'Equity', Return: 0.045},
{Year: 2018, Asset: 'Bond', Return: 0.025},
{Year: 2018, Asset: 'Gold', Return: 0.025},
{Year: 2018, Asset: 'Cash', Return: 0.005}
];
// Uncomment if you would like to debug and check values in console
// console.log(portfolioData);
// Data dimensions and groupings
var datax = crossfilter(portfolioData);
var yearDimension = datax.dimension(function(d) {return d.Year;});
var assetDimension = datax.dimension(function(d) {return d.Asset;});
var returnsPerYear = yearDimension.group().reduceSum(function(d) {return +d.Return;});
var returnsPerAsset = assetDimension.group().reduceSum(function(d) {return +d.Return;});
// This is used to compute the % for the piechart
var all = yearDimension.groupAll();
// Row Chart
var returnsRowChart = dc.rowChart("#rowchart");
returnsRowChart
.dimension(yearDimension)
.group(returnsPerYear)
// .elasticX(true)
.controlsUseVisibility(true);
returnsRowChart.xAxis().ticks(5).tickFormat(function(d){return d*100+'%';});
returnsRowChart.ordinalColors(['#ffc0cb','#ff99a2', '#ff7379', '#ff4c51', '#ff2628']);
// Pie Chart
var returnsPieChart = dc.pieChart("#piechart");
returnsPieChart
.dimension(assetDimension)
.group(returnsPerAsset)
.innerRadius(50)
.controlsUseVisibility(true)
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
return d.data.key + '-' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
});
returnsPieChart.ordinalColors(['#ffc0cb','#ff99a2','#ff4c51', '#ff2628']);
// If we use this, the charts will not be linked together
// returnsPieChart.render();
dc.renderAll();
</script>
</body>
</html>