Skip to content

Instantly share code, notes, and snippets.

@joannalok
Created September 25, 2015 10:39
Show Gist options
  • Save joannalok/95f503ffc93117fcd5a4 to your computer and use it in GitHub Desktop.
Save joannalok/95f503ffc93117fcd5a4 to your computer and use it in GitHub Desktop.
Centra-City Index (Week 6)
YYYYMM CCI
2015-07 142.3
2015-06 140.35
2015-05 138.5
2015-04 137.47
2015-03 135.8
2015-02 135.28
2015-01 132.51
2014-12 130.16
2014-11 127.34
2014-10 126.54
2014-09 124.87
2014-08 123.67
2014-07 121.13
2014-06 118.75
2014-05 117.52
2014-04 116.49
2014-03 115.91
2014-02 115.77
2014-01 115.91
2013-12 116.52
2013-11 117.14
2013-10 117.24
2013-09 117.94
2013-08 118.17
2013-07 118.77
2013-06 118.39
2013-05 116.74
2013-04 116.83
2013-03 121.53
2013-02 120.12
2013-01 116.48
2012-12 113.48
2012-11 113.39
2012-10 111.89
2012-09 108.4
2012-08 105.55
2012-07 103.64
2012-06 102.44
2012-05 102.28
2012-04 100.74
2012-03 98.11
2012-02 94.02
2012-01 92.67
2011-12 94.13
2011-11 95.3
2011-10 95.86
2011-09 97.73
2011-08 97.82
2011-07 97.94
2011-06 99.36
2011-05 98.42
2011-04 96.43
2011-03 95.65
2011-02 93.37
2011-01 89.8
2010-12 87.52
2010-11 87.27
2010-10 85.17
2010-09 83.77
2010-08 82.73
2010-07 81.02
2010-06 79.01
2010-05 79.05
2010-04 78.82
2010-03 77.7
2010-02 76.76
2010-01 75.27
2009-12 73.34
2009-11 72.67
2009-10 72.91
2009-09 71.99
2009-08 70.05
2009-07 68.13
2009-06 66.13
2009-05 63.29
2009-04 60.92
2009-03 58.43
2009-02 57.46
2009-01 56.81
2008-12 55.46
2008-11 55.51
2008-10 62.09
2008-09 67.24
2008-08 68.65
2008-07 71.08
2008-06 71.99
2008-05 71.28
2008-04 71.3
2008-03 72.78
2008-02 71.78
2008-01 68.87
2007-12 65.34
2007-11 61.59
2007-10 58.42
2007-09 57.32
2007-08 56.64
2007-07 55.9
2007-06 55.66
2007-05 54.81
2007-04 54.27
2007-03 53.82
2007-02 53.31
2007-01 52.77
2006-12 52.43
2006-11 52.34
2006-10 52.29
2006-09 52.21
2006-08 52.35
2006-07 52.37
2006-06 52.71
2006-05 53.26
2006-04 53.34
2006-03 53.07
2006-02 52.94
2006-01 52.42
2005-12 51.81
2005-11 53.06
2005-10 54.69
2005-09 54.91
2005-08 54.72
2005-07 54.45
2005-06 54.77
2005-05 55.11
2005-04 54.64
2005-03 52.39
2005-02 50.17
2005-01 49.42
2004-12 49.13
2004-11 48.58
2004-10 47.6
2004-09 45.87
2004-08 45.63
2004-07 45.83
2004-06 45.78
2004-05 46.65
2004-04 46.51
2004-03 44.85
2004-02 41.93
2004-01 39.01
2003-12 37.35
2003-11 36.26
2003-10 34.9
2003-09 32.88
2003-08 31.73
2003-07 31.74
2003-06 31.37
2003-05 31.34
2003-04 32.18
2003-03 33.45
2003-02 34.43
2003-01 34.74
2002-12 34.83
2002-11 34.95
2002-10 35.69
2002-09 36.65
2002-08 37.92
2002-07 38.71
2002-06 39.25
2002-05 39.43
2002-04 39.53
2002-03 39.76
2002-02 39.64
2002-01 39.9
2001-12 39.68
2001-11 39.27
2001-10 39.25
2001-09 41.08
2001-08 42
2001-07 42.37
2001-06 43.05
2001-05 43.1
2001-04 44.11
2001-03 44.74
2001-02 43.37
2001-01 43.8
2000-12 44.31
2000-11 45.79
2000-10 47.4
2000-09 47.49
2000-08 47.1
2000-07 46.9
2000-06 46.29
2000-05 49.82
2000-04 52.39
2000-03 53.46
2000-02 53.48
2000-01 53.4
YYYYMM CCI
2015-07 143.03
2015-06 140.54
2015-05 138.44
2015-04 137.07
2015-03 136.11
2015-02 136.53
2015-01 133.57
2014-12 132.32
2014-11 128.82
2014-10 129.61
2014-09 129.68
2014-08 131.16
2014-07 128.22
2014-06 125.65
2014-05 126.67
2014-04 126.17
2014-03 127.12
2014-02 127.79
2014-01 124.17
2013-12 125.99
2013-11 127.24
2013-10 126.7
2013-09 126.94
2013-08 127.73
2013-07 129.6
2013-06 126.65
2013-05 126.51
2013-04 128.2
2013-03 132.78
2013-02 129.6
2013-01 127.05
2012-12 123.28
2012-11 124.63
2012-10 123.05
2012-09 120.55
2012-08 118.98
2012-07 119.56
2012-06 116.47
2012-05 116.58
2012-04 116.07
2012-03 113.91
2012-02 108.32
2012-01 109.86
2011-12 113.27
2011-11 113.9
2011-10 114.24
2011-09 116.32
2011-08 117.42
2011-07 116.28
2011-06 117.59
2011-05 117.43
2011-04 114.42
2011-03 113.89
2011-02 112.95
2011-01 107.34
2010-12 106.83
2010-11 106.42
2010-10 104.22
2010-09 101.64
2010-08 100.16
2010-07 98.32
2010-06 95.98
2010-05 95.69
2010-04 93.94
2010-03 94.54
2010-02 93.17
2010-01 92.01
2009-12 87.61
2009-11 88.01
2009-10 88.84
2009-09 86.79
2009-08 83.92
2009-07 81
2009-06 78.3
2009-05 72.97
2009-04 69.81
2009-03 67.19
2009-02 66.38
2009-01 66.6
2008-12 67.79
2008-11 67.02
2008-10 76.63
2008-09 82.9
2008-08 85.86
2008-07 88.96
2008-06 88.51
2008-05 87.84
2008-04 86.53
2008-03 88.52
2008-02 88.84
2008-01 84.87
2007-12 81.56
2007-11 76.58
2007-10 71.07
2007-09 70.31
2007-08 68.64
2007-07 67.93
2007-06 66.98
2007-05 64.44
2007-04 63.85
2007-03 62.78
2007-02 63.72
2007-01 62.1
2006-12 61.6
2006-11 61.12
2006-10 60.71
2006-09 59.51
2006-08 60.14
2006-07 60.35
2006-06 59.31
2006-05 59.85
2006-04 60.85
2006-03 59.29
2006-02 60.41
2006-01 60.46
2005-12 59
2005-11 60.38
2005-10 61.38
2005-09 60.59
2005-08 61.3
2005-07 60.13
2005-06 60.26
2005-05 60.33
2005-04 61.45
2005-03 59.05
2005-02 57.71
2005-01 57.08
2004-12 56.51
2004-11 55.84
2004-10 54.09
2004-09 51.77
2004-08 51.84
2004-07 53.18
2004-06 52.14
2004-05 52.28
2004-04 51.52
2004-03 49.93
2004-02 46.44
2004-01 42.41
2003-12 40.31
2003-11 39.65
2003-10 37.86
2003-09 34.8
2003-08 33.82
2003-07 33.74
2003-06 33.16
2003-05 33.37
2003-04 34.06
2003-03 34.99
2003-02 36.7
2003-01 36.81
2002-12 35.8
2002-11 36.07
2002-10 37.3
2002-09 38.07
2002-08 39.27
2002-07 40.36
2002-06 40.36
2002-05 40.54
2002-04 40
2002-03 39.96
2002-02 40.37
2002-01 40.73
2001-12 40.22
2001-11 39.6
2001-10 39.71
2001-09 41.88
2001-08 42.68
2001-07 42.19
2001-06 42.92
2001-05 43.13
2001-04 44.21
2001-03 44.66
2001-02 44.07
2001-01 45.19
2000-12 45.83
2000-11 46.25
2000-10 46.56
2000-09 47.2
2000-08 47.23
2000-07 49.26
2000-06 47.42
2000-05 50.26
2000-04 50.66
2000-03 53.14
2000-02 52.2
2000-01 52.05
YYYYMM CCI
2015-07 143.52
2015-06 141.66
2015-05 139.81
2015-04 138.84
2015-03 137.04
2015-02 136.34
2015-01 133.61
2014-12 131.03
2014-11 128.3
2014-10 127.21
2014-09 125.21
2014-08 123.54
2014-07 121.05
2014-06 118.66
2014-05 117.06
2014-04 115.92
2014-03 115.08
2014-02 114.81
2014-01 115.58
2013-12 115.99
2013-11 116.5
2013-10 116.72
2013-09 117.51
2013-08 117.63
2013-07 118.03
2013-06 118.09
2013-05 116.17
2013-04 115.97
2013-03 120.74
2013-02 119.61
2013-01 115.76
2012-12 112.84
2012-11 112.55
2012-10 111.05
2012-09 107.36
2012-08 104.1
2012-07 101.75
2012-06 100.87
2012-05 100.67
2012-04 98.93
2012-03 96.2
2012-02 92.34
2012-01 90.49
2011-12 91.62
2011-11 92.99
2011-10 93.52
2011-09 95.36
2011-08 95.29
2011-07 95.61
2011-06 97.06
2011-05 95.96
2011-04 94.14
2011-03 93.27
2011-02 90.79
2011-01 87.52
2010-12 84.95
2010-11 84.72
2010-10 82.62
2010-09 81.41
2010-08 80.42
2010-07 78.74
2010-06 76.77
2010-05 76.85
2010-04 76.85
2010-03 75.45
2010-02 74.58
2010-01 73.05
2009-12 71.48
2009-11 70.65
2009-10 70.79
2009-09 70.03
2009-08 68.24
2009-07 66.46
2009-06 64.55
2009-05 62.08
2009-04 59.81
2009-03 57.35
2009-02 56.35
2009-01 55.56
2008-12 53.82
2008-11 53.99
2008-10 60.15
2008-09 65.15
2008-08 66.32
2008-07 68.67
2008-06 69.79
2008-05 69.08
2008-04 69.3
2008-03 70.7
2008-02 69.5
2008-01 66.74
2007-12 63.16
2007-11 59.59
2007-10 56.76
2007-09 55.6
2007-08 55.06
2007-07 54.31
2007-06 54.18
2007-05 53.6
2007-04 53.08
2007-03 52.69
2007-02 51.97
2007-01 51.6
2006-12 51.26
2006-11 51.22
2006-10 51.26
2006-09 51.32
2006-08 51.38
2006-07 51.37
2006-06 51.96
2006-05 52.51
2006-04 52.43
2006-03 52.35
2006-02 52.02
2006-01 51.39
2005-12 50.91
2005-11 52.17
2005-10 53.85
2005-09 54.24
2005-08 53.88
2005-07 53.8
2005-06 54.14
2005-05 54.51
2005-04 53.83
2005-03 51.58
2005-02 49.25
2005-01 48.44
2004-12 48.17
2004-11 47.69
2004-10 46.77
2004-09 45.12
2004-08 44.82
2004-07 44.85
2004-06 44.96
2004-05 45.9
2004-04 45.92
2004-03 44.22
2004-02 41.44
2004-01 38.64
2003-12 37
2003-11 35.88
2003-10 34.65
2003-09 32.75
2003-08 31.48
2003-07 31.51
2003-06 31.19
2003-05 31.19
2003-04 32.06
2003-03 33.38
2003-02 34.25
2003-01 34.58
2002-12 34.93
2002-11 34.97
2002-10 35.68
2002-09 36.66
2002-08 37.9
2002-07 38.65
2002-06 39.31
2002-05 39.5
2002-04 39.81
2002-03 39.98
2002-02 39.88
2002-01 40.16
2001-12 40
2001-11 39.71
2001-10 39.68
2001-09 41.59
2001-08 42.54
2001-07 42.87
2001-06 43.6
2001-05 43.63
2001-04 44.45
2001-03 44.98
2001-02 43.56
2001-01 43.74
2000-12 44.54
2000-11 46.36
2000-10 47.92
2000-09 47.79
2000-08 47.23
2000-07 46.98
2000-06 46.41
2000-05 49.88
2000-04 52.61
2000-03 53.5
2000-02 53.63
2000-01 53.58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 6</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;
}
path:hover {
opacity:1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
}
.axis text {
font-family: Arial;
font-size: 15px;
}
</style>
</head>
<body>
<h1>
Hong Kong Centa-City Index in the past 15 years
</h1>
<table class = "ref">
<tr>
<td>
<p>Centa-City Index provided by a major Real Estate Agency in Hong Kong. Source: <a href="http://www1.centadata.com/cci/cci_e.htm">Centraline-CCI</a>, 2015</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 dateFormat = d3.time.format("%Y-%m");
//d3.time.format("%Y%/m") can be /, -
//ordinal but handle date object
var xScale = d3.time.scale()
.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]);
//Axis
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");
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.YYYYMM));
})
.y(function(d) {
return yScale(d.CCI);
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load first dataset
d3.csv("HKCCI.csv", function(CCI_Data) {
//Load second dataset
d3.csv("HKCCI_Large.csv", function(CCI_L_Data) {
//Load third dataset
d3.csv("HKCCI_Small.csv", function(CCI_S_Data) {
//Merge two dataset into one dataset
var mergedData = CCI_Data.concat(CCI_L_Data).concat(CCI_S_Data);
console.log(mergedData);
xScale.domain([
d3.min(mergedData, function(d) {
return dateFormat.parse(d.YYYYMM);
}),
d3.max(mergedData, function(d) {
return dateFormat.parse(d.YYYYMM);
}) ]);
yScale.domain([
d3.max(mergedData, function(d) {
return +d.CCI;
}),
0 ]);
svg.data([ CCI_Data ])
//[CCI_Data] will group all CCI_Data in an array, must have to work
.append("path")
.attr("class","Line_CCI")
.attr("d",line)
.attr("fill","none")
.attr("stroke","purple")
.attr("stroke-width",2)
.attr("opacity","0.4")
.append("title")
.text("Overall CCI")
;
svg.data([ CCI_L_Data ])
.append("path")
.attr("class","Line_CCI_L")
.attr("d",line)
.attr("fill","none")
.attr("stroke","red")
.attr("stroke-width",2)
.attr("opacity","0.4")
.append("title")
.text("CCI for large Units (over 1076 sq.ft)")
;
svg.data([ CCI_S_Data ])
.append("path")
.attr("class","Line_CCI_S")
.attr("d",line)
.attr("fill","none")
.attr("stroke","Green")
.attr("stroke-width",2)
.attr("opacity","0.4")
.append("title")
.text("CCI for Small/Medium Units (less than 1076 sq.ft)")
;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate( 0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
.call(yAxis);
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment