Skip to content

Instantly share code, notes, and snippets.

@dyorama

dyorama/forestdata.csv

Created April 23, 2015 23:36
Show Gist options
  • Save dyorama/2dae09538170d9b08810 to your computer and use it in GitHub Desktop.
Save dyorama/2dae09538170d9b08810 to your computer and use it in GitHub Desktop.
Download ZIP
Module 6 exercise
Raw
forestdata.csv
country 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012
Russian Federation 8089500 8089500 8090136 8090455 8090773 8091092 8091411 8091729 8092048 8092366 8092685 8091728 8090771 8089814 8088857 8087900 8088500 8089100 8089700 8090300 8090900 8091500 8092100
Brazil 5748390 5719494 5690598 5661702 5632806 5603910 5575014 5546118 5517222 5488326 5459430 5428532 5397634 5366736 5335838 5304940 5282996 5261052 5239108 5217164 5195220 5173276 5151332
Canada 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340 3101340
United States 2963350 2967210 2971070 2974930 2978790 2982650 2986510 2990370 2994230 2998090 3001950 3005776 3009602 3013428 3017254 3021080 3024908 3028736 3032564 3036392 3040220 3044048 3047876
China 1571406 1591266 1611126 1630986 1650846 1670706 1690565 1710425 1730285 1750145 1770005 1802092 1834179 1866265 1898352 1930439 1958072 1985706 2013339 2040973 2068606 2096239 2123873
Congo Democratic Republic 1603630 1600516 1597402 1594288 1591174 1588060 1584946 1581832 1578718 1575604 1572490 1569376 1566262 1563148 1560034 1556920 1553806 1550692 1547578 1544464 1541350 1538236 1535122
Australia 1545000 1545420 1545840 1546260 1546680 1547100 1547520 1547940 1548360 1548780 1549200 1547200 1545200 1543200 1541200 1539200 1529960 1520720 1511480 1502240 1493000 1483760 1474520
Indonesia 1185450 1166314 1147178 1128042 1108906 1089770 1070634 1051498 1032362 1013226 994090 990986 987882 984778 981674 978570 971720 964870 958020 951170 944320 937470 930620
India 639390 640841 642292 643743 645194 646645 648096 649547 650998 652449 653900 658538 663176 667814 672452 677090 678540 679990 681440 682890 684340 685790 687240
Peru 701560 700617 699674 698731 697788 696845 695902 694959 694016 693073 692130 691188 690246 689304 688362 687420 685920 684420 682920 681420 679920 678420 676920
Mexico 702910 699370 695830 692290 688750 685210 681670 678130 674590 671050 667510 665164 662818 660472 658126 655780 654228 652676 651124 649572 648020 646468 644916
Colombia 625190 624180 623170 622160 621150 620140 619130 618120 617110 616100 615090 614080 613070 612060 611050 610040 609030 608020 607010 606000 604990 603980 602970
Angola 609760 608512 607264 606016 604768 603520 602272 601024 599776 598528 597280 596032 594784 593536 592288 591040 589792 588544 587296 586048 584800 583552 582304
Bolivia 627950 625246 622542 619838 617134 614430 611726 609022 606318 603614 600910 598196 595482 592768 590054 587340 584264 581188 578112 575036 571960 568884 565808
Zambia 528000 526334 524668 523002 521336 519670 518004 516338 514672 513006 511340 509674 508008 506342 504676 503010 501344 499678 498012 496346 494680 493014 491348
Venezuela 520260 517385 514510 511635 508760 505885 503010 500135 497260 494385 491510 488634 485758 482882 480006 477130 474254 471378 468502 465626 462750 459874 456998
Mozambique 433780 431590 429400 427210 425020 422830 420640 418450 416260 414070 411880 409662 407444 405226 403008 400790 398676 396562 394448 392334 390220 388106 385992
Tanzania 414950 410917 406884 402851 398818 394785 390752 386719 382686 378653 374620 370586 366552 362518 358484 354450 350416 346382 342348 338314 334280 330246 326212
Myanmar 392180 387830 383480 379130 374780 370430 366080 361730 357380 353030 348680 345586 342492 339398 336304 333210 330114 327018 323922 320826 317730 314634 311538
Argentina 347930 344998 342066 339134 336202 333270 330338 327406 324474 321542 318610 316086 313562 311038 308514 305990 303592 301194 298796 296398 294000 291602 289204
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cleaning Up</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill: orange;
}
g.highlight path {
stroke: green;
stroke-width: 5;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Forest area by country</h1>
<p>Variations of forest area in the top 20 countries by woodland, 1990 - 2010</p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and 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(12)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.area);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("forestdata.csv", function(data) {
//Data is loaded in, but we need to restructure it.
//Remember, each line requires an array of x/y pairs;
//that is, an array of arrays, like so:
//
// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
//
//We, however, are using 'year' as x and 'area' as y.
//We also need to know which country belongs to each
//line, so we will build an array of objects that is
//structured like this:
/*
[
{
country: "Australia",
forestarea: [
{ year: 1961, area: 90589.568 },
{ year: 1962, area: 94912.961 },
{ year: 1963, area: 101029.517 },
…
]
},
{
country: "Bermuda",
forestarea: [
{ year: 1961, area: 176.016 },
{ year: 1962, area: 157.681 },
{ year: 1963, area: 150.347 },
…
]
},
…
]
*/
//Note that this is an array of objects. Each object
//contains two values, 'country' and 'forestarea'.
//The 'forestarea' value is itself an array, containing
//more objects, each one holding 'year' and 'area' values.
//New array with all the years, for referencing later
var years = ["1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];
//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,
forestarea: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the forestarea data array
//for this country
dataset[i].forestarea.push({
year: years[j],
area: data[i][years[j]]
});
}
}
}
//Uncomment to log the original data to the console
console.log(data);
//Uncomment to log the newly restructured dataset to the console
console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.forestarea, function(d) {
return +d.area;
});
}),
0
]);
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
if (d.country == "Brazil" ||
d.country == "China") {
return true;
} else {
return false;
}
});
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.country;
});
//Within each group, create a new line/path,
//binding just the forestarea data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.forestarea ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-width", 1)
.append("title")
.text(function(d) {
return d.country ;
});
//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);
});
//End USA data load function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment