-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.qmd
130 lines (115 loc) · 4.96 KB
/
gallery.qmd
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
---
page-layout: custom
toc: false
---
<!-- Image banner at top -->
<div class="banner-container">
<img class="banner-image-two" src="images/flowers-long.png" alt="Ocean waves"/>
<div class="left-banner-box">
<p class="custom-h1-light" style="margin-bottom: 0px">Gallery</p>
</div>
</div>
<div class="gray-placeholder-two">
</div>
::::: {.grid}
<!-- left side -->
::: {.g-col-12 .g-col-md-6}
::: {.teal-bg-left}
<p class="custom-h1-light">Gallery</p>
<p class="custom-h2-light" style="font-size: 22px; font-weight: 200; padding-left: 40px; padding-right: 40px">Maps and Data Viz -- Page in progress, so come back soon!</p>
<br>
:::
<!-- <hr></hr> -->
:::
:::::
<!-- create custom layout for page -->
::::: {.grid}
<!-- left pad -->
::: {.g-col-2}
:::
<!-- middle content -->
::: {.g-col-8}
<!-- bio -->
<p class="custom-h2-dark" id="bio" style="margin-top: 40px">Maps and Visualizations</p>
<!-- subgrid -->
::: {.grid}
::: {.g-col-12 .g-col-md-6}
::: {layout-ncol="1"}
<div class="image-container">
<figure>
<img src="images/data-viz/cafo-map.jpg" class="clickable-image" data-src="images/data-viz/cafo-map.jpg" style="border-radius: 20px;" alt="Map of Iowa showing the counts of concentrated animal feeding operations.">
<figcaption class="initially-hidden">Chloropleth map of Iowa showing the counts of concentrated animal feeding operations (CAFO) by county. Created in ArcGIS Pro.</figcaption>
</figure>
</div>
<div class="image-container">
<figure>
<img src="images/data-viz/bubble-decision-layout.png" class="clickable-image" data-src="images/data-viz/bubble-decision-layout.png" style="border-radius: 20px;" alt="Three possible views within a Shiny Application for users to assess the results of their weighted and sequential decision-making regarding various treatment options for kidney disease.">
<figcaption class="initially-hidden">Three possible views within a Shiny Application for users to assess the results of their weighted and sequential decision-making regarding various treatment options for kidney disease. Created with R, laid out with Inkscape</figcaption>
</figure>
</div>
:::
:::
::: {.g-col-12 .g-col-md-6}
::: {layout-ncol="1"}
<div class="image-container">
<figure>
<img src="images/data-viz/kelp-map.png" class="clickable-image" data-src="images/data-viz/kelp-map.png" style="border-radius: 20px;" alt="Map of the Santa Barbara Channel showing locations where habitat is likely suitable for kelp aquaculture. Suitable locations occur off the coast of Santa Barbara County.">
<figcaption class="initially-hidden">Map of the Santa Barbara Channel showing locations where habitat is likely suitable for kelp aquaculture. Created with R and Inkscape.</figcaption>
</figure>
</div>
<div class="image-container">
<figure>
<img src="images/data-viz/music-dashboard.png" class="clickable-image" data-src="images/data-viz/music-dashboard.png" style="border-radius: 20px;" alt="Two plots showing Elke's top Spotify artists and listening throughout the year.">
<figcaption class="initially-hidden">Dashboard of Spotify listening history displaying a bar chart of Elke's top 10 artists by minutes played split by song, and a timeseries of Elke's top 3 artist minutes played throughout the year. Created with Tableau.</figcaption>
</figure>
</div>
:::
:::
:::
<div id="imageModal" class="modal">
<span id="closeModal" class="close">×</span>
<figure>
<img id="modalImage" class="modal-content" alt="Enlarged Image">
<figcaption id="modalCaption" class="modal-caption"></figcaption>
</figure>
</div>
<!-- end middle content -->
:::
<!-- right pad -->
::: {.g-col-2}
:::
<br></br>
<!-- end custom layout for page -->
:::::
```{ojs style="display: none;"}
//| echo: false
//| output: false
setTimeout(function() {
document.querySelector('.left-banner-box').classList.add('slide-in');
}, 300); // Adjust the delay (in milliseconds) as needed
// Function to open the modal when an image is clicked
document.querySelectorAll('.clickable-image').forEach(function(image) {
image.onclick = function() {
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const modalCaption = document.getElementById('modalCaption');
const initialCaption = document.querySelector('.initially-hidden');
initialCaption.style.display = 'none'; // Hide the caption on the main page
modal.style.display = 'block';
modalImage.src = this.getAttribute('data-src'); // Set the source of the enlarged image
modalCaption.textContent = this.parentElement.querySelector('figcaption').textContent; // Set the caption text
};
});
// Function to close the modal
document.getElementById('closeModal').onclick = function() {
const modal = document.getElementById('imageModal');
modal.style.display = 'none';
};
// Close the modal when clicking outside of it
window.onclick = function(event) {
const modal = document.getElementById('imageModal');
if (event.target == modal) {
modal.style.display = 'none';
}
};
```