{"id":8157,"date":"2016-12-02T09:00:00","date_gmt":"2016-12-02T14:00:00","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=8157"},"modified":"2016-12-05T00:14:28","modified_gmt":"2016-12-05T05:14:28","slug":"quickly-create-an-interactive-data-viewer-with-tabbed-figures","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2016\/12\/02\/quickly-create-an-interactive-data-viewer-with-tabbed-figures\/","title":{"rendered":"Quickly create an interactive data viewer with tabbed figures"},"content":{"rendered":"<div class=\"content\">\n<p><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/869871\">Jiro<\/a>&#8216;s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/54114-tfigure\">Tabbed Figure<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/1670934\">Curtis<\/a>.<\/p>\n<p>Have you ever wanted to visualize a bunch of data so that you can quickly explore through them? Well, that sounds like a pretty standard thing to do in MATLAB. I can easily create plots, perhaps on separate <a title=\"https:\/\/www.mathworks.com\/help\/releases\/R2016b\/matlab\/ref\/figure.html (link no longer works)\">figure<\/a> windows, or <a title=\"https:\/\/www.mathworks.com\/help\/releases\/R2016b\/matlab\/creating_plots\/create-graph-with-subplots.html (link no longer works)\">subplots<\/a>, or multiple lines on a graph. But if I need to organize them a bit more so that I can quickly switch between the graphs, I may need to create a nice user interface for it. But that would take some time. I have to think about the layout, work on the backend plumbing, and display the appropriate data at the appropriate location.<\/p>\n<p>Curtis&#8217;s <tt>tfigure<\/tt> lets me create such an &#8220;app&#8221; without requiring much more effort than creating regular plots. Take a look at this video below. I just create my data &#8230; create the tabs &#8230; display my data &#8230; and voila! I have an interactive app for exploring my data.<\/p>\n<p>\n<video controls width=\"850\"><source src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_tabbedfigure\/tabbedfigure_demo.mp4\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video>\n<\/p>\n<p>The code is written using object-oriented programming in MATLAB, and Curtis includes nice documentation as well as a demo code.<\/p>\n<p><b>Comments<\/b><\/p>\n<p>Give it a try and let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=8157#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/54114-tfigure#comments\">comment<\/a> for Curtis.<\/p>\n<p><script language=\"JavaScript\"> <!-- \n    function grabCode_7e06bbd183c64700be8d47fcf935a747() {\n        \/\/ Remember the title so we can use it in the new page\n        title = document.title;\n\n        \/\/ Break up these strings so that their presence\n        \/\/ in the Javascript doesn't mess up the search for\n        \/\/ the MATLAB code.\n        t1='7e06bbd183c64700be8d47fcf935a747 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 7e06bbd183c64700be8d47fcf935a747';\n    \n        b=document.getElementsByTagName('body')[0];\n        i1=b.innerHTML.indexOf(t1)+t1.length;\n        i2=b.innerHTML.indexOf(t2);\n \n        code_string = b.innerHTML.substring(i1, i2);\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\n\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \n        \/\/ in the XML parser.\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\n        \/\/ doesn't go ahead and substitute the less-than character. \n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\n\n        copyright = 'Copyright 2016 The MathWorks, Inc.';\n\n        w = window.open();\n        d = w.document;\n        d.write('\n\n<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\n\n\\n');\n\n        d.title = title + ' (MATLAB code)';\n        d.close();\n    }   \n     --> <\/script><\/p>\n<p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><a href=\"javascript:grabCode_7e06bbd183c64700be8d47fcf935a747()\"><span style=\"font-size: x-small;        font-style: italic;\">Get<br \/>\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><\/p>\n<p class=\"footer\">\n      Published with MATLAB&reg; R2016b<\/p>\n<\/div>\n<p><!--\n7e06bbd183c64700be8d47fcf935a747 ##### SOURCE BEGIN #####\n%%\n% <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/869871 Jiro>'s\n% pick this week is\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/54114-tfigure Tabbed Figure>\n% by <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/1670934\n% Curtis>.\n%\n% Have you ever wanted to visualize a bunch of data so that you can quickly\n% explore through them? Well, that sounds like a pretty standard thing to\n% do in MATLAB. I can easily create plots, perhaps on separate\n% <https:\/\/www.mathworks.com\/help\/releases\/R2016b\/matlab\/ref\/figure.html\n% figure> windows, or\n% <https:\/\/www.mathworks.com\/help\/releases\/R2016b\/matlab\/creating_plots\/create-graph-with-subplots.html\n% subplots>, or multiple lines on a graph. But if I need to organize them a\n% bit more so that I can quickly switch between the graphs, I may need to\n% create a nice user interface for it. But that would take some time. I\n% have to think about the layout, work on the backend plumbing, and display\n% the appropriate data at the appropriate location.\n%\n% Curtis's |tfigure| lets me create such an \"app\" without requiring much\n% more effort than creating regular plots. Take a look at this video below.\n% I just create my data ... create the tabs ... display my data ... and\n% voila! I have an interactive app for exploring my data.\n%\n% <html>\n% <video controls width=\"850\"><source src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_tabbedfigure\/tabbedfigure_demo.mp4\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video>\n% <\/html>\n%\n% The code is written using object-oriented programming in MATLAB, and\n% Curtis includes nice documentation as well as a demo code. \n%\n% *Comments*\n%\n% Give it a try and let us know what you think\n% <https:\/\/blogs.mathworks.com\/pick\/?p=8157#respond here> or leave a\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/54114-tfigure#comments\n% comment> for Curtis.\n\n##### SOURCE END ##### 7e06bbd183c64700be8d47fcf935a747\n--><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img src=\"https:\/\/blogs.mathworks.com\/pick\/files\/sample.gif\" class=\"img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/div>\n<p>\nJiro&#8216;s pick this week is Tabbed Figure by Curtis.<br \/>\nHave you ever wanted to visualize a bunch of data so that you can quickly explore through them? Well, that sounds like a pretty standard thing&#8230; <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2016\/12\/02\/quickly-create-an-interactive-data-viewer-with-tabbed-figures\/\">read more >><\/a><\/p>\n","protected":false},"author":35,"featured_media":8179,"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\/8157"}],"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\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=8157"}],"version-history":[{"count":12,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/8157\/revisions"}],"predecessor-version":[{"id":8171,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/8157\/revisions\/8171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media\/8179"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=8157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=8157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=8157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}