{"id":240,"date":"2010-07-22T18:08:41","date_gmt":"2010-07-22T18:08:41","guid":{"rendered":"https:\/\/blogs.mathworks.com\/loren\/2010\/07\/22\/graphical-display-techniques-part-1\/"},"modified":"2010-07-21T13:36:12","modified_gmt":"2010-07-21T13:36:12","slug":"graphical-display-techniques-part-1","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/loren\/2010\/07\/22\/graphical-display-techniques-part-1\/","title":{"rendered":"Graphical Display Techniques &#8211; Part 1"},"content":{"rendered":"<div xmlns:mwsh=\"https:\/\/www.mathworks.com\/namespace\/mcode\/v1\/syntaxhighlight.dtd\" class=\"content\">\r\n   <introduction>\r\n      <p>I've recently been working with some customers who need to display extra information on top of a plot.  Steve showed <a href=\"https:\/\/blogs.mathworks.com\/steve\/2007\/01\/01\/superimposing-line-plots\/\">some examples<\/a> for superimposing lines on images in such a way so they are visible despite what's going on in the picture.  Today I'll show\r\n         you a few such techniques here.\r\n      <\/p>\r\n   <\/introduction>\r\n   <h3>Contents<\/h3>\r\n   <div>\r\n      <ul>\r\n         <li><a href=\"#1\">Making Lines Visible<\/a><\/li>\r\n         <li><a href=\"#5\">Making Markers Visible<\/a><\/li>\r\n         <li><a href=\"#6\">What Techniques Do You Use?<\/a><\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <h3>Making Lines Visible<a name=\"1\"><\/a><\/h3>\r\n   <p>I'll start with two techniques for making sure lines show up on a background of other information.  These are<\/p>\r\n   <div>\r\n      <ul>\r\n         <li>two lines, with different color and linewidth<\/li>\r\n         <li>two lines, with different linestyle<\/li>\r\n      <\/ul>\r\n   <\/div>\r\n   <p>First let's see what happens with a single line.<\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">load <span style=\"color: #A020F0\">clown<\/span>\r\nimage(X),colormap(map)\r\naxis <span style=\"color: #A020F0\">off<\/span>\r\nhold <span style=\"color: #A020F0\">on<\/span>\r\nrect  = [ 150 40 80 70]\r\nh = rectangle(<span style=\"color: #A020F0\">'position'<\/span>,rect);<\/pre><pre style=\"font-style:oblique\">rect =\r\n   150    40    80    70\r\n<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/loren\/240\/graphicsDisp1_01.png\"> <p>It's kind of hard to see this black edge of the rectangle outlining the eye on the right. Let me make it more visible by thickening\r\n      it, and placing a thinner line inside.\r\n   <\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">set(h,<span style=\"color: #A020F0\">'LineWidth'<\/span>,5)\r\nh2 = rectangle(<span style=\"color: #A020F0\">'position'<\/span>,rect);\r\nset(h2,<span style=\"color: #A020F0\">'EdgeColor'<\/span>,<span style=\"color: #A020F0\">'w'<\/span>,<span style=\"color: #A020F0\">'LineWidth'<\/span>,2)<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/loren\/240\/graphicsDisp1_02.png\"> <p>Let me adjust the linestyle instead of the width.<\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">set(h,<span style=\"color: #A020F0\">'LineWidth'<\/span>,2,<span style=\"color: #A020F0\">'LineStyle'<\/span>,<span style=\"color: #A020F0\">'-'<\/span>)\r\nset(h2,<span style=\"color: #A020F0\">'LineStyle'<\/span>,<span style=\"color: #A020F0\">':'<\/span>)<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/loren\/240\/graphicsDisp1_03.png\"> <h3>Making Markers Visible<a name=\"5\"><\/a><\/h3>\r\n   <p>Similarly, you can ensure that markers are visible on your plots by exploiting the separable colors for the face and edge.<\/p><pre style=\"background: #F9F7F3; padding: 10px; border: 1px solid rgb(200,200,200)\">delete([h h2])\r\nhm = plot(60,125,<span style=\"color: #A020F0\">'s'<\/span>)\r\nset(hm,<span style=\"color: #A020F0\">'MarkerSize'<\/span>,10,<span style=\"color: #A020F0\">'MarkerEdgeColor'<\/span>,<span style=\"color: #A020F0\">'w'<\/span>,<span style=\"color: #A020F0\">'MarkerFaceColor'<\/span>,<span style=\"color: #A020F0\">'m'<\/span>)\r\nhold <span style=\"color: #A020F0\">off<\/span><\/pre><pre style=\"font-style:oblique\">hm =\r\n          177\r\n<\/pre><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/loren\/240\/graphicsDisp1_04.png\"> <h3>What Techniques Do You Use?<a name=\"6\"><\/a><\/h3>\r\n   <p>Do you have some other graphical techniques to ensure all the elements are clearly visible?  Let me know <a href=\"https:\/\/blogs.mathworks.com\/loren\/?p=240#respond\">here<\/a>.\r\n   <\/p><script language=\"JavaScript\">\r\n<!--\r\n\r\n    function grabCode_e92115a27b83478a9f946b6ef4c3fbdb() {\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='e92115a27b83478a9f946b6ef4c3fbdb ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' e92115a27b83478a9f946b6ef4c3fbdb';\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 = 'Loren Shure';\r\n        copyright = 'Copyright 2010 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_e92115a27b83478a9f946b6ef4c3fbdb()\"><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; 7.10<br><\/p>\r\n<\/div>\r\n<!--\r\ne92115a27b83478a9f946b6ef4c3fbdb ##### SOURCE BEGIN #####\r\n%% Graphical Display Techniques - Part 1\r\n% I've recently been working with some customers who need to display extra\r\n% information on top of a plot.  Steve showed\r\n% <https:\/\/blogs.mathworks.com\/steve\/2007\/01\/01\/superimposing-line-plots\/\r\n% some examples> for superimposing lines on images in such a way so they\r\n% are visible despite what's going on in the picture.  Today I'll show you\r\n% a few such techniques here.\r\n%% Making Lines Visible\r\n% I'll start with two techniques for making sure lines show up on a\r\n% background of other information.  These are\r\n%\r\n% * two lines, with different color and linewidth\r\n% * two lines, with different linestyle\r\n%\r\n%% \r\n% First let's see what happens with a single line.\r\nload clown\r\nimage(X),colormap(map)\r\naxis off\r\nhold on\r\nrect  = [ 150 40 80 70]\r\nh = rectangle('position',rect);\r\n%%\r\n% It's kind of hard to see this black edge of the rectangle outlining the\r\n% eye on the right. Let me make it more visible by thickening it, and\r\n% placing a thinner line inside.\r\nset(h,'LineWidth',5)\r\nh2 = rectangle('position',rect);\r\nset(h2,'EdgeColor','w','LineWidth',2)\r\n\r\n%%\r\n% Let me adjust the linestyle instead of the width.\r\nset(h,'LineWidth',2,'LineStyle','-')\r\nset(h2,'LineStyle',':')\r\n%% Making Markers Visible\r\n% Similarly, you can ensure that markers are visible on your plots by\r\n% exploiting the separable colors for the face and edge.\r\ndelete([h h2])\r\nhm = plot(60,125,'s')\r\nset(hm,'MarkerSize',10,'MarkerEdgeColor','w','MarkerFaceColor','m')\r\nhold off\r\n%% What Techniques Do You Use?\r\n% Do you have some other graphical techniques to ensure all the elements\r\n% are clearly visible?  Let me know \r\n% <https:\/\/blogs.mathworks.com\/loren\/?p=240#respond here>.\r\n\r\n\r\n##### SOURCE END ##### e92115a27b83478a9f946b6ef4c3fbdb\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n   \r\n      I've recently been working with some customers who need to display extra information on top of a plot.  Steve showed some examples for superimposing lines on images in such a way so they... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/loren\/2010\/07\/22\/graphical-display-techniques-part-1\/\">read more >><\/a><\/p>","protected":false},"author":39,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/posts\/240"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":0,"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/loren\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}