kw-panels/index.html at main · KnowWhereGraph/kw-panels · 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
<!DOCTYPE HTML>
<html lang="en">

<head>
	<title>KW Panels - Home</title>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
	<!-- stylesheets -->
	<link rel="stylesheet" href="assets/css/variables.css" type="text/css">
	<link rel="stylesheet" href="assets/css/global.css" type="text/css">
	<link rel="stylesheet" href="assets/css/typography.css" type="text/css">
	<link rel="stylesheet" href="assets/css/buttons.css" type="text/css">
	<link rel="stylesheet" href="assets/css/header.css" type="text/css">
	<link rel="stylesheet" href="assets/css/landing.css" type="text/css">
	<link rel="stylesheet" href="assets/css/sections.css" type="text/css">
	<link rel="stylesheet" href="assets/css/cards.css" type="text/css">
	<link rel="stylesheet" href="assets/css/blog.css" type="text/css">
	<link rel="stylesheet" href="assets/css/footer.css" type="text/css">
	<link rel="stylesheet" href="assets/css/search.css" type="text/css">
	<link rel="stylesheet" href="assets/css/modal.css" type="text/css">
	<!-- JS -->
	<script type="text/javascript" > if (location.protocol !== "https:") { location.protocol = "https:";}</script>
	<script type="text/javascript" src="assets/javascripts/jquery-3.6.4.min.js"></script>
</head>

<body>
	<section class="landing">
		<header>
			<div class="left">
				<a href=""><img src="assets/images/logo-main.svg" alt="Know Where Graph Logo" /></a>
			</div>
			<div class="right" id="menuToggle">
				<input type="checkbox" />
					<span></span>
					<span></span>
					<span></span>
				<ul class="nav" id="menu">
					<li class="nav-item"> <a class="nav-link" id="browse" href="browse/">Browse</a></li>
					<li class="nav-item">
						<a class="nav-link" id="search" href="search/">Search</a>
						<img class="search-icon" src="assets/images/search.svg" alt="search icon">
					</li>
<!--					<li class="nav-item above-nav"> <a class="nav-link" id="status" href="https://status.knowwheregraph.org/" target="_blank">Status</a></li>-->
				</ul>
			</div>
		</header>
		<h1>Know Where Panel</h1>
		<div class="background"> <img src="assets/images/background-landing.png" alt="Background Imagery - County Map of the USA with a vectored web of lines and nodes wrapping across the country, signifying connections" /> </div>
	</section>
	<section class="blog">
		<div>
			<p>KnowWhereGraph is a massive knowledge graph with a rich and expressive schema. This comes with many benefits, insofar as it helps to capture provenance, lineage, and spatiotemporal context to the data, and other aspects relevant for expert-level applications.  However, due to the size and complexity of the graph and its schema, this can result in a steep learning curve and usability obstacles for those who are not well versed in ontology, knowledge graphs, or SPARQL. On the other hand, for certain use cases a deep or rich ontological representation is not necessary, and, for certain types of users visualizing or navigating graph data values can be unintuitive. Finally, the use of the DGG can be a barrier itself, as it can result in long and expensive queries.</p>

			<p>
				<img class="blog-photo-full" src="assets/images/kwgl-schema-diagram.png" alt="KWG Lite schema diagram" />
			</p>

			<p>To address this, we have constructed a simpler version of KWG, reducing both the complexity of the schema (shown above) and number of triples (a reduction of four orders of magnitude); we call this graph: KnowWhereGraph-Lite (KWG-Lite). To easily view the entities within KWG-Lite, we've created KnowWherePanel.</p>

			<p>We currently support two types of entitites within KWG-Lite, Hazards and Places. Each show the data pertinent to them in convenient and easily visualized panels, inspired by the Wikipedia & Wikidata infoboxes. By clicking on "Browse" you can see some examples. Search will allow for the targeting of specific Hazards or places.</p>

			<a href="browse/" class="button primary mr-15">Browse</a>
			<a href="search/" class="button secondary mr-15">Search</a>
		</div>
	</section>
	<footer>
		<div class="footer-wrap">
			<img src="assets/images/NSF.svg" alt="National Science Foundation Logo"/>
			<p>Funded by the National Science Foundation. <br>Convergence Accelerated Program Grant OIA - 2033521</p>
		</div>
	</footer>
</body>

</html>
<script>
	$(".prototype-card:not(.prototype-full)").click(function() {
		window.location = $(this).find("a").attr("href");
		return false;
	});
</script>