Skip to content

Instantly share code, notes, and snippets.

@yrochat
Created May 6, 2015 10:12
Show Gist options
  • Save yrochat/f5edde81dce1ede2d1a1 to your computer and use it in GitHub Desktop.
Save yrochat/f5edde81dce1ede2d1a1 to your computer and use it in GitHub Desktop.
Network Transition v.0.0.1

Contexte

La toute première étape d'un système de visualisation dynamique (temporelle) de réseaux.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Network transition</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//Original data
var dataset = {
nodes: [
{ name: "Adam", x: 300, y: 200, fixed: true, step: [ true, false]},
{ name: "Bob" , x: 325, y: 140, fixed: true, step: [ true, false]},
{ name: "Carrie" , x: 265, y: 150, fixed: true, step: [ true, false]},
{ name: "Donovan", x: 325, y: 250, fixed: true, step: [ true, true]},
{ name: "Edward" , x: 265, y: 250, fixed: true, step: [ true, true]},
{ name: "Felicity", x: 280, y: 100, fixed: true, step: [false, false]},
{ name: "George" , x: 130, y: 145, fixed: true, step: [false, true]},
{ name: "Hannah" , x: 165, y: 95, fixed: true, step: [false, true]},
{ name: "Iris" , x: 225, y: 80, fixed: true, step: [false, true]},
{ name: "Jerry" , x: 265, y: 45, fixed: true, step: [ true, true]}
],
edges: [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 1, target: 5 },
{ source: 2, target: 5 },
{ source: 2, target: 5 },
{ source: 3, target: 4 },
{ source: 5, target: 8 },
{ source: 5, target: 9 },
{ source: 6, target: 7 },
{ source: 7, target: 8 },
{ source: 8, target: 9 }
]
};
// //Initialize a default force layout, using the nodes and edges in dataset
var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w, h])
.linkDistance([50])
.charge([-300])
.start();
//Every time the simulation "ticks", this will be called
force.on("tick", function() {
edges.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; });
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
var colors = d3.scale.category10();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create edges as lines
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
//Create nodes as circles
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d) {
if (d.step[0]) {return "#1f77b4";} else {return "#ff7f0e";}
})
.on("click", function() {
trans();
});
//Coulour transition
var trans = function() {
svg.selectAll("circle")
.transition()
.duration(1000)
.style("fill", function(d) {
if (d.step[1]) {return "#1f77b4";} else {return "#ff7f0e";}
}
);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment