{"id":6955,"date":"2012-11-06T07:26:20","date_gmt":"2012-11-06T07:26:20","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=6955"},"modified":"2012-12-14T02:16:25","modified_gmt":"2012-12-14T02:16:25","slug":"how-to-create-a-tree-diagram-generated-from-data","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/how-to-create-a-tree-diagram-generated-from-data\/affordablewebsitestips\/tutorials","title":{"rendered":"How to create a tree diagram generated from data"},"content":{"rendered":"<p>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 &nbsp;<a href=\"http:\/\/ironcreek.net\/phpsyntaxtree\/?\">ironcreek.net\/phpsyntaxtree<\/a>&nbsp;and D3. <a title=\"manually create a tree diagram using Google Docs\" href=\"http:\/\/2slick.com\/web\/google-docs-tree-diagram\/affordablewebsitestips\/tutorials\" target=\"_blank\">How to create a tree diagram using Google Docs<\/a>.<\/p>\n<h3>How to create a tree diagram using Iron Creek's free online software<\/p>\n<p><a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/ironcreek_tree_diagram.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6972\" style=\"border: 1px solid black;\" title=\"ironcreek_tree_diagram\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/ironcreek_tree_diagram.jpg\" alt=\"\" width=\"267\" height=\"146\" \/><\/a><\/h3>\n<ol>\n<li>Open &nbsp;a browser to:&nbsp;<a href=\"http:\/\/ironcreek.net\/phpsyntaxtree\/?\">http:\/\/ironcreek.net\/phpsyntaxtree\/?<\/a><\/li>\n<li>Click the 'Draw' button under the notation snippet field and watch the tree diagram generate.<\/li>\n<li>The logic of the&nbsp;notation&nbsp;should be easy enough to understand if you study it and play with it a bit.<\/li>\n<li>You can click the 'syntax free image' to download your tree diagram to use on your website or blog etc.<\/li>\n<\/ol>\n<h3>How to create a tree diagram using D3<\/p>\n<p><a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/d3_tree.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6973\" style=\"border: 1px solid black;\" title=\"d3_tree\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/d3_tree.jpg\" alt=\"\" width=\"389\" height=\"220\" srcset=\"https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/d3_tree.jpg 389w, https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/d3_tree-300x169.jpg 300w\" sizes=\"auto, (max-width: 389px) 100vw, 389px\" \/><\/a><\/h3>\n<p>There is a learning curve to <a title=\"d3\" href=\"http:\/\/d3js.org\/\" target=\"_blank\">D3<\/a>, 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.<\/p>\n<p>Download this field to your computer, unzip it, then upload it to your website via ftp.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.box.com\/embed_widget\/cf954f6014ac\/s\/vliq9qxz4t2fzg10ek3f?view=expanded&amp;sort=name&amp;direction=ASC&amp;theme=blue\" frameborder=\"0\" width=\"500\" height=\"400\"><\/iframe><\/p>\n<p>The zip file contains 3 folders and 4 files.<\/p>\n<p><a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/tree_diagram.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"131\" height=\"128\" class=\"alignnone size-full wp-image-6959\" title=\"tree_diagram\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/tree_diagram.jpg\" alt=\"\" srcset=\"https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/tree_diagram.jpg 131w, https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/tree_diagram-50x50.jpg 50w\" sizes=\"auto, (max-width: 131px) 100vw, 131px\" \/><\/a><\/p>\n<p>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 <span style=\"color: red;\">mywebsite.com<\/span>\/tree_diagram\/tree\/tree.html.<\/p>\n<p>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.<\/p>\n<p>d3 workshop:&nbsp;<a href=\"http:\/\/bost.ocks.org\/mike\/d3\/workshop\/\">http:\/\/bost.ocks.org\/mike\/d3\/workshop\/<\/a><\/p>\n<p>d3 website:&nbsp;<a href=\"http:\/\/d3js.org\/\">http:\/\/d3js.org\/<\/a>&nbsp;(pr6)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6956,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-6955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/6955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=6955"}],"version-history":[{"count":7,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/6955\/revisions"}],"predecessor-version":[{"id":6962,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/6955\/revisions\/6962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/6956"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=6955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=6955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=6955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}