Hybrid Publishing hybrid publication of the project Volitional Volutions of the Volatile Waters
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

151 lines
4.1 KiB

var width = 700,
height = 350
var svg = d3.select(".map_area").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `${-width/1.7} ${-height/1.8} ${width*2.3} ${height*2.2}`);
var force = d3.layout.force()
.gravity(0.008)
.distance(180)
.charge(-35)
.size([width, height]);
d3.json("/static/js/group1.json", function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", function(d) {
return "node group" + d.group
})
.attr("id", function(d) {
return d.id
});
node.append("image")
// .attr("xlink:href", "/static/images/squig2.png")
.attr("xlink:href", "/static/images/circle_blank.png")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) {
return d.name
});
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");
}
})
.on("click", function(i) {
// popup video
// this is for next the this.parent... ;var video=document.getElementById('#video" + i.id + "');video.pause();
console.log('vid')
if (i.url) {
divVideo.transition().duration(100);
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 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)
.call(force.drag);
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
// highlight NodeLists//Toggle stores whether the highlighting is on
var toggle = 0;
//Create an array logging what is connected to what
var linkedByIndex = {};
for (i = 0; i < json.nodes.length; i++) {
linkedByIndex[i + "," + i] = 1;
};
json.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
//This function looks up whether a pair are neighbours
function neighboring(a, b) {
return linkedByIndex[a.index + "," + b.index];
}
function connectedNodes() {
if (toggle == 0) {
//Reduce the opacity of all but the neighbouring nodes
d = d3.select(this).node().__data__;
node.style("opacity", function(o) {
return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
});
link.style("opacity", function(o) {
return d.index == o.source.index | d.index == o.target.index ? 1 : 0.1;
});
//Reduce the op
toggle = 1;
} else {
//Put them back to opacity=1
node.style("opacity", 1);
link.style("opacity", 1);
toggle = 0;
}
}
//end highlight nodes
function popup(name, time) {
$("#show" + name).fadeIn()
console.log("around")
$("#nothesis").fadeIn()
$("#thesis").fadeIn()
$("#bio" + name).fadeIn()
var dada = document.getElementById("text" + name);
dada.className += " active";
dada.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
};
});