Skip to content

Instantly share code, notes, and snippets.

@joannalok

joannalok/PropertyPriceIndex.csv

Created September 17, 2015 03:53
Show Gist options
  • Save joannalok/b487834ce0d7c84f7c5e to your computer and use it in GitHub Desktop.
Save joannalok/b487834ce0d7c84f7c5e to your computer and use it in GitHub Desktop.
Download ZIP
PropertyPriceIndex (Week 5)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 5</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
h1
{
width: 990px;
height: auto;
margin: 0px 0px;
padding: 25px 0px;
padding-left: 10px;
background-color: gray;
color: white;
text-align: left;
position: relative;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
font-size: 28px;
}
body {
background-color: #ddddff;
font-family: Arial;
position: relative;
text-align: center;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
vertical-align: middle;
}
table.ref {
background-color: white;
text-align: left;
width: 1000px;
height: auto
padding: 10px 20px 10px 10px;
margin-left: auto;
margin-right: auto;
}
td {
padding-left: 10px;
}
svg {
background-color: white;
position: relative;
}
.ScattorPlot {
stroke: black;
stroke-width: 0.6;
}
.ScattorPlot:hover {
fill: #FF3377 !important;
fill-opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial;
font-size: 15px;
}
#Desc {
fill: red;
}
.ScattorPlot:hover ~ #Desc {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h1>
2015 World Property Price Over Income Ratio With Affordability Index
</h1>
<table class = "ref">
<tr>
<td>
<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>
<p><em>Each Dot represents a country, intensity of the color represents how hard it is to buy a property.</em></p>
</td>
</tr>
</table>
<script type="text/javascript">
var w = 1000;
var h = 500;
var padding = [ 20, 20, 30, 50 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var rgbScale = d3.scale.linear()
.rangeRound([0,255]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("PropertyPriceIndex.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.Price_To_Income_Ratio, +b.Price_To_Income_Ratio);
})
xScale.domain([
d3.min(data, function(d) {
return +d.affordability_index;
}),
d3.max(data, function(d) {
return +d.affordability_index;
}) ]);
yScale.domain([
d3.max(data, function(d) {
return +d.Price_To_Income_Ratio;
}),
d3.min(data, function(d) {
return +d.Price_To_Income_Ratio;
}) ]);
rgbScale.domain([
d3.max(data, function(d) {
return +d.Price_To_Income_Ratio;
}),
d3.min(data, function(d) {
return +d.Price_To_Income_Ratio;
}) ]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.affordability_index);
})
.attr("cy", function(d) {
return yScale(d.Price_To_Income_Ratio);
})
.attr("r", 0.1)
.attr("class","ScattorPlot")
.attr("fill", function(d) {
return "rgb(" + (rgbScale(d.Price_To_Income_Ratio)) + "," + (rgbScale(d.Price_To_Income_Ratio*5)) + ",255)";
})
.append("title")
.text(function(d) {
return d.Country + "'s Price To Income Ratio: " + d.Price_To_Income_Ratio
+ " and Property Affordability Index: " + d.affordability_index;
})
;
circles.sort(function(a,b) {
return d3.ascending(+a.Price_To_Income_Ratio, +b.Price_To_Income_Ratio);
})
.transition()
.delay( function(d,i){
return i * 10;
})
.duration(1000)
.attr("r",4)
//can use for cx, cy as well
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] - 5) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
PropertyPriceIndex.csv
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