New Year's Card - Nature

The D3.js code that I used as the base for the Nature New Year's card that I designed. In the final design the focus is placed on several lovely illustrations that Sterre Verbokkem created so this line chart is kept very simple

You can see the end result of all 4 cards and read about the design process in my blog Saying "Happy new year" with data

You can find the design of the two other cards here

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

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #F7F7F7;
  shape-rendering: crispEdges;
}

.axis path {
  display: none;
}

.line {
  fill: none;
  stroke-width: 1px;
  opacity: 1;
}

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

var margin = {top: 60, right: 80, bottom: 60, left: 80},
    width = 1000 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width])
	.domain([1983,2014]);

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

var color = d3.scale.ordinal()
	.range(["#387F61", "#71BEB4", "#B3E4DE"])
	.domain(["otters","bevers","zeehonden"]);

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
	.ticks(5)
	.tickSize(-width, 0, 0);

var line = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.animal); });

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 + ")");

d3.csv("nature.csv", function(error, data) {
  if (error) throw error;
  
  data.forEach(function (d,i) {
	  d.year = +d.year;
	  d.bevers = +d.bevers;
	  d.otters = +d.otters;
	  d.zeehonden = +d.zeehonden;
  })

//Append axes
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

//Append the lines
  	var lines = svg.selectAll(".lines")
      	.data(animalLines)
    	.enter().append("g")
      	.attr("class", "lines");

//Very thick barely visible line
	lines.append("path")
		.attr("class", "line")
		.attr("d", function(d) { return line(d.values); })
		.style("stroke", function(d) { return color(d.name); })
		.style("stroke-width", 14)
		.style("opacity", 0.05);
		
	//Thick rather difficult to see line
	lines.append("path")
      	.attr("class", "line")
      	.attr("d", function(d) { return line(d.values); })
      	.style("stroke", function(d) { return color(d.name); })
		.style("stroke-width", 8)
		.style("opacity", 0.1);
			
	//Actual full opacity thin line		
	lines.append("path")
	      	.attr("class", "line")
	      	.attr("d", function(d) { return line(d.values); })
	      	.style("stroke", function(d) { return color(d.name); })
			.style("stroke-width", 1.5);

//Label
  	lines.append("text")
      	  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      	  .attr("transform", function(d) { 
			  return "translate(" + x(d.value.year) + "," + y(d.value.animal) + ")"; 
		  })
      	  .attr("x", 3)
      	  .attr("dy", ".35em")
      	  .text(function(d) { return d.name; });
	  
});

</script>

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