Last active
March 25, 2016 11:48
-
-
Save iCHAIT/c20b42f2b8225a2617e4 to your computer and use it in GitHub Desktop.
Activities vs Time Spent by the Organization for each project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link href="http://ourworldindata.org/wp-content/uploads/nvd3/nvd3_multiBarChart_DeadlinessPerConflictPerTypePerDecade/nv.d3.css" rel="stylesheet" type="text/css"> | |
| <link href="http://ourworldindata.org/wp-content/uploads/maxstyle_for_d3/max.nv.d3.css" rel="stylesheet" type="text/css"> | |
| <style>body{overflow-y:hidden;overflow-x:hidden;margin:0px 4px 0px 0px;}#CreditsContainer{position:absolute;height:40px;background-color:#FAFAFA;width:100%;bottom:0;margin:0;border:0;padding:0;}#chart1,#chart2{position:absolute;}#chart1 .nv-lineChart circle.nv-point,#chart2 .nv-lineChart circle.nv-point{fill-opacity:0.9;}#chart1 .nv-lineChart path.nv-line,#chart2 .nv-lineChart path.nv-line{stroke-opacity:0.6;stroke-width:0.5px;}.tick line{opacity:0.3;}</style> | |
| <body> | |
| <div> | |
| <svg id="chart1"></svg> | |
| </div> | |
| <div> | |
| <!-- <svg id="CreditsContainer"></svg> --> | |
| </div> | |
| <script src="http://ourworldindata.org/wp-content/uploads/nvd3/nvd3_multiBarChart_DeadlinessPerConflictPerTypePerDecade/d3.v3.js"></script> | |
| <script src="http://ourworldindata.org/wp-content/uploads/nvd3/nvd3_multiBarChart_DeadlinessPerConflictPerTypePerDecade/nv.d3.js"></script> | |
| <script> | |
| var xxx = [ | |
| { | |
| "values" : [ | |
| { | |
| "x":"what's fresh", | |
| "y":70 | |
| }, | |
| { | |
| "x":"pgd", | |
| "y":42 | |
| }, | |
| { | |
| "x":"timesync-node", | |
| "y":34 | |
| }, | |
| { | |
| "x":"pymesync", | |
| "y":12 | |
| }, | |
| { | |
| "x":"fenestra", | |
| "y":9 | |
| }, | |
| { | |
| "x":"timesync-frontend-django", | |
| "y":5 | |
| } | |
| ] | |
| , | |
| "key" : "Testing" | |
| } | |
| ,{ | |
| "values" : [ | |
| { | |
| "x":"what's fresh", | |
| "y":86 | |
| }, | |
| { | |
| "x":"pgd", | |
| "y":56 | |
| }, | |
| { | |
| "x":"timesync-node", | |
| "y":39 | |
| }, | |
| { | |
| "x":"pymesync", | |
| "y":22 | |
| }, | |
| { | |
| "x":"fenestra", | |
| "y":34 | |
| }, | |
| { | |
| "x":"timesync-frontend-django", | |
| "y":17 | |
| } | |
| ] | |
| , | |
| "key" : "Coding" | |
| } | |
| ,{ | |
| "values" : [ | |
| { | |
| "x":"what's fresh", | |
| "y":9 | |
| }, | |
| { | |
| "x":"pgd", | |
| "y":2 | |
| }, | |
| { | |
| "x":"timesync-node", | |
| "y":3 | |
| }, | |
| { | |
| "x":"pymesync", | |
| "y":2 | |
| }, | |
| { | |
| "x":"fenestra", | |
| "y":3 | |
| }, | |
| { | |
| "x":"timesync-frontend-django", | |
| "y":5 | |
| } | |
| ] | |
| , | |
| "key" : "Code Review" | |
| } | |
| ,{ | |
| "values" : [ | |
| { | |
| "x":"what's fresh", | |
| "y":7 | |
| }, | |
| { | |
| "x":"pgd", | |
| "y":12 | |
| }, | |
| { | |
| "x":"timesync-node", | |
| "y":10 | |
| }, | |
| { | |
| "x":"pymesync", | |
| "y":13 | |
| }, | |
| { | |
| "x":"fenestra", | |
| "y":6 | |
| }, | |
| { | |
| "x":"timesync-frontend-django", | |
| "y":3 | |
| } | |
| ] | |
| , | |
| "key" : "Documentation" | |
| } | |
| ]; | |
| var colors = d3.scale.ordinal() | |
| .range(["black", "darkblue","#ff7232", "#ffcb00"]) | |
| .domain(d3.range(0,4)); | |
| keyColor = function(d, i) {return colors(d.key)}; | |
| var chart; | |
| nv.addGraph(function() { | |
| chart = nv.models.multiBarChart() | |
| // .transitionDuration(700) | |
| .margin({top: 30, right: 20, bottom: 90, left: 60}) | |
| .color(keyColor) | |
| // .delay(0) | |
| .rotateLabels(45) | |
| .groupSpacing(0.1) | |
| ; | |
| chart.multibar | |
| .hideable(true); | |
| chart.reduceXTicks(true).staggerLabels(false); | |
| chart.xAxis; | |
| chart.yAxis | |
| .axisLabel('Hours Spent') | |
| .axisLabelDistance(25) | |
| .tickFormat(d3.format(',.0f')) ; | |
| d3.select('#chart1') | |
| .datum(xxx) | |
| .transition().duration(1000).call(chart); | |
| nv.utils.windowResize(chart.update); | |
| chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); | |
| return chart; | |
| }); | |
| var logoCanvas = d3.select("#chart1") | |
| var creditsCanvas = d3.select("#CreditsContainer") | |
| var xorigin=8; | |
| var yorigin=1; | |
| creditsCanvas | |
| .append("text") | |
| .text("The author Max Roser licensed this visualisation under a") | |
| .attr("x",xorigin+0) | |
| .attr("y",yorigin+10) | |
| .attr("id",'erstesTextstuck').attr('class','creditsText'); | |
| var erstesTextstuckLange = document.getElementById('erstesTextstuck').getComputedTextLength(); | |
| creditsCanvas.append("svg:a") | |
| .attr("xlink:href", "http://creativecommons.org/licenses/by-sa/4.0/deed.en_US") | |
| .attr("target","_blank") | |
| .append("svg:text") | |
| .attr("x", xorigin+erstesTextstuckLange+3) | |
| .attr("y", yorigin+10) | |
| .attr('class','creditsLink').attr("id",'zweitesTextstuck') | |
| .text("CC BY-SA license"); | |
| var zweitesTextstuckLange = document.getElementById('zweitesTextstuck').getComputedTextLength(); | |
| creditsCanvas | |
| .append("text") | |
| .text(". You are welcome to share but please refer to its source where you") | |
| .attr("x",xorigin+erstesTextstuckLange+3+zweitesTextstuckLange+1) | |
| .attr("y",yorigin+10) | |
| .attr("id",'drittesTextstuck').attr('class','creditsText'); | |
| var drittesTextstuckLange = document.getElementById('drittesTextstuck').getComputedTextLength(); | |
| var TextViertesTextstuck = creditsCanvas | |
| .append("text") | |
| .text("find more information:") | |
| .attr("id",'viertesTextstuck') | |
| .attr('class','creditsText'); | |
| var viertesTextstuckLange = document.getElementById('viertesTextstuck').getComputedTextLength(); | |
| var TextFunftesTextstuck = creditsCanvas.append("svg:a") | |
| .attr("xlink:href", "http://www.ourworldindata.org/data/war-peace/war-and-peace-after-1945/") | |
| .attr("target","_blank") | |
| .append("svg:text") | |
| .attr('class','creditsLink') | |
| .text("www.ourworldindata.org/data/war-peace/war-and-peace-after-1945") | |
| .attr("id",'funftesTextstuck'); | |
| var funftesTextstuckLange = document.getElementById('funftesTextstuck').getComputedTextLength(); | |
| var creditsCanvasWidth = parseInt(creditsCanvas.style('width')); | |
| var LongTextWidth = parseInt( xorigin + erstesTextstuckLange + 3 + zweitesTextstuckLange + 1 + drittesTextstuckLange + 3 + viertesTextstuckLange + 3 + funftesTextstuckLange ); | |
| if (creditsCanvasWidth > LongTextWidth ) { | |
| TextViertesTextstuck | |
| .attr("x",xorigin+erstesTextstuckLange+3+zweitesTextstuckLange+1+drittesTextstuckLange+3) | |
| .attr("y",yorigin+10); | |
| } | |
| else | |
| { | |
| TextViertesTextstuck | |
| .attr("x",xorigin+0) | |
| .attr("y",yorigin+21); | |
| } | |
| if (creditsCanvasWidth > LongTextWidth ) { | |
| TextFunftesTextstuck | |
| .attr("x",xorigin+erstesTextstuckLange+3+zweitesTextstuckLange+1+drittesTextstuckLange+3+viertesTextstuckLange+3) | |
| .attr("y", yorigin+10); | |
| } | |
| else | |
| { | |
| TextFunftesTextstuck | |
| .attr("x", xorigin+102) | |
| .attr("y", yorigin+21); | |
| } | |
| creditsCanvas | |
| .append("text") | |
| .text("Data sources: PRIO") | |
| .attr("x",xorigin+0) | |
| .attr("y",yorigin+32) | |
| .attr('class','creditsText'); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment