|
|
@@ -24,7 +24,7 @@ const margin = { top: 50, right: 0, bottom: 100, left: 30 },
|
|
24
|
24
|
|
|
25
|
25
|
days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
|
|
26
|
26
|
times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"];
|
|
27
|
|
- datasets = ["../static/data/data.tsv", "../static/data/data2.tsv"];
|
|
|
27
|
+ datasets = ["../static/data/data_dummy.tsv", "../static/data/data2_dummy.tsv"];
|
|
28
|
28
|
|
|
29
|
29
|
const svg = d3.select("#chart").append("svg")
|
|
30
|
30
|
.attr("width", width + margin.left + margin.right)
|
|
|
@@ -170,7 +170,6 @@ function generateBarChart (pathToTSV,divID){
|
|
170
|
170
|
var width=520
|
|
171
|
171
|
var height=380
|
|
172
|
172
|
var chartWidth, chartHeight
|
|
173
|
|
- var margin
|
|
174
|
173
|
var svg = d3.select(divID).append("svg")
|
|
175
|
174
|
var axisLayer = svg.append("g").classed("axisLayer", true)
|
|
176
|
175
|
var chartLayer = svg.append("g").classed("chartLayer", true)
|
|
|
@@ -183,14 +182,14 @@ function generateBarChart (pathToTSV,divID){
|
|
183
|
182
|
.style("opacity", 0);
|
|
184
|
183
|
|
|
185
|
184
|
function main(data) {
|
|
186
|
|
- setSize(data)
|
|
187
|
|
- drawAxis()
|
|
188
|
|
- drawChart(data)
|
|
|
185
|
+ setSize();
|
|
|
186
|
+ drawAxisBarChart();
|
|
|
187
|
+ drawChartBarChart();
|
|
189
|
188
|
}
|
|
190
|
189
|
|
|
191
|
|
- function setSize(data) {
|
|
|
190
|
+ function setSize() {
|
|
192
|
191
|
|
|
193
|
|
- margin = {top:50, right:0, bottom:100, left:30}
|
|
|
192
|
+ var margin = {top:50, right:0, bottom:100, left:30}
|
|
194
|
193
|
chartWidth = width - margin.left - margin.right,
|
|
195
|
194
|
chartHeight = height - margin.top - margin.bottom,
|
|
196
|
195
|
|
|
|
@@ -215,13 +214,13 @@ function generateBarChart (pathToTSV,divID){
|
|
215
|
214
|
|
|
216
|
215
|
}
|
|
217
|
216
|
|
|
218
|
|
- function drawChart(data) {
|
|
|
217
|
+ function drawChartBarChart() {
|
|
219
|
218
|
// monitor the transition
|
|
220
|
219
|
var t = d3.transition()
|
|
221
|
|
- .duration(1000)
|
|
|
220
|
+ .duration(1100)
|
|
222
|
221
|
.ease(d3.easeLinear)
|
|
223
|
|
- .on("start", function(d){ console.log("Transiton start") })
|
|
224
|
|
- .on("end", function(d){ console.log("Transiton end") })
|
|
|
222
|
+ .on("start", function(d){ console.log("Bar Chart Transiton start") })
|
|
|
223
|
+ .on("end", function(d){ console.log("Bar Chart Transiton end") })
|
|
225
|
224
|
|
|
226
|
225
|
var bar = chartLayer
|
|
227
|
226
|
.selectAll(".bar")
|
|
|
@@ -229,11 +228,6 @@ function generateBarChart (pathToTSV,divID){
|
|
229
|
228
|
|
|
230
|
229
|
bar.exit().remove()
|
|
231
|
230
|
|
|
232
|
|
-
|
|
233
|
|
- var labels = chartLayer
|
|
234
|
|
- .selectAll("labels")
|
|
235
|
|
- .data(data)
|
|
236
|
|
-
|
|
237
|
231
|
bar
|
|
238
|
232
|
.enter()
|
|
239
|
233
|
.append("rect")
|
|
|
@@ -245,18 +239,22 @@ function generateBarChart (pathToTSV,divID){
|
|
245
|
239
|
//setup for cool transition
|
|
246
|
240
|
.attr("height", 0)
|
|
247
|
241
|
.attr("transform", function(d){ return "translate("+[xScale(d.day_name), chartHeight]+")"})
|
|
248
|
|
-
|
|
249
|
242
|
|
|
|
243
|
+ var labels = chartLayer
|
|
|
244
|
+ .selectAll("labels")
|
|
|
245
|
+ .data(data)
|
|
|
246
|
+
|
|
|
247
|
+ //setup for percentage display
|
|
250
|
248
|
var totalCommits=0
|
|
251
|
249
|
data.forEach(function(d){
|
|
252
|
250
|
totalCommits+=d.commits
|
|
253
|
251
|
})
|
|
|
252
|
+
|
|
254
|
253
|
labels
|
|
255
|
254
|
.enter()
|
|
256
|
255
|
.append("text")
|
|
257
|
256
|
.text(function(d){
|
|
258
|
257
|
var percentage= (d.commits/totalCommits *100).toFixed(2)
|
|
259
|
|
-
|
|
260
|
258
|
return ""+percentage+"%";
|
|
261
|
259
|
})
|
|
262
|
260
|
.attr("transform", function(d){
|
|
|
@@ -269,7 +267,7 @@ function generateBarChart (pathToTSV,divID){
|
|
269
|
267
|
.attr("transform", function(d){ return "translate("+[xScale(d.day_name), yScale(d.commits)]+")"})
|
|
270
|
268
|
}
|
|
271
|
269
|
|
|
272
|
|
- function drawAxis(){
|
|
|
270
|
+ function drawAxisBarChart(){
|
|
273
|
271
|
var yAxis = d3.axisLeft(yScale)
|
|
274
|
272
|
.tickSizeInner(-chartWidth)
|
|
275
|
273
|
|
|
|
@@ -284,17 +282,17 @@ function generateBarChart (pathToTSV,divID){
|
|
284
|
282
|
.attr("class", "axis x")
|
|
285
|
283
|
.attr("transform", "translate("+[margin.left, (height-margin.bottom)]+")")
|
|
286
|
284
|
.call(xAxis);
|
|
287
|
|
-
|
|
288
|
285
|
}
|
|
289
|
286
|
|
|
290
|
287
|
//kicks of execution of the bar chart
|
|
291
|
|
- main(data);
|
|
292
|
|
- });
|
|
|
288
|
+ main();
|
|
|
289
|
+
|
|
|
290
|
+ }); //end of tsv read in
|
|
293
|
291
|
|
|
294
|
292
|
} //end of generateBarChart
|
|
295
|
293
|
|
|
296
|
|
-generateLineChart("../static/data/commits_by_author.tsv", "#lineChart");
|
|
297
|
|
-generateLineChart("../static/data/lines_of_code_by_author.tsv", "#lineChart2");
|
|
|
294
|
+generateLineChart("../static/data/commits_by_author_copy.tsv", "#lineChart");
|
|
|
295
|
+generateLineChart("../static/data/lines_of_code_by_author_copy.tsv", "#lineChart2");
|
|
298
|
296
|
|
|
299
|
297
|
function generateLineChart(pathToTSV, divID){
|
|
300
|
298
|
|
|
|
@@ -337,12 +335,7 @@ function generateLineChart(pathToTSV, divID){
|
|
337
|
335
|
var xScale = d3.scaleTime().range([0, width]),
|
|
338
|
336
|
yScale = d3.scaleLinear().range([height, 0]),
|
|
339
|
337
|
// 10 nice colors
|
|
340
|
|
- z = d3.scaleOrdinal(d3.schemeCategory10);
|
|
341
|
|
-
|
|
342
|
|
- var line = d3.line()
|
|
343
|
|
- .curve(d3.curveBasis)
|
|
344
|
|
- .x(function(d) { return xScale(d.date); })
|
|
345
|
|
- .y(function(d) { return yScale(d.commits);});
|
|
|
338
|
+ colors = d3.scaleOrdinal(d3.schemeCategory10);
|
|
346
|
339
|
|
|
347
|
340
|
xScale.domain(d3.extent(data, function(d) { return d.date; }));
|
|
348
|
341
|
|
|
|
@@ -351,7 +344,14 @@ function generateLineChart(pathToTSV, divID){
|
|
351
|
344
|
d3.max(authors, function(c) { return d3.max(c.values, function(d) { return d.commits; }); })
|
|
352
|
345
|
]);
|
|
353
|
346
|
|
|
354
|
|
- z.domain(authors.map(function(c) { return c.id; }));
|
|
|
347
|
+ var line = d3.line()
|
|
|
348
|
+ // different types of interpolations here
|
|
|
349
|
+ // https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529
|
|
|
350
|
+ .curve(d3.curveBasis)
|
|
|
351
|
+ .x(function(d) { return xScale(d.date); })
|
|
|
352
|
+ .y(function(d) { return yScale(d.commits);});
|
|
|
353
|
+
|
|
|
354
|
+ colors.domain(authors.map(function(c) { return c.id; }));
|
|
355
|
355
|
|
|
356
|
356
|
function main(){
|
|
357
|
357
|
drawAxisLineChart();
|
|
|
@@ -372,6 +372,7 @@ function generateLineChart(pathToTSV, divID){
|
|
372
|
372
|
}
|
|
373
|
373
|
|
|
374
|
374
|
function drawAxisLineChart(){
|
|
|
375
|
+
|
|
375
|
376
|
g.append("g")
|
|
376
|
377
|
.attr("class", "axis axis--x")
|
|
377
|
378
|
.attr("transform", "translate(0," + height + ")")
|
|
|
@@ -380,11 +381,11 @@ function generateLineChart(pathToTSV, divID){
|
|
380
|
381
|
g.append("g")
|
|
381
|
382
|
.attr("class", "axis axis--y")
|
|
382
|
383
|
.call(d3.axisLeft(yScale))
|
|
383
|
|
- .append("text")
|
|
384
|
|
- .attr("transform", "rotate(-90)")
|
|
385
|
|
- .attr("y", 6)
|
|
386
|
|
- .attr("dy", "0.71em")
|
|
387
|
|
- .attr("fill", "#000")
|
|
|
384
|
+ // .append("text")
|
|
|
385
|
+ // .attr("transform", "rotate(-90)")
|
|
|
386
|
+ // .attr("y", 6)
|
|
|
387
|
+ // .attr("dy", "0.71em")
|
|
|
388
|
+ // .attr("fill", "#000")
|
|
388
|
389
|
|
|
389
|
390
|
// add the X gridlines
|
|
390
|
391
|
g.append("g")
|
|
|
@@ -414,7 +415,7 @@ function generateLineChart(pathToTSV, divID){
|
|
414
|
415
|
author.append("path")
|
|
415
|
416
|
.attr("class", "line")
|
|
416
|
417
|
.attr("d", function(d) { return line(d.values); })
|
|
417
|
|
- .style("stroke", function(d) { return z(d.id); });
|
|
|
418
|
+ .style("stroke", function(d) { return colors(d.id); });
|
|
418
|
419
|
|
|
419
|
420
|
// Enable to show author at the end of the line
|
|
420
|
421
|
// author.append("text")
|
|
|
@@ -441,7 +442,7 @@ function generateLineChart(pathToTSV, divID){
|
|
441
|
442
|
.attr('width', 10)
|
|
442
|
443
|
.attr('height', 10)
|
|
443
|
444
|
.style('fill', function(d) {
|
|
444
|
|
- return z(d.id);
|
|
|
445
|
+ return colors(d.id);
|
|
445
|
446
|
});
|
|
446
|
447
|
legend.append('text')
|
|
447
|
448
|
.attr('x', chartWidth - 8)
|