Browse Source

flexible and draggable objects. Complete example of diagram in full page

master
nglk 4 years ago
parent
commit
ef43b8b658
  1. 7
      static/js/bootstrap.min.js
  2. 5
      static/js/d3.v3.min.js
  3. 4
      static/js/jquery-3.2.1.slim.min.js
  4. 5
      static/js/popper.min.js
  5. 152
      wells/index-fixed.html
  6. 81
      wells/index.html
  7. 55
      wells/static/css/style.css
  8. 7
      wells/static/js/d3_map.js

7
static/js/bootstrap.min.js

File diff suppressed because one or more lines are too long

5
static/js/d3.v3.min.js

File diff suppressed because one or more lines are too long

4
static/js/jquery-3.2.1.slim.min.js

File diff suppressed because one or more lines are too long

5
static/js/popper.min.js

File diff suppressed because one or more lines are too long

152
wells/index-fixed.html

@ -0,0 +1,152 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script>
</head>
<body>
<div class="container-fluid p-0">
<div class="bg">
<div class="row">
<div class="col-md-7">
<div class="map_area">
<script src="static/js/d3_map.js"></script>
</div>
<div class="row">
<div class="col-md-12">
<p id="legend_title">Map legend</p>
<div class="map_legend">
<div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="scrollable">
<div class="row">
<div class="col-md-12">
<div w3-include-html="thesis.html" class="thesis">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div id="showdadaloglu"><div class='text_audio'>Bio</div>
<!-- <audio id="audiodadaloglu" controls>
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> -->
<img src="static/images/poem.png">
</div>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
</div>
<!-- scripts for mouse events -->
<script>
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {
if (audio.paused) {
audio.play();
btn.innerHTML = "(Pause)";
} else {
audio.pause();
btn.innerHTML = "(Play)";
}
}
</script>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
includeHTML();
</script>
</div>
</body>
</html>

81
wells/index.html

@ -2,10 +2,10 @@
<head> <head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"> <meta content="utf-8" http-equiv="encoding">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title> <title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="static/js/d3.v3.min.js"></script>
<script src="static/js/jquery.min.js"></script> <script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script> <script type="text/javascript" src="static/js/p5/p5.min.js"></script>
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
@ -13,42 +13,38 @@
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="static/js/jquery-1.12.4.js"></script> <script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script> <script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script>
<script src="static/js/draggable.js"></script>
</head> </head>
<body> <body>
<div class="container-fluid p-0"> <div class="container-fluid p-0">
<div class="bg"> <div class="bg">
<div class="row"> <div class="row">
<div class="col-md-7"> <!-- background audio -->
<div class="map_area"> <div class="col-md-9" style="position: static;">
<script src="static/js/d3_map.js"></script>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<p id="legend_title">Map legend</p> <div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<div class="map_legend"> <a id="mBtn" onclick="PSFunction()">(Play)</a>
<div class="box1"></div> <p>Folklore literature</p> <button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<div class="box2"></div> <p>Islamic Mysticism</p> <button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div> </div>
<div class="col-md-5"> <div class="main_audio">
<div class="scrollable"> <audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<div class="row"> <source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
<div class="col-md-12"> Your browser does not support the audio tag.
<div w3-include-html="thesis.html" class="thesis"> </audio>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <!-- map area -->
<div class="col-md-10"> <div class="map_area">
<div class="media_area"> <div w3-include-html="thesis.html" class="thesis draggable" id="showthesis">
</div>
<!-- <p>Related media</p> --> <!-- <p>Related media</p> -->
<div id="showdadaloglu"><div class='text_audio'>Bio</div> <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div>
<!-- <audio id="audiodadaloglu" controls> <!-- <audio id="audiodadaloglu" controls>
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg"> <source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag. Your browser does not support the audio tag.
@ -56,45 +52,40 @@
<img src="static/images/poem.png"> <img src="static/images/poem.png">
</div> </div>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div> </div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> --> <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<script src="static/js/d3_map.js"></script>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="play-stop"> <p id="legend_title">Map legend</p>
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a> <div class="map_legend">
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button> <div class="box1"></div> <p>Folklore literature</p>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button> <div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div> </div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div> </div>
</div> </div>

55
wells/static/css/style.css

