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.

Tica

GraphMl viewer for network visualization example – Forbear

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

Thither

web.archive.org/web/20190915080015/http://www.svgopen.org:80/… I just leave it here – Slothful

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

Plumlee

Is there any open-source alternative? – Dorothi

This is a horribly expensive product for a hobby or a research project. As far as I can tell, there are no discounts for use in OpenSource projects. – Ringler

@RolandTepp and yours is a horribly wrong comment. For one, this was not a requirement of the OP. But more importantly for you, there is academic licensing which is massively discounted and right now due to the pandemic it is even free for many academic projects: yworks.com/fightcorona – Plumlee

Does academic license cover personal hobby and potential future open source usage? – Ringler

@RolandTepp That depends. Maybe, maybe not. IANAL and SO is not the right place to discuss this:-) - please contact the sales team at yWorks. – Plumlee