iCHAIT/data.csv

## data.csv

          
            month
            tschuy
            kennric
            mathuin
            lyonesgamer
            pop
            iCHAIT

            
              1
              52.9
              90.8
              38.9
              11.9
              22.9
              54.1

            
              2
              57.6
              92.3
              45.4
              15.7
              27.7
              61.1

            
              3
              64.5
              93.8
              55
              24.7
              35.4
              69.9

            
              4
              69.9
              94.6
              62.8
              38.5
              44.9
              77.6

            
              5
              74.3
              94.6
              69.2
              54.4
              55.6
              82.9

            
              6
              80.7
              96.6
              77.1
              68.3
              61.9
              87.4

            
              7
              85.2
              97.6
              82.6
              71.2
              66.8
              91.8

            
              8
              80.2
              91.6
              81.6
              73.2
              64.8
              95.8

            
              9
              84.2
              92.6
              81.6
              74.2
              62.8
              92.8

            
              10
              83.2
              93.6
              83.6
              75.2
              67.8
              93.8

            
              11
              82.2
              94.6
              81.6
              76.2
              68.8
              91.8

            
              12
              81.2
              95.6
              89.6
              79.2
              69.8
              94.8

## index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://ourworldindata.org/roser/graphs/GlobalInequalityBetweenWorldCitizensAndItsComponents1820to1992/nv.d3.css" rel="stylesheet" type="text/css">
<link href="https://ourworldindata.org/roser/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.8px;stroke-width:0.8px;}.tick line{opacity:0.3;}</style>
<body>
<div>
<svg id="chart1"></svg>
</div>
<!-- <div>
<svg id="CreditsContainer"></svg>
</div> -->
<script src="https://ourworldindata.org/roser/graphs/GlobalInequalityBetweenWorldCitizensAndItsComponents1820to1992/d3.v3.js"></script>
<script src="https://ourworldindata.org/roser/graphs/GlobalInequalityBetweenWorldCitizensAndItsComponents1820to1992/nv.d3.js"></script>
<script>


// Link to Our World in Data and Sources:
Link_href = "http://www.ourworldindata.org/data/growth-and-distribution-of-prosperity/inequality-between-world-citizens"

SourcesText = "Data Source: Bourguignon and Morrisson (2002) – Inequality Among World Citizens"

YAxisLabelText = "Hours Worked"

var chartdata = [{
    key    : "tschuy",
    values : []
  },  {
    key    : "kennric",
    values : []
  },  {
    key    : "mathuin",
    values : []
  },  {
    key    : "lyonesgamer",
    values : []
  },  {
    key    : "pop",
    values : []
  },  {
    key    : "iCHAIT",
    values : []
  }];
//      disabled: true,


d3.csv("data.csv", function (error, csv) {
    if (error) return console.log("there was an error loading the csv: " + error);
    console.log("there are " + csv.length + " elements in my csv set");

    var columndata = ["tschuy","kennric","mathuin","lyonesgamer","pop","iCHAIT"];

for (var i = 0; i < columndata.length; i++) {
 //chartdata[i].key = columndata[i];
 chartdata[i].values = csv.map(function(d) {
              return [
                +d["month"],
                +d[columndata[i]] ];
                  })
                  .filter(function(d){ return d[1]||(d[1] === null); });
                       }


//var colors = d3.scale.ordinal()
    //      .range(["darkgrey", "darkblue","lightblue","orange", "green","darkred","#388E8E", "","red","teal","lightgreen"])
      //    .domain(d3.range(0,11));

//keyColor = function(d, i) {return colors(d.key)};


    var d3_category20max = [
      "#235BAD",
      "#C90F0E",
      "#299629",
      "#F2681C",
      "#7C98E0",
      "#FFBC8C",
      "#A65543",
      "#F21B17",
      "#59C717",
      "#FFD434",
      "#D16B62",
      "#CE6FD9",
      "#FC811D",
      "#98df8a",
      "#7f7f7f",
      "#B557E3",
      "#F5A10E",
      "#17becf",
      "#c7c7c7",
      "#86C5E5" ];

d3.scale.category20 = function() {
    return d3.scale.ordinal().range(d3_category20max);
  };

var colors = d3.scale.category20();

keyColor = function(d, i) {return colors(d.key)};

var chart;

nv.addGraph(function() {
    chart = nv.models.lineChart()
    .margin({top: 30, right: 20, bottom: 70, left: 45})
    .tooltipContent(function(key, x, y, e, graph) {return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' in ' + x + '</p>'     })
                .x(function(d) { return d[0] })
                .y(function(d) { return d[1] })
                .color(keyColor);
  chart.xAxis
      .tickFormat();


        formatter = d3.format(".02f");

  chart.yAxis
      .axisLabel(YAxisLabelText)
      .axisLabelDistance(43)
      .tickFormat(formatter);


  d3.select('#chart1')
    .datum(chartdata)
      .transition().call(chart);

  nv.utils.windowResize(chart.update);

  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  /*setTimeout(function() {
              $('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
          }, 500);*/
  return chart;
});


// end read csv
});


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();


