Skip to content

Instantly share code, notes, and snippets.

@joannalok

joannalok/AverageSalary.csv

Created November 7, 2015 12:13
Show Gist options
  • Save joannalok/60a43d6bc8d553c81b65 to your computer and use it in GitHub Desktop.
Save joannalok/60a43d6bc8d553c81b65 to your computer and use it in GitHub Desktop.
Download ZIP
AverageSalary(Week2 Intermediate)
Raw
AverageSalary.csv
Country 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Australia 45130 44734 45098 45588 46987 47598 47880 49236 49616 49147 50706 52175 52229 51374 51148
Austria 42298 42193 42876 42994 43673 43904 44601 44863 45550 46230 45978 45444 45733 45660 45988
Belgium 45844 46107 46973 47218 47106 46809 47065 46840 46922 47439 47154 47319 47682 48102 48093
Canada 39207 39078 38669 38682 39703 41384 42683 43712 44514 44968 45165 45858 46902 47794 48164
Czech Republic 14913 15392 16567 17817 18695 19245 20005 20595 20602 20550 21028 21218 21031 20660 21185
Denmark 41736 42050 43016 44089 45101 45886 46695 47248 47897 49055 49576 49174 48901 48761 49589
Estonia 11850 12242 12808 14038 15065 16030 17214 19921 20024 19397 19218 18413 18871 19453 21020
Finland 34725 35108 35307 35987 37175 38047 38932 39525 39908 40230 40862 41002 40968 40736 40742
France 35091 35322 36274 36575 37171 37619 38036 38194 38098 39263 40049 39978 40258 40530 40828
Germany 40664 41087 41304 41236 41224 41121 41145 41079 41352 41518 41643 42415 42893 43326 43872
Greece 26550 27054 29525 30723 31305 31379 31604 31696 31140 32636 30194 28738 27584 26145 26436
Hungary 16384 17487 18900 20236 21318 21990 22486 22361 22683 21852 21960 21986 21212 21033 21399
Ireland 40504 41620 41678 42874 44326 46129 46811 48151 50150 54077 53357 52820 52645 52602 53286
Italy 34407 34562 34328 34301 34983 35392 35646 35596 35640 35806 36143 35593 34491 34476 34744
Japan 36402 36245 35628 35623 35711 36327 35926 35595 35703 35193 35854 36747 36296 36481 35672
Korea 29874 30569 31556 32683 33472 34584 35146 35986 35726 35668 36237 36681 36173 36698 36653
Luxembourg 52412 53066 54357 54218 55171 55404 56096 57691 57661 58508 59188 58738 58330 60214 61511
Mexico 13765 13765 13765 13765 13382 13310 13314 13367 13213 12875 12502 12844 12708 12952 12850
Netherlands 45705 46441 46674 47176 47735 47977 47999 48596 48875 50796 51112 50828 51156 51357 51003
Norway 36806 37739 39224 39723 41014 42156 43808 45691 46775 47251 47833 49465 50801 51446 51718
Poland 19935 21164 21100 21361 20983 20860 21012 21500 22789 22741 23312 23353 23140 23571 23649
Portugal 25319 25450 25315 25180 25123 24906 24323 24541 24509 25675 25658 24885 23940 24503 23977
Slovak Republic 15384 15374 16181 16533 16805 17896 18488 19625 19820 20488 21391 21200 20966 21124 22151
Slovenia 27343 27917 29263 30413 31398 32076 32558 32851 33829 33768 32830 33269 33068
Spain 34839 34762 34979 34898 34483 34681 34585 35040 36363 38644 37712 36977 35994 36174 36013
Sweden 33156 33343 33619 34037 35068 35753 36618 37800 38322 38574 38802 39291 40165 40447 40994
Switzerland 49178 50988 51645 51731 51166 51903 52284 53024 53254 54319 54277 54530 55540 56461 57082
United Kingdom 38665 40449 41100 42169 42734 42589 43582 44465 43589 43810 42810 41797 41726 41494 41659
United States 50993 51425 51822 52431 53453 53511 54389 55476 55260 55744 56100 56247 56735 56811 57139
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 2</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script type="text/javascript" src="http://www.d3plus.org/js/d3plus.js"></script>
<style type="text/css">
h1
{
height: auto;
margin: 0px 0px 0px 0px;
padding: 25px 25px;
text-align: center;
border: 3px dotted SlateGray;
border-radius: 20px;
color: SlateGray;
font-size: 40px;
}
body
{
background-color: SlateGray ;
font-family: "calibri";
}
#container {
width: 990px;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 3px 3px #9BA6B1;
text-align: left;
position: relative;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
}
svg {
background-color: transparent;
position: relative;
}
path {
fill-opacity: 0.5;
}
path:hover {
fill-opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id = "container">
<h1>World Average Annual Wages In Past Decade</h1>
<p>Average Annual Wages. Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode%3DANHRS">OECD Stat</a>, 2015. </p>
<p>Insight: Average Annual Wages did not change too much over the past 10 years after adjustment of inflation! :(</p>
</div>
<script type="text/javascript">
var w = 990;
var h = 400;
var padding = [ 20, 0, 20, 60 ]; //Top, right, bottom, left
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
var dateFormat = d3.time.format("%Y");
var stack = d3.layout.stack()
.values(function(d) {
return d.Monetary;
})
.order("reverse");
//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();
//Load data
d3.csv("AverageSalary.csv", function(data) {
var years = ["2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014"];
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,
Monetary: []
};
//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 emissions data array
//for this country
dataset[i].Monetary.push({
x: years[j],
y: amount
});
}
};
//Stack the data!
stack(dataset);
//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);
//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].Monetary[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) {
return area(d.Monetary);
})
.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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment