sbh4th/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of a line graph with multiple lines and labels at the end of those lines.
Created in responce to a question on d3noob.org
A few points to note:


The csv file starts with the newest data point and ends with the oldest. If you needed to get the 'y' position of the last point in the array you will need to use data[data.length-1].open rather than data[0].open.


I've left some console.log calls in the code as small demos.


The script makes the adjustment for scale using the y function.


forked from d3noob's block: Multiple line graphs with labels

  
## imr-data.csv

          
            year
            black
            white
            api
            aian

            
              1999
              15.102362
              5.9312549
              4.4452147
              8.7450686

            
              2000
              14.778411
              5.9650273
              4.8372712
              7.5573897

            
              2001
              13.732221
              5.7439647
              3.9070511
              8.3296146

            
              2002
              14.097162
              5.9729028
              4.1948404
              7.8651404

            
              2003
              14.128432
              5.8707442
              4.1767211
              7.5883212

            
              2004
              14.154956
              5.7907815
              3.9153943
              8.5854959

            
              2005
              14.3201
              5.9105682
              4.1525564
              7.655549

            
              2006
              14.308998
              5.888257
              4.1741233
              8.257678

            
              2007
              13.80099
              5.8797345
              4.3651352
              8.3594074

            
              2008
              13.061604
              5.7330933
              4.1150341
              8.1204338

            
              2009
              12.948682
              5.5065341
              3.9092019
              8.0126286

            
              2010
              11.703737
              5.2932024
              3.9089582
              7.2055516

            
              2011
              11.313273
              5.2176776
              3.8108377
              7.3774395

            
              2012
              11.116004
              5.1476984
              3.9744756
              7.8441916

            
              2013
              11.173285
              5.1151156
              3.8143525
              6.8219185

            
              2014
              11.014654
              5.0158634
              3.7566042
              7.7367063

            
              2015
              11.231405
              4.9455304
              4.054822
              7.3260074

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body { font: 12px Latin Modern Sans;}

path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
}

.axis path,
.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var	margin = {top: 30, right: 40, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

/*var	parseDate = d3.time.format("%Y").parse;*/

var	x = d3.scale.linear().range([0, width]);
var	y = d3.scale.linear().range([height, 0]);

var	xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5).tickFormat(d3.format("d"));

var	yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

var	valueline = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.black); });

var	valueline2 = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.white); });

var	svg = d3.select("body")
	.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
	  .append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "white");

// Get the data
d3.csv("imr-data.csv", function(error, data) {
	data.forEach(function(d) {
		d.year = +d.year;
		d.black = +d.black;
		d.white = +d.white;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.year; }));
	y.domain([0, 20]);
  /* y.domain([0, d3.max(data, function(d) { return Math.max(d.black, d.white); })]);*/

	svg.append("path")		// Add the valueline path.
		.attr("class", "line")
		.attr("d", valueline(data));

	svg.append("path")		// Add the valueline2 path.
		.attr("class", "line")
		.style("stroke", "red")
		.attr("d", valueline2(data));

      // Add the scatterplot
    svg.selectAll("dot")
        .data(data)
      .enter().append("circle")
      .filter(function(d) { return d.year > 2013 })
        .style("fill", "red")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.year); })
        .attr("cy", function(d) { return y(d.black); });

	svg.append("g")			// Add the X Axis
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

	svg.append("g")			// Add the Y Axis
		.attr("class", "y axis")
		.call(yAxis);

  svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x",0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Infant deaths per 1000 live births");

	svg.append("text")
		.attr("transform", "translate(" + (width+5) + "," + y(data[12].white) + ")")
		.attr("dy", ".35em")
		.attr("text-anchor", "start")
		.style("fill", "red")
		.text("White");

	svg.append("text")
		.attr("transform", "translate(" + (width+5) + "," + y(data[12].black) + ")")
		.attr("dy", ".35em")
		.attr("text-anchor", "start")
		.style("fill", "steelblue")
		.text("Black");


console.log(data.length-1);
console.log(data[data.length-1].white);
console.log(data[0].white);
console.log(y(data[0].white));
console.log(y(data[0].black));

});

</script>
</body>
year	black	white	api	aian
1999	15.102362	5.9312549	4.4452147	8.7450686
2000	14.778411	5.9650273	4.8372712	7.5573897
2001	13.732221	5.7439647	3.9070511	8.3296146
2002	14.097162	5.9729028	4.1948404	7.8651404
2003	14.128432	5.8707442	4.1767211	7.5883212
2004	14.154956	5.7907815	3.9153943	8.5854959
2005	14.3201	5.9105682	4.1525564	7.655549
2006	14.308998	5.888257	4.1741233	8.257678
2007	13.80099	5.8797345	4.3651352	8.3594074
2008	13.061604	5.7330933	4.1150341	8.1204338
2009	12.948682	5.5065341	3.9092019	8.0126286
2010	11.703737	5.2932024	3.9089582	7.2055516
2011	11.313273	5.2176776	3.8108377	7.3774395
2012	11.116004	5.1476984	3.9744756	7.8441916
2013	11.173285	5.1151156	3.8143525	6.8219185
2014	11.014654	5.0158634	3.7566042	7.7367063
2015	11.231405	4.9455304	4.054822	7.3260074
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body { font: 12px Latin Modern Sans;}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var margin = {top: 30, right: 40, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

	/var parseDate = d3.time.format("%Y").parse;/

	var x = d3.scale.linear().range([0, width]);
	var y = d3.scale.linear().range([height, 0]);

	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5).tickFormat(d3.format("d"));

	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

	var valueline = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.black); });

	var valueline2 = d3.svg.line()
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.white); });

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("rect")
	.attr("width", "100%")
	.attr("height", "100%")
	.attr("fill", "white");

	// Get the data
	d3.csv("imr-data.csv", function(error, data) {
	data.forEach(function(d) {
	d.year = +d.year;
	d.black = +d.black;
	d.white = +d.white;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.year; }));
	y.domain([0, 20]);
	/* y.domain([0, d3.max(data, function(d) { return Math.max(d.black, d.white); })]);*/

	svg.append("path") // Add the valueline path.
	.attr("class", "line")
	.attr("d", valueline(data));

	svg.append("path") // Add the valueline2 path.
	.attr("class", "line")
	.style("stroke", "red")
	.attr("d", valueline2(data));

	// Add the scatterplot
	svg.selectAll("dot")
	.data(data)
	.enter().append("circle")
	.filter(function(d) { return d.year > 2013 })
	.style("fill", "red")
	.attr("r", 3.5)
	.attr("cx", function(d) { return x(d.year); })
	.attr("cy", function(d) { return y(d.black); });

	svg.append("g") // Add the X Axis
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g") // Add the Y Axis
	.attr("class", "y axis")
	.call(yAxis);

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x",0 - (height / 2))
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("Infant deaths per 1000 live births");

	svg.append("text")
	.attr("transform", "translate(" + (width+5) + "," + y(data[12].white) + ")")
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.style("fill", "red")
	.text("White");

	svg.append("text")
	.attr("transform", "translate(" + (width+5) + "," + y(data[12].black) + ")")
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.style("fill", "steelblue")
	.text("Black");


	console.log(data.length-1);
	console.log(data[data.length-1].white);
	console.log(data[0].white);
	console.log(y(data[0].white));
	console.log(y(data[0].black));

	});

	</script>
	</body>