Skip to content

Instantly share code, notes, and snippets.

@pfloh

pfloh/Roundwood_Production-EU_csv.csv

Created November 29, 2015 21:56
Show Gist options
  • Save pfloh/9213d268f292d1937754 to your computer and use it in GitHub Desktop.
Save pfloh/9213d268f292d1937754 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>European Wood Production 2003 - 2014</title
> <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: black;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
padding: 50px;
background-color: black;
border: 2px solid grey;
}
h1 {
font-size: 24px;
margin: 0;
padding: 5px;
color: white;
}
p {
font-size: 14px;
margin: 10px 0 10px 0;
padding: 5px;
color: white;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: black;
}
path:hover {
fill: yellow;
}
.axis path,
.axis line {
fill: none;
stroke: white;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 12px;
stroke: white;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>European Wood Production 2003 - 2014</h1>
<p>'Roundwood production' (the term is used as a synonymous term for "removals") in <b>1 000 m³</b>. <br>Roundwood means all quantities of wood removed from the forest and other wooded land or other felling site. Data not available for the entire period for all countries. Source: <a href="http://ec.europa.eu/eurostat/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tag00072">EuroStat</a>, 2014</p>
</div>
<script type="text/javascript">
//Set up stack method
var stack = d3.layout.stack()
.values(function(d) {
return d.woodProduction;
})
.order("reverse");
//Width, height, padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date format function (years)
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Configure area generator
var area = d3.svg.area()
.x(function(d) {
return xScale(dateFormat.parse(d.x));
})
.y0(function(d) {
return yScale(d.y0); //Updated
})
.y1(function(d) {
return yScale(d.y0 + d.y); //Updated
});
//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
//Create the empty SVG image
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("Roundwood_Production-EU_csv.csv", function(data) {
//New array with all the years, for referencing later
var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this country's name and empty array
dataset[i] = {
country: data[i].country,
woodProduction: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
//Default value, used in case no value is present
var amount = null;
// If value is not empty
if (data[i][years[j]]) {
amount = +data[i][years[j]];
}
//Add a new object to the woodProduction data array
//for this country
dataset[i].woodProduction.push({
x: years[j],
y: amount
});
}
}
//Stack the data!
stack(dataset);
//Now that the data is ready, we can check its
//min and max values to set our scales' domains!
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
//Need to recalcluate the max value for yScale
//differently, now that everything is stacked.
//Loop once for each year, and get the total value
//of CO2 for that year.
var totals = [];
for (i = 0; i < years.length; i++) {
totals[i] = 0;
for (j = 0; j < dataset.length; j++) {
totals[i] += dataset[j].woodProduction[i].y;
}
}
yScale.domain([ d3.max(totals), 0 ]);
//Areas
//
//Now that we are creating multiple paths, we can use the
//selectAll/data/enter/append pattern to generate as many
//as needed.
//Make a path for each country
var paths = svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("class", "area")
.attr("d", function(d) {
//Calculate path based on only d.woodProduction array,
//not all of d (which would include the country name)
return area(d.woodProduction);
})
.attr("stroke", "none")
.attr("fill", function(d, i) {
return color(i);
});
//Append a title with the country name (so we get easy tooltips)
paths.append("title")
.text(function(d) {
return d.country;
});
//Create axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</div>
</body>
</html>
Raw
Roundwood_Production-EU_csv.csv
country 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Belgium 4765 4850 4950 5075 5015 4700 4395 4827.42 5128 6663.33
Bulgaria 4832.89 5985.67 5861.67 5992 5696 6071 4599 5668 6205 6092 5804.27 5570.05
Czech Republic 15140 15601 15510 17678 18508 16187 15502 16736 15381 15061 15331 15476
Denmark 1626.94 1516 2962.3 2358 2566 2786 2813 2669.44 2583.35 3179.76 3179.76
Germany 51182 54504 56946 62290 76728 55367 48073.27 54418.36 56141.58 52338.13 53207.43 54356.18
Estonia 10500 6800 5500 5400 4500 4860 5400 7200 7110 7290 7654.5 8460
Ireland 2683.3 2562.04 2648 2671 2710 2232 2428.77 2618 2635.33 2580.42 2759.62 2830.99
Greece 1673 1693.68 1522.86 1561.84 1742.92 1261.05 1033.9 1047.96 1196.33
Spain 16105 16290 15531 15716 14528 17027.37 13980.04 16089.4 15427.77 14656.8 15757.57 15910.86
France 52551.82 52906.45 52498.74 53266.8 54582.55 52756.57 54447.2 55807.81 55040.55 51494.71 51670.87 51670.87
Croatia 3847 3841 4018 4452 4210 4469 4242 4477 5258 5714 5436 5002.56
Italy 8219 8697.39 8690.86 8618.27 8124.97 8667.02 8080.34 7843.79 7744.46 7744.46
Cyprus 11.99 10.06 9.66 7.44 19.67 19.83 9.88 8.96 8.49 10.99 9.4 9.2
Latvia 12915.81 12754 12842.7 12844.6 12172.9 8805.75 10442.31 12533.82 12833.49 12529.59 12241.95 12597.2
Lithuania 6275 6120 6045 5870 6195 5594.38 5459.53 7096.86 7004 6921 7053 7351
Luxembourg 257.3 276.62 248.95 267.87 290.82 352.82 273.79 274.95 261.43
Hungary 5785 5660 5940 5913 5640 5276 5244 5740.28 6232.45 5946.12 6027.2 5671.06
Malta 0 0 0 0 0 0 0 0 0 0 0 0
Netherlands 1044 1026 1110 1106.68 1022.05 1117.1 1016.13 1080.59 981.8 8062.59 1108.2 1336.58
Austria 17055 16483 16471 19135 21317.34 21795.43 16727.44 17830.96 18695.67 18020.68 17389.74 17088.55
Poland 30836 32733 31944.5 32384 35934.56 34273.42 34629.17 35467.42 37179.98 38015.43 38938.84 40565
Portugal 9673 10869 10746.24 10804.64 10822.89 10168.75 9564.07 9648.36 10961.42 10710.81 10642.43
Romania 15440 15809 14501 13970 15341 13667 12556.5 13111.64 14358.63 16087.91 15194.72 15067.84
Slovenia 2591 2551 2732.82 3179.13 2881.65 2990.06 2930.22 2945.45 3387.87 3341.09 3415.18 5099.33
Slovakia 6355 7240 9302 7868.51 8131.49 9268.56 9086.99 9599.07 9212.91 8062.59 9167.98
Finland 54240.43 54398.27 52250.18 50811.62 56612.18 50670.46 41653.14 50951.53 50766.76 49966.94 56991.58 57033.45
Sweden 67100 67300 98200 64600 78200 70800 65100 72200 71900 69499 69600 70100
United Kingdom 8072 8325 8519 8424 9021 8416.46 8623.63 9718.26 10020.47 10119.55 10820.68 11184.04
Liechtenstein 25 25 28.25 25 25 26 23.33 19.22 19.33
Norway 8298 8782 9667.18 9793.5 10464.68 10323.55 8883.59 10443.08 10291.03 10572.15 11598.29 12385.81
Switzerland 4800 5132 5284.64 5701.53 5520.01 4950.36 4701.78 4938.04 4861.01 4466.39 4577.12 4709.34
Montenegro 457 457 485 364 915 915 915 915 915
Former Yugoslav Republic of Macedonia. the 812 841 822 825 634 709 639 631 597 779 691 691
Turkey 15810 16503 16185 18084 18319 19420 19300 20597 21039 21959 20858 22835
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment