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