Graph libraries – Alchemy.js

Alchemy.js is a library developed by graphAlchemist (site defunct). The documentation could be better and more detailed but it works. Like many other libraries it leverages other libraries to do “the basic stuff”. In this case it is it depends on:

Alchemy uses GraphJSON (similar to GeoJSON) as input format, which is quite nice but undocumented since the website doesn’t exist any more. Looks as if support for it ceded with the graphAlchemist web site …

How does it look?

Like all demos I’ll show it’s a fully functional mini demo, so you can drag the nodes around. I’ll present excerpts of the code to explain. The complete code can be found in a GitHub-Mark-32px GitHub repository.

How does it work?

Our example consists of an index.html file, a GraphJSON data file and the library stuff. In the index.html we first load the stuff needed:

The body contains a div to put the graph in and the include for the base library itself:

Finally there’s the code producing the graph:

As you can see, nearly everything is done in a configuration object. Line 2 defines the source of the GraphJSON file, lines 3 & 4 set the dimensions of the SVG element. The setting of nodeCaptionsOnByDefault  in line 6 switches on the display of the node titles. Otherwise they would only show up when hovering with the mouse. Lines 7 to 9 define a callback function defining what to display as a caption / title. Lines 10 to 15 define valid values for grouping edges and nodes. Nodes are grouped by the role attribute, edges by caption. Lines 16 to 37 define how these groups of edges and nodes should be formatted. There are other, more direct ways to style a graph in Alchemy.js but I wanted to show the (for me) most elegant way. Finally line 39 kicks off the rendering of the graph with the given configuration.


  1. Thanks for the post. This did get me further along in trying to get this running – it wasn’t obvious at all that d3 and lodash need to be included for this to run.
    Nonetheless, after many hours I still only get an error,
    TypeError: d3.behavior is undefined.
    It seems like this library is just too poorly documented to be useful. It shouldn’t take a week to run the most basic example (not to mention, why do even their ‘basic’ examples use hundreds of nodes ?)


      • It seems, this is caused by drag & drop actions. This may be caused by an older version of D3. At least that is what is pointed out in several postings from a Google search.


Leave a Reply

Required fields are marked *.