<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Conceptual Metaphor Explorer</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.
<span class="tips">Hover on any point to view infographic details</span>, 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-4">
<h4>Infographic Spatio-Temporal Distribution</h4>
<div id="scatterplot">
<div id="tooltip" class="tooltip">
<span id="values"></span>
</div>
</div>
</div>
<!-- IMAGE FOCUS - RIGHT SIDE OF VIEWER -->
<div class="col-lg-4">
<h4>Image Details</h4>
<p>
<span class="emph">Image name:</span>
<span id="name-title"></span>
</p>
<p>
<span class="emph">Image author:</span>
<span id="author-title"></span>
</p>
<p>
<span class="emph">Domain distribution:</span>
<span id="primary-domain-title"></span>,
<span id="secondary-domain-title"></span>
</p>
<figure class="figure">
<img id="preview-img" src="images/placeholder.png" class="figure-img img-fluid rounded">
</figure>
<p>
<span class="emph">Image link</span><br>
<a href="" id="link-title" target="_blank" rel="noopener"></a>
<!-- <a id="link-title"></a> -->
</p>
</div>
<div class="col-lg-4">
<h4>Conceptual Metaphor Analysis</h4>
<div id="barplot"></div>
<p>
<span class="emph">Structural:</span>
<span id="structural-details"></span>
</p>
<p>
<span class="emph">Ontological:</span>
<span id="ontological-details"></span>
</p>
<p>
<span class="emph">Orientational:</span>
<span id="orientational-details"></span>
</p>
<p>
<span class="emph">Imagistic:</span>
<span id="imagistic-details"></span>
</p>
<p>
<span class="emph">Supporting textual metaphor:</span>
<span id="text-support-graphical-metaphors"></span>
</p>
<p>
<span class="emph">Type:</span>
<span id="text-support-graphical-metaphors-details"></span>
</p>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="./scatterplotFilter.js"></script>
<script src="./bar.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>
async function dataSlice(dataCSV){
const dataset= await d3.csv(dataCSV)
console.table(dataset[0])
const biomedData = dataset.filter(d => {
if (d.primary_domain == "Biomedicine"){
return d
}
})
const climateData = dataset.filter(d => {
if (d.primary_domain == "Climate"){
return d
}
})
const spaceData = dataset.filter(d => {
if (d.primary_domain == "Space"){
return d
}
})
const anthroData = dataset.filter(d => {
if (d.primary_domain == "Anthropology"){
return d
}
})
//console.table(dataset[0])
drawScatterPlot(biomedData) //initial draw
drawBarPlot()
d3.select("#biomed").on("click", function(d, i) {
updateScatterPlot(biomedData)
})
d3.select("#climate").on("click", function(d, i) {
updateScatterPlot(climateData)
})
d3.select("#space").on("click", function(d, i) {
updateScatterPlot(spaceData)
})
d3.select("#anthro").on("click", function(d, i) {
updateScatterPlot(anthroData)
})
}
dataSlice("./data/DATABASE.csv")
</script>
</body>
</html>