D3 Examples - New Year's Card

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

xxxxxxxxxx
 
<!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>
    