-
Notifications
You must be signed in to change notification settings - Fork 0
/
final.html
263 lines (227 loc) · 11.8 KB
/
final.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Zhiwei Ye Final Project Test</title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/lightbox.css" />
<!--<link rel="stylesheet" href="css/style2.css" />-->
<!--<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>-->
<script src="http://code.jquery.com/ui/1.8.13/jquery-ui.js"></script>
<!--<script src="js/jquery-1.6.1.min.js"></script>-->
<script src="js/jquery.min.js"></script>
<!--<script src="js/jquery-ui-1.8.13.custom.min.js"></script>-->
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.min.js"></script>
<link rel="stylesheet" href="css/style_final.css" />
<script src="js/goto.js"></script>
<script src="js/lightbox2.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Year', 'Rural Residents', 'Urban Residents'],
['Year 2000', 2604914, 3176380],
['Year 2010', 2315596, 4116616]
]);
var options = {
width: 780, height: 500,
title: 'Population Change of Kunming',
vAxis: {title: 'Population'},
isStacked: true,
backgroundColor:'#fafafa',
fontSize:18,
fontName:'Georgia',
colors:['#f6931f', 'red']
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('visualization'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<script>
$(function() {
$( "#slider" ).slider({
value:2000,
min: 2000,
max: 2010,
step: 5,
slide: function( event, ui ) {
//$( "#amount" ).val( "$" + ui.value );
if (ui.value == 2010)
{
$( "#amount" ).val((ui.value-1));
}
else
{
$( "#amount" ).val(ui.value);
}
document.getElementById('chg').src="images/img/km_" + ui.value+".jpg";
document.getElementById('overlay').src="images/img/cc_" + ui.value+".png";
}
});
//$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
//$( "#chg" ).src= "images/img/" + $( "#slider" ).slider( "value" )+".jpg" ;
$( "#amount" ).val( $( "#slider" ).slider( "value" ));
$( "#slider-range" ).slider({
range: true,
min: 2000,
max: 2010,
values: [ 2000, 2010 ],
step: 5,
slide: function( event, ui ) {
//$( "#amount2" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
if (ui.values[1]==2010)
{
if (ui.values[0]==2010)
{
$( "#amount2" ).val("Year " + (ui.values[0]-1)+" - "+"Year " + (ui.values[1]-1));
}
else
{
$( "#amount2" ).val("Year " + ui.values[0]+" - "+"Year " + (ui.values[1]-1));
}
}
else
{
$( "#amount2" ).val("Year " + ui.values[0]+" - "+"Year " + ui.values[1]);
}
document.getElementById('beforei').src="images/img/cs1_" + ui.values[0]+".jpg";
document.getElementById('afteri').src="images/img/cs1_" + ui.values[1]+".jpg";
}
});
$( "#amount2" ).val( "Year " + $( "#slider-range" ).slider( "values", 0 ) +
" - Year " + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<div class="backdrop"></div>
<div id="center">
<div >
<div>
<div>
<h1 id='h1_1'>Kunming's Urban Expansion in the recent decade </h1>
<p id='h1_2'>Year 2000 to 2009</p>
</div>
<div style="float:right;margin-left: 20px;"><img src="images/img/km_global_.png" width="300" height="300" /></div>
<div style="margin-left:15px;margin-bottom:200px;">
<p><b>Kūnmíng</b> (Chinese: 昆明, UN/LOCODE: CNKMG) is the capital and largest city of Yunnan (云南) Province in Southwest China. It was known as Yunnan-Fou (云南府, Yúnnánfǔ) until the 1920s. A prefecture-level city, it is the political, economic, communications and cultural centre of Yunnan, and is the seat of the provincial government.( <a href="http://en.wikipedia.org/wiki/Kunming">wikipedia</a> )</p>
</div>
<div id='km_bg'>
<p>Ten-year period is two times the length of the life of the local government. Besides, it is a period long enough for urban developement observation. Since 2000, this city has witnessed new waves of urban development, along with both positive influences, and negative influences.</p>
<p>Part of this topic is based on the a news report about Kunming's urbanization and revitalization from <a href="http://www.infzm.com/content/45521"> Nanfang Weekend (南方周末)</a> .</p>
</div>
</div>
</div>
<div id='mainmap'>
<h2>Map of Urban Expansion</h2>
</div>
<div class="sub_con">
<p>
<label for="amount">Year (drag slider to change displaying year):</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
<div id="slider" class="sub_con"></div>
<div id="whole0">
<div id="whole" ><img id="chg" alt="ani" src="images/img/km_2000.jpg" width="718" height="718" /></div>
<div id="case1" class="case" onclick="on_click('case01')"></div><!---->
<div id="case2" class="case" onclick="on_click('case02')"> </div><!---->
<div id="case3" class="case" onclick="on_click('case03')"> </div>
<div id="test"><img id="overlay" src="images/img/cc_2000.png" width="718" height="718"/></div>
<div id="chgmap"><img src="images/img/km_chgmap.png" width="718" height="718"/></div>
</div>
</p>
<div class="button-holder">
<!--<input type="checkbox" id="checkbox-1" class="regular-checkbox big-checkbox" onclick="on_click('check01')"/><label for="checkbox-1"></label>
<label for="checkbox-1"><span></span>Map</label>
<input type="checkbox" id="checkbox-2" class="regular-checkbox big-checkbox" onclick="on_click('check02')"/><label for="checkbox-2"></label>
<label for="checkbox-1"><span></span>Vector Map</label>-->
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" checked="checked" onclick="on_click('check01')"/><label for="radio-2-1"></label>
<label class='label_tag'><span></span>Satellite Image</label>
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" onclick="on_click('check02')" /><label for="radio-2-2"></label>
<label class='label_tag'><span></span>Overlay Map</label>
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" onclick="on_click('check03')" /><label for="radio-2-3"></label>
<label class='label_tag'><span></span>Vector Only Map</label>
<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" onclick="on_click('check04')"/><label for="radio-2-4"></label>
<label class='label_tag'><span></span>Change Map</label>
</div>
</div>
<!--<a href="#amount" class="lightbox">Open Lightbox</a>-->
<div class="box"><div class="close"><img src="images/img/close-icon.png" width="24" height="24"/></div>
<div id='cs1'>
<h2>Case 1</h2>
<p>Conflicts between downtown and villages are enlarged during the urbanization procedure leads to conflict between government and peasants. Just compensation cannot achieved during land acquisitions. Besides, lands of villages within the city are not developed in the proper ways after acquisitions. One of the hotspots is Hongren Village in Guandu District (in east portion of the image). Discussion on how its culture is protected and the way it develops have been focused on for quite a long time by mass media.</p>
<div class="sub_con" >
<p>
<label for="amount">Year Comparison (drag slider to change comparing years):</label>
<input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
</div>
<div id="slider-range" class="sub_con"></div>
<div id="container0" class="sub_con">
<div><img id="beforei" alt="before" src="images/img/cs1_2000.jpg" width="355" height="355" /></div>
<div><img id="afteri" alt="after" src="images/img/cs1_2010.jpg" width="355" height="355" /></div>
<img id='c1_comp' src="images/img/cs1_compare.png" width="440" height="440" />
</div>
</div>
<div id='cs2'>
<h2>Case 2</h2>
<p>Croplands are diminishing because of the growth of urban areas. Food security is facing a new problem.</p>
<p>Real estate development by Lakeshore of Dianchi Lake also causes uncertain ecological damage on wetland system.</p>
<div class="sub_con_500">
<div id="container" >
<div><img alt="before" src="images/img/cs2_2000.jpg" width="500" height="500" /></div>
<div><img alt="after" src="images/img/cs2_2010.jpg" width="500" height="500" /></div>
</div>
<img id='c1_comp' src="images/img/cs2_compare.png" width="500" height="500" />
</div>
</div>
<div id='cs3'>
<h2>Case 3</h2>
<p>New infrastructures are kept built during recent years. One of them is the new Kunming Changshui International Airport. Opened on June 28, 2012, it replaced the old Kunming Wujiaba International Airport, which will be demolished. The main 548,300 m2 (5,902,000 sq ft) terminal of Changshui Airport is the second largest terminal building in China.</p>
<div class="sub_con_500">
<div id="container_3" >
<div><img alt="before" src="images/img/cs3_2005.jpg" width="500" height="500" /></div>
<div><img alt="after" src="images/img/cs3_2010.jpg" width="500" height="500" /></div>
</div>
<p>Left one is 2005, right one is 2009</p>
<img id='c1_comp' src="images/img/cs3_compare.png" width="500" height="500" />
</div>
</div>
</div>
<div ><p style='float:right;margin-right:25px;'>Satellite data: Landsat TM ( Source USGS )</p></div>
<script type="text/javascript">
$(function(){
$('#container_3').beforeAfter({showFullLinks : false});
$('#container').beforeAfter(/*{
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : true
}*/);
});
</script>
<div id='data'>
<h2>Population change during the decade</h2>
<div id="visualization" style="width: 700px; height: 500px;"></div>
<p style='margin:20px;'>From 2000 to 2010, as amount of urban residents keep increasing, ratio of urban residents to total residents in Kunming has increased by 9.06 percent. Some of urban residents are imigrated from somewhere else, ans some are converted from rural residents. Accordingly, number of Kunming's rural residents has a net loss during this decade. </br>Data source: <a href="http://www.yn.xinhuanet.com/gov/2011-05/26/content_22865447.htm">Xinhuanet (新华网)</a></p>
</div>
<div id="solu">
<h2>Ways To A More Sustainable Development</h2>
<p style='margin:20px;'> According to the survey and analysis, writers of the news report give some suggestions about how to make Kunming's urban development sustainable.
<ul>
<li>Stop controversial demolition</li>
<li>Should not expand the growth to rural area</li>
<li>Take the social cost seriously</li>
<li>Do not let the market control government</li>
<li>Rebuild cedibility of government</li>
<li>Maintain sustainability</li>
</ul>
</p>
</div>
</div>
</body>
</html>