-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.html
148 lines (125 loc) · 7.6 KB
/
project.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
<!--
Name: Bente de Bruin
Studentnumber: 11017503
HTML page with visualisations
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Collection of MoMA</title>
<!-- Import stylesheets, bootstrap and jquery -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style/style.css'>
<!-- Import D3 V5 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='scripts/d3-tip.js'></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<!-- Import scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="scripts/categorydropdown.js"></script>
<script type="text/javascript" src="scripts/updatecurrenttexts.js"></script>
<script type="text/javascript" src="scripts/timeslider.js"></script>
<script type="text/javascript" src="scripts/getdataready.js"></script>
<script type="text/javascript" src="scripts/heatmap.js"></script>
<script type="text/javascript" src="scripts/donut.js"></script>
<script type="text/javascript" src="scripts/bubble.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<title>Insights in the collection of MoMA</title>
</head>
<body>
<h1>Insights in the collection of MoMA</h1>
<h4 id = "header">This page gives you insight in the collection of the Museum of Modern Art New York.</h4><br></br>
<nav class='navbar navbar-expand-sm navbar-dark fixed-top' style='background-color: #4a9e5c'>
<a class='navbar-brand' href='index.html'>Homepage</a>
<ul class='navbar-nav'>
<!-- Link to visualisations page -->
<li class='nav-item'>
<a class='nav-link active' href='project.html'>Visualisations</a>
</li>
<!-- Make dropdown menu with different categories -->
<select id="dropdown-menu">
<option value="All categories">All categories</option>
<option value="Prints & Illustrated Books">Prints & Illustrated Books</option>
<option value="Architecture & Design">Architecture & Design</option>
<option value="Photography">Photography</option>
<option value="Film">Film</option>
<option value="Media and Performance Art">Media and Performance Art</option>
<option value="Drawings">Drawings</option>
<option value="Painting & Sculpture">Painting & Sculpture</option>
</select>
<!-- Add spaces between dropdown and buttons-->
 
 
<!-- Make reset country button -->
<p id="selected-dropdown"></p>
<div id = "resetbutton">
<button type=>Reset countries</button>
</div>
 
 
<!-- Make reset gender button -->
<div id = "resetbuttongenders">
<button type=>Reset genders</button>
</div>
 
 
<!-- Make div for displaying current gender -->
<div id = "currentgendertext">
</div>
 
 
 
 
<!-- Make div for displaying current country -->
<div id = "currentcountrytext">
</div>
</nav>
<!-- Create grid system to organize visualisation page, add explanation textboxes -->
<div class="container-fluid">
<div class="row">
<div class="col-md-9" id="heatmap"></div>
<div class="col-md-3" id="mapexplanation">
<h2 id="explanationmap">Explanation of the map</h2>
<p id="explanationtext">
This map represents how many works MoMA acquired per country. The darker the color, the more works acquired.
You can hover over the countries to see the exact amount of works acquired. Some countries have a decimal amount of works, this is because some works are created by artists with multiple nationalities. In this case, every country got their fair share of credits.
If you click a country that isn't white,
the donut chart and the bubble chart below will update and only display information about the country you clicked on.
You can also specify the period of time by sliding the timeslider, by default this is 1965 to 2018. It is important to know that only the following years are represented:
1965, 1975, 1985, 1995, 2005, 2015, 2016, 2017, 2018. I decided to only represent these years because otherwise the dataset would be too large.
In the navigation bar on top, you can specify the category (i.e. photography, film, etc...).
If you wish to reset the country and the gender you clicked on, you can do so by clicking the reset buttons in the navigation bar.
</p>
</div>
</div>
<!-- Make a column with text to keep track of selected years -->
<div class="row">
<div class="col-md-9" id="slidermap"><div id="slider-range"></div></div>
<div class="col-md-1"><p >Current years:</p></div>
<div class="col-md-1 nopadding"><p id="value-range">1965-2018</p></div>
</div>
<div class="row">
<div class="col-md-4" id="donut"></div>
<div class="col-md-3" id="bubbledonuttext">
<h2 id="explanationdonutbubbles">Explanation of the charts</h2>
<p id="explanationtextdonutbubbles">
In the donutchart, you see how many female, male and gender unknown artist contributed to works acquired by MoMA. By default, you see all women, men and unknown genders from all countries from all categories in the years 1965-2018.
You can click a country to see the male/female/unknown gender distribution for that country. You can also choose a specific category and a different period of time by using the time slider.
The bubble chart shows how many works of art a specific artist has made. You can choose to click on the donutchart to see only male/female/unknown gender artists.
When the bubblechart and the donutchart disappear, there is no data available for the filters you've set. You can alter your filters and if there is data available, the charts will appear again.
</p>
</div>
<div class="col-md-5" id="bubbles">
</div>
</div>
</body>
</html>