'
+ if( n.ip_version )
+ info += '
IP version: '
+ + n.ip_version + '
';
+ if( n.select_type )
+ info += '
Node Type: '
+ + n.select_type + '
';
+ if( n.request_type )
+ info += '
Request Type: '
+ + n.request_type + '
';
+ if( n.select_comm_proto )
+ info += '
Image: ' + n.select_image
+ + 'Communication Protocol: '
+ + n.select_comm_proto + '
';
+ if( n.links ) {
+ info += '
';
+ }
+ return info;
+ }
+
+
+ // *************************************************************************
+
+////////// d3.json(
+////////// 'movie-network-25-7-3.json',
+////////// function(data) {
+ var data=Network;
+ // Declare the variables pointing to the node & link arrays
+ var nodeArray = data.nodes;
+ var linkArray = data.links;
+ //alert(linkArray);
+ //alert(nodeArray);
+ minLinkWeight =
+ Math.min.apply( null, linkArray.map( function(n) {return n.weight;} ) );
+ maxLinkWeight =
+ Math.max.apply( null, linkArray.map( function(n) {return n.weight;} ) );
+
+ // Add the node & link arrays to the layout, and start it
+ force
+ .nodes(nodeArray)
+ .links(linkArray)
+ .start();
+
+ // A couple of scales for node radius & edge width
+ var node_size = d3.scale.linear()
+ .domain([5,10]) // we know score is in this domain
+ .range([1,16])
+ .clamp(true);
+ var edge_width = d3.scale.pow().exponent(8)
+ .domain( [minLinkWeight,maxLinkWeight] )
+ .range([1,3])
+ .clamp(true);
+
+ /* Add drag & zoom behaviours */
+ svg.call( d3.behavior.drag()
+ .on("drag",dragmove) );
+ svg.call( d3.behavior.zoom()
+ .x(xScale)
+ .y(yScale)
+ .scaleExtent([1, 6])
+ .on("zoom", doZoom) );
+
+ // ------- Create the elements of the layout (links and nodes) ------
+
+ var networkGraph = svg.append('svg:g').attr('class','grpParent');
+
+ // links: simple lines
+ var graphLinks = networkGraph.append('svg:g').attr('class','grp gLinks')
+ .selectAll("line")
+ .data(linkArray, function(d) {return d.source.id+'-'+d.target.id;} )
+ .enter().append("line")
+ .style('stroke-width', function(d) { return edge_width(d.weight);} )
+ .attr("class", "link");
+
+ // nodes: an SVG circle
+ var graphNodes = networkGraph.append('svg:g').attr('class','grp gNodes')
+ .selectAll("circle")
+ .data( nodeArray, function(d){return d.label} )
+ .enter().append("svg:circle")
+ .attr('id', function(d) { return "c" + d.index; } )
+ .attr('class', function(d) { return 'node level'+d.level;} )
+ .attr('r', function(d) { return node_size(d.score); } )
+ .attr('pointer-events', 'all')
+ //.on("click", function(d) { highlightGraphNode(d,true,this); } )
+ .on("click", function(d) { showMoviePanel(d); } )
+ .on("mouseover", function(d) { highlightGraphNode(d,true,this); } )
+ .on("mouseout", function(d) { highlightGraphNode(d,false,this); } );
+
+ // labels: a group with two SVG text: a title and a shadow (as background)
+ var graphLabels = networkGraph.append('svg:g').attr('class','grp gLabel')
+ .selectAll("g.label")
+ .data( nodeArray, function(d){return d.label} )
+ .enter().append("svg:g")
+ .attr('id', function(d) { return "l" + d.index; } )
+ .attr('class','label');
+
+ shadows = graphLabels.append('svg:text')
+ .attr('x','-2em')
+ .attr('y','-.3em')
+ .attr('pointer-events', 'none') // they go to the circle beneath
+ .attr('id', function(d) { return "lb" + d.index; } )
+ .attr('class','nshadow')
+ .text( function(d) { return d.label; } );
+
+ labels = graphLabels.append('svg:text')
+ .attr('x','-2em')
+ .attr('y','-.3em')
+ .attr('pointer-events', 'none') // they go to the circle beneath
+ .attr('id', function(d) { return "lf" + d.index; } )
+ .attr('class','nlabel')
+ .text( function(d) { return d.label; } );
+
+
+ /* --------------------------------------------------------------------- */
+ /* Select/unselect a node in the network graph.
+ Parameters are:
+ - node: data for the node to be changed,
+ - on: true/false to show/hide the node
+ */
+ function highlightGraphNode( node, on )
+ {
+ //if( d3.event.shiftKey ) on = false; // for debugging
+
+ // If we are to activate a movie, and there's already one active,
+ // first switch that one off
+ if( on && activeMovie !== undefined ) {
+ highlightGraphNode( nodeArray[activeMovie], false );
+ }
+
+ // locate the SVG nodes: circle & label group
+ circle = d3.select( '#c' + node.index );
+ label = d3.select( '#l' + node.index );
+
+ // activate/deactivate the node itself
+ circle
+ .classed( 'main', on );
+ label
+ .classed( 'on', on || currentZoom >= SHOW_THRESHOLD );
+ label.selectAll('text')
+ .classed( 'main', on );
+
+ // activate all siblings
+ Object(node.links).forEach( function(id) {
+ d3.select("#c"+id).classed( 'sibling', on );
+ label = d3.select('#l'+id);
+ label.classed( 'on', on || currentZoom >= SHOW_THRESHOLD );
+ label.selectAll('text.nlabel')
+ .classed( 'sibling', on );
+ } );
+
+ // set the value for the current active movie
+ activeMovie = on ? node.index : undefined;
+ }
+
+
+ /* --------------------------------------------------------------------- */
+ /* Show the details panel for a movie AND highlight its node in
+ the graph. Also called from outside the d3.json context.
+ Parameters:
+ - new_idx: index of the movie to show
+ - doMoveTo: boolean to indicate if the graph should be centered
+ on the movie
+ */
+ selectNode = function( new_idx, doMoveTo ) {
+
+ // do we want to center the graph on the node?
+ doMoveTo = doMoveTo || false;
+ if( doMoveTo ) {
+ s = getViewportSize();
+ width = s.w
=SHOW_THRESHOLD )
+ svg.selectAll("g.label").classed('on',true);
+ else if( currentZoom>=SHOW_THRESHOLD && newZoom
' +
+ '
';
+
+ info += '