I wanted to create a tree diagram that was generated from data. I found two very goo solutions. Remember if you want to create a tree diagram by hand, you can always do so easily using Google Docs. In this tutorial I will go over how to create a tree diagram based on data using ironcreek.net/phpsyntaxtree and D3. How to create a tree diagram using Google Docs.
How to create a tree diagram using Iron Creek's free online software
- Open a browser to: http://ironcreek.net/phpsyntaxtree/?
- Click the 'Draw' button under the notation snippet field and watch the tree diagram generate.
- The logic of the notation should be easy enough to understand if you study it and play with it a bit.
- You can click the 'syntax free image' to download your tree diagram to use on your website or blog etc.
How to create a tree diagram using D3
There is a learning curve to D3, but it's worth it because it's powerful and aesthetic. I'm going to cut to the chase and show you how to get up and running then give you references for further learning.
Download this field to your computer, unzip it, then upload it to your website via ftp.
The zip file contains 3 folders and 4 files.
After you've uploaded these files to your hosting account, the tree diagram should be working. You can view the tree diagram and the sample data by typing in the absolute path to the file 'tree.html'. So for example if you uploaded these files to your root directory, you would access the files at mywebsite.com/tree_diagram/tree/tree.html.
You can replace the sample data with your own by modifying the 'flare.json' file. The syntax is intuitive enough to get the hang of with brief experimentation, although I haven't found what the 'size' variable is used for. At this point, the 'size' variable seems irrelevant.
d3 workshop: http://bost.ocks.org/mike/d3/workshop/
d3 website: http://d3js.org/ (pr6)
