Skip to content

Instantly share code, notes, and snippets.

@joannalok

joannalok/PropertyPriceIndex.csv

Created November 1, 2015 04:51
Show Gist options
  • Save joannalok/2aeab5e79d162618a5b8 to your computer and use it in GitHub Desktop.
Save joannalok/2aeab5e79d162618a5b8 to your computer and use it in GitHub Desktop.
Download ZIP
Intermediate Module 1 (Revised)
Raw
index.html
<!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>
<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;
}
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: start !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);
/*
var data_string = [
{ firstname: "Apple",
lastname: "Red",
age: "10"
},
{ firstname: "Apple",
lastname: "Red",
age: "10"
}
];
function profile(firstname, lastname, age) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
}
thisman = new profile(JSON.stringify(data_string[0]));
console.log(thisman.toString());
console.log(thisman.toString());
profile.prototype.toString = function profiletostring() {
var profile = "Full Name: " + this.firstname + " " + this lastname + " Age:" + this.age;
return profile;
}
console.log(data_string[0]);
console.log(JSON.stringify(data_string[0]));
*/
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 = w - 220;
var box_height = (h - 200)/2;
groups.append("rect")
.attr("x", box_width)
.attr("y",box_height)
.attr("width",box_width)
.attr("height",200)
.attr("fill","#AAB9D8")
.attr("id","desc")
;
//Description
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18)
.text(function(d) {
return "More Numbers for " + d.Country + ":";
})
;
/*.each(function(d) {
d3plus.textwrap().container(d3.select(this)).draw();
})*/
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18*2)
.text(function(d) {
return "▪ Price To Income Ratio: " + d.Price_To_Income_Ratio;
})
;
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18*3)
.text(function(d) {
return "▪ Rank: " + d.Rank;
})
;
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18*4)
.text(function(d) {
return "▪ Affordability Index: " + d.affordability_index;
})
;
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18*5)
.text(function(d) {
return "▪ Mortgage/Income: " + d.Mortgage_as_a_percentage_of_income + "%";
})
;
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18*6)
.text(function(d) {
return "▪ Price/Rent Ratio(City): " + d.Price_To_Rent_Ratio_City_Centre;
})
;
groups.append("text")
.attr("x",box_width)
.attr("class","desc_text")
.attr("y",box_height+18*7)
.text(function(d) {
return "▪ Price/Rent Ratio(Outside City): " + d.Price_To_Rent_Ratio_Outside_of_City_Centre;
})
;
//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>
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