-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
215 lines (163 loc) · 5.69 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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSE457 - Final Project</title>
<!-- Load Google Font -->
<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,400italic,700' rel='stylesheet' type='text/css'>
<!-- CSS libraries -->
<link rel="stylesheet" href="public/js/bootstrap-4.2.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- Custom CSS code -->
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row">
<div class="col-md-12">
<br/>
<h5>CSE 457 Final Project</h5>
<span>Vihar Desu | [email protected] | 443845</span>
<br/>
<span>Nick Murray | [email protected] | 441567</span>
<br/>
<a href="process_book.html"> Our Process Book </a>
<hr/>
<br/>
</div>
</div>
<div id="storyBox" class="story">
<div id="story"><svg width="500" height="200"><text class="txt" x="90" y="150">27K</text></svg></div>
<p id="tagline">StreetStyle: Exploring world-wide clothing styles from thousands of photos</p>
<p id="problemText">
Each day billions of photographs are uploaded to photo-sharing services and social media platforms. These images are packed with information about how people live around the world. <br><br>
In this visualization, we explore an annotated set of ~27,000 Instagram photos across 31 cities from Cornell University researchers (http://streetstyle.cs.cornell.edu/).<br><br>
Our dataset is composed purely of annotations about clothing color, categories, the image and the upload coordinates. <br><br>
We present a visual analysis of clothing and fashion across these images of people around the world spanning several years, from June 2013 to December 2015.
These sample trends could be possible avenues of future exploration for the larger dataset of 10 million images analyzed by the Cornell researchers, or any other large fashion dataset.<br>
</p>
</div>
<br/>
<hr/>
<br/>
<!-- GLOBE AND CITY LIST -->
<div class="row">
<div class ="col" >
<div id="chart1"> </div>
</div>
<!-- <div class="col align-self-end"> -->
<div class = "col align-self-center">
<h2>Click on a City to Begin!</h2>
<ul id = "city-list1">
</ul>
</div>
<div class = "col align-self-end">
<ul id = "city-list2">
</ul>
</div>
</div>
<br/>
<hr/>
<br/>
<!-- BEESWARM -->
<div class="row">
<div class = "col align-self-center">
<h2 id = "cityname">Current Selected City: Los Angeles </h2>
</div>
<div class="col-md-12" id="chart2">
<!-- <p>Click for More Info</p> -->
</div>
</div>
<br/>
<hr/>
<br/>
<!-- COLOR MAP -->
<div class="row">
<div class = "col align-self-center">
<h2>Color Map Tiled Bar Chart</h2>
</div>
<div class="col-md-12" id="color-map">
</div>
</div>
<br/>
<hr/>
<br/>
<!-- City Map -->
<div class="row">
<div class = "col align-self-center">
<h2> City Map by Income and Population </h2>
</div>
<div class="col-md-12" id="city-map">
<!-- <p>Click for More Info</p> -->
</div>
</div>
<br/>
<hr/>
<br/>
<!-- Global Trends -->
<div class="row">
<div class = "col align-self-center">
<h2> Factors Affecting Clothing Choice </h2>
</div>
<div class="col-md-12" id="chart3">
<!-- <p>Click for More Info</p> -->
</div>
</div>
<br/>
<hr/>
<br/>
<!-- TREEMAP -->
<div class="row">
<div class = "col align-self-center">
<h2> Largest Retailers Globally </h2>
</div>
<div class="col-md-12" id="overview-chart">
</div>
<div id="legend-overview-chart"></div>
</div>
<br/>
<hr/>
<br/>
<!-- COMPANY MAP -->
<div class="row">
<div class = "col align-self-center">
<h2>Map of Clothing Industry </h2>
</div>
<div class="col-md-8" id="company-map">
</div>
</div>
<br/>
<hr/>
<br/>
</div>
<!-- JQuery Directly from online -->
<!-- <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> -->
<script src="public/js/jquery-3.3.min.js"></script>
<!-- Leaflet Library -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<!-- Load JS libraries -->
<script src="public/js/bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
<script src="public/js/d3/d3.min.js"></script>
<script src="public/js/topojson.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<!-- <script src="public/js/d3-queue.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<!-- Load JS for Tiled Bar Chart -->
<script src="public/js/lodash.min.js"></script>
<!-- Visualization objects -->
<!-- PUT JS FILES OF VISUALIZATIONS HERE -->
<script type="application/javascript" src="public/js/companyMap.js"></script>
<script type="application/javascript" src="public/js/cityMap.js"></script>
<script type="application/javascript" src="public/js/beeswarm.js"></script>
<script type="application/javascript" src="public/js/globe.js"></script>
<script type="text/javascript" src="public/js/colorMap.js"></script>
<script type="application/javascript" src="public/js/overviewChart.js"></script>
<!-- Load data, create visualizations -->
<script src="public/js/main.js"></script>
</body>
</html>