Skip to content

Instantly share code, notes, and snippets.

@iCHAIT

iCHAIT/index.html

Last active March 25, 2016 11:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iCHAIT/0c8e0312a89e76d27546 to your computer and use it in GitHub Desktop.
Save iCHAIT/0c8e0312a89e76d27546 to your computer and use it in GitHub Desktop.
Download ZIP
Time Usage vs Life cycle of a project over months/years.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="http://ourworldindata.org/wp-content/uploads/nvd3/nvd3_StackedArea_PopByRegime/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;}text{font:12px sans-serif;}#chart1,#chart2{position:absolute;}.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_StackedArea_PopByRegime/d3.v3.js"></script>
<script src="http://ourworldindata.org/wp-content/uploads/nvd3/nvd3_StackedArea_PopByRegime/nv.d3.js"></script>
<script>
var histcatexplong = [
{"key" : "testing" ,
"values" :
[
[-2.17743E+12,126 ],
[-2.14587E+12,124 ],
[-2.11431E+12,123 ],
[-2.08276E+12,124 ],
[-2.0512E+12,123.2 ],
[-2.01964E+12,122.1 ],
[-1.98808E+12,119.2 ],
[-1.95653E+12,117.7 ],
[-1.92497E+12,116.1 ],
[-1.89341E+12,107.5 ],
[-1.86186E+12,113 ],
[-1.8303E+12,109.4 ],
[-1.79874E+12,117.8 ],
[-1.76719E+12,178.8 ],
[-1.73563E+12,109.5 ],
[-1.70407E+12,121.6 ],
[-1.67252E+12,103.7 ],
[-1.64096E+12,958.5 ],
[-1.6094E+12,996.5 ],
[-1.57785E+12,931 ],
[-1.54629E+12,768.4 ],
[-1.51473E+12,415.1 ],
[-1.48317E+12,432.8 ],
[-1.45162E+12,339.5 ],
[-1.42006E+12,350.7 ],
[-1.3885E+12,272.8 ],
[-1.35695E+12,252.8 ],
[-1.32539E+12,219.1 ],
[-1.29383E+12,232.2 ],
[-1.26228E+12,143.2 ],
[-1.23072E+12,168.4 ],
[-1.19916E+12,199.6 ],
[-1.16761E+12,111.9 ],
[-1.13605E+12,626 ],
[-1.10449E+12,783.6 ],
[-1.07293E+12,252.3 ],
[-1.04138E+12,250.9 ],
[-1.00982E+12,249.5 ],
[-9.78264E+11,331 ],
[-9.46707E+11,532.8 ],
[-9.1515E+11,865.1 ],
[-8.83593E+11,660.3 ],
[-8.52036E+11,770.4 ],
[-8.20479E+11,905.7 ],
[-7.88923E+11,837 ],
[-7.57366E+11,104.9 ],
[-7.25809E+11,109 ],
[-6.94252E+11,563 ],
[-6.62695E+11,518 ],
[-6.31138E+11,181 ],
[-5.99581E+11,193 ],
[-5.68024E+11,205 ],
[-5.36467E+11,201 ],
[-5.0491E+11,171 ],
[-4.73354E+11,131 ],
[-4.41797E+11,964 ],
[-4.1024E+11,0 ],
[-3.78683E+11,0 ],
[-3.47126E+11,0 ],
[-3.15569E+11,0 ],
[-2.84012E+11,514 ],
[-2.52455E+11,900 ],
[-2.20898E+11,698 ],
[-1.89341E+11,457 ],
[-1.57785E+11,123 ],
[-1.26228E+11,277 ],
[-94670700000,161 ],
[-63113800000,183 ],
[-31556900000,510 ],
[0,646 ],
[31556900000,282 ],
[63113800000,382 ],
[94670700000,299 ],
[1.26228E+11,605 ],
[1.57785E+11,0 ],
[1.89341E+11,312 ],
[2.20898E+11,631 ],
[2.52455E+11,832 ],
[2.84012E+11,463 ],
[3.15569E+11,317 ],
[3.47126E+11,322 ],
[3.78683E+11,455 ],
[4.1024E+11,478 ],
[4.41797E+11,421 ],
[4.73354E+11,535 ],
[5.0491E+11,571 ],
[5.36467E+11,344 ],
[5.68024E+11,695 ],
[5.99581E+11,585 ],
[6.31138E+11,381 ],
[6.62695E+11,247 ],
[6.94252E+11,110 ],
[7.25809E+11,994 ],
[7.57366E+11,105 ],
[7.88923E+11,961 ],
[8.20479E+11,108 ],
[8.52036E+11,104 ],
[8.83593E+11,103 ],
[9.1515E+11,120 ],
[9.46707E+11,106 ],
[9.78264E+11,130 ],
[1.00982E+12,141 ],
[1.04138E+12,174 ],
[1.07293E+12,174 ],
[1.10449E+12,193 ],
[1.13605E+12,198 ],
[1.16761E+12,200 ],
[1.19916E+12,204 ],
[1.23072E+12,224.3 ],
[1.26228E+12,213.5 ]
]
},
{"key" : "coding" ,
"values" :
[
[-2.17743E+12,431 ],
[-2.14587E+12,437 ],
[-2.11431E+12,441 ],
[-2.08276E+12,446 ],
[-2.0512E+12,406 ],
[-2.01964E+12,446 ],
[-1.98808E+12,441 ],
[-1.95653E+12,458 ],
[-1.92497E+12,441 ],
[-1.89341E+12,467 ],
[-1.86186E+12,493 ],
[-1.8303E+12,467 ],
[-1.79874E+12,444 ],
[-1.76719E+12,482 ],
[-1.73563E+12,420 ],
[-1.70407E+12,449 ],
[-1.67252E+12,485 ],
[-1.64096E+12,410 ],
[-1.6094E+12,446 ],
[-1.57785E+12,480 ],
[-1.54629E+12,434 ],
[-1.51473E+12,492 ],
[-1.48317E+12,564 ],
[-1.45162E+12,507 ],
[-1.42006E+12,508 ],
[-1.3885E+12,510 ],
[-1.35695E+12,515 ],
[-1.32539E+12,518 ],
[-1.29383E+12,525 ],
[-1.26228E+12,538 ],
[-1.23072E+12,541 ],
[-1.19916E+12,542 ],
[-1.16761E+12,555 ],
[-1.13605E+12,561 ],
[-1.10449E+12,550 ],
[-1.07293E+12,569 ],
[-1.04138E+12,579 ],
[-1.00982E+12,580 ],
[-9.78264E+11,582 ],
[-9.46707E+11,592 ],
[-9.1515E+11,621 ],
[-8.83593E+11,628 ],
[-8.52036E+11,636 ],
[-8.20479E+11,621 ],
[-7.88923E+11,564 ],
[-7.57366E+11,564 ],
[-7.25809E+11,573 ],
[-6.94252E+11,581 ],
[-6.62695E+11,590 ],
[-6.31138E+11,169 ],
[-5.99581E+11,161 ],
[-5.68024E+11,166 ],
[-5.36467E+11,165 ],
[-5.0491E+11,169 ],
[-4.73354E+11,178 ],
[-4.41797E+11,162 ],
[-4.1024E+11,163 ],
[-3.78683E+11,168 ],
[-3.47126E+11,169 ],
[-3.15569E+11,600 ],
[-2.84012E+11,485 ],
[-2.52455E+11,277 ],
[-2.20898E+11,196 ],
[-1.89341E+11,126 ],
[-1.57785E+11,129 ],
[-1.26228E+11,133 ],
[-94670700000,136 ],
[-63113800000,140 ],
[-31556900000,144 ],
[0,934 ],
[31556900000,953 ],
[63113800000,919 ],
[94670700000,101 ],
[1.26228E+11,104 ],
[1.57785E+11,0 ],
[1.89341E+11,0 ],
[2.20898E+11,0 ],
[2.52455E+11,0 ],
[2.84012E+11,0 ],
[3.15569E+11,0 ],
[3.47126E+11,0 ],
[3.78683E+11,0 ],
[4.1024E+11,0 ],
[4.41797E+11,0 ],
[4.73354E+11,0 ],
[5.0491E+11,0 ],
[5.36467E+11,0 ],
[5.68024E+11,0 ],
[5.99581E+11,0 ],
[6.31138E+11,0 ],
[6.62695E+11,0 ],
[6.94252E+11,0 ],
[7.25809E+11,0 ],
[7.57366E+11,0 ],
[7.88923E+11,0 ],
[8.20479E+11,0 ],
[8.52036E+11,0 ],
[8.83593E+11,0 ],
[9.1515E+11,0 ],
[9.46707E+11,0 ],
[9.78264E+11,0 ],
[1.00982E+12,0 ],
[1.04138E+12,0 ],
[1.07293E+12,0 ],
[1.10449E+12,0 ],
[1.13605E+12,0 ],
[1.16761E+12,0 ],
[1.19916E+12,0 ],
[1.23072E+12,0 ],
[1.26228E+12,0 ]
]
},
{"key" : "code-review" ,
"values" :
[
[-2.17743E+12,645.6 ],
[-2.14587E+12,651.3 ],
[-2.11431E+12,658 ],
[-2.08276E+12,663.7 ],
[-2.0512E+12,669.4 ],
[-2.01964E+12,667.1 ],
[-1.98808E+12,671.7 ],
[-1.95653E+12,667.9 ],
[-1.92497E+12,671.2 ],
[-1.89341E+12,669.2 ],
[-1.86186E+12,229.1 ],
[-1.8303E+12,233.1 ],
[-1.79874E+12,223.1 ],
[-1.76719E+12,237.4 ],
[-1.73563E+12,228.9 ],
[-1.70407E+12,770.1 ],
[-1.67252E+12,772.4 ],
[-1.64096E+12,813.8 ],
[-1.6094E+12,821.2 ],
[-1.57785E+12,795.5 ],
[-1.54629E+12,781 ],
[-1.51473E+12,235.2 ],
[-1.48317E+12,260.5 ],
[-1.45162E+12,285.7 ],
[-1.42006E+12,339.4 ],
[-1.3885E+12,339.2 ],
[-1.35695E+12,342.1 ],
[-1.32539E+12,354.7 ],
[-1.29383E+12,371.5 ],
[-1.26228E+12,402.5 ],
[-1.23072E+12,405.2 ],
[-1.19916E+12,441 ],
[-1.16761E+12,517.6 ],
[-1.13605E+12,501.5 ],
[-1.10449E+12,555.3 ],
[-1.07293E+12,556 ],
[-1.04138E+12,526.8 ],
[-1.00982E+12,543.6 ],
[-9.78264E+11,547.5 ],
[-9.46707E+11,596.2 ],
[-9.1515E+11,564.9 ],
[-8.83593E+11,565.7 ],
[-8.52036E+11,525.6 ],
[-8.20479E+11,481.3 ],
[-7.88923E+11,388 ],
[-7.57366E+11,392.5 ],
[-7.25809E+11,425.8 ],
[-6.94252E+11,449.2 ],
[-6.62695E+11,105 ],
[-6.31138E+11,104 ],
[-5.99581E+11,106 ],
[-5.68024E+11,108 ],
[-5.36467E+11,118 ],
[-5.0491E+11,117 ],
[-4.73354E+11,110 ],
[-4.41797E+11,116 ],
[-4.1024E+11,119 ],
[-3.78683E+11,128 ],
[-3.47126E+11,121 ],
[-3.15569E+11,130 ],
[-2.84012E+11,137 ],
[-2.52455E+11,143 ],
[-2.20898E+11,147 ],
[-1.89341E+11,148 ],
[-1.57785E+11,160 ],
[-1.26228E+11,186 ],
[-94670700000,191 ],
[-63113800000,193 ],
[-31556900000,198 ],
[0,202 ],
[31556900000,212 ],
[63113800000,225 ],
[94670700000,226 ],
[1.26228E+11,214 ],
[1.57785E+11,229 ],
[1.89341E+11,241 ],
[2.20898E+11,243 ],
[2.52455E+11,211 ],
[2.84012E+11,224 ],
[3.15569E+11,227 ],
[3.47126E+11,227 ],
[3.78683E+11,243 ],
[4.1024E+11,245 ],
[4.41797E+11,257 ],
[4.73354E+11,253 ],
[5.0491E+11,240 ],
[5.36467E+11,243 ],
[5.68024E+11,245 ],
[5.99581E+11,204 ],
[6.31138E+11,206 ],
[6.62695E+11,199 ],
[6.94252E+11,185 ],
[7.25809E+11,195 ],
[7.57366E+11,198 ],
[7.88923E+11,194 ],
[8.20479E+11,207 ],
[8.52036E+11,206 ],
[8.83593E+11,175 ],
[9.1515E+11,185 ],
[9.46707E+11,183 ],
[9.78264E+11,188 ],
[1.00982E+12,176 ],
[1.04138E+12,170 ],
[1.07293E+12,185 ],
[1.10449E+12,170 ],
[1.13605E+12,177 ],
[1.16761E+12,183 ],
[1.19916E+12,191 ],
[1.23072E+12,172 ],
[1.26228E+12,176 ]
]
},
{"key" : "documentation" ,
"values" :
[
[-2.17743E+12,102.3 ],
[-2.14587E+12,103 ],
[-2.11431E+12,104.8 ],
[-2.08276E+12,103.4 ],
[-2.0512E+12,104.1 ],
[-2.01964E+12,118.9 ],
[-1.98808E+12,118.6 ],
[-1.95653E+12,127.3 ],
[-1.92497E+12,127 ],
[-1.89341E+12,134 ],
[-1.86186E+12,570 ],
[-1.8303E+12,150 ],
[-1.79874E+12,550 ],
[-1.76719E+12,592.1 ],
[-1.73563E+12,599.3 ],
[-1.70407E+12,743.4 ],
[-1.67252E+12,751.6 ],
[-1.64096E+12,749.7 ],
[-1.6094E+12,751.9 ],
[-1.57785E+12,760 ],
[-1.54629E+12,774 ],
[-1.51473E+12,643 ],
[-1.48317E+12,636 ],
[-1.45162E+12,635 ],
[-1.42006E+12,597 ],
[-1.3885E+12,625 ],
[-1.35695E+12,623 ],
[-1.32539E+12,636 ],
[-1.29383E+12,633 ],
[-1.26228E+12,615 ],
[-1.23072E+12,629 ],
[-1.19916E+12,599 ],
[-1.16761E+12,600 ],
[-1.13605E+12,620 ],
[-1.10449E+12,580 ],
[-1.07293E+12,566 ],
[-1.04138E+12,599 ],
[-1.00982E+12,581 ],
[-9.78264E+11,601 ],
[-9.46707E+11,606 ],
[-9.1515E+11,635 ],
[-8.83593E+11,670 ],
[-8.52036E+11,721 ],
[-8.20479E+11,755 ],
[-7.88923E+11,772 ],
[-7.57366E+11,632 ],
[-7.25809E+11,605 ],
[-6.94252E+11,535 ],
[-6.62695E+11,976 ],
[-6.31138E+11,184 ],
[-5.99581E+11,189 ],
[-5.68024E+11,163 ],
[-5.36467E+11,174 ],
[-5.0491E+11,151 ],
[-4.73354E+11,170 ],
[-4.41797E+11,209 ],
[-4.1024E+11,202 ],
[-3.78683E+11,172 ],
[-3.47126E+11,654 ],
[-3.15569E+11,188 ],
[-2.84012E+11,191 ],
[-2.52455E+11,198 ],
[-2.20898E+11,200 ],
[-1.89341E+11,274 ],
[-1.57785E+11,174 ],
[-1.26228E+11,603 ],
[-94670700000,531 ],
[-63113800000,763 ],
[-31556900000,437 ],
[0,621 ],
[31556900000,825 ],
[63113800000,876 ],
[94670700000,840 ],
[1.26228E+11,271 ],
[1.57785E+11,169 ],
[1.89341E+11,148 ],
[2.20898E+11,249 ],
[2.52455E+11,410 ],
[2.84012E+11,349 ],
[3.15569E+11,479 ],
[3.47126E+11,480 ],
[3.78683E+11,346 ],
[4.1024E+11,306 ],
[4.41797E+11,311 ],
[4.73354E+11,316 ],
[5.0491E+11,379 ],
[5.36467E+11,370 ],
[5.68024E+11,308 ],
[5.99581E+11,715 ],
[6.31138E+11,394 ],
[6.62695E+11,526 ],
[6.94252E+11,510 ],
[7.25809E+11,435 ],
[7.57366E+11,295 ],
[7.88923E+11,334 ],
[8.20479E+11,293 ],
[8.52036E+11,304 ],
[8.83593E+11,622 ],
[9.1515E+11,344 ],
[9.46707E+11,347 ],
[9.78264E+11,342 ],
[1.00982E+12,476 ],
[1.04138E+12,425 ],
[1.07293E+12,405 ],
[1.10449E+12,590 ],
[1.13605E+12,674 ],
[1.16761E+12,548 ],
[1.19916E+12,411 ],
[1.23072E+12,596.4 ],
[1.26228E+12,571.9 ]
]
}
];
var colors = d3.scale.ordinal()
.range(["#939393", "black", "#d73027", "#fc8d59", "#d9ef8b", "#91cf60", "#1a9850"])
.domain(d3.range(0,7));
keyColor = function(d, i) {return colors(d.key)};
var chart;
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.margin({top: 30, right: 30, bottom: 80, left: 95})
.useInteractiveGuideline(true)
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)
.transitionDuration(100);
//.clipEdge(true);
// chart.stacked.scatter.clipVoronoi(false);
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%Y')(new Date(d)) });
chart.yAxis
.tickFormat(d3.format(',.0f'));
d3.select('#chart1')
.datum(histcatexplong)
.transition().duration(1000) //Die Zeit mit der sich der Chart am Anfang aufbaut
.call(chart)
// .transition().duration(5000)
.each('start', function() {
setTimeout(function() {
d3.selectAll('#chart1 *').each(function() {
console.log('start',this.__transition__, this)
// while(this.__transition__)
if(this.__transition__)
this.__transition__.duration = 1;
})
}, 0)
})
// .each('end', function() {
// d3.selectAll('#chart1 *').each(function() {
// console.log('end', this.__transition__, this)
// // while(this.__transition__)
// if(this.__transition__)
// this.__transition__.duration = 1;
// })});
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")
// logoCanvas.append("svg:image")
// .attr('x',2)
// .attr('y',0)
// .attr('width', 51)
// .attr('height', 24)
// .attr("xlink:href","../../maxstyle_for_d3/Our-World-in-Data24high.png");
var creditsCanvas = d3.select("#CreditsContainer")
var xorigin=8;
var yorigin=1;
/*1. Zeile*/
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();
/*1. oder 2. Zeile*/
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/political-regimes/democratisation")
.attr("target","_blank")
.append("svg:text")
.attr('class','creditsLink')
.text("www.OurWorldinData.org/data/political-regimes/democratisation")
.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);
}
/*3. Zeile*/
creditsCanvas
.append("text")
.text("Data on political regimes is taken from Polity IV. Population data is from the US Census and Gapminder.")
.attr("x",xorigin+0)
.attr("y",yorigin+32)
.attr('class','creditsText');
/* ------- end credits ------ */
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment