-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpay-gap-1997-2017.js
More file actions
181 lines (146 loc) · 5.16 KB
/
pay-gap-1997-2017.js
File metadata and controls
181 lines (146 loc) · 5.16 KB
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
function PayGapTimeSeries() {
// Name for the visualisation to appear in the menu bar.
this.name = 'Pay gap: 1997-2017';
// Each visualisation must have a unique ID with no special
// characters.
this.id = 'pay-gap-timeseries';
// Title to display above the plot and style applied to it.
fill(0);
textSize(12);
textFont('Georgia');
textStyle(BOLD);
this.title = 'Gender Pay Gap: Male vs. Female employees';
// Names and color for each axis.
fill(0);
this.xAxisLabel = 'year';
this.yAxisLabel = 'percentage';
var marginSize = 35;
// Layout object to store all common plot layout parameters and
// methods.
this.layout = {
marginSize: marginSize,
// Locations of margin positions. Left and bottom have double margin
// size due to axis and tick labels.
leftMargin: marginSize * 2,
rightMargin: width - marginSize,
topMargin: marginSize,
bottomMargin: height - marginSize * 2,
pad: 5,
plotWidth: function() {
return this.rightMargin - this.leftMargin;
},
plotHeight: function() {
return this.bottomMargin - this.topMargin;
},
// Boolean to enable / disable background grid.
grid: false,
// Number of axis tick labels to draw so that they are not drawn on
// top of one another.
numXTickLabels: 15,
numYTickLabels: 10,
};
// Property to represent whether data has been loaded.
this.loaded = false;
// Preload the data. This function is called automatically by the
// gallery when a visualisation is added.
this.preload = function() {
var self = this;
this.data = loadTable(
'./data/pay-gap/all-employees-hourly-pay-by-gender-1997-2017.csv', 'csv', 'header',
// Callback function to set the value
// this.loaded to true.
function(table) {
self.loaded = true;
});
};
this.setup = function() {
// Font defaults.
textSize(16);
// Set min and max years: assumes data is sorted by date.
this.startYear = this.data.getNum(0, 'year');
this.endYear = this.data.getNum(this.data.getRowCount() - 1, 'year');
// Find min and max pay gap for mapping to canvas height.
this.minPayGap = 0; // Pay equality (zero pay gap).
this.maxPayGap = max(this.data.getColumn('pay_gap'));
};
this.destroy = function() {
};
this.draw = function() {
if (!this.loaded) {
console.log('Data not yet loaded');
return;
}
// Draw the title above the plot.
this.drawTitle();
// Draw all y-axis labels.
drawYAxisTickLabels(this.minPayGap,
this.maxPayGap,
this.layout,
this.mapPayGapToHeight.bind(this),
0);
// Draw x and y axis.
drawAxis(this.layout);
// Draw x and y axis labels.
drawAxisLabels(this.xAxisLabel,
this.yAxisLabel,
this.layout);
// Plot all pay gaps between startYear and endYear using the width
// of the canvas minus margins.
var previous;
var numYears = this.endYear - this.startYear;
// Loop over all rows and draw a line from the previous value to
// the current.
for (var i = 0; i < this.data.getRowCount(); i++) {
// Create an object to store data for the current year.
var current = {
// Convert strings to numbers.
'year': this.data.getNum(i, 'year'),
'payGap': this.data.getNum(i, 'pay_gap')
};
if (previous != null) {
// Draw line segment connecting previous year to current
// year pay gap.
stroke(color(0, 0, 255));
strokeWeight(3);
line(this.mapYearToWidth(previous.year),
this.mapPayGapToHeight(previous.payGap),
this.mapYearToWidth(current.year),
this.mapPayGapToHeight(current.payGap));
// The number of x-axis labels to skip so that only
// numXTickLabels are drawn.
var xLabelSkip = ceil(numYears / this.layout.numXTickLabels);
// Draw the tick label marking the start of the previous year.
if (i % xLabelSkip == 0) {
drawXAxisTickLabel(previous.year, this.layout,
this.mapYearToWidth.bind(this));
}
}
// Assign current year to previous year so that it is available
// during the next iteration of this loop to give us the start
// position of the next line segment.
previous = current;
}
};
this.drawTitle = function() {
fill(0);
noStroke();
textAlign('center', 'center');
text(this.title,
(this.layout.plotWidth() / 2) + this.layout.leftMargin,
this.layout.topMargin - (this.layout.marginSize / 2));
};
this.mapYearToWidth = function(value) {
return map(value,
this.startYear,
this.endYear,
this.layout.leftMargin, // Draw left-to-right from margin.
this.layout.rightMargin);
};
this.mapPayGapToHeight = function(value) {
return map(value,
this.minPayGap,
this.maxPayGap,
this.layout.bottomMargin, // Smaller pay gap at bottom.
this.layout.topMargin); // Bigger pay gap at top.
};
}