Alchemy.js works out of the box, and is easily customizable.

alchemy.begin(yourConfig);

Contribute!

Want to include Alchemy.js in your project? To learn how to get Alchemy.js up and running in your project, check out the Quick Start docs.

Want to contribute? For information on contributing, check out the contributing section of our docs.

Configuration and HTML

                        
<html>
<head>
  <link rel="stylesheet" href="styles/vendor.css"/>
  <link rel="stylesheet" href="styles/alchemy.css"/>
</head>
<body>
  <div class="alchemy" id="alchemy"></div>

  <script src="scripts/vendor.js"></script>
  <script src="scripts/alchemy.js"></script>
  <script type="text/javascript">

    var config = {
      dataSource: 'data/contrib.json',
      graphHeight: 260,
      graphWidth: 300,
      
      linkDistance: function(){ return 40; },

      nodeTypes: {"node_type": ["Maintainer", "Contributor"]},
      caption: function(node){ return node.caption; }
      };

    alchemy.begin(config)
  </script>
</body>
</html>

Contributor Data

                        
{
    "comment": "AlchemyJS contributors",
    "nodes": [
        {
            "id": 0,
            "caption": "AlchemyJS",
            "role": "project",
            "node_type": "root"
        },
        {
            "id": 1,
            "caption": "Huston Hedinger",
            "github": "hustonhedinger",
            "role": "Maintainer",
            "fun_fact": "hooligan"
        },
        {
            "id": 2,
            "caption": "Grace Andrews",
            "github": "Grace-Andrews",
            "role": "Maintainer",
            "fun_fact": "was born left handed, now right handed."
        },
        {
            "id": 3,
            "caption": "Isabella Jorissen",
            "github": "ifjorissen",
            "role": "Maintainer",
            "fun_fact": "knows a lot of digits of pi. Also loves pie."
        },
        {
            "id": 4,
            "caption": "Matt Cox",
            "github": "MDCox",
            "role": "Maintainer",
            "fun_fact": "is not fun"
        },
        {
            "id": 5,
            "caption": "Dave Torbeck",
            "github": "DaveTorbeck",
            "role": "Contributor",
            "fun_fact": ""
        }
    ],
    "edges": [
        {
            "source": 1,
            "target": 0,
            "caption": "Maintains"
        },
        {
            "source": 2,
            "target": 0,
            "caption": "Maintains"
        },
        {
            "source": 3,
            "target": 0,
            "caption": "Maintains"
        },
        {
            "source": 4,
            "target": 0,
            "caption": "Often Breaks"
        },
        {
            "source": 5,
            "target": 0,
            "caption": "contributes"
        }
    ]
}