{"id":7689,"date":"2016-07-15T09:00:51","date_gmt":"2016-07-15T13:00:51","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=7689"},"modified":"2016-07-14T18:58:03","modified_gmt":"2016-07-14T22:58:03","slug":"treemap","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2016\/07\/15\/treemap\/","title":{"rendered":"Treemap"},"content":{"rendered":"<div xmlns:mwsh=\"https:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\r\n   <introduction>\r\n      <p><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/3208495\">Sean<\/a>'s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/17192-treemap\">Treemap<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/692126\">Joe Hicklin<\/a>.\r\n      <\/p>\r\n   <\/introduction>\r\n   <h3>Contents<\/h3>\r\n   <div>\r\n      <ul>\r\n         <li><a href=\"#1\">Single Treemap<\/a><\/li>\r\n         <li><a href=\"#2\">Hierarchical Treemap<\/a><\/li>\r\n         <li><a href=\"#4\">Interactive Treemap<\/a><\/li>\r\n         <li><a href=\"#8\">Feedback<\/a><\/li>\r\n         <li><a href=\"#9\">Comments<\/a><\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <h3>Single Treemap<a name=\"1\"><\/a><\/h3>\r\n   <p>I've recently been working with one of our marketing teams to visualize where MATLAB is used across an organization or university\r\n      based on department.  One nice way to do this is with a treemap because it allows for hierarchical visualization.  Let's take\r\n      a look at a single layer treemap for a synthetic university.  The data is stored in table called <i>activations<\/i> with variables <i>College<\/i> and <i>Department<\/i>.\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">collcounts = countcats(activations.College); <span style=\"color: #228B22\">% How many in each college?<\/span>\r\nr = treemap(collcounts); <span style=\"color: #228B22\">% Build tree rectangles<\/span>\r\nplotRectangles(r,categories(activations.College)) <span style=\"color: #228B22\">% Plot tree map<\/span><\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/maintreemap\/maintreemap_01.png\"> <h3>Hierarchical Treemap<a name=\"2\"><\/a><\/h3>\r\n   <p>That looks pretty good, but it's just one layer.  We also have information on the departments within a college.  To include\r\n      this, I will use the <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/split-table-data-variables-and-apply-functions.html\"><tt>findgroups\/splitapply<\/tt><\/a> workflow to split the departments based on their colleges.\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\"><span style=\"color: #228B22\">% Which college<\/span>\r\ncollegeidx = findgroups(activations.College);\r\n\r\n<span style=\"color: #228B22\">% Count the number of activations in each department and bin by college<\/span>\r\ndeptcounts = splitapply(@(x){nonzeros(countcats(x))},activations.Department,collegeidx);\r\n\r\n<span style=\"color: #228B22\">% Keep the names for labeling<\/span>\r\ndeptnames = splitapply(@(x){categories(removecats(x))},activations.Department,collegeidx);<\/pre><p>Now we'll copy and modify Joe's example code to plug in my new data.<\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">m = 39; <span style=\"color: #228B22\">% Department colors<\/span>\r\n<span style=\"color: #0000FF\">for<\/span> ii = 1:numel(deptcounts)\r\n    colors = (3*repmat(rand(1,3),m,1) + rand(m,3))\/4;\r\n    rNew = treemap(deptcounts{ii}',r(3,ii),r(4,ii));\r\n    rNew(1,:) = rNew(1,:) + r(1,ii);\r\n    rNew(2,:) = rNew(2,:) + r(2,ii);\r\n    plotRectangles(rNew,deptnames{ii},colors)\r\n<span style=\"color: #0000FF\">end<\/span>\r\n\r\n<span style=\"color: #228B22\">% Outline college boxes<\/span>\r\noutline(r)<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/maintreemap\/maintreemap_02.png\"> <h3>Interactive Treemap<a name=\"4\"><\/a><\/h3>\r\n   <p>On my large monitor blown up that looks good.  But it's kind of busy compressed.  I'll enhance it to make it so that you can\r\n      expand one school or \"Drill down\".  First, repeat all of the above steps but leave the labels off the departments.\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">figure\r\nplotRectangles(r,categories(activations.College));\r\n\r\n<span style=\"color: #0000FF\">for<\/span> ii = 1:numel(deptcounts)\r\n    colors = (3*repmat(rand(1,3),m,1) + rand(m,3))\/4;\r\n    rNew = treemap(deptcounts{ii}',r(3,ii),r(4,ii));\r\n    rNew(1,:) = rNew(1,:) + r(1,ii);\r\n    rNew(2,:) = rNew(2,:) + r(2,ii);\r\n    plotRectangles(rNew,[],colors)\r\n<span style=\"color: #0000FF\">end<\/span>\r\noutline(r)<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/maintreemap\/maintreemap_03.png\"> <p>Second, I'll disable the ability for the patches to interact by turning off their <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/creating_plots\/capturing-mouse-clicks.html\"><i>'HitTest'<\/i><\/a> property.\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">patches = findall(gca,<span style=\"color: #A020F0\">'Type'<\/span>,<span style=\"color: #A020F0\">'patch'<\/span>);\r\nset(patches,<span style=\"color: #A020F0\">'HitTest'<\/span>,<span style=\"color: #A020F0\">'off'<\/span>)<\/pre><p>Finally, add a button down callback to the axes which calls my custom explode function.<\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">\r\n<span style=\"color: #0000FF\">function<\/span> explodeBlock(evt,r,nsubs,sublabels)\r\n<span style=\"color: #228B22\">% Blow up one block in a tree map<\/span>\r\n\r\n<span style=\"color: #228B22\">% Where was hit<\/span>\r\nxyhit = evt.IntersectionPoint(1:2);\r\n\r\n<span style=\"color: #228B22\">% Which rectangle?<\/span>\r\ninx = xyhit(1) &gt; r(1,:) &amp; (xyhit(1) &lt; r(1,:)+r(3,:));\r\niny = xyhit(2) &gt; r(2,:) &amp; (xyhit(2) &lt; r(2,:)+r(4,:));\r\nidx = inx &amp; iny;\r\n\r\n<span style=\"color: #228B22\">% Blow up that rectangle in new figure<\/span>\r\nrnew = treemap(nsubs{idx});\r\nfigure\r\nplotRectangles(rnew,sublabels{idx})\r\n\r\n<span style=\"color: #0000FF\">end<\/span>\r\n\r\n<\/pre><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">set(gca,<span style=\"color: #A020F0\">'Visible'<\/span>,<span style=\"color: #A020F0\">'on'<\/span>)\r\nset(gca,<span style=\"color: #A020F0\">'ButtonDownFcn'<\/span>,@(~,evt)explodeBlock(evt,r,deptcounts,deptnames))<\/pre><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/maintreemap\/exploding.gif\"> <\/p>\r\n   <h3>Feedback<a name=\"8\"><\/a><\/h3>\r\n   <p>Using the treemap utility is pretty straight-forward and Joe has provided nice examples of all of the features.  I do have\r\n      a couple of enhancements though:\r\n   <\/p>\r\n   <div>\r\n      <ol>\r\n         <li><tt>plotRectangles<\/tt> and <tt>outline<\/tt> could return handles to the patches they create.  This would allow me to skip the sloppy call to <tt>findobj<\/tt> that I have above.\r\n         <\/li>\r\n         <li>The text, as you probably noticed, tends to overlap a bit.  It would be nice for the text to be jittered or rotated so as\r\n            to avoid the collision.\r\n         <\/li>\r\n      <\/ol>\r\n   <\/div>\r\n   <h3>Comments<a name=\"9\"><\/a><\/h3>\r\n   <p>Give it a try and let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=7689#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/17192-treemap#comments\">comment<\/a> for Joe.\r\n   <\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_6b2fb1c5b76346a18c61c2f0ab31877e() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='6b2fb1c5b76346a18c61c2f0ab31877e ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 6b2fb1c5b76346a18c61c2f0ab31877e';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        author = 'Sean de Wolski';\r\n        copyright = 'Copyright 2016 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add author and copyright lines at the bottom if specified.\r\n        if ((author.length > 0) || (copyright.length > 0)) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (author.length > 0) {\r\n                d.writeln('% _' + author + '_');\r\n            }\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n      \r\n      d.title = title + ' (MATLAB code)';\r\n      d.close();\r\n      }   \r\n      \r\n-->\r\n<\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_6b2fb1c5b76346a18c61c2f0ab31877e()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n            the MATLAB code \r\n            <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2016b<br><\/p>\r\n<\/div>\r\n<!--\r\n6b2fb1c5b76346a18c61c2f0ab31877e ##### SOURCE BEGIN #####\r\n%% Treemap\r\n%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/3208495 Sean>'s pick this week is\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/17192-treemap Treemap> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/692126 Joe Hicklin>.\r\n\r\n%% Single Treemap\r\n% I've recently been working with one of our marketing teams to visualize\r\n% where MATLAB is used across an organization or university based on\r\n% department.  One nice way to do this is with a treemap because it allows\r\n% for hierarchical visualization.  Let's take a look at a single layer\r\n% treemap for a synthetic university.  The data is stored in\r\n% table called _activations_ with variables _College_ and _Department_.\r\nnpar = countcats(activations.College); % How many in each college?\r\nr = treemap(npar); % Build tree rectangles\r\nplotRectangles(r,categories(activations.College)) % Plot tree map\r\n\r\n%% Hierarchical Treemap\r\n% That looks pretty good, but it's just one layer.  We also have information\r\n% on the departments within a college.  To include this, I will use the\r\n% <https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/split-table-data-variables-and-apply-functions.html |findgroups\/splitapply|> workflow to split the departments based on\r\n% their colleges.\r\n\r\n% Which college\r\ncollegeidx = findgroups(activations.College);\r\n\r\n% Count the number of activations in each department and bin by college\r\ndeptcounts = splitapply(@(x){nonzeros(countcats(x))},activations.Department,collegeidx);\r\n\r\n% Keep the names for labeling\r\ndeptnames = splitapply(@(x){categories(removecats(x))},activations.Department,collegeidx);\r\n\r\n%%\r\n% Now we'll copy and modify Joe's example code to plug in my new data.\r\n\r\nm = 39; % Department colors\r\nfor ii = 1:numel(deptcounts)\r\n    colors = (3*repmat(rand(1,3),m,1) + rand(m,3))\/4;\r\n    rNew = treemap(deptcounts{ii}',r(3,ii),r(4,ii));\r\n    rNew(1,:) = rNew(1,:) + r(1,ii);\r\n    rNew(2,:) = rNew(2,:) + r(2,ii);\r\n    plotRectangles(rNew,deptnames{ii},colors)\r\nend\r\n\r\n% Outline college boxes\r\noutline(r)\r\n\r\n%% Interactive Treemap\r\n% On my large monitor blown up that looks good.  But it's kind of busy\r\n% compressed.  I'll enhance it to make it so that you can expand one school\r\n% or \"Drill down\".  First, repeat all of the above steps but leave the labels\r\n% off the departments.\r\n\r\nfigure\r\nplotRectangles(r,categories(activations.College));\r\n\r\nfor ii = 1:numel(deptcounts)\r\n    colors = (3*repmat(rand(1,3),m,1) + rand(m,3))\/4;\r\n    rNew = treemap(deptcounts{ii}',r(3,ii),r(4,ii));\r\n    rNew(1,:) = rNew(1,:) + r(1,ii);\r\n    rNew(2,:) = rNew(2,:) + r(2,ii);\r\n    plotRectangles(rNew,[],colors) \r\nend\r\noutline(r)\r\n\r\n%%\r\n% Second, I'll disable the ability for the patches to interact by turning\r\n% off their\r\n% <https:\/\/www.mathworks.com\/help\/matlab\/creating_plots\/capturing-mouse-clicks.html\r\n% _'HitTest'_> property.\r\n\r\npatches = findall(gca,'Type','patch');\r\nset(patches,'HitTest','off')\r\n\r\n%%\r\n% Finally, add a button down callback to the axes which calls my custom explode function.\r\n%\r\n% <include>explodeBlock.m<\/include>\r\n\r\nset(gca,'Visible','on')\r\nset(gca,'ButtonDownFcn',@(~,evt)explodeBlock(evt,r,deptcounts,deptnames))\r\n\r\n%%\r\n% \r\n% <<exploding.gif>>\r\n% \r\n\r\n%% Feedback\r\n% Using the treemap utility is pretty straight-forward and Joe has provided\r\n% nice examples of all of the features.  I do have a couple of enhancements though:\r\n% \r\n% # |plotRectangles| and |outline| could return handles to the patches\r\n% they create.  This would allow me to skip the sloppy call to |findobj|\r\n% that I have above.\r\n% # The text, as you probably noticed, tends to overlap a bit.  It would be\r\n% nice for the text to be jittered or rotated so as to avoid the collision. \r\n\r\n%% Comments\r\n% \r\n% Give it a try and let us know what you think\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=7689#respond here> or leave a\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/17192-treemap#comments\r\n% comment> for Joe.\r\n##### SOURCE END ##### 6b2fb1c5b76346a18c61c2f0ab31877e\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img decoding=\"async\"  class=\"img-responsive\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/Sean\/maintreemap\/maintreemap_01.png\" onError=\"this.style.display ='none';\" \/><\/div><p>\r\n   \r\n      Sean's pick this week is Treemap by Joe Hicklin.\r\n      \r\n   \r\n   Contents\r\n   \r\n      \r\n         Single Treemap\r\n... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2016\/07\/15\/treemap\/\">read more >><\/a><\/p>","protected":false},"author":87,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/7689"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=7689"}],"version-history":[{"count":7,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/7689\/revisions"}],"predecessor-version":[{"id":7696,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/7689\/revisions\/7696"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=7689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=7689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=7689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}