Skip to content
Huston Hedinger edited this page Jun 2, 2014 · 19 revisions

Philosophy

Alchemy.js is a graph drawing application, built with d3.

Alchemy.js was built so that developers could easily get up and running with Graph visualization applications, and minimal over head. Additionally, Alchemy.js is built with d3 so that the core application can easily be extended with any of the other features included in d3. You can see an example of how to extend Alchemy here.

Quick Start

  1. Include Alchemy in your app:

    <link rel="stylesheet" href="path/to/alchemy.css">
    ...
    <script type="text/javascript" src="path/to/vendor.js">
    <script type="text/javascript" src="path/to/alchemy.js">

    -OR-

    $ bower install Alchemy --save
    <link rel="stylesheet" href="bower_components/alchemy/alchemy.css">
    ...
    <script type="text/javascript" src="bower_components/alchemy/Alchemy.js">
  2. Alchemy.js consumes GraphJSON, read more about the formate here. Define a data source in your conf file or inline after the Alchemy files e.g:

    <script>
    alchemy.conf = {
        dataSource: "yourGraphJSON.json"
    }
    </script>
  3. Add an Alchemy div to the page:

    <div class="alchemy"></div>
  4. start alchemy from your app:

    alchemy.begin()
  5. Be amazed by your sexy graph visualization.

Clone this wiki locally