Hierplane is an open-source Javascript library for visualizing and exploring trees.
Node types are easily distinguished through style cues and custom attribute badging.
Links between nodes contain labels and show clear direction between parent and child.
Hierplane offers an intuitive way to visualize verb, noun, and modifier sequences.
For linguistic structures, users can highlight relationships between nodes and text passages.
Common patterns can be reinforced through use of directional children (left, right, down, and inside).
Hierplane can sit on top of any stack and is driven by a simple JSON-based tree-rendering language.
For detailed instructions and code examples, check out the Hierplane documentation on GitHub.
Add the following <script> tag to your web page
<script src="//unpkg.com/hierplane/dist/static/hierplane.min.js"></script>Add the following styles to your web page, likely in the <head /> tag
<link rel="stylesheet" type="text/css" href="//unpkg.com/hierplane/dist/static/hierplane.min.css">Then invoke hierplane.renderTree(tree[, target]) as is desired.
tree object the tree to visualize.target string an optional css selector, specifying the element into which the visualization should be rendered. If not specified, the tree is rendered into the <body />.Install the hierplane dependency.
npm install --save hierplaneThen, simply import the Tree component, and pass it the tree you'd like to render:
import { Tree } from 'hierplane';
import React from 'react';
const aTree = { ... };
class TreeContainer extends React.PureComponent {
render() {
return <Tree tree={aTree} />;
}
}Hierplane is maintained by the nonprofit Allen Institute for Artificial Intelligence (AI2). Originally built as an internal tool for AI2’s Project Euclid, we decided to open-source Hierplane in keeping with our mission: AI for the common good.