-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (150 loc) · 12.6 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shanghai PK NYC</title>
<meta name="description" content="Small comparison between two super cities, Shanghai in China and New York City in USA">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="s.css?v=4">
<script src="j.js?v=7" defer></script>
</head>
<body>
<header>
<h1 class="tac">Shanghai<sup>China</sup> PK NYC<sup>USA</sup></h1>
</header>
<nav role="navigation">
<a href="#s1" role="link"><span>Settled In</span></a>
<a href="#s2" role="link"><span>Area</span></a>
<a href="#s3" role="link"><span>Population</span></a>
<a href="#s5" role="link"><span>Pet Population</span></a>
<a href="#s6" role="link"><span>University</span></a>
<a href="#s9" role="link"><span>Median Household Income</span></a>
<a href="#s10" role="link"><span>$/m<sup>2</sup> in City Centre</span></a>
<a href="#s11" role="link"><span>Monthly Salary After Tax</span></a>
<a href="#s12" role="link"><span>Coke/Pepsi</span></a>
<a href="#s13" role="link"><span>Level of crime</span></a>
<a href="#s14" role="link"><span>Thank you</span></a>
</nav>
<div id="container">
<main role="main">
<section id="s0" class="active">
<div id="logo"></div><br>
<h2 role="heading">A small comparison between two super cities below<br>Shanghai in China and New York City in USA</h2>
</section>
<section id="s1">
<h2 role="heading">Settled In</h2>
<p>751<sup>AD</sup> & 1624<sup>AD</sup></p>
<div class="chart"></div>
<blockquote>Shanghai's political status was raised to that of a municipality in 1927</blockquote>
</section>
<section id="s2">
<h2 role="heading">Area(km<sup>2</sup>)</h2>
<p class="rept" data-d="6340:1214" data-icon="area">6,340 & 1,214</p>
<div class="chart"></div>
<blockquote>Development area of Shanghai is only 1,500km<sup>2</sup>+</blockquote>
</section>
<section id="s3">
<h2 role="heading">Population(thousands)</h2>
<p class="rept" data-d="2415:855" data-icon="people">24,153 & 8,550</p>
<div class="chart"></div>
</section>
<section id="s5">
<h2 role="heading">Pet Population(thousands)</h2>
<p class="rept" data-d="9:1" data-icon="pet">9,000+ & 1,000+</p>
<div class="chart"></div>
</section>
<section id="s6">
<h2 role="heading">University</h2>
<p class="rept" data-d="34:18" data-icon="university">34 & 18</p>
<div class="chart"></div>
</section>
<section id="s9">
<h2 role="heading">Median Household Income($)</h2>
<p class="rept" data-d="22720:58878" data-icon="money">22,720 & 58,878</p>
<div class="chart"></div>
<blockquote>Gini index of NYC is 0.54</blockquote>
</section>
<section id="s10">
<h2 role="heading">$/m<sup>2</sup> in City Centre</h2>
<p class="rept" data-d="12506:14322" data-icon="money">12,506 & 14,322</p>
<div class="chart"></div>
<blockquote>Outside of centre, the price is 5,454 & 9,207</blockquote>
</section>
<section id="s11">
<h2 role="heading">Monthly Salary After Tax</h2>
<p class="rept" data-d="1407:3872" data-icon="money">1,407 & 3,872</p>
<div class="chart"></div>
</section>
<section id="s12">
<h2 role="heading">Coke/Pepsi($)</h2>
<p class="rept" data-d="0.53:1.94" data-icon="money">0.53 & 1.94</p>
<div class="chart"></div>
<blockquote>Interestingly~ cappuccino is almost the same price, 4.20 in Shanghai and 4.23 in NYC</blockquote>
</section>
<section id="s13">
<h2 role="heading">Level of crime</h2>
<p>25.38 & 51.19</p>
<blockquote>Gun is forbidden in China!!!</blockquote>
</section>
<section id="s14">
<h2 role="heading">Thank you!</h2>
<footer class="tac">
<a href="mailto:[email protected]">[email protected]</a><br>
All data collected from <a href="https://www.wikipedia.org/" target="_blank">Wikipedia</a>, <a href="http://www.nycedc.com/" target="_blank">NYCEDC</a> and <a href="http://www.numbeo.com/" target="_blank">NUMBEO</a>. All icons comes from <a href="https://www.iconfinder.com" target="_blank">Iconfinder</a> under <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>
</footer>
</section>
</main>
</div>
<div style="display:none;">
<svg height="64px" width="64px" id="area" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<path d="M20 48h8v-8h-8v8zm32-8h8v-8h-8v8zm16 0h8v-8h-8v8zm16 0h8v-8h-8v8zM52 24h8v-8h-8v8zm16 0h8v-8h-8v8zm16 0h8v-8h-8v8zM52 72h8v-8h-8v8zm16 0h8v-8h-8v8zm16 0h8v-8h-8v8zM52 88h8v-8h-8v8zm32 0h8v-8h-8v8zm-32 16h8v-8h-8v8zm32 0h8v-8h-8v8zm24-8h8v-8h-8v8zm0-24v8h8v-8h-8zm0 40h8v-8h-8v8zM52 56h8v-8h-8v8zm16 0h8v-8h-8v8zm16 0h8v-8h-8v8zm-64 8h8v-8h-8v8zm0 16h8v-8h-8v8zm0 16h8v-8h-8v8zm0 16h8v-8h-8v8zm48-24h8v-8h-8v8z" fill="#B0BEC5"/>
<path clip-rule="evenodd" d="M124 120c0 4.42-3.58 8-8 8H12c-4.42 0-8-3.58-8-8V32c0-4.42 3.58-8 8-8h24V8c0-4.42 3.58-8 8-8h56c4.42 0 8 3.58 8 8v48h8c4.42 0 8 3.58 8 8v56zM36 32H12v88h24V32zm64-24H44v112h24V96h8v24h24V8zm16 56h-8v56h8V64z" fill="#546E7A" fill-rule="evenodd"/>
</svg>
<svg id="money" height="64px" width="64px" viewBox="100 100 400 400" xmlns="http://www.w3.org/2000/svg">
<style>
.st1{fill:#EDBD44;} .st2{fill:#C5802A;} .st3{fill:#009444;} .st4{fill:#006838;} .st5{fill:#77AAB6;} .st6{fill:#167D88;} .st7{fill:#005A67;} .st8{fill:#6F2334;} .st9{fill:#460618;} .st10{fill:#961634;} .st11{fill:#008245;} .st12{fill:#35A0AD;} .st13{fill:#203A40;} .st14{fill:#27545D;}
</style>
<path class="st1" d="M328.6 210.4c-8.8-9.4-8.3-47-8.3-47v-16.2H275v16.2s.5 37.6-8.3 47c-80 24.3-140.6 136.8-140.6 203.6 0 75.3 76.8 85 171.6 85 94.7 0 171.6-9.8 171.6-85-.1-66.8-60.7-179.3-140.7-203.6z"/>
<path class="st2" d="M328.6 202.6c0 1.2-.9 2.2-2 2.2h-57.9c-1.1 0-2-1-2-2.2v-22.1c0-1.2.9-2.2 2-2.2h57.9c1.1 0 2 1 2 2.2v22.1z"/>
<path class="st1" d="M354 150.1c0 31.1-25.2 28-56.4 28-31.1 0-56.4 3.1-56.4-28 0-17 24.3-7.1 36.2-17.4 9.9-8.6 6.1-39 20.2-39 13.5 0 10 31.1 19.7 39 12.8 10.3 36.7-.3 36.7 17.4z"/>
<path class="st2" d="M355.9 364.4c-2.8-5.5-6.8-10-11.8-13.6-5-3.6-11.2-6.6-18.3-9.1-7.2-2.5-15.2-4.8-24.1-6.9-7.1-1.8-12.2-3.1-15.2-4.1-3.1-.9-6.1-2.2-9.1-3.9-3-1.6-5.4-3.6-7.1-5.9-1.7-2.3-2.6-5-2.6-8.1 0-5.1 2.5-9.4 7.6-13 5-3.6 11.7-5.4 19.9-5.4 8.9 0 15.3 1.7 19.3 5s7.4 8 10.3 13.9c2.2 4.1 4.3 7.1 6.2 9 1.9 1.8 4.7 2.7 8.3 2.7 4 0 7.3-1.5 10-4.6 2.7-3 4-6.4 4-10.2 0-4.1-1.1-8.4-3.2-12.8s-5.5-8.5-10.2-12.5c-4.6-4-10.5-7.1-17.5-9.5-4.4-1.5-9.2-2.5-14.6-3.1v-23.4h-20.1v23.4c-8.1.7-15.4 2.4-21.8 5-8.9 3.6-15.8 8.8-20.5 15.5-4.7 6.7-7.1 14.4-7.1 23.1 0 9.1 2.2 16.7 6.7 22.8 4.5 6.1 10.5 10.9 18.1 14.5 7.6 3.5 17.1 6.6 28.4 9.3 8.4 1.9 15.2 3.8 20.2 5.5 5 1.7 9.1 4.2 12.3 7.5 3.2 3.3 4.8 7.5 4.8 12.7 0 6.6-2.9 12.1-8.8 16.5s-13.6 6.6-23 6.6c-6.9 0-12.4-1.1-16.6-3.3-4.2-2.2-7.5-4.9-9.8-8.3-2.3-3.4-4.5-7.5-6.5-12.5-1.6-4.2-3.6-7.4-6-9.5-2.3-2.1-5.2-3.2-8.5-3.2-4.1 0-7.6 1.4-10.2 4.1-2.7 2.8-4 6.1-4 9.9 0 6.6 2.2 13.5 6.7 20.5s10.3 12.7 17.4 16.9c7.8 4.5 17.2 7.3 28.3 8.3v23.9h20.1v-23.9c8.8-.8 16.6-2.8 23.5-6 9.4-4.3 16.6-10.2 21.5-17.8 4.9-7.6 7.3-16.1 7.3-25.6-.1-8.3-1.5-15-4.3-20.4zM251.2 501.6h-132c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h132c1.4 0 2.5 1.1 2.5 2.5 0 1.3-1.1 2.5-2.5 2.5zm62.5 0h-48c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h48c1.4 0 2.5 1.1 2.5 2.5 0 1.3-1.2 2.5-2.5 2.5zm162.4 0h-38.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h38.5c1.4 0 2.5 1.1 2.5 2.5 0 1.3-1.1 2.5-2.5 2.5zm-51.5 0h-93.9c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h93.9c1.4 0 2.5 1.1 2.5 2.5 0 1.3-1.1 2.5-2.5 2.5zm-214.4-98.1c1.1 0 2.1-.9 2.1-2.1v-.2c0-1.1-.9-2.1-2.1-2.1h-6.9V398c0-2.7-2.2-4.8-4.8-4.8h-1.2v-6.9c0-1.1-.9-2.1-2.1-2.1h-.2c-1.1 0-2.1.9-2.1 2.1v6.9H177v-6.9c0-1.1-.9-2.1-2.1-2.1h-.2c-1.1 0-2.1.9-2.1 2.1v6.9h-1.2c-2.7 0-4.8 2.2-4.8 4.8v1.2h-6.9c-1.1 0-2.1.9-2.1 2.1v.2c0 1.1.9 2.1 2.1 2.1h6.9v15.9h-6.9c-1.1 0-2.1.9-2.1 2.1v.2c0 1.1.9 2.1 2.1 2.1h6.9v1.2c0 2.7 2.2 4.8 4.8 4.8h1.2v6.9c0 1.1.9 2.1 2.1 2.1h.2c1.1 0 2.1-.9 2.1-2.1v-6.9h16v6.9c0 1.1.9 2.1 2.1 2.1h.2c1.1 0 2.1-.9 2.1-2.1v-6.9h1.2c2.7 0 4.8-2.2 4.8-4.8v-1.2h6.9c1.1 0 2.1-.9 2.1-2.1v-.2c0-1.1-.9-2.1-2.1-2.1h-6.9v-15.9h6.8zm225.2 64.8c-.8 0-1.5-.3-2-1-.8-1.1-.6-2.7.5-3.5 9.8-7.4 22.1-16.6 23.4-49.6 1.3-32.5-18.5-76-18.7-76.4-.6-1.3 0-2.7 1.2-3.3 1.3-.6 2.7 0 3.3 1.2.8 1.8 20.4 45.1 19.1 78.7-1.4 35.4-15.2 45.8-25.3 53.4-.5.4-1 .5-1.5.5zm-58.1 20.3c-1.3 0-2.4-1-2.5-2.3-.1-1.4.9-2.6 2.3-2.7 21.1-1.6 41.8-10.7 42-10.8 1.3-.6 2.7 0 3.3 1.3.6 1.3 0 2.7-1.3 3.3-.9.4-21.6 9.5-43.6 11.2h-.2zm-60-355.9c-5.3-4.3-6.7-15.8-9.1-25.1 0 0-4.8 33.2 3.4 40.5 8.2 7.3 15.3-7.7 28.7-9.4-7.5-.9-16.6-.8-23-6zm-61.5 6.1c12.9 2.2 19.8 16.4 27.8 9.3 8.2-7.3 3.4-40.5 3.4-40.5l-.4-.1c-2.4 9.2-3.7 20.5-9.1 25.2-5.8 5-14.4 5.2-21.7 6.1zm65.6 74.8h-23.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h23.8c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5zm-31.5 279.9c-18.6 0-38.1-.5-55-2.1-1.4-.1-2.4-1.3-2.3-2.7.1-1.4 1.3-2.4 2.7-2.3 49.8 4.6 123.8 0 124.5 0 1.4-.1 2.6 1 2.7 2.3.1 1.4-1 2.6-2.3 2.7-.4.1-33.5 2.1-70.3 2.1z"/>
</svg>
<svg id="people" height="64px" width="64px" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg">
<style>
.st0{fill:#CEA494;} .st1{fill:#D4E1E8;} .st2{fill:#D8AD98;} .st3{fill:#121212;}
</style>
<g id="hair">
<path class="st0" d="M217.8 199.8s2 24.6-2.5 34-7.6 14.5-7.6 14.5l7.4 50.4 49 100 23 12 25-56 15-62.7v-26l-5-26.4-7-12.6-97-27.2z"/>
<path class="st1" d="M215.3 248.8c0 10.3 4.7 34 11 38.4S266 339 271.5 358s8.5 26.7 8.5 26.7 11-63.7 27-88.7 14-23.4 15-37.5c1-14-5.4-23.4-5.4-23.4l4.7-7c.8-1 14.3 20 15.8 25s89 40 94 50 13 3 22 44 26 90 30 109 4 39 4 39H23s9.3-19.4 11-31c1.7-11 3-11 5-30s19-87 28.3-105-2-13 16.3-22 81.4-41 95-49c26.3-16 39-38.2 39.3-37.3 1 8-3 21.6-3 30.3z"/>
<path class="st2" d="M213.3 152L203 132.3h-6.3s-3.7-.4-6.2 1.8-3.7 3-5.7 7-2.8 11-.8 16 6.4 15 10 21c3.6 6 7.3 9 12.5 9s6.6-2 6.6-2 2 18 4 22 40 46 63 45 25 1 31-6 7-11 11-16 8-12 11-24 5-41 3-54-2-38-2-38l-7-33-10-16-9.2-5-17.4 6-41-3h-25l-13 17.6 3 28-3 27 3 17z"/>
<path class="st3" d="M214.7 157.8c3.7-7.2 3.7-18.4 2-23.5s-1.4-8.3 1-11.3 4.2-6.3 4-9-7.3-24-5-29.5 1.5-13.5 12-14 22.2 8 30.2 8 16 1.6 21-1.8 19-12.8 27-9.3 14 10.8 16 17l6 35.5 3 10s1-24 2-30 2-2 0-12-10-26-13-31-13-12-12-16c0-4-5-6-8-8s-3.8-5-10.5-7-17.7-4-26-4-12 1-19.5 0c-7.3-1-6.7-4-12.7 0s-14 7-15 11-1 5-4 4c-2.4-.3-7.7.7-8.7 4-1 3-6 2.6-10 10.6s-12 22-11.4 25 4 5 2 8-3.7 7-1.5 13c2.3 5.2 8 37.2 8 37.2s6.4-.8 9.4 2 10.7 23 12 20z"/>
</g>
</svg>
<svg id="pet" height="64px" width="64px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10c0 1.6 1.34 3 3 3s3-1.4 3-3H5z" fill="#ecf0f1"/>
<g fill="#95a5a6">
<path d="M23 1.94l-9 3 6.6 7.46zm-22 0l9 3-6.6 7.46z"/>
<path d="M22 13a10 9 0 1 1-20 0 10 9 0 1 1 20 0z"/>
</g>
<path d="M3 4l1.16 5.06C3.42 10.22 3 11.56 3 13c0 4.42 4.03 8 9 8s9-3.58 9-8c0-1.43-.42-2.78-1.16-3.94L21 4l-5.22 1.75C14.63 5.27 13.35 5 12 5s-2.63.27-3.78.75L3 4z" fill="#bdc3c7"/>
<g fill="#7f8c8d">
<path d="M11 14v2c0 1.1-.9 2-2 2s-2-.9-2-2H6c0 1.6 1.34 3 3 3s3-1.4 3-3v-2h-1zm2 0v2c0 1.1.9 2 2 2s2-.9 2-2h1c0 1.6-1.34 3-3 3s-3-1.4-3-3v-2h1z"/>
<path d="M0 11.53v.78l6 2.35-6-.04v.7l6.03.05h.06L0 17.7v.77L9 15l-9-3.47zm24-.03v.8l-6 2.3h6v.7h-6.1l6.1 2.3v.8L15 15l9-3.5z"/>
</g>
<path d="M8 8c-1.66 0-3 1.3-3 3 0 1.6 1.34 3 3 3s3-1.4 3-3c0-1.7-1.34-3-3-3z" fill="#ecf0f1"/>
<path d="M8 9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#2c3e50"/>
<path d="M8 9c-.55 0-1 .4-1 1 0 .5.45 1 1 1s1-.5 1-1c0-.6-.45-1-1-1zm8-1c-1.66 0-3 1.3-3 3 0 1.6 1.34 3 3 3s3-1.4 3-3c0-1.7-1.34-3-3-3z" fill="#ecf0f1"/>
<path d="M16 9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#2c3e50"/>
<path d="M16 9c-.55 0-1 .4-1 1 0 .5.45 1 1 1s1-.5 1-1c0-.6-.45-1-1-1z" fill="#ecf0f1"/>
<path d="M10.22 13c-.28 0-.5.2-.5.5 0 .1.03.2.12.3.05.1.1.1.16.1l1.53 1.6.1.1c.1.1.22.2.37.2s.28-.1.38-.2l.1-.1L14 13.9c.06 0 .1 0 .16-.1.1-.1.12-.2.12-.3 0-.3-.22-.5-.5-.5h-3.56z" fill="#2c3e50"/>
</svg>
<svg id="university" height="64px" width="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M52 0H4C1.8 0 0 1.8 0 4v52c0 2.2 1.8 4 4 4h34l18-18V4c0-2.2-1.8-4-4-4z" fill="#CCC"/>
<path d="M50 4H6c-1.1 0-2 .9-2 2v48c0 1.1.9 2 2 2h30l16-16V6c0-1.1-.9-2-2-2z" fill="#FFF"/>
<path d="M42 42c-2.2 0-4 1.8-4 4v14l18-18H42z" fill="#999"/>
<path d="M42 28H14c-1.1 0-2 .9-2 2s.9 2 2 2h28c1.1 0 2-.9 2-2s-.9-2-2-2zm-28-4h16c1.1 0 2-.9 2-2s-.9-2-2-2H14c-1.1 0-2 .9-2 2s.9 2 2 2zm0-8h28c1.1 0 2-.9 2-2s-.9-2-2-2H14c-1.1 0-2 .9-2 2s.9 2 2 2z" fill-rule="evenodd" clip-rule="evenodd" fill="#CCC"/>
<path fill="#ED7161" d="M16 50v14l4-4 4 4V50"/>
<circle cx="20" cy="44" r="8" fill="#FFD073"/>
</svg>
</div>
</body>
</html>