sawgraph.github.io/index.html at main · SAWGraph/sawgraph.github.io · GitHub

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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html>
<head>
<title>SAWGraph</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
  /* Combined Page Header/Intro Container: last updated March 2026 */
  .header-spacing {
    padding-top: 100px;
    padding-bottom: 20px;
    overflow: auto; /* Ensures container expands to fit the floating logo */
  }

  /* SAWGraph Logo: Floating left for text wrap */
  .header-logo {
    float: left;
    margin: 10px 35px 20px 0;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .header-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  }

  /* Responsive: Stacks logo on top for smaller screens */
  @media (max-width:850px) {
    .header-logo {
      float: none;
      margin: 0 auto 30px auto;
      display: block;
      max-width: 90%;
    }
    .header-spacing { padding-top: 80px; }
  }

  h2 { color: #1a4d7a; font-weight: 700; font-size: 2em; margin-top: 10px; }
  h3 { color: #2a5c91; font-weight: 600; }
  h4 { color: #0066cc; font-weight: 600; margin-bottom: 15px; }

  .use-case-card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 15px ; transition: all 0.3s ease; border-top: 4px solid #0066cc; }
  .use-case-card:hover { box-shadow: 0 8px 20px rgba(0,102,204,0.25); transform: translateY(-4px); }

  .query-section { background: linear-gradient(135deg, #e8f4f8 0%, #f0f8ff 100%); border-radius: 8px; border-left: 5px solid #0099cc; }

  ul { line-height: 1.8; }
  li { margin-bottom: 12px; }
  a { color: #0066cc; text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
  a:hover { color: #004499; text-decoration: underline; }

/* Fixes bullet points hidden by floating images */
  #intro ul {
    list-style-position: inside;
    padding-left: 0;
  }

  /* Creates a column for text so it doesn't "leak" under the image */
  .intro-text-block {
    overflow: hidden; /* This creates a new "block formatting context" */
  }

  @media (max-width:850px) {
    .intro-text-block { overflow: visible; }
  }

/* Back to Top Button Styling */
  #backToTop {
    display: none; /* Hidden until user scrolls */
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 99; /* Higher than content, lower than navbar dropdowns */
    border: none;
    outline: none;
    background-color: #1a4d7a; /* Matches your H2 color */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Makes it a circle */
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.3s;
  }

  #backToTop:hover {
    background-color: #0066cc; /* Brighter blue on hover */
    transform: scale(1.1);
  }

</style>
</head>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top w3-padding-8">
  <div class="w3-bar w3-white w3-wide w3-padding w3-card">
    <script src="menu.js"></script>
  </div>
</div>

<!-- Page content -->
<div class="w3-content w3-main w3-padding" style="max-width:1564px">

  <div class="w3-container w3-padding-8 header-spacing" id="home">
    <img class="header-logo" src="images/Sawgraph-Logo-transparent.png" alt="SAWGraph logo">

    <div id="intro" class="intro-text-block">
      <h2 class="w3-border-bottom w3-border-light-grey w3-padding-16">Overview</h2>
      <p><strong>Safe Agricultural Products and Water Graph (SAWGraph)</strong>: An <b>Open Knowledge Network </b> to Monitor and Trace PFAS and Other Contaminants in the Nation's Food and Water Systems
      <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2333782"><i>A ProtoOKN project</i></a></p>

      <p>The goal of SAWGraph is to connect federal and other datasets to more quickly analyze data and make decisions around per- and polyfluoroalkyl substances (PFAS) sources, testing, impacts, and risks.
        The graph integrates data and provides interfaces that support:</p>

        <ul>
          <li>analysis, mapping and communication of the results of testing for PFAS contamination</li>
          <li>spatial connections to known and potential sources</li>
        </ul>

      <p>to support PFAS research and decision making around PFAS testing and mitigation.</p>
    </div>
  </div>

  <div class="w3-container">
    <div class="w3-card-4 w3-leftbar w3-light-grey" style="max-width:1100px; padding:15px">
      <img src="images/overview.png" style="width:100%;max-width:1000px" class="w3-margin w3-center" alt="Overview of SAWGraph architecture">
      <p>In contrast to the current ecosystem of disconnected datasources, SAWGraph works by integrating and aligning data into a geospatial knowledge graph that supports interfaces that can dynamically answer questions about the related datasets. </p>
    </div>

    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Intended Users</h3>
    <p>
      The primary end users of SAWGraphs are personnel at state and federal agencies who monitor the environment and the safety of drinking water and agricultural land and products.
      End users include but are not limited to:
      <ul>
        <li>personnel at EPA and state environmental protection agencies (e.g. state environmental toxicologists)</li>
        <li>personnel at USDA and state agricultural agencies.</li>
        <li>experts from FDA, USGS and similar state agencies.</li>
      </ul>
      We distinguish four types of users based on their primary responsibility:
      <ol>
        <li>drinking water monitoring</li>
        <li>understanding the extent and sources of environmental contamination with PFAS</li>
        <li>PFAS researchers</li>
        <li>environmental justice</li>
      </ol>
      The graph is expected to empower these users to:
      <ol>
        <li>formulate and implement comprehensive test plans aimed at monitoring elevated PFAS levels in drinking water or agricultural lands,</li>
        <li>pinpoint the most significant sources of PFAS in a state and how it impacts disadvantaged communities;</li>
        <li>identify populations at elevated risk and prioritize testing resources and support accordingly;</li>
      </ol>
    </p>
  </div>

<!-- Use Cases Section -->
  <div class="w3-padding-32" id="use_cases" style="margin-top:40px;">
    <h2 class="w3-border-bottom w3-border-blue w3-padding-24" style="border-bottom-width:3px!important;">Use Cases</h2>

    <div class="w3-row w3-margin-top">
      <div class="w3-col m6 w3-padding-24">
        <div class="use-case-card w3-padding-32">
          <h4>🔍 Understanding Testing Gaps</h4>
          <p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Where have we tested and where are significant gaps?</b></p>
          <ul style="color:#333; font-size:0.95em;">
            <li>Where have we tested for what?</li>
            <li>What waterbodies are near potential contamination sources? <a href="tracing.html">See Example</a></li>
            <li>What do the available test results show in a particular region?</li>
            <li>Where are the biggest testing gaps based on what is known?</li>
          </ul>
        </div>
      </div>

      <div class="w3-col m6 w3-padding-24">
        <div class="use-case-card w3-padding-32">
          <h4>⚠️ Assess and Map Risks</h4>
          <p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Who is impacted the most?</b></p>
          <ul style="color:#333; font-size:0.95em;">
            <li>Where are concerning test results suggesting prioritized investigation? <a href="impacts.html">See Example</a></li>
            <li>Which communities are at greatest risk?</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="w3-row">
      <div class="w3-col m6 w3-padding-24">
        <div class="use-case-card w3-padding-32">
          <h4>🔄 Trace Contamination</h4>
          <p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Where does PFAS end up? Where does it originate?</b></p>
          <ul style="color:#333; font-size:0.95em;">
            <li>How do point sources (facilities, landfills, training sites) affect surroundings?</li>
            <li>What potential sources are upstream from concerning test results?</li>
            <li>What do downstream test results show? <a href="testing.html">See Example</a></li>
            <li>Which wells need prioritized testing?</li>
          </ul>
        </div>
      </div>

      <div class="w3-col m6 w3-padding-24">
        <div class="use-case-card w3-padding-32">
          <h4>🔬 Research Insights</h4>
          <p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>What linkages does the data suggest?</b></p>
          <ul style="color:#333; font-size:0.95em;">
            <li>Where are unexplained high test results?</li>
            <li>What agricultural practices reduce PFAS exposure?</li>
            <li>What connections exist between different PFAS substances?</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Competency questions and User queries</h3>
  <ul>
    <li><b>Testing Coverage and Gaps:</b> Where (locations/towns) should we prioritize environmental/water testing?
      <ul>
        <li>E.g. which wells are within 5 miles of landfills/airports/biosludge application sites? Which wells near locations with a reported PFOA contamination above 4ppt have not been tested?</li>
      </ul>
    </li>
    <li><b>Assessing Contamination Impacts:</b> Where and who is impacted? (Prevalence, risk/vulnerability mapping)
      <ul>
        <li>E.g. Which towns or counties have multiple test results with PFOS levels above 20ppt with no known contamination source nearby? Which chemicals show the highest average readings in samples from a particular region? Which towns/counties are most vulnerability based on their proximity to known or potential PFAS sources?</li>
      </ul>
    </li>
    <li><b>Contaminant Tracing:</b> What are potential sources of contamination at a particular location or area?
      <ul>
        <li>E.g. What potential contamination sources exist 20 miles upstream from the sample result? What wells are hydrologically connected to other wells with a reported contamination of +10ppt</li>
      </ul>
    </li>
  </ul>

  <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Project Overview</h3>
  <div class="w3-center w3-padding-32">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vS82LsLjZ5U?si=DePgmMknHwZyUBLP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </div>

<!-- End page content -->
  </div>

<!-- Page Footer -->
<footer class="w3-center w3-black w3-padding-16">
  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

<button onclick="topFunction()" id="backToTop" title="Go to top">↑</button>


<script>
  // Get the button
  const mybutton = document.getElementById("backToTop");

  // When the user scrolls down 400px from the top, show the button
  window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
      mybutton.style.display = "block";
    } else {
      mybutton.style.display = "none";
    }
  }

  // When the user clicks, scroll to the top smoothly
  function topFunction() {
    window.scrollTo({top: 0, behavior: 'smooth'});
  }
</script>

</body>
</html>