{"id":726,"date":"2013-10-11T00:46:06","date_gmt":"2013-10-11T05:46:06","guid":{"rendered":"http:\/\/billdwhite.com\/?p=726"},"modified":"2013-10-11T00:46:06","modified_gmt":"2013-10-11T05:46:06","slug":"d3-flow-tree-layout","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/","title":{"rendered":"d3 Wrapping Flow Tree Layout"},"content":{"rendered":"<p>One d3 visualization I&#8217;ve been refining for a while now uses a flowing tree layout.  I wanted to have a structure similar to the standard d3 <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Tree-Layout#wiki-tree\" title=\"d3 Tree Layout\" target=\"_blank\">tree layout<\/a> which would position consistently-sized leaf nodes (children) in a recursively flowing (wrapping) arrangement.  I also wanted to take a stab at building this layout as a library that followed the examples set forth in discussions of the <a href=\"http:\/\/bost.ocks.org\/mike\/chart\/\" title=\"Towards Reusable Charts\">&#8216;Reusable Charts&#8217;<\/a> pattern that has been such a hot topic lately.  There are <a href=\"http:\/\/nvd3.org\/\" title=\"nv3d\" target=\"_blank\">many<\/a> <a href=\"http:\/\/tenxer.github.io\/xcharts\/\" title=\"xcharts\" target=\"_blank\">great<\/a> <a href=\"http:\/\/imaginea.github.io\/uvCharts\/index.html#features\" title=\"uvCharts\" target=\"_blank\">libraries<\/a> out there that have attacked this problem in <a href=\"http:\/\/www.cloudshapes.co.uk\/exp\/london-d3-talk\/#\/15\" title=\"d3 slides\" target=\"_blank\">various<\/a> fashions and it will take me a while to determine which one makes the most sense for my purposes.  In the meantime, I wanted to share what I&#8217;ve come up with for a flowing tree chart:<\/p>\n<p><strong>Resizable Flow Tree<\/strong>&nbsp;<em>(Expand\/Collapse nodes &#038; resize using space between chart and scrollbar)<\/em><br \/>\n<iframe loading=\"lazy\" src=\"\/wordpress\/wp-content\/js\/flowtree_01.html\" style=\"margin:4px 0;\" height=\"565\" width=\"650\" scrolling=\"no\"><\/iframe> <\/p>\n<h5 style=\"padding:0 0 5px 0\">Features:<\/h5>\n<p><strong>Flow Layout<\/strong><br \/>\nI&#8217;ve taken the logic from the d3 tree layout and adapted it to recursively size and space out the children of each container given the available width.  What you end up with is a flowing version of the <a href=\"http:\/\/bl.ocks.org\/mbostock\/1093025\" title=\"Indented Tree Example\" target=\"_blank\">Indented Tree example<\/a>.<\/p>\n<p><strong>Resizable Visualizations<\/strong><br \/>\nThe chart will update its layout when it is resized (Try it by putting the mouse cursor just the left of the scrollbar and resize the container and watch the layout do its thing). Most d3 examples that I have come across do not address resizing issues at all, something that is not surprising given the complexity involved.  I&#8217;ve seen many developers asking about ways to create <a href=\"http:\/\/tributary.io\/inlet\/4268238\" title=\"Resizing example\" target=\"_blank\">resizable<\/a> <a href=\"http:\/\/bl.ocks.org\/enjalot\/1276555\" title=\"Another resizing example\" target=\"_blank\">charts<\/a> in d3 and in most cases the replies suggest that they scale the SVG contents to fit the available space within the viewport.  Personally, I do not find this very useful.  Instead, I want to keep the size of the visualization constant (i.e. legible) and reapply the layout to make use of the available space and adjust the scrolling size as necessary. <\/p>\n<p><strong>Expanding and Collapsing Groups<\/strong><br \/>\nThe layout includes a variation of the expand\/collapse logic found in the <a href=\"http:\/\/bl.ocks.org\/mbostock\/1093025\" title=\"Indented Tree Example\">Indented Tree example<\/a>. It also adjusts the container&#8217;s scroll size based on the updated chart height once expand\/collapse actions have changed the size of the chart.<\/p>\n<p><strong>Recursive Layout<\/strong><br \/>\nI&#8217;ve come across a few examples that feature <a href=\"http:\/\/bl.ocks.org\/mbostock\/1009139\" title=\"Matrix Layout\" target=\"_blank\">wrapping<\/a> <a href=\"http:\/\/bl.ocks.org\/herrstucki\/5684816\" title=\"Grid Layout\" target=\"_blank\">style<\/a> <a href=\"http:\/\/bl.ocks.org\/herrstucki\/5684816\" title=\"Another grid layout\" target=\"_blank\">layouts<\/a>, but what they did not address is recursive containment.  They would not measure and layout containers within containers.  This flow layout walks the hierarchy, sizing and positioning groups within groups as well as their children.<\/p>\n<p><strong>Possible Enhancements<\/strong><br \/>\nThere were a couple of ideas that I did not get time to implement yet.  It might be nice to allow the children to vary in size.  I may also look into justifying the children contained with each row rather than leaving the unused space tacked onto the right edge. <\/p>\n<p><strong>Related Links:<\/strong><br \/>\n<a href=\"http:\/\/billdwhite.com\/wp-content\/js\/flowtree_01.html\" title=\"Flow Tree in resizable div\" target=\"_blank\">Stand alone demo<\/a> of the visualization shown above<br \/>\n<a href=\"http:\/\/bl.ocks.org\/billdwhite\/6929428\" title=\"Flow Tree Gist\" target=\"_blank\">Gist<\/a> showing the flow tree that resizes with the containing div. (same as shown in this blog post)<br \/>\n<a href=\"http:\/\/billdwhite.com\/wp-content\/js\/flowtree_02.html\" title=\"Flow Tree resizing with browser\" target=\"_blank\">Flow Tree<\/a> that resizes with the browser window<br \/>\n<a href=\"http:\/\/bl.ocks.org\/billdwhite\/6929178\" title=\"Flow Tree Gist 2\" target=\"_blank\">Gist<\/a> showing the flow tree that resizes with the window<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One d3 visualization I&#8217;ve been refining for a while now uses a flowing tree layout. I wanted to have a structure similar to the standard d3 tree layout which would position consistently-sized leaf nodes (children) in a recursively flowing (wrapping) arrangement. I also wanted to take a stab at building this layout as a library\u2026 <span class=\"read-more\"><a href=\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,7,9,1],"tags":[],"class_list":["post-726","post","type-post","status-publish","format-standard","hentry","category-d3","category-html5","category-javascript","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>d3 Wrapping Flow Tree Layout - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"d3 Wrapping Flow Tree Layout - Bill White\" \/>\n<meta property=\"og:description\" content=\"One d3 visualization I&#8217;ve been refining for a while now uses a flowing tree layout. I wanted to have a structure similar to the standard d3 tree layout which would position consistently-sized leaf nodes (children) in a recursively flowing (wrapping) arrangement. I also wanted to take a stab at building this layout as a library\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-11T05:46:06+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"d3 Wrapping Flow Tree Layout\",\"datePublished\":\"2013-10-11T05:46:06+00:00\",\"dateModified\":\"2013-10-11T05:46:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\"},\"wordCount\":513,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"articleSection\":[\"d3\",\"HTML5\",\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\",\"name\":\"d3 Wrapping Flow Tree Layout - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2013-10-11T05:46:06+00:00\",\"dateModified\":\"2013-10-11T05:46:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"d3 Wrapping Flow Tree Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"d3 Wrapping Flow Tree Layout - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/","og_locale":"en_US","og_type":"article","og_title":"d3 Wrapping Flow Tree Layout - Bill White","og_description":"One d3 visualization I&#8217;ve been refining for a while now uses a flowing tree layout. I wanted to have a structure similar to the standard d3 tree layout which would position consistently-sized leaf nodes (children) in a recursively flowing (wrapping) arrangement. I also wanted to take a stab at building this layout as a library\u2026 Read More &raquo;","og_url":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/","og_site_name":"Bill White","article_published_time":"2013-10-11T05:46:06+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"d3 Wrapping Flow Tree Layout","datePublished":"2013-10-11T05:46:06+00:00","dateModified":"2013-10-11T05:46:06+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/"},"wordCount":513,"commentCount":15,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"articleSection":["d3","HTML5","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/","url":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/","name":"d3 Wrapping Flow Tree Layout - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2013-10-11T05:46:06+00:00","dateModified":"2013-10-11T05:46:06+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2013\/10\/11\/d3-flow-tree-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"d3 Wrapping Flow Tree Layout"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=726"}],"version-history":[{"count":0,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/726\/revisions"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}