-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (80 loc) · 5.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tag -->
<meta charset="utf-8">
<title> </title>
<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="index.css">
<!-- D3.js Source -->
<script type= "text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script src="main.js"></script>
<script src="drawCell.js"></script> <script src="clearCell.js"></script>
</head>
<body>
<!-- Change the title below: REQUIRED-->
<h2 style = "font-size:30px;text-align:center; color:darkblue"><bold>Influential Women Of 21st Century </bold></h2>
<h5 style = "font-size:18px;text-align:center;color:darkblue">In Chemistry, Physics, Math, Leadership, Art, Literature and Medicine categories</h5>
<p style="font-size: 20px"class="center-align">
We take a look at some of the groundbreaking and inspirational females, who have been pioneers in leading fields of science and social good through 21st century. Each of these women dared to challenge convention and step outside of their expected roles to be aspiring for others in the society and younger generation. This visualization also demonstrates engagement of women from various regions of the world, in different fields.
<br><br>
By choosing a person you can view all the other women in the same category and decade in the secondary plot.
</p>
<script>
drawDefault();
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="font-size:16px"class="end">
<p style="font-size: 20px">Created by:</p> Parvin Dadgar - Faeze Brahman - Wen Cui for CMPS 263: Data Driven Discovery Visualization, Winter 2018.
<p style="font-size: 18px">Email Address: </p><a href="mailto:[email protected]">[email protected]</a> <a href="mailto:[email protected]">[email protected]</a> <a href="mailto:[email protected]">[email protected]</a>
<p style="font-size: 18px">Github Link: <a href="https://hannabrahman.github.io/Data-Visualization/"> here</a></p>
</div>
<div class="info">
<div class="submits">
<span style="font-size: 18px"class="title">Submitted Files</span>
<ul>
<li style="font-size: 16px">index.html</li>
<li style="font-size: 16px">index.css</li>
<li style="font-size: 16px">main.js</li>
<li style="font-size: 16px">clearCell.js</li>
<li style="font-size: 16px">drawCell.js</li>
<li style="font-size: 16px">dowload_images.py</li>
<li style="font-size: 16px">square_images</li>
<li style="font-size: 16px">full.csv</li>
</ul>
</div>
<div class="sources">
<span style="font-size: 18px"class="title">Data Sources</span>
<ul>
<li style="font-size: 16px"><a href="https://en.wikipedia.org/wiki/List_of_female_Nobel_laureates">Nobel Laureates</a></li>
<li style="font-size: 16px"><a href="https://en.wikipedia.org/wiki/Maria_Goeppert-Mayer_Award">Maria Goeppert Award Laureates</a></li>
<li style="font-size: 16px"><a href="https://en.wikipedia.org/wiki/Noether_Lecture">Noether_Lecture Award Laureates</a></li>
<li style="font-size: 16px"><a href="https://en.wikipedia.org/wiki/Ruth_Lyttle_Satter_Prize_in_Mathematics">Ruth_Lyttle_Satter Award Laureates</a></li>
<li style="font-size: 16px"><a href="https://en.wikipedia.org/wiki/Turing_Award">Turing Award Laureates</a></li>
<li style="font-size: 16px"><a href="https://en.wikipedia.org/wiki/Ken_Kennedy_Award">Ken_Kennedy Award Laureates</a></li>
<li style="font-size: 16px"><a href="http://time.com/collection/2017-time-100/">Times 100People</a></li>
</ul>
</div>
<div class="codes">
<span style="font-size: 18px" class="title">Visual and Code Sources</span>
<ul>
<li style="font-size: 16px"><a href="http://graphics.thomsonreuters.com/15/nobels/index.html">Nobel Laureates Visualization</a></li>
<li style="font-size: 16px"><a href="//https://www.youtube.com/watch?v=FUJjNG4zkWY&t=5s">Append images to svg circles</a></li>
<li style="font-size: 16px"><a href="http://bl.ocks.org/bimannie/cf443db3222b747d3155f8797abc0593">Force layout</a></li>
</ul>
</div>
<div class="Ref">
<span style="font-size: 18px" class="title">References</span>
<li style="font-size: 16px"><a href="https://github.com/felixlaumon/d3.layout.grid">d3.layout.grid</a></li>
<li style="font-size: 16px"><a href="https://bl.ocks.org/mbostock/1804889">Force Layout Multiples (Independent)</a></li>
<li style="font-size: 16px"><a href="https://birme.net/?target_width=400&target_height=400">BRIME: bulk image resizer</a></li>
<li style="font-size: 16px"><a href="https://www.mediawiki.org/wiki/API:Query">Mediawiki for query images</a></li>
</div>
</div>
</body>
</html>