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

fixed style issue with popups

Browse Source
This commit is contained in:
nglk 2021-03-01 14:33:43 +01:00
parent 3fa77bafde
commit 5b052df39f
2 changed files with 34 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@ -91,54 +91,39 @@ Through the map, we give shape to a common context in Turkish culture. The map a
</div>
</div><br>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>Colophon</h3>
<p>Wells of Knowledge: Poetry, Music and Rresistance in Turkey<br>
© 2020 at.wdka.nl/wellsofknowledge</p>
<p>Developed by Hybrid Publishing,<br>
Willem de Kooning Academy</p>
<p>Text and images © Merve Kılıçer<br>
All rights reserved</p>
<p>ISBN: 9789492479112</p>
<p>Author: Merve Kılıçer</p>
<p>
Graphic Design & Web Development: Angeliki Diakrousi
(https://w­i­t­m.net/) and Alice Strete (https://alicestrete.me/)</p>
<p>Editor: Liz Allan</p>
<p>Coordination: Kimmy Spreeuwenberg</p>
<p>Printer: De Raddraaier, Amsterdam<br>
Paper: Old Mill/Bianco 100g<br>
Print Run: 300</p>
<p>
Thanks for the generous support of Nihan Somay, Jake Caleb,
Ulufer Çelik and Carmen José</p>
<p>Hybrid Publishing<br>
This publication was developed by Hybrid Publishing, founded by
the Willem de Kooning Academy as a means of profiling and
disseminating outstanding research conducted by its students and
teaching staff, whether independently or in collaboration with
external partners. Researching and experimenting across a broad
range of processes native to digital and analog media, WdKA
Hybrid Publishing fosters novel approaches to design, authoring,
reading and dissemination made possible through ongoing
developments from the legacies of Gutenberg’s press to present­day
technologies. (hybridpublishing.wdka.nl) </p>
<p>HP Research Awards<br>
The HP Research Awards series showcases the work of recipients
or nominees of the Willem de Kooning Research Award.
Established by the Willem de Kooning Foundation, the awards are
granted to outstanding students whose graduation projects and
research have helped provide new insights to broader audiences. For
a digital version of this and other publications, go to
at.wdka.nl/hpresearchawards</p>
<img class="logo" src="static/images/HP_Logo.png"></img>
<img class="logo" src="static/images/wdka_logo.png"></img>
<img class="logo" src="static/images/pzi_logo.png"></img></div>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>colophon</h2>
Wells of Knowledge: Poetry, music and resistance in Turkey © 2020<br>
at.wdka.nl/wellsofknowledge<br>
Developed by Hybrid Publishing,<br>
Willem de Kooning Academy<br>
Text and images © Merve Kılıçer<br>
All rights reserved<br>
ISBN: XXXX<br>
Author: Merve Kılıçer<br>
Graphic Design &amp; Web Development: Angeliki Diakrousi and Alice Strete<br>
Editor: Liz Allan<br>
Coordination: Kimmy Spreeuwenberg<br>
[@Merve - ADD THANK YOU MESSAGE HERE]<br>
Hybrid Publishing<br>
This publication was developed by Hybrid Publishing, founded by the Willem de Kooning
Academy as a means of profiling and disseminating outstanding research conducted by its
students and teaching staff, whether independently or in collaboration with external
partners. Researching and experimenting across a broad range of processes native to digital
and analog media, WdKA Hybrid Publishing fosters novel approaches to design, authoring,
reading and dissemination made possible through ongoing developments from the legacies
of Gutenberg’s press to present-day technologies. (hybridpublishing.wdka.nl)<br>
HP Research Awards<br>
The HP Research Awards series showcases the work of recipients or nominees of the Willem
de Kooning Research Award. Established by the Willem de Kooning Foundation, the awards
are granted to outstanding students whose graduation projects and research have helped
provide new insights to broader audiences. For a digital version of this and other
publications, go to at.wdka.nl/hpresearchawards</div>
</div>
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3><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>
<p>When clickling once on one of the names, various kinds of media appear in connection to that name. The colors represent different categories (Folklore literature, Islamic Mysticism, etc).</p>
<p> When double clicking, a name is isolated and displayed alongside its closest connections. </p><p>All the elements of the map can be rearranged and moved. </p></div>
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>How to use</h2><p>
The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary. Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.<br>
When double clicking, a name is isolated and displayed alongside its closest connections. <br>
When clickling once on one of the names, various kinds of media appear in connection to that name. The colors represent different categories (Folklore literature, Islamic Mysticism, etc).<br> All the elements of the map can be rearranged and moved. </p></div>
</div>
<script src="static/js/d3_map.js"></script>

6
static/js/d3_map.js vendored
View File

@ -69,10 +69,10 @@ d3.json("/static/js/group1.json", function(error, json) {
console.log('vid')
if (i.url) {
divVideo.transition().duration(100);
divVideo.html("<div id='showvideo'><span onclick=closevideo() class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
divVideo.html("<div class='draggable' id='showvideo'><span onclick=closevideo() class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video" + i.id + "' width='300' height='150' src='" + i.url + "' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
};
divBio.transition().duration(100);
divBio.html("<div id='showbio'><span onclick=closebio() class='topleft'> &nbsp; &times&nbsp;</span><div id='bio" + i.id + "'>" + i.bio + "</div>");
divBio.html("<div class='draggable' id='showbio'><span onclick=closebio() class='topleft'> &nbsp; &times&nbsp;</span><div id='bio" + i.id + "'>" + i.bio + "</div>");
popup(i.id, i.time);
})
.on("dblclick", connectedNodes)
@ -80,7 +80,6 @@ d3.json("/static/js/group1.json", function(error, json) {
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
@ -103,6 +102,7 @@ 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