-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
65 lines (56 loc) · 3.51 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hearing the Americas</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
label{display:block;margin-bottom:.5rem}.viz__container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.display__map{width:75%}.display__metadata{max-height:750px;overflow-y:scroll;width:22%}@media (max-width:768px){.viz__container{flex-direction:column}.display__map{width:100%}.display__metadata{padding-left:1rem;width:100%}}button#reset-timeline{margin-left:.5rem}.timeline-label{font-size:1rem}hr{border:0;border-top:1px solid #333;margin:1rem 0}#map{background:#add8e6}.country,.states{fill:transparent;stroke:transparent}.point{fill:#f2ac29;fill-opacity:.5;stroke:#000}.point:hover{fill-opacity:1}.point text.clip{fill:#fff;text-anchor:middle;font-size:.8rem;font-weight:600}.tooltip{background:hsla(218,4%,41%,.9);border-radius:.2rem;color:#fff;display:inline-block;font-size:14px;max-width:400px;padding:.2rem .4rem;position:absolute;text-overflow:ellipsis;visibility:hidden;white-space:nowrap;z-index:300}.tooltip__text{font-size:.8rem;}.overlay{fill:none;pointer-events:all}.timeline_container{width:80%}.float-left{float:left!important}.float-right{float:right!important}.slider{width:100%}.line{fill:none;stroke:#4682b4;stroke-width:1.5px}.axis line,.axis path{fill:none;stroke:#000;shape-rendering:crispEdges}.axis text{font-size:12px}
</style>
</head>
<body>
<div class="viz__container">
<div class="display__map">
<svg id="map" width="100%"></svg>
</div>
<div class="display__metadata">
<details class="map__how_to">
<summary class="map__how_to_summary">
How to use this visualization
</summary>
<div class="map__how_to_description">Click on a point to see data about that specific city. Double-click on the point to return to the default view.<br/><br/> Selecting an individual scout will intitially show all of the locations they visted. Adjusting the year will show their visits for that specific year.<br/><br/> Recordings are available to hear when indicated in the tooltip by <strong>𝇇</strong>.</div>
</details>
<hr>
<div class="map__dropdown_scouts" id="scouts-dropdown"></div>
<div class="timeline_container">
<div id="map__timeline_slider">
<label for="year-start" class="timeline-label float-left">1902</label>
<label for="year-end" class="timeline-label float-right">1926</label>
<input
id="timeline"
type="range"
min="1902"
max="1926"
step="1"
value="1902"
class="slider"
/>
</div>
<div class="flex justify-center rounded-lg text-lg mb-4" role="group">
<button id="play-timeline" type="button">Play</button>
<button id="reset-timeline" type="button">Reset</button>
</div>
</div>
<p id="time_span_note">The map displays the number of recordings in <strong><span id="body__year-range">1902-1926</span></strong>.</p>
<h2 class="metadata__title"></h2>
<div class="metadata__panel">
<div class="metadata__audio"></div><br/>
<div class="metadata__recordings"></div><br/>
<div class="metadata__scouts"></div>
<div class="metadata__years"></div>
<div class="metadata__dates"></div>
</div>
</div>
</div>
</body>
</html>