Infant mortality trends

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

<!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="https://d3js.org/d3.v3.min.js"></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);

// 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js