Skip to content

Instantly share code, notes, and snippets.

@JordynMarcellus

JordynMarcellus/index.html

Created September 11, 2015 01:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JordynMarcellus/cd85383a07ad9f4444e3 to your computer and use it in GitHub Desktop.
Save JordynMarcellus/cd85383a07ad9f4444e3 to your computer and use it in GitHub Desktop.
Download ZIP
~~~fourth week coursework~~~
Raw
index.html
<!DOCTYPE html>
<head>
<title>Alberta employment and oil prices in WTI and WCS</title>
<style>
rect {
fill: #8e44ad
}
rect:hover {
fill: #2ecc71
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
/* h1 and p font stacks from cssfontstack.com */
h1 {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
p {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Alberta monthly unemployment rate</h1>
<p>Monthly percentage of Alberta workers who were unemployed. Data from Statistics Canada via the Alberta economic dashboard</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var w = 640
var h = 960
//think object-oriented...
var margin = {}
margin.top = 0;
margin.right = 10;
margin.bottom = 20;
margin.left = 60;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//loads our data, spits it out into JSON
d3.csv("week-4.csv", function (data) {
console.log(data)
var widthScale = d3.scale.linear()
.domain([4, d3.max(data, function(d){
return +d.alberta_unemployment
})
])
.range([0, w - margin.right - margin.left]);
var heightScale = d3.scale.ordinal()
.domain(data.map(function(d){return d.date;} ))
.rangeRoundBands([margin.top, h - margin.bottom], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", margin.left)
.attr("y", function(d,i) {
return heightScale(d.date);
})
.attr("width", function(d){
return widthScale(d.alberta_unemployment)
})
.attr("height", heightScale.rangeBand())
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.left + "," + (h - margin.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
week-4.csv
date wti_oil_price wcs_oil_price alberta_unemployment part_time_employment full_time_employment all_employment
1/1/2009 41.71 29.97 4.9 356800 1702700 2059500
2/1/2009 39.09 31.71 5.4 363400 1678800 2042200
3/1/2009 47.94 40.76 5.9 360200 1676600 2036800
4/1/2009 49.65 43.76 6.1 370500 1666300 2036800
5/1/2009 59.03 51.64 7 367100 1659200 2026300
6/1/2009 69.64 61.18 6.8 364600 1660000 2024600
7/1/2009 64.15 54.45 7.1 361900 1660300 2022200
8/1/2009 71.05 60.57 7.3 373800 1641100 2014900
9/1/2009 69.41 59.52 6.8 357500 1668700 2026200
10/1/2009 75.72 65.29 7.2 352000 1656700 2008700
11/1/2009 77.99 65.04 7.3 365800 1658300 2024200
12/1/2009 74.47 61.89 6.6 369400 1666400 2035700
1/1/2010 78.33 69.28 6.6 353800 1668300 2022100
2/1/2010 76.39 67.91 6.8 349500 1666500 2016000
3/1/2010 81.2 71.82 7.2 364700 1645600 2010300
4/1/2010 84.29 72.02 7.2 362100 1661000 2023100
5/1/2010 73.74 57.49 6.6 357800 1665600 2023400
6/1/2010 75.34 62.33 6.6 363900 1663000 2026900
7/1/2010 76.32 64.28 6.6 373100 1650500 2023600
8/1/2010 76.6 61.93 6.3 366600 1658600 2025200
9/1/2010 75.24 55.44 6.3 354100 1667400 2021500
10/1/2010 81.89 56.72 6.3 363000 1670700 2033700
11/1/2010 84.25 69.56 5.7 354600 1678200 2032800
12/1/2010 89.15 74.89 5.7 368100 1668700 2036800
1/1/2011 89.17 71.18 5.9 383000 1677800 2060800
2/1/2011 88.58 63.42 5.6 389600 1686400 2076000
3/1/2011 102.86 79.13 5.4 378500 1700900 2079400
4/1/2011 109.53 89.69 5.7 352100 1717600 2069700
5/1/2011 100.9 85.66 5.6 344100 1720800 2064900
6/1/2011 96.26 79.42 5.4 348900 1745700 2094600
7/1/2011 97.3 78.31 5.6 367200 1741500 2108700
8/1/2011 86.33 66.51 5.5 363800 1756600 2120400
9/1/2011 85.52 71.6 5.4 354200 1770800 2125000
10/1/2011 86.32 76.54 5.1 358800 1768200 2127000
11/1/2011 97.16 87.32 5.1 348600 1782200 2130800
12/1/2011 98.56 86.86 4.8 360400 1785100 2145400
1/1/2012 100.27 86.47 5 345100 1797100 2142200
2/1/2012 102.2 83.04 5.2 351500 1782300 2133800
3/1/2012 106.16 75.01 5 359400 1792500 2152000
4/1/2012 103.32 70.4 4.7 369300 1797600 2167000
5/1/2012 94.66 75.1 4.5 365900 1808500 2174400
6/1/2012 82.3 66.37 4.5 367500 1802400 2169900
7/1/2012 87.9 64.28 4.5 351200 1823100 2174300
8/1/2012 94.13 69.03 4.3 348100 1834000 2182100
9/1/2012 94.51 78.17 4.5 353000 1831500 2184500
10/1/2012 89.49 79.88 4.5 349700 1847800 2197400
11/1/2012 86.53 72.47 4.3 367500 1832900 2200400
12/1/2012 87.86 57.87 4.5 346000 1850700 2196600
1/1/2013 94.76 62.11 4.5 349300 1858500 2207800
2/1/2013 95.31 58.4 4.7 336000 1864700 2200700
3/1/2013 92.94 66.72 4.8 331900 1868100 2200000
4/1/2013 92.02 68.87 4.4 321000 1886200 2207200
5/1/2013 94.51 80.93 4.5 356900 1866900 2223900
6/1/2013 95.77 75.39 4.9 356800 1863300 2220100
7/1/2013 104.67 90.5 4.6 358000 1868500 2226500
8/1/2013 106.57 90.97 4.8 370900 1877400 2248300
9/1/2013 106.29 83.57 4.3 366900 1880400 2247300
10/1/2013 100.54 74.21 4.5 370500 1868500 2239000
11/1/2013 93.86 62.62 4.8 370300 1873500 2243800
12/1/2013 97.63 58.95 4.7 356200 1880900 2237100
1/1/2014 94.62 65.69 4.6 364100 1882800 2247000
2/1/2014 100.82 81.54 4.4 369900 1893300 2263200
3/1/2014 100.8 79.42 5.1 367700 1890100 2257900
4/1/2014 102.07 79.56 5 389300 1871400 2260600
5/1/2014 102.18 82.72 4.7 379900 1889200 2269100
6/1/2014 105.79 86.56 4.8 370900 1908800 2279700
7/1/2014 103.59 82.73 4.5 379800 1897400 2277200
8/1/2014 96.54 73.89 5.2 379400 1882500 2261900
9/1/2014 93.21 74.35 4.6 385100 1899000 2284200
10/1/2014 84.4 70.6 4.4 375300 1915700 2291000
11/1/2014 75.79 62.87 4.4 373700 1918100 2291800
12/1/2014 59.29 43.24 4.7 375900 1924300 2300200
1/1/2015 47.22 30.43 4.5 379500 1934400 2313900
2/1/2015 50.58 36.52 5.3 372400 1927500 2299900
3/1/2015 47.82 34.76 5.5 392300 1909100 2301400
4/1/2015 54.45 40.26 5.5 412400 1901500 2313900
5/1/2015 59.27 47.5 5.8 385800 1921700 2307500
6/1/2015 59.82 51.29 5.7 383600 1918900 2302500
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment