/
physical.html
182 lines (179 loc) · 9.43 KB
/
physical.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,900;1,500&display=swap" rel="stylesheet">
<link href="style/style_phy.css" rel="stylesheet">
<title>Darwins' Dogs Data Viz Project</title>
</head>
<body>
<div class="container" >
<div class="two-col" id="intro">
<div class="left-fix">
<div class="headline">
Do you</br>have a </br><span class="pink">dream dog</span> ?
</div>
</div> <!-- @end left-->
<div class="right-scroll">
<div id="right1">
Friendly to people ? </br></br>
<img src="./img/friendly-to-people.gif" width="200" height="200">
</br></br></br></br></br></br></br></br></br></br>
</br></br></br></br>
</div>
<div id="right2">
Easy to train ? </br></br>
<img src="./img/easy-to-train.gif" width="200" height="200">
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br>
</div>
<div id="right3">
Long, soft fur ?</br>
<img src="./img/long-fur.gif" width="200" height="200">
</br></br></br></br></br></br></br></br>
<div class="right3-text">This sounds like a </br><span class="pink">Golden Retriever!</span></br>But...</div>
</div>
</div><!-- @end right-->
</div> <!-- @end intro-->
<div class="question">
<div class="sideleft">
Based on what owners told us...</br></br> What are the <span class="pink">chances</span> </br>you'll find this dream dog </br>going solely by <span class="pink">breed</span>?
</br></br>
</div>
<div class="sideright">
<img src="./img/dog-animated-3.gif" width="300" height="300">
<div class="question-2">
We looked at...</br></br>
<img src="./img/chart.png" width="25" height="25">Personality traits:<br/>
<span class="green"> 32% of Golden Retrievers </span> </br>
<img src="./img/frame.png" width="25" height="25" >
were described as both friendly and easy to train</br></br>
<img src="./img/traits_on.gif" width="25" height="25">Breed-defining traits:</br>
<span class="pink"> 43% of Golden Retrievers</span></br>
<img src="./img/frame.png" width="25" height="25" >
were described as having long, soft coats
</div>
</div>
</div> <!-- @end question-->
<div class='scroll'> Click or Scroll to explore more </div>
<a id="link-down" href="#element">
<div id="arrow">
<div class="arrow-down"></div>
</div>
</a>
<div id="element">
<div class="titles">
<div class="switch">
<div class="mode1-title">Personality<span class="mode1-title-text"> traits </span></div>
<button class="mode1"><a href="./index.html#element"><img src="./img/personality.gif" width="20" height="20"></a></button>
<div class="mode2-title">Breed-defining <span class="mode2-title-text">traits</span></div>
<button class="mode2"><a href="./physical.html#element"><img src="./img/traits_on.gif" width="20" height="20"></a></button>
</div>
<h1 class="centered">All shapes, sizes, and specialties</h1>
<p class="sub-title">What physical characteristics and natural tendencies strongly distinguish dog breeds?</p>
</div>
</div> <!-- @end element-->
<div class="content">
<div id="buttongroup">
<div class="guide">Select the traits of your dream dog below
<div class="divder-reset"> | </div>
<div class="reset-text"> Reset here </div>
<button id="all" class="button-reset"><img class="reset-img"src="./img/reset.png" width="18" height="18"></button>
</div>
<div id="f1" class="buttons">
<h3>Size</h3>
<button class="button" value="positive">Large</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative">Small</button>
</div>
<div id="f2" class="buttons">
<h3>Ear shape</h3>
<button class="button" value="positive">Pricked</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative">Dropped</button>
</div>
<div id="f3" class="buttons">
<h3>Fur length</h3>
<button class="button" value="positive">Long</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative">Short</button>
</div>
<div id="f4" class="buttons">
<h3>Tail curl</h3>
<button class="button" value="positive">Curly</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative" style="margin-right:0">Not Curly</button>
</div>
<div id="f5" class="buttons">
<h3>Retrieves objects</h3>
<button class="button" value="positive">Not retrieve</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative" style="margin-right:0">Retrieves</button>
</div>
<div id="f6" class="buttons">
<h3>White fur</h3>
<button class="button" value="positive">Little or Not</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative" style="margin-right:0">Mostly or all</button>
</div>
<div id="f7" class="buttons">
<h3>Avoids getting wet</h3>
<button class="button" value="positive">Likes water</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative" style="margin-right:0">Avoids water</button>
</div>
<div id="f8" class="buttons">
<h3>Howls</h3>
<button class="button" value="positive">Often howls</button>
<button class="button current" value="any">Any</button>
<button class="button" value="negative" style="margin-right:0">Rarely howls</button>
</div>
</div> <!-- @end buttongroups -->
<div class="charts">
<p class="charts-guide">How common is a dog like this among...</p>
<div class="row">
<div class="column left">
<div class="mixbreed">
<h4>Mixed breed dogs</h4>
<div class="headerline "></div>
</div>
</div>
<div class="column right">
<div class="purebreeds">
<h4>Breed dogs</h4>
<div class="headerline "></div>
</div>
</div>
</div> <!-- @end row -->
</div> <!-- @end charts -->
<div class="cite">
<p class="about">About</p>
<p class="dot"><b>•</b></p>
<p class="project"><span class="project-text">The Project: <a href="https://darwinsark.org" target="_blank">Darwin’s Ark</a></span></p>
<p class="team"><b style="margin-right: 10px; margin-left: 10px">•</b><span class="team-text">The Team: A collaboration between <a href="https://karlssonlab.org/" target="_blank">Karlsson</a> and <a href="https://co-labo.org/" target="_blank">Colubri</a> Labs</span></p>
<p class="data">
<b style="margin-right: 10px">•</b>
<span class="data-text">The data: derived from behaviour surveys on 18,371 dogs, storaged on Dryad at
<a href="https://www.doi.org/10.5061/dryad.g4f4qrfr0" target="_blank"> DOI </a>
</span>
</p>
<p class="paper">
<b style="margin-right: 10px">•</b>
<span class="paper-text">The Science paper:
<a href="https://www.science.org/doi/10.1126/science.abk0639" target="_blank"> Morrill et al. 2022 </a>
</span>
</p>
<p class="repo"><b style="margin-right: 10px">•</b><span class="repo-text">The source code: <a href="https://github.com/colabobio/muttomics-dashboard" target="_blank">GitHub repository</a></p>
<p class="view"><b style="margin-right: 10px">•</b><span class="view-text">Best viewing experienced with laptop or desktop screens</span></p>
</div>
</div> <!-- @end content -->
</div> <!-- @end contanior -->
<script src="lib/d3.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="./script_phy.js"></script>
<script src="./smoth_scroll.js"></script>
</body>
</html>