alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

unsuccesful try outs

Browse Source
This commit is contained in:
nglk 2021-03-03 13:23:31 +01:00
parent 95339fbc98
commit a7840f331e
3 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -23,13 +23,7 @@
<div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
<div class="col-md-3 offset-md-5" id="menu">
<span id="about">
<a href="#" >about</a> |
</span>
<span id="colophon">
<a href="#" >colophon</a> |
</span>
<span id="how">
<a href="#" >how to use</a>
<a href="#" >about</a>
</span>
</div>
@ -54,7 +48,7 @@
<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
<audio id="audioBG"
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
<source src="static/audio/HNI_Soundinstall_3tracks_together.webm" type="audio/mpeg">
<source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
</audio>
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
</div>
@ -83,7 +77,6 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<!-- popups about and colophon -->
</div>
<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>Wells of Knowledge</h2><p>
This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer. <br>
How can oral knowledge can be 'recorded', 'documented', 'transferred' through a digital online space? This is the question that drove the research behind this website, which has the map of connections as the main navigation point. The visualisation is inspired by the common history and references that people in Gezi Park shared during the 2013 occupation. Their presence together in the square became a melange of their different voices, slogans, poems and memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?"
@ -139,7 +132,7 @@ Through the map, we give shape to a common context in Turkish culture. The map a
</div>
</div>
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3>
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>How to use</h2>
<p>This website is best displayed on a desktop, using the latest available Firefox version.</p>
<p>
The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</p>
@ -148,15 +141,23 @@ Through the map, we give shape to a common context in Turkish culture. The map a
</div>
<script src="static/js/d3_map.js"></script>
</div>
<div id="nothesis">
<div w3-include-html="thesis.html" id="thesis" class="draggable thesis">
</div>
</div>
</div>
<span id="colophon">
<a href="#" >colophon</a>
</span>
<span id="how">
<a href="#" >how to use</a>
</span>
</div>
</div>

26
static/css/style.css
View File

@ -59,6 +59,7 @@ body {
margin-left: 20px;
position: relative;
/*border-top: 1px dashed #d81159;*/
}
.media_area {
@ -433,16 +434,37 @@ h2 {
/* about and colophon */
#menu {
/*#menu {
margin-top: 15px;
}*/
}
#about, #colophon, #how {
font-family:'Walter Turncoat', cursive;
color: #d81159;
font-size: 16px;
}
#colophon {
position: absolute;
left: 50px;
bottom:15px;
z-index: 5;
}
#how {
position: absolute;
right: 50px;
bottom:15px;
z-index: 5;
}
#about {
position: absolute;
right: 50px;
top:15px;
}
#about a {
text-decoration: none;
color: #d81159;

7
static/js/d3_map.js vendored
View File

@ -13,6 +13,7 @@ var force = d3.layout.force()
.size([width, height]);
d3.json("/static/js/group1.json", function(error, json) {
if (error) throw error;
@ -53,11 +54,10 @@ d3.json("/static/js/group1.json", function(error, json) {
});
var divVideo = d3.select("body").append("div").style("opacity", 1);
var divBio = d3.select("body").append("div").style("opacity", 1);
node.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
@ -100,9 +100,6 @@ d3.json("/static/js/group1.json", function(error, json) {
});
// highlight NodeLists//Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what