iCHAIT/data.csv

## data.csv

          
            month
            Testing
            Coding
            Code-Review
            Documentation

            
              1
              6
              5
              7
              8

            
              2
              4
              6
              1
              7

            
              3
              7
              2
              1
              11

            
              4
              6
              2
              4
              3

            
              5
              4
              9
              12
              3

            
              6
              2
              7
              3
              12

            
              7
              1
              4
              7
              8

            
              8
              2
              1
              3
              14

            
              9
              7
              1
              4
              5

            
              10
              1
              6
              9
              2

            
              11
              8
              5
              9
              2

            
              12
              8
              7
              8
              9

## index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/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/LineChart_HomicideRatesSince1300/d3.v3.js"></script>
<script src="https://ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/nv.d3.js"></script>
<script>


// Link to Our World in Data and Sources:
Link_href = "http://www.ourworldindata.org/data/violence-rights/homicides"

SourcesText = "Data Sources: UNODC for 2010 and Eisner (2003) for all earlier observations"

YAxisLabelText = "Times Submitted for each activity per month"

var chartdata = [{
    key    : "Testing",
    values : []
  },  {
    key    : "Coding",
    values : []
  },  {
    key    : "Code-Review",
    values : []
  }, {
    key    : "Documentation",
    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 = ["Testing","Coding","Code-Review","Documentation"];

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: 40})
		.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(".00f");

    chart.forceY([0, 1]);        // The range 0-1 is always shown - if other values are in the data the range is extended
  chart.yAxis
      .axisLabel(YAxisLabelText)
  	  .axisLabelDistance(50)
      .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	Testing	Coding	Code-Review	Documentation
1	6	5	7	8
2	4	6	1	7
3	7	2	1	11
4	6	2	4	3
5	4	9	12	3
6	2	7	3	12
7	1	4	7	8
8	2	1	3	14
9	7	1	4	5
10	1	6	9	2
11	8	5	9	2
12	8	7	8	9

	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href="https://ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/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/LineChart_HomicideRatesSince1300/d3.v3.js"></script>
	<script src="https://ourworldindata.org/roser/graphs/LineChart_HomicideRatesSince1300/nv.d3.js"></script>
	<script>



	// Link to Our World in Data and Sources:
	Link_href = "http://www.ourworldindata.org/data/violence-rights/homicides"

	SourcesText = "Data Sources: UNODC for 2010 and Eisner (2003) for all earlier observations"

	YAxisLabelText = "Times Submitted for each activity per month"

	var chartdata = [{
	key : "Testing",
	values : []
	}, {
	key : "Coding",
	values : []
	}, {
	key : "Code-Review",
	values : []
	}, {
	key : "Documentation",
	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 = ["Testing","Coding","Code-Review","Documentation"];

	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: 40})
	.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(".00f");

	chart.forceY([0, 1]); // The range 0-1 is always shown - if other values are in the data the range is extended
	chart.yAxis
	.axisLabel(YAxisLabelText)
	.axisLabelDistance(50)
	.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>