Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Graphx Visualization

I am looking for a way to visualize the graph constructed in Spark's Graphx. As far as I know Graphx doesn't have any visualization methods so I need to export the data from Graphx to another graph library, but I am stuck here. I ran into this website: https://lintool.github.io/warcbase-docs/Spark-Network-Analysis/ but it didn't help. Which library I should use and how to export the graph.

like image 680
Saygın Doğu Avatar asked Aug 03 '16 05:08

Saygın Doğu


2 Answers

If you're using grpahFrames, then I've modified the code provided by @Karol Sudol in his answer for GraphFrames:

    def drawGraph[vertices:ClassTag,relations:ClassTag](g:GraphFrame) = {

    val u = java.util.UUID.randomUUID
    val v = g.vertices.select("id")


    val vertexes: Array[String] = g.vertices.select("id").rdd.map(x => x(0).toString).collect()

    val edges: Array[Array[String]] = g.edges.select("src", "dst").rdd.map(r => Array(r(0).toString, r(1).toString)).collect()

    val edgeCreation = edges.map{ edgeArray =>
   "{source:nodes["+ vertexes.indexOf(edgeArray(0).trim()) +"],target:nodes["+ vertexes.indexOf(edgeArray(1).trim())+"]}"
  }


  println("""
    <!DOCTYPE html>
     <html lang="en">
     <head>
     <meta charset="utf-8">
     <title>Graph</title>
     <div id='a""" + u + """' style='width:960px; height:500px'></div>
    <style>
    .node circle { fill: gray; }
    .node text { font: 10px sans-serif;        
    text-anchor: middle;
    fill: white; }
    line.link { stroke: gray;
    stroke-width: 1.5px; }
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
    <script>
    var width = 960, height = 500;
    var svg = d3.select("#a""" + u + """").append("svg")
    .attr("width", width).attr("height", height);
    var nodes = [""" + vertexes.map("{id:\"" + _ + "\"}").mkString(",") + """];
    var links = ["""+ edgeCreation.mkString(",") + """];
    var link = svg.selectAll(".link").data(links);
    link.enter().insert("line", ".node").attr("class", "link");
    var node = svg.selectAll(".node").data(nodes);
    var nodeEnter = node.enter().append("g").attr("class", "node")
    nodeEnter.append("circle").attr("r", 8);
    nodeEnter.append("text").attr("dy", "0.35em")
     .text(function(d) { return d.id; });
    d3.layout.force().linkDistance(50).charge(-200).chargeDistance(300)
    .friction(0.95).linkStrength(0.5).size([width, height])
    .on("tick", function() {
    link.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; });
    node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
    });
    }).nodes(nodes).links(links).start();
    </script>
    </body>
    </html>
     """)

}
like image 182
Nav Avatar answered Sep 28 '22 03:09

Nav


So you can do something like this

  1. Save to gexf (graph interchange format) Code from Manning | Spark GraphX in Action
def toGexf[VD,ED](g:Graph[VD,ED]) : String = {
    "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" +
    "<gexf xmlns=\"http://www.gexf.net/1.2draft\" version=\"1.2\">\n" +
    "  <graph mode=\"static\" defaultedgetype=\"directed\">\n" +
    "    <nodes>\n" +
    g.vertices.map(v => "      <node id=\"" + v._1 + "\" label=\"" +
                        v._2 + "\" />\n").collect.mkString +
    "    </nodes>\n" +
    "    <edges>\n" +
    g.edges.map(e => "      <edge source=\"" + e.srcId +
                     "\" target=\"" + e.dstId + "\" label=\"" + e.attr +
                     "\" />\n").collect.mkString +
    "    </edges>\n" +
    "  </graph>\n" +
    "</gexf>"
}
  1. Use the GEXF plugin in linkurious.js to load the file

Example: http://gregroberts.github.io

enter image description here

like image 45
oluies Avatar answered Sep 28 '22 04:09

oluies