Skip to content
Snippets Groups Projects
Commit b9eb1143 authored by Mohamed feroz khan D's avatar Mohamed feroz khan D
Browse files

Syncing with Github project repo

parent 39d27651
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Assets/Temporal_Graph/Bitcoin/Bitcoin_Code_Visualisation/my_temporal_network_sample_sicp.html 0 → 100644
+ 378
− 0
View file @ b9eb1143
<!DOCTYPE html>
<html><body>
<style>
text.active_xFlGNRtq {
text-anchor: middle;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
fill: #706f6f;
opacity: 1.0;
}
text.hidden_xFlGNRtq {
opacity: 0;
}
line.tlinks_xFlGNRtq {
stroke: #cccccc;
stroke-opacity: 0.4;
stroke-width: 2;
}
line.active_xFlGNRtq {
stroke: #ff0000;
stroke-opacity: 1.0;
stroke-width: 4;
}
line.hidden_xFlGNRtq {
stroke: rgb(255, 255, 255);
stroke-opacity: 0;
stroke-width: 0px;
}
circle.active_xFlGNRtq {
stroke: #222;
fill: #ff0000;
fill-opacity: 1;
stroke-width: 2px;
}
circle.tnodes_xFlGNRtq {
fill: #cccccc;
stroke: #222;
fill-opacity: 1;
stroke-width: 1.5px;
}
</style>
<svg width="400" height="400" id="xFlGNRtq">
<text x="10" y="20" font-family="sans-serif" font-size="14px" fill="red"
id='xFlGNRtq_time_txt'>t</text>
<text x="120" y="20" font-family="sans-serif" font-size="14px" fill="#9999bb" style="cursor: pointer"
id='xFlGNRtq_start_txt'>stop</text>
<text x="170" y="20" font-family="sans-serif" font-size="14px" fill="#9999bb" style="cursor: pointer"
id='xFlGNRtq_restart_txt'>restart</text>
</svg>
<script charset="utf-8" src="https://d3js.org/d3.v4.min.js"></script>
<script charset="utf-8">
// Load via requireJS if available (jupyter notebook environment)
try {
// Problem: require.config will raise an exception when called for the second time
require.config({
paths: {
//d3: "https://d3js.org/d3.v4.min"
d3: "https://d3js.org/d3.v4.min.js".replace(".js", "")
}
});
console.log("Detected requireJS");
}
catch(err){
// a reference error indicates that requireJS does not exist.
// other errors may occur due to multiple calls to config
if (err instanceof ReferenceError){
console.log("Detected no requireJS");
// Helper function that waits for d3js to be loaded
require = function require(symbols, callback) {
var ms = 5;
window.setTimeout(function(t) {
if (window[symbols[0]])
callback(window[symbols[0]]);
else
window.setTimeout(arguments.callee, ms);
}, ms);
}
}
}
require(["d3"], function(d3) {
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
var svg = d3.select("#xFlGNRtq"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 15,
color = d3.scaleOrdinal(d3.schemeCategory20b);
var temporal_net = {"nodes": [{"id": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "group": 1}, {"id": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "group": 1}, {"id": "bc1qymkm9ltk6xgk2lauspf0952q79a06ayswelj9v", "group": 1}, {"id": "n_3PL7jn4su3bHFd5fHjw9pR5m43yhve3hn8", "group": 1}, {"id": "n_3Bcg83dPQpEYKmiyTyUbj4LjvuKkHMfkN7", "group": 1}, {"id": "n_3AFM3nuHJwVqPw4SuAKKwttiSs6byM1DKm", "group": 1}, {"id": "n_3GL5VCscmw3Xqj4AkGHB1TK6pKBuZ5qAzg", "group": 1}, {"id": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "group": 1}, {"id": "n_3K24pXcBVR2PEyGt55GHjugHxjVyMDhUiq", "group": 1}, {"id": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "group": 1}, {"id": "n_1DYyg2cE5krYDjvWSKJtXb19fP3vQE43dR", "group": 1}, {"id": "n_1DBzP5sLa2ARufoBxYAJsdXNe3hQzuXcix", "group": 1}, {"id": "n_3HKXmBq7Ftij1fxAEuz1nYuexaCiTWubdF", "group": 1}, {"id": "n_3Mi5jQczRxWGAXUdovtDY9tnAeirwA72yr", "group": 1}, {"id": "n_3KQ6EvT7D6VN5F1JcDpm5sNWeU6rLKdGjZ", "group": 1}], "links": [{"source": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 1}, {"source": "bc1qymkm9ltk6xgk2lauspf0952q79a06ayswelj9v", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 1}, {"source": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 2}, {"source": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "target": "bc1qymkm9ltk6xgk2lauspf0952q79a06ayswelj9v", "width": 1, "time": 2}, {"source": "n_3PL7jn4su3bHFd5fHjw9pR5m43yhve3hn8", "target": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "width": 1, "time": 3}, {"source": "n_3PL7jn4su3bHFd5fHjw9pR5m43yhve3hn8", "target": "n_3Bcg83dPQpEYKmiyTyUbj4LjvuKkHMfkN7", "width": 1, "time": 3}, {"source": "n_3AFM3nuHJwVqPw4SuAKKwttiSs6byM1DKm", "target": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "width": 1, "time": 3}, {"source": "n_3AFM3nuHJwVqPw4SuAKKwttiSs6byM1DKm", "target": "n_3Bcg83dPQpEYKmiyTyUbj4LjvuKkHMfkN7", "width": 1, "time": 3}, {"source": "n_3GL5VCscmw3Xqj4AkGHB1TK6pKBuZ5qAzg", "target": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "width": 1, "time": 4}, {"source": "n_3GL5VCscmw3Xqj4AkGHB1TK6pKBuZ5qAzg", "target": "n_3PL7jn4su3bHFd5fHjw9pR5m43yhve3hn8", "width": 1, "time": 4}, {"source": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 7}, {"source": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 7}, {"source": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 7}, {"source": "n_3K24pXcBVR2PEyGt55GHjugHxjVyMDhUiq", "target": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "width": 1, "time": 8}, {"source": "n_3K24pXcBVR2PEyGt55GHjugHxjVyMDhUiq", "target": "n_3GL5VCscmw3Xqj4AkGHB1TK6pKBuZ5qAzg", "width": 1, "time": 8}, {"source": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "target": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "width": 1, "time": 9}, {"source": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "target": "n_3AFM3nuHJwVqPw4SuAKKwttiSs6byM1DKm", "width": 1, "time": 9}, {"source": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "target": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "width": 1, "time": 10}, {"source": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "target": "n_3K24pXcBVR2PEyGt55GHjugHxjVyMDhUiq", "width": 1, "time": 10}, {"source": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "target": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "width": 1, "time": 10}, {"source": "n_34MJDmtAGesavCJoqSVg141mv9dQArtx2t", "target": "n_3K24pXcBVR2PEyGt55GHjugHxjVyMDhUiq", "width": 1, "time": 10}, {"source": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 14}, {"source": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 14}, {"source": "bc1qha6tazesy5yp7quqzahy8pe7cn7cjj0hmtm2dt", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 14}, {"source": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 15}, {"source": "bc1qymkm9ltk6xgk2lauspf0952q79a06ayswelj9v", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 15}, {"source": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "target": "bc1qer54w4up6ymeeh7z48a34yahnd9v9lj20r8lgq", "width": 1, "time": 16}, {"source": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "target": "bc1qymkm9ltk6xgk2lauspf0952q79a06ayswelj9v", "width": 1, "time": 16}, {"source": "n_1DYyg2cE5krYDjvWSKJtXb19fP3vQE43dR", "target": "n_1DBzP5sLa2ARufoBxYAJsdXNe3hQzuXcix", "width": 1, "time": 18}, {"source": "n_3HKXmBq7Ftij1fxAEuz1nYuexaCiTWubdF", "target": "n_1DYyg2cE5krYDjvWSKJtXb19fP3vQE43dR", "width": 1, "time": 19}, {"source": "n_3HKXmBq7Ftij1fxAEuz1nYuexaCiTWubdF", "target": "n_3Mi5jQczRxWGAXUdovtDY9tnAeirwA72yr", "width": 1, "time": 19}, {"source": "n_3KQ6EvT7D6VN5F1JcDpm5sNWeU6rLKdGjZ", "target": "n_1DYyg2cE5krYDjvWSKJtXb19fP3vQE43dR", "width": 1, "time": 19}, {"source": "n_3KQ6EvT7D6VN5F1JcDpm5sNWeU6rLKdGjZ", "target": "n_3Mi5jQczRxWGAXUdovtDY9tnAeirwA72yr", "width": 1, "time": 19}, {"source": "n_3PL7jn4su3bHFd5fHjw9pR5m43yhve3hn8", "target": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "width": 1, "time": 21}, {"source": "n_3PL7jn4su3bHFd5fHjw9pR5m43yhve3hn8", "target": "n_3Bcg83dPQpEYKmiyTyUbj4LjvuKkHMfkN7", "width": 1, "time": 21}, {"source": "n_3AFM3nuHJwVqPw4SuAKKwttiSs6byM1DKm", "target": "bc1qqlqhu85am9ldqsavlw79kd2faq0xw2kr7h5g2g", "width": 1, "time": 21}, {"source": "n_3AFM3nuHJwVqPw4SuAKKwttiSs6byM1DKm", "target": "n_3Bcg83dPQpEYKmiyTyUbj4LjvuKkHMfkN7", "width": 1, "time": 21}]};
var tsperframe = 1;
var msperframe = 2000;
var look_ahead = 2;
var look_behind = 2;
var hidden_link_strength = 0;
var active_link_strength = 0.2;
// create a dictionary with edges indexed by timestamps
var edgesbytime = {};
var time_stamps = temporal_net.links.map(link => link['time']);
time_stamps.forEach(function(t){
edgesbytime[t] = [];
});
// extract static links
var links = [];
var links_by_id = {};
temporal_net.links.forEach(function(link){
id = String(link.source + '-' + link.target);
edgesbytime[link.time].push(id);
l = {
'source': link.source,
'target': link.target,
'id': id,
'strength': 0
};
if (!contains(links, l)){
links.push(l);
links_by_id[l.id] = l;
}
});
var mintime = d3.min(time_stamps);
var maxtime = d3.max(time_stamps);
var run_status = true;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody().strength(-30).distanceMax(200))
.force("repelForce", d3.forceManyBody().strength(-100).distanceMax(200))
.force("center", d3.forceCenter(width / 2, height / 2))
.alphaTarget(0.1)
.on("tick", ticked);
var g = svg.append("g")
.attr("class", "everything");
var link = g.append("g")
.attr("class", "tlinks_xFlGNRtq")
.selectAll("line")
.data(links, function(d){return d.id;})
.enter().append("line")
.attr("id", function(d) { return d.id; });
var node_g = g.append("g").attr("class", "tnodes_xFlGNRtq")
.selectAll("circle")
.data(temporal_net.nodes, function(d){return d.id;})
.enter()
.append("g");
var node = node_g.append("circle")
.attr('id', function(d) { return d.id; })
.attr("r", radius)
// .attr("fill", function(d) { return color(d.group); })
.attr("class", "tnodes_xFlGNRtq")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var text = node_g.append("text")
.attr("x", [0, 5][0])
.attr("y", [0, 5][1])
.attr("id", function(d) {return d.id; })
.attr("class", "active_xFlGNRtq")
.text(function(d) { return d.id; });
node.append("title").text(function(d) { return d.id; });
var zoom_handler = d3.zoom()
.on("zoom", zoom_actions);
zoom_handler(svg);
// build mapping to DOM objects once
// for performance reasons
var time_txt = d3.select('#xFlGNRtq_time_txt');
var edges_to_dom = {};
var nodes_to_dom = {};
links.forEach(function(link){
edges_to_dom[link.id] = d3.select('#xFlGNRtq #'+link.id);
});
temporal_net.nodes.forEach(function(n){
nodes_to_dom[n.id] = d3.select('#xFlGNRtq #'+n.id);
});
// attach event handlers
d3.select('#xFlGNRtq_start_txt').on("click", pauseAnimation);
d3.select('#xFlGNRtq_restart_txt').on("click", restartAnimation);
simulation.nodes(temporal_net.nodes).on("tick", ticked);
// simulation.force("link").links(links);
// start animation
var time = mintime;
var intervl = setInterval(time_step, msperframe);
console.log('Started animation.')
// animates one time step
function time_step() {
time_txt.html('t = ' + time);
// stop animation
if(time > maxtime){
run_status = false;
clearInterval(intervl);
console.log('Stopped animation.')
}
// reset all links to hidden
for (id in edges_to_dom){
try {
// edges_to_dom[l.id].attr('class', 'links');
links_by_id[id].strength = hidden_link_strength;
edges_to_dom[id].attr('class', 'hidden_xFlGNRtq');
}
catch(err){
console.log('Error: Could not find DOM object with id ' + id);
}
}
// reset all nodes to inactive
for (id in nodes_to_dom) {
try{
nodes_to_dom[id].attr("class", "tnodes_xFlGNRtq");
}
catch(err){
console.log('Error: Could not find DOM object with id ' + id);
}
}
// change nodes and links in current time slice
for (ti=Math.max(mintime, time-look_behind); ti<=time+look_ahead; ti++) {
if (ti in edgesbytime) {
edgesbytime[ti].forEach(function(id){
links_by_id[id].strength = active_link_strength;
// links that are currently active
if (ti >= time-tsperframe+1 && ti <= time) {
node_ids = id.split('-');
try {
edges_to_dom[id].attr('class', 'active_xFlGNRtq').moveToFront();
}
catch(err){
console.log('Error: Could not find DOM link with id ' + id);
}
try {
nodes_to_dom[node_ids[0]].attr('class', 'active_xFlGNRtq').moveToFront();
}
catch(err){
console.log('Error: Could not find DOM node with id ' + node_ids[0]);
}
try {
nodes_to_dom[node_ids[1]].attr('class', 'active_xFlGNRtq').moveToFront();
}
catch(err){
console.log('Error: Could not find DOM node with id ' + node_ids[1]);
}
}
// links in current time slice that are not active
else{
edges_to_dom[id].attr('class', 'tlinks_xFlGNRtq');
}
});
}
}
simulation.force('link', d3.forceLink()
.id(link => link.id)
.strength(link => link.strength));
simulation.force("link").links(links);
text.moveToFront();
time += tsperframe;
}
function pauseAnimation() {
if (run_status) {
run_status = false;
clearInterval(intervl);
d3.select('#xFlGNRtq_start_txt').html('start');
console.log('Paused animation.')
}
else {
intervl = setInterval(time_step, msperframe);
run_status = true;
d3.select('#xFlGNRtq_start_txt').html('stop');
console.log('Resumed animation.')
}
}
function zoom_actions(){
g.attr("transform", d3.event.transform)
}
function restartAnimation() {
if (run_status)
clearInterval(intervl);
time = mintime;
time_txt.html('t = ' + time);
d3.select('#xFlGNRtq_start_txt').html('stop');
run_status = true;
intervl = setInterval(time_step, msperframe);
console.log('Restarted animation.')
}
function ticked() {
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; });
text.attr("transform", transform);
text.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
function dragstarted(d) {
if (!d3.event.active)
simulation.alphaTarget(0.2).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active)
simulation.alphaTarget(0.2);
d.fx = null;
d.fy = null;
}
function contains(array, obj) {
var i = array.length;
while (i--) {
if (array[i] === obj) {
return true;
}
}
return false;
}
});
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment