Revision d1bc3fdf935cac98a786e56049cf7834d789aebd authored by Laura Garrison on 10 June 2024, 13:46:14 UTC, committed by Laura Garrison on 10 June 2024, 13:46:14 UTC
1 parent bcfb117
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container-lg">
<p>
<span class="tips">How to use this tool:</span> To begin, choose a domain from the navigation menu above.
Then, explore the spatio-temporal of collected infographics in this domain in the below scatterplot.
Click any point to view infographic details, including the types of metaphors employed in the visual design. <br>
</p>
<!-- NAVIGATION MENU -->
<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Visual Conceptual Metaphor Explorer</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" id="biomed" aria-current="page" href="#">Biomedicine</a>
</li>
<li class="nav-item">
<a class="nav-link" id="climate" href="#">Climate</a>
</li>
<li class="nav-item">
<a class="nav-link" id="space" href="#">Space</a>
</li>
<li class="nav-item">
<a class="nav-link" id="anthro" href="#">Anthropology</a>
</li>
</nav>
<!-- SCATTERPLOT CONTEXT -->
<div class="row">
<div class="col-lg-6">
<h4>Infographic Spatio-Temporal Distribution</h4>
<!-- <figure class="figure">
<img src="placeholder.png" class="figure-img img-fluid rounded" alt="...">
</figure> -->
<div class="col">
<div id="scatterplot">
</div>
</div>
<!-- IMAGE FOCUS - RIGHT SIDE OF VIEWER -->
<div class="col-lg-6">
<div class="row">
<div class="col">
<h4>Image Detail Information</h4>
</div>
</div>
<div class="row">
<!-- IMAGE PLACEHOLDER -->
<div class="col">
<figure class="figure">
<img src="placeholder.png" class="figure-img img-fluid rounded" alt="...">
</figure>
</div>
<div class="col-lg-3">
<p>Image name</p>
<p>XYZ</p>
<p>Image author</p>
<p>XYZ</p>
<p>Domain distribution</p>
<p>XYZ</p>
<p>Image Link</p>
<p>XYZ</p>
</div>
</div>
<div class="row">
<div class="col">
<h4>Conceptual metaphor analysis</h4>
</div>
</div>
<div class="row">
<!-- CMT PIE CHART -->
<div class="col">
<div id="piechart">
</div>
<div class="col-lg-6">
<p>Supporting textual metaphor</p>
<p>XYZ</p>
<p>Type</p>
<p>XYZ</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="./scatterplot.js"></script>
<script src="./pie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script>
// GLOBALS - from original
let data = undefined;
let rectangles = undefined;
let chosenImg = '';
let piechartValues = undefined;
// clearVis() adapted from https://stackoverflow.com/questions/56128552/how-to-switch-csv-dataset-of-d3-js-graph-to-another-csv-by-clicking-on-button
function clearVis() {
var myNode = document.getElementById("scatterplot");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
// initialized view
drawScatterPlot("./data/biomed/biomed.csv", "./data/biomed/biomed_rectangles.csv");
// view selection updates
d3.select("#biomed").on("click", function(d, i) {
clearVis();
drawScatterPlot("./data/biomed/biomed.csv", "./data/biomed/biomed_rectangles.csv");
});
d3.select("#climate").on("click", function(d, i) {
clearVis();
drawScatterPlot("./data/climate/climate.csv", "./data/climate/climate_rectangles.csv");
});
d3.select("#space").on("click", function(d, i) {
clearVis();
drawScatterPlot("./data/space/space.csv", "./data/space/space_rectangles.csv");
});
d3.select("#anthro").on("click", function(d, i) {
clearVis();
drawScatterPlot("./data/anthro/anthro.csv", "./data/anthro/anthro_rectangles.csv");
});
</script>
</body>
</html>
Computing file changes ...
