Graphml javascript library to draw in web page [closed]

Question

I have a GraphML file, I have to display it on a webpage as well as change the display properties using JavaScript (like changing the color of the node, edge etc).

Is it possible?

Please let me know, if there is any JavaScript library to load, parse and draw GraphML on a web page.

Answer 1

An XSLT stylesheet which takes GraphML as input and outputs SVG can be called using the JavaScript XSLT API. For example:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg">
 <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
 <xsl:template match="graph">
   <!-- when finding a 'graph' element, create the 'svg' root and its 'defs' section -->
   <svg>
     <defs>
       <marker id="arrow" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto">
         <path fill="black" d="M0 0 10 5 0 10z"/>
       </marker>
     </defs>
     <!-- for each 'node' create a 'g' element with its contents -->
     <xsl:for-each select="node">
       <g>
         <rect width="100" height="100" fill="silver"/>
         <text style="font-size:24;font-weight:bold">
           <xsl:value-of select="@id"/>
         </text>
       </g>
     </xsl:for-each>
     <!-- for each 'edge' create a 'line' with the arrow if it is a 'directed' edge -->
     <xsl:for-each select="edge">
       <line>
         <xsl:if test="not(@directed='false')">
           <xsl:attribute name="style">marker-end:url(#arrow)</xsl:attribute>
         </xsl:if>
       </line>
     </xsl:for-each>
   </svg>
 </xsl:template>
</xsl:stylesheet>

References

• GraphML to SVG using XSLT
• Mozilla JavaScript XSLTProcessor API
• Microsoft JavaScript MSXML transform API
• Using XSLTProcessor programatically in IE to minimize client-server bandwith
• Using AIR for XSLT Processing

Answer 2

A serious contender for this task (at least in a commercial context) would be the yFiles for HTML Javascript Graph Drawing Library:

• its main graph exchange format is GraphML (see this live GraphML demo)
• if your GraphML uses a specific "dialect" (GraphML as such does not have a standard that describes how to specify visualization details like coordinates, colors, even labels), the GraphML parsing process can be customized easily to parse more GraphML extensions.
• if you GraphML does not contain coordinates, but just the structure of the graph, you can use layout algorithms to automatically calculate a nice layout dynamically before the graph is displayed
• the library comes with full editing capabilities, so you can modify the graph both programmatically as well as interactively using mouse and touch gestures

Full disclosure: I work for the company that creates that library, but I do not represent my employer on SO