Spatial Networks - Graph Analysis and Visualization - page 467

Building a Link Rose Diagram
Totrythisyourself, download theexample package forthischapter from the
Supplementary Materials provided on this topic's companion website. To
begin creating the link rose diagram, export the previous graph from Gephi
in GraphML format. Following a model similar to those in earlier chapters,
create a basic HTML page to host the visualization, as shown here:
<! DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >Inter-State Transport</ title >
< script src = "jquery.js" ></ script >
< script src = "raphael.js" ></ script >
< script src = "aperture.js" ></ script >
<!-- container styling -->
< style >
body {
margin : 0 ;
position : absolute ;
width : 100% ;
height : 100% ;
}
</ style >
</ head >
< body >
< script src = "transport.js" ></ script >
</ body >
</ html >
Next, create the transport.js JavaScript file referenced previously. Your
first statements will load the GraphML file and parse it into object form. In
the process, node positions will be transformed to fit the screen and flip the
y-axis from bottom-up to top-down. Subsequent steps will be to compute
the rose summaries for each of the nodes in preparation for visualization.
jQuery.get( "transport.graphml" , function (data) {
// parse the graph ml file