Link_linktext = Link_href.replace('http://','');  // strips http:// from the displayed link address
var TextFunftesTextstuck = creditsCanvas.append("svg:a")
      .attr("xlink:href", Link_href)
      .attr("target","_blank")
      .append("svg:text")
      .attr('class','creditsLink')
        .text(Link_linktext)
      .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(SourcesText)
    .attr("x",xorigin+0)
    .attr("y",yorigin+32)
    .attr('class','creditsText');

/* ------- end credits ------ */


</script>
</html>
<!--


<iframe style="border: 0px none;" src="http://www.ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/LineChart_HomicideRatesSince1300.html" height="540" width="100%" scrolling="no"></iframe>

<address><a class="fancybox-iframe" href="http://www.ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/LineChart_HomicideRatesSince1300.html">Full screen view</a>       <a href="http://www.ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/LineChart_HomicideRatesSince1300.csv">Download Data</a></address>
month	tschuy	kennric	mathuin	lyonesgamer	pop	iCHAIT
1	52.9	90.8	38.9	11.9	22.9	54.1
2	57.6	92.3	45.4	15.7	27.7	61.1
3	64.5	93.8	55	24.7	35.4	69.9
4	69.9	94.6	62.8	38.5	44.9	77.6
5	74.3	94.6	69.2	54.4	55.6	82.9
6	80.7	96.6	77.1	68.3	61.9	87.4
7	85.2	97.6	82.6	71.2	66.8	91.8
8	80.2	91.6	81.6	73.2	64.8	95.8
9	84.2	92.6	81.6	74.2	62.8	92.8
10	83.2	93.6	83.6	75.2	67.8	93.8
11	82.2	94.6	81.6	76.2	68.8	91.8
12	81.2	95.6	89.6	79.2	69.8	94.8

	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href="https://ourworldindata.org/roser/graphs/GlobalInequalityBetweenWorldCitizensAndItsComponents1820to1992/nv.d3.css" rel="stylesheet" type="text/css">
	<link href="https://ourworldindata.org/roser/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.8px;stroke-width:0.8px;}.tick line{opacity:0.3;}</style>
	<body>
	<div>
	<svg id="chart1"></svg>
	</div>
	<!-- <div>
	<svg id="CreditsContainer"></svg>
	</div> -->
	<script src="https://ourworldindata.org/roser/graphs/GlobalInequalityBetweenWorldCitizensAndItsComponents1820to1992/d3.v3.js"></script>
	<script src="https://ourworldindata.org/roser/graphs/GlobalInequalityBetweenWorldCitizensAndItsComponents1820to1992/nv.d3.js"></script>
	<script>



	// Link to Our World in Data and Sources:
	Link_href = "http://www.ourworldindata.org/data/growth-and-distribution-of-prosperity/inequality-between-world-citizens"

	SourcesText = "Data Source: Bourguignon and Morrisson (2002) – Inequality Among World Citizens"

	YAxisLabelText = "Hours Worked"

	var chartdata = [{
	key : "tschuy",
	values : []
	}, {
	key : "kennric",
	values : []
	}, {
	key : "mathuin",
	values : []
	}, {
	key : "lyonesgamer",
	values : []
	}, {
	key : "pop",
	values : []
	}, {
	key : "iCHAIT",
	values : []
	}];
	// disabled: true,


	d3.csv("data.csv", function (error, csv) {
	if (error) return console.log("there was an error loading the csv: " + error);
	console.log("there are " + csv.length + " elements in my csv set");

	var columndata = ["tschuy","kennric","mathuin","lyonesgamer","pop","iCHAIT"];

	for (var i = 0; i < columndata.length; i++) {
	//chartdata[i].key = columndata[i];
	chartdata[i].values = csv.map(function(d) {
	return [
	+d["month"],
	+d[columndata[i]] ];
	})
	.filter(function(d){ return d[1]\|\|(d[1] === null); });
	}




	//var colors = d3.scale.ordinal()
	// .range(["darkgrey", "darkblue","lightblue","orange", "green","darkred","#388E8E", "","red","teal","lightgreen"])
	// .domain(d3.range(0,11));

	//keyColor = function(d, i) {return colors(d.key)};


	var d3_category20max = [
	"#235BAD",
	"#C90F0E",
	"#299629",
	"#F2681C",
	"#7C98E0",
	"#FFBC8C",
	"#A65543",
	"#F21B17",
	"#59C717",
	"#FFD434",
	"#D16B62",
	"#CE6FD9",
	"#FC811D",
	"#98df8a",
	"#7f7f7f",
	"#B557E3",
	"#F5A10E",
	"#17becf",
	"#c7c7c7",
	"#86C5E5" ];

	d3.scale.category20 = function() {
	return d3.scale.ordinal().range(d3_category20max);
	};

	var colors = d3.scale.category20();

	keyColor = function(d, i) {return colors(d.key)};

	var chart;

	nv.addGraph(function() {
	chart = nv.models.lineChart()
	.margin({top: 30, right: 20, bottom: 70, left: 45})
	.tooltipContent(function(key, x, y, e, graph) {return '<h3>' + key + '</h3>' +
	'<p>' + y + ' in ' + x + '</p>' })
	.x(function(d) { return d[0] })
	.y(function(d) { return d[1] })
	.color(keyColor);
	chart.xAxis
	.tickFormat();


	formatter = d3.format(".02f");

	chart.yAxis
	.axisLabel(YAxisLabelText)
	.axisLabelDistance(43)
	.tickFormat(formatter);





	d3.select('#chart1')
	.datum(chartdata)
	.transition().call(chart);

	nv.utils.windowResize(chart.update);

	chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
	/*setTimeout(function() {
	$('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
	}, 500);*/
	return chart;
	});


	// end read csv
	});




	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();



	Link_linktext = Link_href.replace('http://',''); // strips http:// from the displayed link address
	var TextFunftesTextstuck = creditsCanvas.append("svg:a")
	.attr("xlink:href", Link_href)
	.attr("target","_blank")
	.append("svg:text")
	.attr('class','creditsLink')
	.text(Link_linktext)
	.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(SourcesText)
	.attr("x",xorigin+0)
	.attr("y",yorigin+32)
	.attr('class','creditsText');

	/* ------- end credits ------ */




	</script>
	</html>
	<!--


	<iframe style="border: 0px none;" src="http://www.ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/LineChart_HomicideRatesSince1300.html" height="540" width="100%" scrolling="no"></iframe>

	<address><a class="fancybox-iframe" href="http://www.ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/LineChart_HomicideRatesSince1300.html">Full screen view</a> <a href="http://www.ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/LineChart_HomicideRatesSince1300.csv">Download Data</a></address>