block by nbremer debed5f870bd72bcfba7

New Year's Card - Nature

Full Screen

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

index.html

<!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;
  })

  var keys = d3.keys(data[0]).filter(function(key) { return key !== "year"; });
  
  var animalLines = keys.map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
  	        return {
  				year: d.year,
  				animal: d[name]};
  		})
    };
  });

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

nature.csv

year,bevers,otters,zeehonden
1983,0.900900901,0,17.77150917
1988,1.801801802,0,18.75881523
1989,7.207207207,0,19.98119417
1990,11.71171171,0,20.63939821
1991,17.11711712,0,26.79830748
1992,16.21621622,0,24.7296662
1993,15.31531532,0,14.7625764
1994,18.01801802,0,15.60883874
1995,31.53153153,0,20.75693465
1996,31.53153153,0,27.15091678
1997,27.02702703,0,30.98260461
1998,30.63063063,0,34.67324871
1999,40.54054054,0,40.29149036
2000,48.64864865,0,45.51010813
2001,49.54954955,0,55.9003291
2002,63.06306306,0,63.37564645
2003,72.97297297,100,70.80394922
2004,89.18918919,66.66666667,92.64221909
2005,100,100,100
2006,118.018018,120,131.2176775
2007,118.9189189,173.3333333,82.93370945
2008,136.9369369,293.3333333,104.6544429
2009,126.1261261,353.3333333,123.1076634
2010,144.1441441,380,144.8283968
2011,196.3963964,446.6666667,141.325811
2012,233.3333333,513.3333333,188.4344147
2013,263.963964,573.3333333,214.7625764
2014,360.3603604,933.3333333,201.9511048