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>
</div><br> </div><br>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>Colophon</h3> <div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h2>colophon</h2>
<p>Wells of Knowledge: Poetry, Music and Rresistance in Turkey<br> Wells of Knowledge: Poetry, music and resistance in Turkey © 2020<br>
© 2020 at.wdka.nl/wellsofknowledge</p> at.wdka.nl/wellsofknowledge<br>
<p>Developed by Hybrid Publishing,<br> Developed by Hybrid Publishing,<br>
Willem de Kooning Academy</p> Willem de Kooning Academy<br>
<p>Text and images © Merve Kılıçer<br> Text and images © Merve Kılıçer<br>
All rights reserved</p> All rights reserved<br>
<p>ISBN: 9789492479112</p> ISBN: XXXX<br>
<p>Author: Merve Kılıçer</p> Author: Merve Kılıçer<br>
<p> Graphic Design &amp; Web Development: Angeliki Diakrousi and Alice Strete<br>
Graphic Design & Web Development: Angeliki Diakrousi Editor: Liz Allan<br>
(https://w­i­t­m.net/) and Alice Strete (https://alicestrete.me/)</p> Coordination: Kimmy Spreeuwenberg<br>
<p>Editor: Liz Allan</p> [@Merve - ADD THANK YOU MESSAGE HERE]<br>
<p>Coordination: Kimmy Spreeuwenberg</p> Hybrid Publishing<br>
<p>Printer: De Raddraaier, Amsterdam<br> This publication was developed by Hybrid Publishing, founded by the Willem de Kooning
Paper: Old Mill/Bianco 100g<br> Academy as a means of profiling and disseminating outstanding research conducted by its
Print Run: 300</p> students and teaching staff, whether independently or in collaboration with external
<p> partners. Researching and experimenting across a broad range of processes native to digital
Thanks for the generous support of Nihan Somay, Jake Caleb, and analog media, WdKA Hybrid Publishing fosters novel approaches to design, authoring,
Ulufer Çelik and Carmen José</p> reading and dissemination made possible through ongoing developments from the legacies
<p>Hybrid Publishing<br> of Gutenberg’s press to present-day technologies. (hybridpublishing.wdka.nl)<br>
This publication was developed by Hybrid Publishing, founded by HP Research Awards<br>
the Willem de Kooning Academy as a means of profiling and The HP Research Awards series showcases the work of recipients or nominees of the Willem
disseminating outstanding research conducted by its students and de Kooning Research Award. Established by the Willem de Kooning Foundation, the awards
teaching staff, whether independently or in collaboration with are granted to outstanding students whose graduation projects and research have helped
external partners. Researching and experimenting across a broad provide new insights to broader audiences. For a digital version of this and other
range of processes native to digital and analog media, WdKA publications, go to at.wdka.nl/hpresearchawards</div>
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> </div>
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div><h3>How to use</h3><p> <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.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</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>
<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> When double clicking, a name is isolated and displayed alongside its closest connections. <br>
<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> 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> </div>
<script src="static/js/d3_map.js"></script> <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') console.log('vid')
if (i.url) { if (i.url) {
divVideo.transition().duration(100); 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.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); popup(i.id, i.time);
}) })
.on("dblclick", connectedNodes) .on("dblclick", connectedNodes)
@ -80,7 +80,6 @@ d3.json("/static/js/group1.json", function(error, json) {
force.on("tick", function() { force.on("tick", function() {
link.attr("x1", function(d) { link.attr("x1", function(d) {
return d.source.x; 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 // highlight NodeLists//Toggle stores whether the highlighting is on
var toggle = 0; var toggle = 0;
//Create an array logging what is connected to what //Create an array logging what is connected to what