Tree Diagram, collapsible, for plant generations in HTML

The web page for the Tree Diagram

Background story

My daughter is a grower and she had information on the different generations of plants she is growing. She has a spreadsheet that she uses to show different strains of plants, grown initially from seed and then cloning the plants to get the best strains.

To find out information to track the plants you need to use spreadsheet filters to ascertain the children of the previous generation plants and which generation the plants are at a particular instance. So you could search which the parent plant was by using filters to find all the children of that particular parent.

As a designer I found the spreadsheet hard to understand, although it was very easy to search using the filters, but I wanted the information in a more visual manner so you could see the successful and unsuccessful strains and scan it easily with the eye, so I rearranged the information in the following manner,where you can clearly see each plant, who the parent plant was and what particular plant was cloned to make children , so at each new batch you can

The above image shows a tree-like structure.

Dendograms in D3.JS

My initial thought was to use D3.JS, as I’d experimented with that before , in this Expandable Building Parameter Tree. I found that the text would be an issue of possibly writing over lines and the steps could get a bit messy.

Also I wanted to be able to link to possible URL’s inside the tree as well, either to a file or to some other data that may be useful.

HTML web page for Tree Diagram

On looking around further, had one of those serendipitous events where my RSS feed had an article on tree diagrams Tree views in CSS.

It does some fancy stuff with CSS to beutify the icons, but the underlying code is in HTML.

After looking at that code I started to explore further and found another bit of code doing the same thing on w3schools.com website, How To Create a Tree View.

I decided to use that code as it went down 2 levels, unlike the first article that only went one level. It was easier to use as a proof of concept, which is what I was after.

The other nice thing with the 3schools.com website is you can try it out and modify it slightly and test, and it seemed to do what I wanted, so I used that method to build the flower Tree Diagram.

Designing for others

The people doing the gardening are all proficient in Excel but not good at coding, so if they were going to utilise the Tree in what they were doing then I would need to make it easy for them to be able to update and add further generations on later.

So I decided to use the Excel Sheet I had created (see 2 images above) and create the HTML code around the data. As the HTML code was mainly to do with <UL> unordered lists it as easy to add these items to the current Excel worksheet, just adding extra rows/columns as needed to allow to put the html code around the items.

As HTML code does not indent unless you specifically make it do so, so it doesn’t matter if the code spans across several columns.

I’d used this HTML scripting method when doing my Covid map Transmission Type. That ended up being quite a complex excel worksheet as it included the whole webpage of the map and all the latest covid data from an API.

The spreadsheet with this code is available on the web-page, you’ll see the purple text in the top image. So click on link at the top.

End Comment

It was a fun exercise to carry out, but my daughter was not interested in developing it further.

It could be enhanced with some more CSS to make the page more appealing, and also to colourise some of the items.

The javascript is pretty limited and I’d maybe add a button so you could open the whole tree with one click.

I’d also put links into the fields themselves, maybe for the plants or the plant batches.

As there were other flower types I would have explored either having a menu to select which flower type to explore or separate tabs on the main page to be able to navigate between each.

The actual development of the tree and code writing didn’t take too long, it was rather looking at the options available.

As I’ve the resource now I may think about using it somewhere else in future.