-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
105 lines (98 loc) · 4.89 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
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-129527589-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-129527589-1');
</script>
<link rel='stylesheet' href='css/egg_dataviz.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="js/about_trigger.js"></script>
<!-- Awesomplete by Lea Verou, under MIT License, from https://github.com/LeaVerou/awesomplete -->
<link rel="stylesheet" href="awesomplete-gh-pages/awesomplete.css" />
<script src="awesomplete-gh-pages/awesomplete.js" async></script>
</head>
<body onload="read_data()">
<div class="header">
Insect eggs
</div>
<div class="intro">
<span style="color:#E87425;font-size:24px">
<br>Insects lay eggs of all shapes and sizes<br><br>
</span>
From microscopic wasp eggs, to beetle eggs the size of a blueberry, and everything in between<br><br>
<span style="color:#719CAA;font-size:28px">
<b>Want to explore egg diversity? Check out the plot below </b>
</span><br>Check out our <a href="http://biorxiv.org/cgi/content/short/471953v2">preprint article</a> that describes how this database was made<br><br><br>
Eggs are arranged by their <span style="color:#2E9B00"><b>size</b></span> and <span style="color:#2E9B00"><b>shape</b></span> <br> Wide, flat eggs are on the left, and long, skinny eggs are on the right <br> Hover over a point to see the source, and for <span style="color:#2E9B00"><b>larger points you can see an example image</b></span><br> And <span style="color:#2E9B00"><b>try clicking the axes labels or color options</b></span> to compare other egg features
</div>
<div id="div_container">
<div id="search_by_name">
<label class="input_search">Highlight by searching:</label>
<input id="input_search" class="awesomplete" onkeyup="only_show_some()" >
<div id="only_show_div">
Only show eggs with pictures:<input id="only_show_pics" type="checkbox" class="my_checkbox" onchange="only_show_some()">
Only show highlighted:<input id="only_show_high" type="checkbox" class="my_checkbox" onchange="only_show_some()">
</div>
</div>
<div id="svg_div">
<div id="x_axis_label_container">
<div class="custom-dropdown" id="x_axis_dropdown">
<select class="custom-select" id="x_axis_select" onchange="change_axes()">
<option value="txtar">Aspect Ratio</option>
<option value="txtX2">Width (mm)</option>
<option value="txtX1">Length (mm)</option>
<option value="curv">Angle of curvature (rad)</option>
<option value="asym">Asymmetry</option>
<option value="txtvol">Volume (mm3)</option>
</select>
</div>
</div>
<div id="y_axis_label_container">
<div class="custom-dropdown" id="y_axis_dropdown">
<select class="custom-select" id="y_axis_select" onchange="change_axes()">
<option value="txtvol">Volume (mm3)</option>
<option value="txtX2">Width (mm)</option>
<option value="txtX1">Length (mm)</option>
<option value="curv">Angle of curvature (rad)</option>
<option value="asym">Asymmetry</option>
<option value="txtar">Aspect Ratio</option>
</select>
</div>
</div>
</div>
<div id="color_legend">
<div id="color_by_text"><h2>Color points by:</h2></div>
<div class="custom-dropdown" id="color_by_dropdown">
<select class="custom-select" id="color_select" onchange="change_color()">
<option value="clade">Clade</option>
<option value="txtX2">Width (mm)</option>
<option value="txtX1">Length (mm)</option>
<option value="curv">Angle of curvature (rad)</option>
<option value="asym">Asymmetry</option>
<option value="txtvol">Volume (mm3)</option>
<option value="txtar">Aspect Ratio</option>
</select>
</div>
</div>
<div id="option_box">
Try untransforming the data to visualize eggs at different scales
<label class="switch" id="transform_switch">
<input id="transform_slider" type="checkbox" onchange="change_axes()">
<span class="slider"></span>
<div id="transformed">transformed</div>
<div id="untransformed">untransformed</div>
</label>
</div>
</div>
<div id="bottom_credits">
<span style="font-size:14px">This visualization was authored by Samuel H. Church and Milo S. Johnson, data collected in collaboration with Seth Donoughe, Bruno A. S. de Medeiros, and Cassandra G. Extavour.</span>
</div>
</body>
<script src="js/egg_dataviz.js"></script>
</html>