File indexing completed on 2024-12-29 05:24:49
0001 <style type="text/css"> 0002 path { stroke: #fff; } 0003 path:hover { opacity:0.9; } 0004 rect:hover { fill:blue; } 0005 .axis { font: 10px sans-serif; } 0006 .legend tr{ border-bottom:1px solid grey; } 0007 .legend tr:first-child{ border-top:1px solid grey; } 0008 0009 .axis path, 0010 .axis line { 0011 fill: none; 0012 stroke: #000; 0013 shape-rendering: crispEdges; 0014 } 0015 0016 .x.axis path { display: none; } 0017 .legend{ 0018 margin-bottom:76px; 0019 display:inline-block; 0020 border-collapse: collapse; 0021 border-spacing: 0px; 0022 } 0023 .legend td{ 0024 padding:4px 5px; 0025 vertical-align:bottom; 0026 } 0027 .legendFreq, .legendPerc{ 0028 align:right; 0029 width:50px; 0030 } 0031 0032 .axis path, 0033 .axis line { 0034 fill: none; 0035 stroke: #000; 0036 shape-rendering: crispEdges; 0037 } 0038 0039 .bar { 0040 fill: steelblue; 0041 } 0042 0043 .bar:hover { 0044 fill: blue ; 0045 } 0046 0047 .x.axis path { 0048 display: none; 0049 } 0050 0051 .d3-tip { 0052 line-height: 1; 0053 font-weight: bold; 0054 padding: 12px; 0055 background: rgba(0, 0, 0, 0.8); 0056 color: #fff; 0057 border-radius: 2px; 0058 } 0059 0060 /* Creates a small triangle extender for the tooltip */ 0061 .d3-tip:after { 0062 box-sizing: border-box; 0063 display: inline; 0064 font-size: 10px; 0065 width: 100%; 0066 line-height: 1; 0067 color: rgba(0, 0, 0, 0.8); 0068 content: "\25BC"; 0069 position: absolute; 0070 text-align: center; 0071 } 0072 0073 /* Style northward tooltips differently */ 0074 .d3-tip.n:after { 0075 margin: -1px 0 0 0; 0076 top: 100%; 0077 left: 0; 0078 } 0079 0080 #d3bar-member { 0081 display: block; 0082 } 0083 0084 #d3bar-project { 0085 display: block; 0086 } 0087 0088 0089 0090 text { 0091 font: 10px sans-serif; 0092 } 0093 0094 .axis path, 0095 .axis line { 0096 fill: none; 0097 stroke: #000; 0098 shape-rendering: crispEdges; 0099 } 0100 0101 .line { 0102 fill: none; 0103 stroke-width: 1.5px; 0104 } 0105 0106 .label { 0107 text-anchor: middle; 0108 } 0109 0110 .label rect { 0111 fill: white; 0112 } 0113 0114 .label-key { 0115 font-weight: bold; 0116 } 0117 0118 </style> 0119 0120 0121 <script src="https://d3js.org/d3.v4.min.js"></script> 0122 0123 <div class="pling-nav-tabs"> 0124 <ul class="nav nav-tabs "> 0125 <li class="active"><a href="#d3-line" data-toggle="tab">SVG Line new member&projects</a></li> 0126 <li ><a href="#d3-bar" data-toggle="tab">SVG Bar new member&projects</a></li> 0127 0128 <li ><a href="#download-panel" data-toggle="tab">Downloads</a></li> 0129 <li><a href="#pageviews-panel" data-toggle="tab">Pageviews</a></li> 0130 <li><a href="#plings-panel" data-toggle="tab">Plings</a></li> 0131 <li><a href="#others-panel" data-toggle="tab">Others</a></li> 0132 0133 0134 </ul> 0135 <div class="tab-content row" > 0136 <div id="download-panel" class="tab-pane "> 0137 <div style="width: 75%"> 0138 <canvas id="canvas-download" ></canvas> 0139 </div> 0140 </div> 0141 0142 <div id="pageviews-panel" class="tab-pane"> 0143 <div style="width: 75%;padding: 20px"> 0144 <canvas id="canvas-pageivews" ></canvas> 0145 </div> 0146 </div> 0147 0148 <div id="plings-panel" class="tab-pane"> 0149 <div style="width: 35%; padding: 20px"> 0150 <canvas id="canvas-plings" ></canvas> 0151 </div> 0152 </div> 0153 0154 <div id="others-panel" class="tab-pane"> 0155 <div style="width: 75%; padding: 20px"> 0156 <canvas id="canvas-others" ></canvas> 0157 </div> 0158 </div> 0159 0160 0161 0162 <div id="d3-bar" class="tab-pane "> 0163 <div style="width: 100%; padding: 20px"> 0164 <div style="padding-left: 200px"> New Members per day</div> 0165 <div id='d3bar-member'></div> 0166 <div style="padding-left: 200px"> New projects per day</div> 0167 <div id='d3bar-project'></div> 0168 </div> 0169 </div> 0170 0171 <div id="d3-line" class="tab-pane active "> 0172 <div style="width: 100%; padding: 20px"> 0173 0174 <div id='d3linelableinline'></div> 0175 0176 </div> 0177 </div> 0178 0179 </div> 0180 </div> 0181 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 0182 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 0183 0184 <script type="text/javascript"> 0185 window.randomScalingFactor = function() { 0186 return (Math.random() > 0.5 ? 2.0 : 1.0) * Math.round(Math.random() * 100); 0187 }; 0188 0189 window.chartColors = { 0190 red: 'rgb(255, 99, 132)', 0191 orange: 'rgb(255, 159, 64)', 0192 yellow: 'rgb(255, 205, 86)', 0193 green: 'rgb(75, 192, 192)', 0194 blue: 'rgb(54, 162, 235)', 0195 purple: 'rgb(153, 102, 255)', 0196 grey: 'rgb(201, 203, 207)' 0197 }; 0198 0199 $(document).ready(function () { 0200 0201 var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 0202 var configLinechart= { 0203 type: 'line', 0204 data: { 0205 labels: MONTHS, 0206 datasets: [{ 0207 label: "2016", 0208 backgroundColor: window.chartColors.red, 0209 borderColor: window.chartColors.red, 0210 data: [ 0211 randomScalingFactor(), 0212 randomScalingFactor(), 0213 randomScalingFactor(), 0214 randomScalingFactor(), 0215 randomScalingFactor(), 0216 randomScalingFactor(), 0217 randomScalingFactor(), 0218 randomScalingFactor(), 0219 randomScalingFactor(), 0220 randomScalingFactor(), 0221 randomScalingFactor(), 0222 randomScalingFactor() 0223 ], 0224 fill: false, 0225 }, { 0226 label: "2017", 0227 fill: false, 0228 backgroundColor: window.chartColors.blue, 0229 borderColor: window.chartColors.blue, 0230 data: [ 0231 randomScalingFactor(), 0232 randomScalingFactor(), 0233 randomScalingFactor(), 0234 randomScalingFactor(), 0235 randomScalingFactor(), 0236 randomScalingFactor(), 0237 randomScalingFactor(), 0238 randomScalingFactor() 0239 ], 0240 }] 0241 }, 0242 options: { 0243 responsive: true, 0244 title:{ 0245 display:true, 0246 text:'Downloads 2 years' 0247 }, 0248 tooltips: { 0249 mode: 'index', 0250 intersect: false, 0251 }, 0252 hover: { 0253 mode: 'nearest', 0254 intersect: true 0255 }, 0256 scales: { 0257 xAxes: [{ 0258 display: true, 0259 scaleLabel: { 0260 display: true, 0261 labelString: 'Month' 0262 } 0263 }], 0264 yAxes: [{ 0265 display: true, 0266 scaleLabel: { 0267 display: true, 0268 labelString: 'Value' 0269 } 0270 }] 0271 } 0272 } 0273 }; 0274 0275 0276 var configBarchart= { 0277 type: 'bar', 0278 data: { 0279 labels: MONTHS, 0280 datasets: [{ 0281 label: "2016", 0282 backgroundColor: window.chartColors.red, 0283 borderColor: window.chartColors.red, 0284 data: [ 0285 randomScalingFactor(), 0286 randomScalingFactor(), 0287 randomScalingFactor(), 0288 randomScalingFactor(), 0289 randomScalingFactor(), 0290 randomScalingFactor(), 0291 randomScalingFactor(), 0292 randomScalingFactor(), 0293 randomScalingFactor(), 0294 randomScalingFactor(), 0295 randomScalingFactor(), 0296 randomScalingFactor() 0297 ], 0298 fill: false, 0299 }, { 0300 label: "2017", 0301 fill: false, 0302 backgroundColor: window.chartColors.blue, 0303 borderColor: window.chartColors.blue, 0304 data: [ 0305 randomScalingFactor(), 0306 randomScalingFactor(), 0307 randomScalingFactor(), 0308 randomScalingFactor(), 0309 randomScalingFactor(), 0310 randomScalingFactor(), 0311 randomScalingFactor(), 0312 randomScalingFactor() 0313 ], 0314 }] 0315 }, 0316 options: { 0317 responsive: true, 0318 title:{ 0319 display:true, 0320 text:'Pageviews 2 years' 0321 }, 0322 tooltips: { 0323 mode: 'index', 0324 intersect: false, 0325 }, 0326 hover: { 0327 mode: 'nearest', 0328 intersect: true 0329 }, 0330 scales: { 0331 xAxes: [{ 0332 display: true, 0333 scaleLabel: { 0334 display: true, 0335 labelString: 'Month' 0336 } 0337 }], 0338 yAxes: [{ 0339 display: true, 0340 scaleLabel: { 0341 display: true, 0342 labelString: 'Value' 0343 } 0344 }] 0345 } 0346 } 0347 }; 0348 0349 0350 var configPie = { 0351 type: 'pie', 0352 data: { 0353 datasets: [{ 0354 data: [ 0355 randomScalingFactor(), 0356 randomScalingFactor(), 0357 randomScalingFactor(), 0358 randomScalingFactor(), 0359 randomScalingFactor(), 0360 ], 0361 backgroundColor: [ 0362 window.chartColors.red, 0363 window.chartColors.orange, 0364 window.chartColors.yellow, 0365 window.chartColors.green, 0366 window.chartColors.blue, 0367 ], 0368 label: 'Dataset 1' 0369 }], 0370 labels: [ 0371 "Red", 0372 "Orange", 0373 "Yellow", 0374 "Green", 0375 "Blue" 0376 ] 0377 }, 0378 options: { 0379 responsive: true 0380 } 0381 }; 0382 0383 var timeFormat = 'MM/DD/YYYY'; 0384 var color = Chart.helpers.color; 0385 function newDateString(days) { 0386 return moment().add(days, 'd').format(timeFormat); 0387 } 0388 0389 var configCombo = { 0390 type: 'bar', 0391 data: { 0392 labels: [ 0393 newDateString(0), 0394 newDateString(1), 0395 newDateString(2), 0396 newDateString(3), 0397 newDateString(4), 0398 newDateString(5), 0399 newDateString(6) 0400 ], 0401 datasets: [{ 0402 type: 'bar', 0403 label: 'Dataset 1', 0404 backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(), 0405 borderColor: window.chartColors.red, 0406 data: [ 0407 randomScalingFactor(), 0408 randomScalingFactor(), 0409 randomScalingFactor(), 0410 randomScalingFactor(), 0411 randomScalingFactor(), 0412 randomScalingFactor(), 0413 randomScalingFactor() 0414 ], 0415 }, { 0416 type: 'bar', 0417 label: 'Dataset 2', 0418 backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(), 0419 borderColor: window.chartColors.blue, 0420 data: [ 0421 randomScalingFactor(), 0422 randomScalingFactor(), 0423 randomScalingFactor(), 0424 randomScalingFactor(), 0425 randomScalingFactor(), 0426 randomScalingFactor(), 0427 randomScalingFactor() 0428 ], 0429 }, { 0430 type: 'line', 0431 label: 'Dataset 3', 0432 backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(), 0433 borderColor: window.chartColors.green, 0434 fill: false, 0435 data: [ 0436 randomScalingFactor(), 0437 randomScalingFactor(), 0438 randomScalingFactor(), 0439 randomScalingFactor(), 0440 randomScalingFactor(), 0441 randomScalingFactor(), 0442 randomScalingFactor() 0443 ], 0444 }, ] 0445 }, 0446 options: { 0447 title: { 0448 text:"other Scale" 0449 }, 0450 scales: { 0451 xAxes: [{ 0452 type: "time", 0453 display: true, 0454 time: { 0455 format: timeFormat, 0456 // round: 'day' 0457 } 0458 }], 0459 }, 0460 } 0461 }; 0462 0463 0464 0465 var ctx = document.getElementById("canvas-download").getContext("2d"); 0466 window.myDownLine = new Chart(ctx, configLinechart); 0467 0468 0469 var ctx = document.getElementById("canvas-pageivews").getContext("2d"); 0470 window.myPageviewsBarchart = new Chart(ctx, configBarchart); 0471 0472 var ctx = document.getElementById("canvas-plings").getContext("2d"); 0473 window.myPie = new Chart(ctx, configPie); 0474 0475 var ctx = document.getElementById("canvas-others").getContext("2d"); 0476 window.myOthers = new Chart(ctx, configCombo); 0477 0478 }) 0479 </script> 0480 0481 0482 <script> 0483 0484 var margin = {top: 40, right: 20, bottom: 30, left: 40}, 0485 width = 560 - margin.left - margin.right, 0486 height = 300 - margin.top - margin.bottom; 0487 var barColor = 'steelblue'; 0488 //var formatPercent = d3.format(".0%"); 0489 0490 0491 var x = d3.scaleBand() 0492 .range([0, width]) 0493 .padding(0.1); 0494 0495 var y = d3.scaleLinear() 0496 .range([height, 0]); 0497 0498 var svg = d3.select("#d3bar-member").append("svg") 0499 .attr("width", width + margin.left + margin.right) 0500 .attr("height", height + margin.top + margin.bottom+100) 0501 .append("g") 0502 .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 0503 0504 0505 d3.json("statistics/data/projects/", function(error, data) { 0506 x.domain(data.map(function(d) { return d.memberdate; })); 0507 y.domain([0, d3.max(data, function(d) { return d.daycount; })]); 0508 0509 0510 svg.selectAll(".bar") 0511 .data(data) 0512 .enter().append("rect") 0513 .attr("class", "bar") 0514 .attr("x", function(d) { return x(d.memberdate); }) 0515 .attr("width", x.bandwidth()) 0516 .attr("y", function(d) { return y(d.daycount); }) 0517 .attr("height", function(d) { return height - y(d.daycount); }) 0518 0519 .on('click',function(d){ 0520 alert(d.daycount); 0521 }); 0522 0523 svg.selectAll("text") 0524 .data(data) 0525 .enter() 0526 .append("text") 0527 .text(function(d){ return d.daycount;}) 0528 .attr("text-anchor", "middle") 0529 .attr("x", function(d, i) { 0530 return x(d.memberdate)+x.bandwidth()/2; 0531 }) 0532 .attr("y", function(d) { 0533 return y(d.daycount)+ 14; 0534 }) 0535 .attr("font-family", "sans-serif") 0536 .attr("font-size", "11px") 0537 .attr("fill", "white"); 0538 0539 svg.append("g") 0540 .attr("class", "x axis") 0541 .attr("transform", "translate(0," + height + ")") 0542 .call(d3.axisBottom(x)) 0543 // Add the x Axis 0544 0545 }); 0546 0547 0548 0549 function type(d) { 0550 d.daycount = +d.daycount; 0551 return d; 0552 } 0553 0554 </script> 0555 0556 0557 <script type="text/javascript"> 0558 0559 // new projects 0560 var marginp = {top: 40, right: 20, bottom: 30, left: 40}, 0561 widthp = 560 - marginp.left - marginp.right, 0562 heightp = 300 - marginp.top - marginp.bottom; 0563 0564 var xp = d3.scaleBand() 0565 .range([0, width]) 0566 .padding(0.1); 0567 0568 var yp = d3.scaleLinear() 0569 .range([height, 0]); 0570 0571 var svgp = d3.select("#d3bar-project").append("svg") 0572 .attr("width", widthp + marginp.left + marginp.right) 0573 .attr("height", heightp + marginp.top + marginp.bottom+100) 0574 .append("g") 0575 .attr("transform", "translate(" + marginp.left + "," + marginp.top + ")"); 0576 0577 0578 d3.json("statistics/data/member/", function(error, data) { 0579 xp.domain(data.map(function(d) { return d.projectdate; })); 0580 yp.domain([0, d3.max(data, function(d) { return d.daycount; })]); 0581 0582 0583 svgp.selectAll(".bar") 0584 .data(data) 0585 .enter().append("rect") 0586 .attr("class", "bar") 0587 .attr("x", function(d) { return xp(d.projectdate); }) 0588 .attr("width", xp.bandwidth()) 0589 .attr("y", function(d) { return yp(d.daycount); }) 0590 .attr("height", function(d) { return heightp - yp(d.daycount); }) 0591 0592 .on('click',function(d){ 0593 alert(d.daycount); 0594 }); 0595 0596 svgp.selectAll("text") 0597 .data(data) 0598 .enter() 0599 .append("text") 0600 .text(function(d){ return d.daycount;}) 0601 .attr("text-anchor", "middle") 0602 .attr("x", function(d, i) { 0603 return xp(d.projectdate)+xp.bandwidth()/2; 0604 }) 0605 .attr("y", function(d) { 0606 return yp(d.daycount)+ 14; 0607 }) 0608 .attr("font-family", "sans-serif") 0609 .attr("font-size", "11px") 0610 .attr("fill", "white"); 0611 0612 svgp.append("g") 0613 .attr("class", "x axis") 0614 .attr("transform", "translate(0," + heightp + ")") 0615 .call(d3.axisBottom(xp)) 0616 .selectAll("text") 0617 .attr("y", 0) 0618 .attr("x", 9) 0619 .attr("dy", ".35em") 0620 .attr("transform", "rotate(90)") 0621 .style("text-anchor", "start"); 0622 ; 0623 0624 }); 0625 0626 </script> 0627 0628 0629 <script> 0630 0631 var parseTime = d3.timeParse("%m-%d"); 0632 0633 var svgLine = d3.select("#d3linelableinline") 0634 .append("svg") 0635 .attr("width", 960) 0636 .attr("height", 500); 0637 0638 var marginLine = {top: 30, right: 50, bottom: 30, left: 30}, 0639 widthLine = +svgLine.attr("width") - marginLine.left - marginLine.right, 0640 heightLine = +svgLine.attr("height") - marginLine.top - marginLine.bottom, 0641 labelPadding = 3; 0642 0643 var g = svgLine.append("g") 0644 .attr("transform", "translate(" + marginLine.left + "," + marginLine.top + ")"); 0645 0646 d3.tsv("data/data.tsv", function(d) { 0647 d.date = parseTime(d.date); 0648 for (var k in d) if (k !== "date") d[k] = +d[k]; 0649 return d; 0650 }, function(error, data) { 0651 if (error) throw error; 0652 0653 var series = data.columns.slice(1).map(function(key) { 0654 return data.map(function(d) { 0655 return { 0656 key: key, 0657 date: d.date, 0658 value: d[key] 0659 }; 0660 }); 0661 }); 0662 0663 var xLine = d3.scaleTime() 0664 .domain([data[0].date, data[data.length - 1].date]) 0665 .range([0, widthLine]); 0666 0667 var yLine = d3.scaleLinear() 0668 .domain([0, d3.max(series, function(s) { return d3.max(s, function(d) { return d.value; }); })]) 0669 .range([heightLine, 0]); 0670 0671 var zLine = d3.scaleOrdinal(d3.schemeCategory10); 0672 0673 g.append("g") 0674 .attr("class", "axis axis--x") 0675 .attr("transform", "translate(0," + heightLine + ")") 0676 .call(d3.axisBottom(xLine)); 0677 0678 var serie = g.selectAll(".serie") 0679 .data(series) 0680 .enter().append("g") 0681 .attr("class", "serie"); 0682 0683 serie.append("path") 0684 .attr("class", "line") 0685 .style("stroke", function(d) { return zLine(d[0].key); }) 0686 .attr("d", d3.line() 0687 .x(function(d) { return xLine(d.date); }) 0688 .y(function(d) { return yLine(d.value); })); 0689 0690 var label = serie.selectAll(".label") 0691 .data(function(d) { return d; }) 0692 .enter().append("g") 0693 .attr("class", "label") 0694 .attr("transform", function(d, i) { return "translate(" + xLine(d.date) + "," + yLine(d.value) + ")"; }); 0695 0696 label.append("text") 0697 .attr("dy", ".35em") 0698 .text(function(d) { return d.value; }) 0699 .filter(function(d, i) { return i === data.length - 1; }) 0700 0701 0702 const newText = label.selectAll('text'); 0703 const bbox = newText.node().getBBox(); 0704 0705 label.append('rect', 'text') 0706 .datum(() => bbox) 0707 .attr('x', d => (d.x - labelPadding)) 0708 .attr('y', d => (d.y - labelPadding)) 0709 .attr('width', d => (d.width + (2 * labelPadding))) 0710 .attr('height', d => (d.height + (2 * labelPadding))); 0711 0712 label.append("text") 0713 .attr("dy", ".35em") 0714 .text(function(d) { return d.value; }) 0715 .filter(function(d, i) { return i === data.length - 1; }) 0716 .append("tspan") 0717 .attr("class", "label-key") 0718 .text(function(d) { return " " + d.key; }); 0719 0720 }); 0721 0722 0723 </script> 0724