{"id":9417,"date":"2022-11-28T15:55:47","date_gmt":"2022-11-28T15:55:47","guid":{"rendered":"https:\/\/max-drake.cc\/?p=9417"},"modified":"2022-11-29T08:33:16","modified_gmt":"2022-11-29T08:33:16","slug":"tree-diagram-collapsable-for-plant-generations-in-html","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=9417","title":{"rendered":"Tree Diagram, collapsible, for plant generations in HTML"},"content":{"rendered":"\n

The web page<\/a> <\/strong>for the Tree Diagram<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Background story <\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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 <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above image shows a tree-like structure. <\/p>\n\n\n\n

Dendograms in D3.JS <\/h3>\n\n\n\n

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

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.<\/p>\n\n\n\n

HTML web page for Tree Diagram <\/h3>\n\n\n\n

On looking around further, had one of those serendipitous events where my RSS feed had an article on tree diagrams Tree views in CSS<\/a>.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It does some fancy stuff with CSS to beutify the icons, but the underlying code is in HTML. <\/p>\n\n\n\n

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

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. <\/p>\n\n\n\n

The other nice thing with the 3schools.com<\/strong> 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. <\/p>\n\n\n\n

Designing for others <\/h4>\n\n\n\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

I’d used this HTML scripting method when doing my Covid map Transmission Type<\/strong><\/a>. 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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

End Comment <\/h3>\n\n\n\n

It was a fun exercise to carry out, but my daughter was not interested in developing it further. <\/p>\n\n\n\n

It could be enhanced with some more CSS to make the page more appealing, and also to colourise some of the items. <\/p>\n\n\n\n

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

I’d also put links into the fields themselves, maybe for the plants or the plant batches. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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

As I’ve the resource now I may think about using it somewhere else in future. <\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":9424,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[204,40,32,42,12,29],"tags":[],"class_list":["post-9417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automation","category-data-analysis","category-power-bi","category-productivity","category-visualisation","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2022\/11\/Marigold-VS1-\u2014-Mozilla-Firefox2022-11-29-09_18-600x400.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2022\/11\/Marigold-VS1-\u2014-Mozilla-Firefox2022-11-29-09_18-600x600.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/9417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9417"}],"version-history":[{"count":6,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/9417\/revisions"}],"predecessor-version":[{"id":9431,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/9417\/revisions\/9431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/9424"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}