https://github.com/williamtroup/tree.js
🌲 A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.
https://github.com/williamtroup/tree.js
css3 data grid html5 javascript map tree treemap visualization
Last synced: 10 months ago
JSON representation
🌲 A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.
- Host: GitHub
- URL: https://github.com/williamtroup/tree.js
- Owner: williamtroup
- License: mit
- Created: 2024-02-06T15:49:20.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-24T15:41:32.000Z (almost 2 years ago)
- Last Synced: 2025-04-15T22:54:03.842Z (10 months ago)
- Topics: css3, data, grid, html5, javascript, map, tree, treemap, visualization
- Language: JavaScript
- Homepage: https://www.william-troup.com/tree-js/
- Size: 663 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Tree.js
[](https://twitter.com/intent/tweet?text=Tree.js%2C%20a%20free%20JavaScript%data%20tree&url=https://github.com/williamtroup/Tree.js&hashtags=javascript,tree,data)
[](https://www.npmjs.com/package/jtree.js)
[](https://www.nuget.org/packages/jTree.js/)
[](https://github.com/williamtroup/Tree.js/blob/main/LICENSE.txt)
[](https://github.com/williamtroup/Tree.js/discussions)
[](https://william-troup.com/)
>
🌲 A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.
> v0.4.0
What features does Tree.js have?
- Zero-dependencies and extremely lightweight!
- Full API available via public functions.
- Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
- Full CSS theme support (using :root variables).
- Fully configurable per DOM element.
- Toggling data on/off support.
- Customizable tooltips.
- Expand/Contract data items.
- Configurable colors for boxes!
What browsers are supported?
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
What are the most recent changes?
To see a list of all the most recent changes, click [here](docs/CHANGE_LOG.md).
How do I install Tree.js?
You can install the library with npm into your local modules directory using the following command:
```markdown
npm install jtree.js
```
How do I get started?
To get started using Tree.js, do the following steps:
### 1. Prerequisites:
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
```markdown
```
### 2. Include Files:
```markdown
```
### 3. DOM Element Binding:
```markdown
Your HTML.
```
To see a list of all the available binding options you can use for "data-tree-options", click [here](docs/binding/OPTIONS.md).
To see a list of all the available custom triggers you can use for "data-tree-options", click [here](docs/binding/CUSTOM_TRIGGERS.md).
### 4. Finishing Up:
That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
How do I go about customizing Tree.js?
To customize, and get more out of Tree.js, please read through the following documentation.
### 1. Public Functions:
To see a list of all the public functions available, click [here](docs/PUBLIC_FUNCTIONS.md).
### 2. Configuration:
Configuration options allow you to customize how Tree.js will function. You can set them as follows:
```markdown
$tree.setConfiguration( {
safeMode: false
} );
```
To see a list of all the available configuration options you can use, click [here](docs/configuration/OPTIONS.md).