Skip to content

Instantly share code, notes, and snippets.

@iCHAIT
Last active Mar 27, 2016
Embed
What would you like to do?
All Projects vs Team Size
<!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":9
},
{
"x":"pgd",
"y":7
},
{
"x":"timesync-node",
"y":11
},
{
"x":"pymesync",
"y":12
},
{
"x":"fenestra",
"y":6
}
]
,
"key" : "Members"
}
,{
"values" : [
{
"x":"what's fresh",
"y":13
},
{
"x":"pgd",
"y":12
},
{
"x":"timesync-node",
"y":15
},
{
"x":"pymesync",
"y":17
},
{
"x":"fenestra",
"y":10
}
]
,
"key" : "Spectators"
}
,{
"values" : [
{
"x":"what's fresh",
"y":3
},
{
"x":"pgd",
"y":1
},
{
"x":"timesync-node",
"y":2
},
{
"x":"pymesync",
"y":5
},
{
"x":"fenestra",
"y":3
}
]
,
"key" : "Managers"
}
];
var colors = d3.scale.ordinal()
.range(["#FF7F0E", "#AEC7E8","#1F77B4"])
.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