Interactive Brain Graph Visualization (6): force-directed layout with position information

Interactive Brain Graph Visualization (6): force-directed layout with position information

Note: All the codes are available in my Github: https://github.com/astro1860/visualization_project/tree/master/brain_opacity 

The demo of this visualization is here: http://www.luhangxin.info/uncategorized/brain_vis_pos/ ‎

The force-directly layout placed the position of nodes using Verlet integration and applied a quadtree to accelerate charge interaction using Barnes-Hut approximation. As our json file included the position data, we would like to figure out a way place the node with the position data. Compared to the simple layout we developed previously, we would like to add more features in this layout:

- Position of nodes represents x,y coordinates in the json file.

- Labels of nodes are visible.

- Colored nodes representing eigenvector values

- Opacity effect appears upon mouseover of a node

1. Position visualization

As a static layout is preferred, we should set the node attribute fixed to be true:

 node.attr("fixed",true)

Moreover, the force configuration is nearly same as force-directed layout except that we would like to return the position data from our data instead of calculated by d3.js. We defined a tick function, returning positions of circle elements.

 function tick() {
link.attr("x1", function(d) { return d.source.xaxis*5; })
.attr("y1", function(d) { return d.source.yaxis*5; })
.attr("x2", function(d) { return d.target.xaxis*5; })
.attr("y2", function(d) { return d.target.yaxis*5; });
gnodes.attr("transform", function(d) {
return 'translate(' + [d.xaxis*5, d.yaxis*5] + ')'; });
}

We called this function when bounding the json file and initializing force function:

d3.json("position_graph.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.on("tick", tick)
.start();

2. Labels visualization

We applied div techniques to visualize labels. Firstly we created an element called “gnodes” and appended “circle” and “text”, which are nodes and names of brain areas respectively. For the appending of “text”, we returned the name of nodes as the following:

var labels = gnodes.append("text")
.text(function(d) { return d.name; })

3. colored nodes visualization

We applied linear scales upon eigenvectors by designing a color scale. This scale called d3.scale.linear and set the scale’s input domain to [0.03, 0,2], which corresponding to the value of eigenvector from smallest to largest, and set the color range from ["#CC00FF", "#CC0000"] (red to pink)

var color= d3.scale.linear()
.domain([0.03,0.2])
.range(["#CC00FF", "#CC0000"])

Also, in node attribute, we called

node.style("fill", function(d) { return color(d.eigen_cent); })

and applied the linear scale upon d.eigen_cent

4. opacity effect 

We designed a opacity effect upon nodes and links. The connection of a node would appear only when mouseover upon the node.

Firstly, we would like to see if two nodes are connected:

var linkedByIndex = {};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
};

Then we used fade function, making nodes and links faded when they are not connected with the selected node.

function fade(opacity) {
return function(d) {
node.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
labels.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.style("stroke-opacity", opacity).style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
});
};
}

Finally, when we bound the data to nodes, links and text, we appended this attribute:

.call(force.drag).on("mouseover",fade(.1)).on("mouseout", fade(1));

Figure. Visualize with position data

Leave a Reply