Created
October 28, 2015 07:32
-
-
Save joannalok/16efc5a640705525e8b8 to your computer and use it in GitHub Desktop.
Intermediate: Module1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Module 1</title> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.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; | |
} | |
g.bar:hover rect{ | |
fill: #4D5085 !important; | |
fill-opacity: 1; | |
stroke: black !important; | |
} | |
g.bar text { | |
font-size: 13px; | |
text-anchor: end; | |
opacity: 0; | |
fill: white; | |
} | |
g.bar:hover text { | |
opacity: 1; | |
} | |
#desc { | |
fill: transparent; | |
transition: height 1s; | |
} | |
g.bar:hover #desc{ | |
height: 200px; | |
} | |
#desc_text { | |
text-anchor: middle !important; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: Arial; | |
font-size: 15px; | |
/*fill: #4D5085;*/ | |
transition: fill 4000s; | |
} | |
/*To hide the y axis*/ | |
.y.axis path, | |
.y.axis line{ | |
opacity: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id = "container"> | |
<h1>World Property Price over Income Ratio in 2015</h1> | |
<p>Property Price Over Income Ratio by country. Source: <a href="http://www.numbeo.com/property-investment/rankings_by_country.jsp">Numbeo</a>, 2015</p> | |
</div> | |
<script type="text/javascript"> | |
var w = 990; | |
var h = 400; | |
var padding = [ 20, 220, 20, 150 ]; //Top, right, bottom, left | |
var widthScale = d3.scale.linear() | |
.range([ 0, w - padding[1] - padding[3] ]); | |
var heightScale = d3.scale.ordinal() | |
.rangeRoundBands([ padding[0], h - padding[2] ], 0.2); | |
var xAxis = d3.svg.axis() | |
.scale(widthScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(heightScale) | |
.orient("left"); | |
var svg = d3.select("#container") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
d3.csv("PropertyPriceIndex.csv", function(dataset) { | |
dataset.sort(function(a, b) { | |
return d3.descending(+a.Price_To_Income_Ratio, +b.Price_To_Income_Ratio); | |
}) | |
//only work on Top 20 | |
var data = dataset.slice(0,20); | |
console.log(data); | |
console.log(data.Country); | |
console.log(dataset.length); | |
widthScale.domain([0, d3.max(data, function(d) { | |
return +d.Price_To_Income_Ratio; | |
}) ]); | |
heightScale.domain(data.map(function(d) { return d.Country; } )); | |
//testing | |
var Avg_PI_Ratio_Raw = Math.round(d3.sum(data, function(d) { | |
return +d.Price_To_Income_Ratio; | |
})/(data.length)); | |
var Avg_PI_Ratio = widthScale(Avg_PI_Ratio_Raw); | |
console.log(Avg_PI_Ratio); | |
console.log(Avg_PI_Ratio); | |
console.log(data.length); | |
var groups = svg.selectAll("g") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "bar"); | |
var rects = groups.append("rect") | |
.attr("x", padding[3]) | |
.attr("y", function(d) { | |
return heightScale(d.Country); | |
}) | |
.attr("width", 0) | |
.attr("height", heightScale.rangeBand()) | |
.attr("fill", "#AAB9D8") | |
.attr("stroke","black") | |
.attr("stroke-width","0.3") | |
.transition() | |
.delay(function(d, i) { | |
return i * 60; | |
}) | |
.duration(1000) | |
.attr("width", function(d) { | |
return widthScale(d.Price_To_Income_Ratio); | |
}) | |
; | |
groups.append("text") | |
.attr("x", function(d) { | |
return padding[3] + widthScale(d.Price_To_Income_Ratio) - 3; | |
}) | |
.attr("y", function(d) { | |
return heightScale(d.Country) + 11; | |
}) | |
.text(function(d) { | |
return d.Price_To_Income_Ratio; | |
}) | |
; | |
//Desc Box | |
var box_width = 200; | |
var box_height = 200; | |
groups.append("rect") | |
.attr("x", w - box_width) | |
.attr("y",(h - box_height)/2) | |
.attr("width",box_width) | |
.attr("height",20) | |
.attr("fill","#AAB9D8") | |
.attr("id","desc") | |
; | |
groups.append("text") | |
.attr("x",(w - box_width)+box_width/5) | |
.attr("y",(h - box_height)/2+box_height/3) | |
.text(function(d) { | |
return "Country: " + d.Country | |
+ "\n" + "Price To Income Ratio: " + d.Price_To_Income_Ratio | |
+ "\n" + "Rank: " + d.Rank; | |
}) | |
.attr("id","desc_text") | |
; | |
//Axis | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") | |
.call(xAxis) | |
; | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (padding[3] - 5) + ",0)") | |
.call(yAxis) | |
; | |
//Average Across 127 Countries | |
svg.append("line") | |
.attr("x1",150+Avg_PI_Ratio) | |
.attr("y1",5) | |
.attr("x2",150+Avg_PI_Ratio) | |
.attr("y2",h-25) | |
.attr("fill","black") | |
.attr("stroke","black") | |
.attr("stroke-width","1px") | |
svg.append("text") | |
.attr("x",155+Avg_PI_Ratio) | |
.attr("y",15) | |
.text("Average Property To Income Ratio across 127 Countries:" + Avg_PI_Ratio_Raw) | |
.attr("stroke-width","1px") | |
.attr("color","black") | |
.attr("font-size","10"); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Rank | Country | Price_To_Income_Ratio | Gross_Rental_Yield_City_Centre | Gross_Rental_Yield_Outside_of_Centre | Price_To_Rent_Ratio_City_Centre | Price_To_Rent_Ratio_Outside_of_City_Centre | Mortgage_as_a_percentage_of_income | affordability_index | |
---|---|---|---|---|---|---|---|---|---|
1 | Papua New Guinea | 93 | 5.96 | 17.74 | 16.77 | 5.64 | 1140.6 | 0.09 | |
2 | Cuba | 77.62 | 25.63 | 13.74 | 3.9 | 7.28 | 564.42 | 0.18 | |
3 | Hong Kong | 31.49 | 2.38 | 2.6 | 42.1 | 38.44 | 203.31 | 0.49 | |
4 | Ghana | 29.8 | 10.87 | 14.37 | 9.2 | 6.96 | 745.59 | 0.13 | |
5 | Syria | 29.14 | 4.1 | 3.06 | 24.37 | 32.64 | 271.14 | 0.37 | |
6 | Uganda | 28.89 | 1.79 | 8.53 | 55.74 | 11.73 | 575.44 | 0.17 | |
7 | Taiwan | 28.48 | 1.1 | 1.34 | 90.62 | 74.9 | 174.34 | 0.57 | |
8 | Vietnam | 27.27 | 4.26 | 6.6 | 23.48 | 15.15 | 302.51 | 0.33 | |
9 | Macao | 26.98 | 3.49 | 1.82 | 28.66 | 54.9 | 183.01 | 0.55 | |
10 | Ukraine | 24.58 | 4.65 | 5.01 | 21.51 | 19.96 | 551.36 | 0.18 | |
11 | El Salvador | 24.23 | 7.01 | 1.61 | 14.26 | 62.05 | 285.41 | 0.35 | |
12 | Singapore | 23.87 | 2.67 | 3.18 | 37.38 | 31.43 | 147.86 | 0.68 | |
13 | Kenya | 22.95 | 5.59 | 3.2 | 17.88 | 31.27 | 377.25 | 0.27 | |
14 | China | 22.95 | 2.5 | 2.73 | 39.97 | 36.64 | 196.57 | 0.51 | |
15 | Myanmar | 22.68 | 6.62 | 2.17 | 15.1 | 46.11 | 262.62 | 0.38 | |
16 | Mauritius | 21.97 | 2.06 | 2.04 | 48.55 | 48.98 | 227.12 | 0.44 | |
17 | Peru | 21.09 | 4.9 | 5.16 | 20.41 | 19.37 | 241.58 | 0.41 | |
18 | Cambodia | 20.37 | 7.98 | 8.09 | 12.54 | 12.36 | 225.22 | 0.44 | |
19 | Indonesia | 20.28 | 5.18 | 4.89 | 19.29 | 20.43 | 233.03 | 0.43 | |
20 | Algeria | 20.16 | 2.72 | 3.5 | 36.83 | 28.55 | 154.14 | 0.65 | |
21 | Venezuela | 20.04 | 8.1 | 13.69 | 12.35 | 7.3 | 397 | 0.25 | |
22 | Zimbabwe | 19.55 | 7.9 | 2.49 | 12.66 | 40.11 | 376.54 | 0.27 | |
23 | Belarus | 18.72 | 5.12 | 5.26 | 19.52 | 19.02 | 685.25 | 0.15 | |
24 | Philippines | 18.65 | 2.76 | 2.58 | 36.22 | 38.76 | 191.43 | 0.52 | |
25 | Moldova | 18.64 | 5.44 | 5.94 | 18.38 | 16.84 | 273.71 | 0.37 | |
26 | Azerbaijan | 18.57 | 6.13 | 6.11 | 16.31 | 16.38 | 201.86 | 0.5 | |
27 | Thailand | 18.19 | 4.14 | 3.4 | 24.17 | 29.38 | 158.96 | 0.63 | |
28 | Japan | 17.72 | 1.78 | 2.1 | 56.31 | 47.72 | 105.91 | 0.94 | |
29 | Iran | 17.1 | 6.08 | 6.55 | 16.45 | 15.28 | 405.37 | 0.25 | |
30 | Brazil | 16.8 | 3.98 | 4.06 | 25.11 | 24.62 | 208.58 | 0.48 | |
31 | Uzbekistan | 16.69 | 6.8 | 6.48 | 14.71 | 15.44 | 307.15 | 0.33 | |
32 | Nepal | 16.68 | 3.29 | 2.89 | 30.44 | 34.59 | 194.93 | 0.51 | |
33 | Colombia | 16.45 | 4.68 | 4.81 | 21.37 | 20.77 | 215.21 | 0.46 | |
34 | Montenegro | 15.9 | 3.22 | 3.07 | 31.1 | 32.54 | 175.52 | 0.57 | |
35 | Serbia | 15.56 | 2.94 | 3.13 | 34.02 | 31.98 | 139.67 | 0.72 | |
36 | Lebanon | 15.52 | 4.24 | 5.7 | 23.57 | 17.54 | 138 | 0.72 | |
37 | Pakistan | 15.49 | 3.1 | 3.13 | 32.22 | 31.96 | 224.24 | 0.45 | |
38 | Macedonia | 15.1 | 3.45 | 3.33 | 29.01 | 30.05 | 136.58 | 0.73 | |
39 | Morocco | 15.02 | 4.7 | 3.88 | 21.26 | 25.8 | 126.79 | 0.79 | |
40 | Russia | 14.76 | 5.89 | 6.02 | 16.98 | 16.62 | 222.03 | 0.45 | |
41 | Sri Lanka | 14.63 | 7.89 | 4.55 | 12.68 | 21.99 | 218.19 | 0.46 | |
42 | Georgia | 14.27 | 8.54 | 7.95 | 11.7 | 12.59 | 206.68 | 0.48 | |
43 | Kosovo (Disputed Territory) | 13.99 | 4.11 | 5.03 | 24.31 | 19.87 | 145.67 | 0.69 | |
44 | Albania | 13.96 | 3.81 | 5.79 | 26.25 | 17.27 | 132.79 | 0.75 | |
45 | South Korea | 13.91 | 2.22 | 3.51 | 44.97 | 28.46 | 106.22 | 0.94 | |
46 | Armenia | 13.88 | 6.48 | 5.11 | 15.44 | 19.57 | 212.17 | 0.47 | |
47 | Dominican Republic | 13.5 | 5.75 | 6.56 | 17.4 | 15.24 | 188.19 | 0.53 | |
48 | Ethiopia | 12.99 | 16.02 | 10.08 | 6.24 | 9.92 | 145.35 | 0.69 | |
49 | Argentina | 12.87 | 3.54 | 3.66 | 28.25 | 27.31 | 248.71 | 0.4 | |
50 | Lithuania | 12.79 | 4.4 | 4.25 | 22.73 | 23.52 | 85.11 | 1.17 | |
51 | Ecuador | 12.66 | 6.81 | 5.84 | 14.69 | 17.11 | 140.67 | 0.71 | |
52 | Botswana | 12.38 | 9.54 | 2.37 | 10.49 | 42.17 | 152.1 | 0.66 | |
53 | Uruguay | 12.17 | 5.22 | 5.1 | 19.14 | 19.6 | 120.81 | 0.83 | |
54 | Kazakhstan | 12.01 | 5.05 | 5.31 | 19.79 | 18.85 | 173.79 | 0.58 | |
55 | Croatia | 11.56 | 3.2 | 3.44 | 31.29 | 29.03 | 101.9 | 0.98 | |
56 | Panama | 11.27 | 10.93 | 7.14 | 9.15 | 14 | 90.56 | 1.1 | |
57 | Bolivia | 11.2 | 5.35 | 5.11 | 18.69 | 19.58 | 109.43 | 0.91 | |
58 | Bosnia And Herzegovina | 11.12 | 3.57 | 3.35 | 28.01 | 29.82 | 109.03 | 0.92 | |
59 | Estonia | 10.99 | 3.91 | 4.01 | 25.6 | 24.94 | 73.83 | 1.35 | |
60 | Tunisia | 10.97 | 5.4 | 5.2 | 18.53 | 19.21 | 107.31 | 0.93 | |
61 | Egypt | 10.95 | 7.69 | 8.3 | 13.01 | 12.04 | 127.03 | 0.79 | |
62 | Bangladesh | 10.85 | 3.3 | 4.23 | 30.3 | 23.67 | 178.89 | 0.56 | |
63 | Romania | 10.69 | 4.96 | 4.85 | 20.16 | 20.63 | 94.94 | 1.05 | |
64 | Italy | 10.59 | 3.02 | 3.81 | 33.16 | 26.22 | 83.49 | 1.2 | |
65 | Slovenia | 10.26 | 3.54 | 3.92 | 28.28 | 25.52 | 75.37 | 1.33 | |
66 | Guatemala | 10.25 | 6.54 | 7.19 | 15.3 | 13.91 | 118.68 | 0.84 | |
67 | Poland | 9.91 | 4.51 | 4.8 | 22.17 | 20.84 | 76.73 | 1.3 | |
68 | Latvia | 9.88 | 4.96 | 5.73 | 20.16 | 17.46 | 66.87 | 1.5 | |
69 | Czech Republic | 9.87 | 4.08 | 4.66 | 24.5 | 21.46 | 64.65 | 1.55 | |
70 | Israel | 9.57 | 3.3 | 3.58 | 30.31 | 27.9 | 60.72 | 1.65 | |
71 | Trinidad And Tobago | 9.5 | 9.19 | 4.83 | 10.88 | 20.69 | 90.61 | 1.1 | |
72 | Austria | 9.36 | 3.48 | 4.17 | 28.71 | 23.98 | 62.2 | 1.61 | |
73 | France | 9.11 | 3.41 | 3.83 | 29.35 | 26.08 | 61.33 | 1.63 | |
74 | Bahrain | 9.02 | 6.99 | 9.55 | 14.31 | 10.47 | 77.37 | 1.29 | |
75 | Chile | 8.89 | 4.51 | 4.97 | 22.19 | 20.13 | 71.19 | 1.4 | |
76 | India | 8.89 | 3.17 | 3.78 | 31.53 | 26.43 | 108.62 | 0.92 | |
77 | Slovakia | 8.78 | 6.03 | 6.34 | 16.6 | 15.77 | 58.97 | 1.7 | |
78 | Luxembourg | 8.78 | 5.23 | 4.82 | 19.1 | 20.74 | 53.27 | 1.88 | |
79 | Malaysia | 8.76 | 3.94 | 3.56 | 25.41 | 28.12 | 67.31 | 1.49 | |
80 | Bulgaria | 8.55 | 5.64 | 6.08 | 17.74 | 16.45 | 81.81 | 1.22 | |
81 | Spain | 8.52 | 4.03 | 4.46 | 24.82 | 22.43 | 59.06 | 1.69 | |
82 | Sweden | 8.4 | 3.13 | 3.57 | 31.94 | 28.04 | 54.08 | 1.85 | |
83 | Greece | 8.26 | 3.64 | 3.61 | 27.5 | 27.69 | 63.08 | 1.59 | |
84 | United Kingdom | 8.25 | 4.45 | 4.9 | 22.49 | 20.39 | 59.29 | 1.69 | |
85 | Malta | 8.24 | 4.83 | 4.77 | 20.72 | 20.97 | 57.35 | 1.74 | |
86 | Ireland | 8.13 | 4.35 | 5.38 | 23 | 18.59 | 59.65 | 1.68 | |
87 | Iraq | 8.12 | 8.87 | 9.86 | 11.27 | 10.14 | 85.57 | 1.17 | |
88 | Switzerland | 8.06 | 3.16 | 3.28 | 31.68 | 30.5 | 48.63 | 2.06 | |
89 | Hungary | 7.98 | 5.21 | 5.62 | 19.19 | 17.79 | 71.01 | 1.41 | |
90 | Australia | 7.92 | 4.25 | 4.73 | 23.54 | 21.16 | 64.21 | 1.56 | |
91 | Portugal | 7.91 | 5.6 | 5.82 | 17.85 | 17.19 | 58.6 | 1.71 | |
92 | Jordan | 7.83 | 6.96 | 7.35 | 14.36 | 13.6 | 85.15 | 1.17 | |
93 | Nigeria | 7.82 | 17.03 | 4.8 | 5.87 | 20.82 | 159.33 | 0.63 | |
94 | Qatar | 7.74 | 10.23 | 6.99 | 9.78 | 14.31 | 57.66 | 1.73 | |
95 | Palestinian Territory | 7.65 | 4.92 | 5.5 | 20.31 | 18.17 | 61.4 | 1.63 | |
96 | Nicaragua | 7.33 | 11.02 | 4.47 | 9.08 | 22.39 | 113.73 | 0.88 | |
97 | Norway | 7.26 | 4.76 | 4.86 | 21 | 20.59 | 50.57 | 1.98 | |
98 | Costa Rica | 7.15 | 8.22 | 6.76 | 12.17 | 14.8 | 102.55 | 0.98 | |
99 | Germany | 7.07 | 3.7 | 3.95 | 27 | 25.29 | 46.94 | 2.13 | |
100 | Belize | 7.05 | 1.37 | 3.72 | 73.02 | 26.87 | 80.71 | 1.24 | |
101 | Cyprus | 6.87 | 4.04 | 3.97 | 24.78 | 25.17 | 58.92 | 1.7 | |
102 | New Zealand | 6.83 | 5.37 | 6.09 | 18.63 | 16.41 | 58.43 | 1.71 | |
103 | Finland | 6.78 | 3.82 | 4.77 | 26.17 | 20.96 | 41.9 | 2.39 | |
104 | Turkey | 6.55 | 5.67 | 6.92 | 17.64 | 14.45 | 85.94 | 1.16 | |
105 | Belgium | 6.46 | 7.9 | 7.01 | 12.65 | 14.26 | 43.97 | 2.27 | |
106 | Fiji | 6.31 | 21.92 | 7.71 | 4.56 | 12.97 | 68.95 | 1.45 | |
107 | Brunei | 6.26 | 15.47 | 5.69 | 6.46 | 17.56 | 45.74 | 2.19 | |
108 | United Arab Emirates | 6.18 | 9.29 | 9.92 | 10.77 | 10.08 | 48.35 | 2.07 | |
109 | Namibia | 6.12 | 7.98 | 31.4 | 12.54 | 3.19 | 73.34 | 1.36 | |
110 | Canada | 5.78 | 5.64 | 6.29 | 17.72 | 15.9 | 39.35 | 2.54 | |
111 | Mexico | 5.67 | 6.91 | 6.26 | 14.48 | 15.96 | 69.69 | 1.43 | |
112 | Kuwait | 5.58 | 7.59 | 7.3 | 13.18 | 13.7 | 48.88 | 2.05 | |
113 | Netherlands | 5.43 | 6.01 | 6.23 | 16.65 | 16.04 | 39.64 | 2.52 | |
114 | Mozambique | 5.4 | 18.98 | 21.88 | 5.27 | 4.57 | 112.68 | 0.89 | |
115 | Bahamas | 5.36 | 8 | 5.1 | 12.5 | 19.6 | 53 | 1.89 | |
116 | Denmark | 5.18 | 4.7 | 5.11 | 21.28 | 19.58 | 35.45 | 2.82 | |
117 | Us Virgin Islands | 5.15 | 3.67 | 17.22 | 27.22 | 5.81 | 45.6 | 2.19 | |
118 | Iceland | 5.09 | 7.46 | 7.6 | 13.4 | 13.16 | 46.66 | 2.14 | |
119 | Libya | 5.05 | 12.54 | 12.64 | 7.97 | 7.91 | 46.49 | 2.15 | |
120 | Honduras | 4.63 | 6.8 | 9.71 | 14.72 | 10.29 | 58.59 | 1.71 | |
121 | Puerto Rico | 4.37 | 6.67 | 6.41 | 14.99 | 15.6 | 34.81 | 2.87 | |
122 | Jamaica | 3.67 | 16.5 | 11.43 | 6.06 | 8.75 | 42.69 | 2.34 | |
123 | United States | 3.39 | 9.48 | 11.46 | 10.55 | 8.73 | 25.11 | 3.98 | |
124 | South Africa | 3.18 | 9.58 | 9.76 | 10.44 | 10.24 | 34.89 | 2.87 | |
125 | Saudi Arabia | 2.9 | 6.64 | 7.17 | 15.07 | 13.95 | 21.85 | 4.58 | |
126 | Oman | 2.55 | 11.25 | 12.54 | 8.89 | 7.98 | 23.93 | 4.18 | |
127 | Tanzania | 2.46 | 63.94 | 20.13 | 1.56 | 4.97 | 38.5 | 2.6 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment