Network Visualisation help us to feel how data are interconnect.In Real world we see network links from Corona virus to Outspread ,Communication system to power grip, from Retail sales to online sales planning.As our data are more connected , it important understand the relationship to interdependencies .A network consists of nodes and edges. An edge between two nodes indicates a relationship between both nodes. The weight of this edge indicates how strong this relationship is.
Setting Up to start :
To get start , we need to understand the Library present in the D3 that will create skeleton for the work.
../lib/d3.v5.min.js”
Create a same HTML in the path where we need to start out server to view the network.
To start the server follow the below:
- Open a terminal window.
- Navigate to the directory you want to have the root directory.
- Execute the command to start the server.
- Python 3 —
python -m http.server 8000
Using D3.JS
This file will start with the generic skeleton of calling D3 library. we can manipulate the data with Javascript
<!DOCTYPE html>
<meta charset=”utf-8">
<script type=”text/javascript” src=”../lib/d3.v5.min.js”></script>
Data set Manipulation
I use the dataset of Board games from reddit on the network visualisation.I will be providing the entire link of my code at end of the article.
<script>
d3.dsv(“,”, “board_games.csv”, function(d) {
return {
source: d.source,
target: d.target,
value: +d.value
}
}).then(function(data) {
var links = data;
var nodes = {};
compute the distinct nodes from the links.
The degree of network needs to calculated at each links .
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source,degree:0});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target,degree:0});
link.source[“degree”] += 1;
link.target[“degree”] += 1;
});
let maxDegree = 0;
for (let key of Object.keys(nodes)) {
if (nodes[key].degree > maxDegree) maxDegree = nodes[key].degree;
}
Defining Nodes
We can now create the SVG object- its driven by d3.select and d3.selectall().Nodes indicates a relationship between both nodes. “.on” attribute in D3 will have drag functions .
var node = svg.selectAll(“.node”)
.data(force.nodes())
.enter().append(“g”)
.attr(“class”, “node”)
.call(d3.drag()
.on(“start”, dragstarted)
.on(“drag”, dragged)
.on(“end”, dragended));
Add Circle to Node :
Circle would be drawn in pure svg, using a circle element. Three arguments are required: cx, cy and r for x position, y position and radius respectively.
// add the nodes
node.append(“circle”)
.attr(“r”, function(d){ //scale the radius
return 5+Math.log2(d.degree)*2;})
.style(“fill”, function (d) { //scale the color based on degree
let percent = 800 * (d.degree) / maxDegree;
return d3.rgb(percent, percent, 0); })
.on(“dblclick”,dblclick);
Pinned Nodes
function dblclick(d) {
if (d.fixed == true) { //pinned state
console.log(“pinned”)
d.fixed = false;
d3.select(this)
.style(“fill”, “white”)
.classed(“fixed”, d.fixed = false);//now unpin
}
else { //else not pinned state
console.log(“not pinned”)
d.fixed = true;
d3.select(this)
.style(“fill”, “teal”)
.classed(“fixed”, d.fixed = true);//now pin
}
}//end dbl click
}).catch(function(error) {
console.log(error);
});