Simple JavaScript Tree from JSON using d3-mitch-tree
Many months ago I ran into a nice JavaScript library for dynamic tree renderings, but it took me forever to learn how to customise it properly. Which is a shame because once you do, it is actually pretty helpful. So I decided to dedicate a few posts to using and configuring d3-mitch-tree. Everything will be available on my Github repo as usual.
This tutorial is part of the following series
1 – Setup
First things first, let’s just build a very basic tree. In your working directory, create the following file structure:
. ├── css │ ├── d3-mitch-tree.css │ └── d3-mitch-tree-theme-default.css ├── js │ ├── d3-mitch-tree.js │ └── simple_tree.js └── simple_tree.html
You can download the css files d3-mitch-tree.css and d3-mitch-tree-theme-default.css directly from my Github repo here: for some reason the ones in the original documentation did not work very well for me. Similarly, you can download d3-mitch-tree.js from my repo.
2 – Simple_tree.js
Now this file will contain your tree in JSON format. For this first post, it is going to be a very basic tree
3- Simple_tree.html
There are two interesting blocks in the HTML document:
- Declaring the that will contain the tree (id=”my_tree” in this example)
- Actually creating a d3.mitchTree object and setting the data source to data (from var data = … of simple_tree.js above)
This is what simple_tree.html looks like
Testing
Now, in your browser, open the file simple_tree.html. This is how it should look like
Now this is not bad, but again still very basic. I will be creating additional posts in the next few weeks to explain how to customize the tree. Also from next time we will be using more acceptable JavaScript/HTML standards, so the code will look a bit more complex, but this is the gist of it 🙂