@ -5,9 +5,11 @@
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
* { * {
border: 0px black solid; border: 0px black solid;
} }
body {
overflow: scroll;
}
.container-fluid { .container-fluid {
overflow: hidden; overflow: hidden;
} }
@ -28,6 +30,8 @@
margin-bottom: 20px; margin-bottom: 20px;
margin-right: 10px; margin-right: 10px;
margin-left: 20px; margin-left: 20px;
z-index: -1 !important;
position: relative;
} }
.media_area { .media_area {
margin-top: 10px; margin-top: 10px;
@ -59,6 +63,10 @@ background: grey;
cursor: pointer; cursor: pointer;
} }
.main_audio {
position: relative;
}
/* Node styling */ /* Node styling */
@ -66,6 +74,7 @@ cursor: pointer;
fill: #92817a ; fill: #92817a ;
font-size: 18px; font-size: 18px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
z-index: 2;
} }
@ -74,13 +83,14 @@ cursor: pointer;
fill: #bedbbb; fill: #bedbbb;
font-size: 18px; font-size: 18px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
z-index: 1;
} }
.group4 { .group4 {
fill: #8db956; fill: #8db956;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 18px; font-size: 18px;
z-index: 4;
} }
@ -88,6 +98,7 @@ cursor: pointer;
fill: #707070; fill: #707070;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 18px; font-size: 18px;
z-index: 3;
} }
@ -97,6 +108,8 @@ svg{
height:100%; height:100%;
margin-left: 30px; margin-left: 30px;
margin-top: 10px; margin-top: 10px;
z-index: 1;
position: relative;
} }
path{ path{
fill: transparent; fill: transparent;
@ -160,21 +173,25 @@ stroke-dasharray:6px;
padding-left: 5px; padding-left: 5px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
display: inline; display: inline;
font-size: 15px; font-size: .6em;
} }
#legend_title { #legend_title {
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
font-size: 20px; font-size: .8em;
padding-left: 10px; padding-left: 2em;
position: relative;
} }
/* text area */ /* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis { .thesis {
display: none;
overflow-y: scroll; overflow-y: scroll;
max-height:450px; max-height: 500px;
max-width: 30%;
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 1em; font-size: .6em;
border: 1px black solid; border: 1px black solid;
padding: 2em; padding: 2em;
margin-right: 10px; margin-right: 10px;
@ -182,7 +199,11 @@ margin-top: 20px;
line-height: 1.6em; line-height: 1.6em;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
scrollbar-color: #cdcec9 #bedbbb; scrollbar-color: #cdcec9 #bedbbb;
position: relative; position: fixed;
z-index:4;
background: white;
left: 40%;
top: 2%;
} }
.scrollable { .scrollable {
@ -204,12 +225,14 @@ h2 {
.play-stop { .play-stop {
position: absolute; /* position: absolute; */
bottom: 1.6em; /* bottom: 1em; */
z-index: 1; z-index: 1;
margin-left: calc( 50% - 1.8em ); padding-left: 2em;
/* margin-left: calc( 50% - 1.8em );
margin-top: 5em; */
overflow: hidden; overflow: hidden;
font-size: 1.2em; font-size: .8em;
font-weight: bold; font-weight: bold;
font-family:'Walter Turncoat', cursive; font-family:'Walter Turncoat', cursive;
color: #AEB10A; color: #AEB10A;
@ -267,6 +290,8 @@ draggable {
display: none; display: none;
left: 20%; left: 20%;
width: 50% !important; width: 50% !important;
position: fixed;
z-index: 5;
} }
.text_audio{ .text_audio{
@ -275,6 +300,12 @@ draggable {
font-family:'Vesper Libre', serif; font-family:'Vesper Libre', serif;
} }
/* Style the close button */
.topleft {
float: right;
cursor: pointer;
font-size: 100%;
}
/*d3 map*/ /*d3 map*/
.link { .link {

7
wells/static/js/d3_map.js

@ -1,14 +1,14 @@
var width = 500, var width = 700,
height = 350 height = 350
var svg = d3.select(".map_area").append("svg") var svg = d3.select(".map_area").append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`); .attr("viewBox", `${-width/1.3} ${-height/1.6} ${width*2.3} ${height*2.3}`);
var force = d3.layout.force() var force = d3.layout.force()
.gravity(0.009) .gravity(0.009)
.distance(250) .distance(300)
.charge(-30) .charge(-30)
.size([width, height]); .size([width, height]);
@ -109,6 +109,7 @@ d3.json("/static/js/group1.json", function(error, json) {
function popup(name,time) { function popup(name,time) {
$("#show"+name).fadeIn() $("#show"+name).fadeIn()
console.log("around") console.log("around")
$("#showthesis").fadeIn()
var dada = document.getElementById("text"+name); var dada = document.getElementById("text"+name);
dada.className += " active"; dada.className += " active";
dada.scrollIntoView(); dada.scrollIntoView();

Loading…
Cancel
Save