The figure data structure in R

<!DOCTYPE html> <html> <head>  <meta charset="utf-8" /> <link rel="canonical" href="https://plotly.com/r/figure-structure/" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap" rel="stylesheet" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/all_static/javascripts/algolia/instantsearch.js"></script> <script src="/all_static/javascripts/algolia/polyfill.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script> const theme = localStorage.getItem('theme'); if (theme === "dark-mode") { var root = document.getElementsByTagName('html')[0]; // '0' to assign the first (and only `HTML` tag) root.setAttribute('class', 'dark-mode'); } </script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script> <link href="https://esm.sh/@markprompt/css@0.18.0?css" rel="stylesheet" /> <link href="/all_static/css/markprompt.css" rel="stylesheet" />    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>  <script src="https://cdn.plot.ly/plotly-1.58.4.min.js"></script> <script src="/all_static/r_files/r_dependencies.js"></script>   <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Ubuntu+Mono:400,700|Asap" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />  <link rel="stylesheet" type="text/css" href="/all_static/css/main.css?version=false" /> <link rel="stylesheet" type="text/css" href="/all_static/css/improve.css?version=2025-03-21-13-40">    <link rel="shortcut icon" href="https://dash.plotly.com/assets/favicon.ico" />   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N6T2RXG');</script>      <title> The figure data structure in R </title> <meta name="description" content="Detailed examples of The Figure Data Structure including changing color, size, log axes, and more in R.">  <meta name="msvalidate.01" content="D319859A832F9F1D15A7646E2A42150A" />  <meta property="og:title" content= The figure data structure in R /> <meta property="og:type" content="website"/> <meta property="og:image" content="https://images.plot.ly/plotly-documentation/thumbnail/violin.jpg"> <meta property="og:description" content="Detailed examples of The Figure Data Structure including changing color, size, log axes, and more in R."/> <meta property="og:url" /> <meta property="fb:admins" content="1123751525"/> <meta property="fb:admins" content="22418"/>  <meta name="twitter:card" content="photo" /> <meta name="twitter:title" content= The figure data structure in R /> <meta name="twitter:url" content="https://plotly.com/r/figure-structure/"/> <meta name="twitter:description" content="Detailed examples of The Figure Data Structure including changing color, size, log axes, and more in R."/> <meta name="twitter:image" content="https://images.plot.ly/plotly-documentation/thumbnail/violin.jpg"> <meta name="twitter:site" content="@plotlygraphs"/> </head> <body data-spy="scroll" data-target=".watch" style="position:relative;" class="darkmode">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6T2RXG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="menu-mobile"> <div class="switch-mode"> <div class="icon-dark"></div> <div class="switch"></div> <div class="icon-light"></div> </div> <div class="close-menu"></div> <ul> <li><a style="font-weight: bold;" href="https://community.plotly.com/c/plotly-r-matlab-julia-net/29">Forum</a> </li> <li><a style="font-weight: bold;" href="https://plotly.com/get-pricing/">Pricing</a></li> <li><a style="font-weight: bold;" href="https://dash.plotly.com">Dash</a></li>  </ul> </div> <div class="header-container"> <header class="header-main --default"> <div class="--wrap"> <div class="--wrap-left"> <div class="-identity"> <a href="https://plotly.com/"><img src="/all_static/images/graphing_library_dark.svg" style="height: 30px;" class="logo-dark"></a> <a href="/graphing-libraries/"><img src="/all_static/images/graphing_library.svg" style="height: 30px;" class="logo-white"></a> </div> </div> <div class="--wrap-right"> <nav class="--nav-meta" role="navigation"> <ul> <li class="languages"> <a class="r"> <div class="icon"></div> R </a> <ul> <li> <a href="https://plotly.com/python/" class="python"> <div class="icon"></div>Python (v6.0.1) </a> </li> <li> <a href="https://plotly.com/r/" class="r"> <div class="icon"></div>R </a> </li> <li> <a href="https://plotly.com/julia/" class="julia"> <div class="icon"></div>Julia </a> </li> <li> <a href="https://plotly.com/javascript/" class="plotly_js"> <div class="icon"></div>Javascript (v3.0.1) </a> </li> <li> <a href="https://plotly.com/ggplot2/" class="ggplot2"> <div class="icon"></div>ggplot2 </a> </li> <li> <a href="https://plotly.com/matlab/" class="matlab"> <div class="icon"></div>MATLAB </a> </li> <li> <a href="https://plotly.com/fsharp/" class="fsharp"> <div class="icon"></div>F# </a> </li> <li> <a href="https://dash.plotly.com/" class="dash"> <div class="icon"></div>Dash </a> </li> </ul> </li> <li><a style="font-weight: bold;" href="https://community.plotly.com/c/plotly-r-matlab-julia-net/29">Forum</a> </li> <li><a style="font-weight: bold;" href="https://plotly.com/get-pricing/">Pricing</a></li> <li><a style="font-weight: bold;" href="https://dash.plotly.com">Dash</a></li>  <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.R&type=star&count=true&size=large" style="padding-top: 5px;" frameborder="0" scrolling="0" width="160px" height="40px"></iframe> </ul> <div class="switch-mode"> <div class="icon-dark"></div> <div class="switch"></div> <div class="icon-light"></div> </div> </nav> </div> <div class="menu-icon"> <span></span><span></span><span></span> </div> </div> </header> </div> <main class="--page page--single --index"> <div class="--wrap">   <aside class="--sidebar-container"> <div class="--sidebar-fixed reference" data-spy="affix" id="where"> <div class="brand"> <a href="/graphing-libraries/"><img src="/all_static/images/graphing_library.svg" style="height: 30px;"></a> </div> <button id="modal-button" type="button" data-toggle="modal" data-target="#myModal"> <input id="modal-input" style="border-radius: 5px; width: 100%;" type="text" placeholder=" Search..." readonly /> </button> <details style="color: white;margin-top: 20px;" > <summary>Quick Reference</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list" style="margin-left: 15px;">  <li class="--sidebar-item"> <a href="/r/getting-started" class="js-splash--navigation-item">Getting Started</a> </li> <li class="--sidebar-item"> <a href="/r/is-plotly-free" class="js-splash--navigation-item">Is Plotly Free?</a> </li>  <li class="--sidebar-item"> <a href="/r/reference/index/" class="js-splash--navigation-item">Figure Reference</a> </li>    <li class="--sidebar-item"> <a href="/ggplot2/" class="js-splash--navigation-item">ggplot2 integration</a> </li> <li class="--sidebar-item"> <a href="https://plotly.com/dash" class="js-splash--navigation-item">Dash for R</a> </li>    <li class="--sidebar-item"> <a target="_blank" href="https://github.com/plotly/plotly.R" class="js-splash--navigation-item">GitHub</a> </li> <li class="--sidebar-item"> <a target="_blank" href="http://community.plotly.com/" class="js-splash--navigation-item">community.plotly.com</a> </li> </ul> </nav> </details> <details style="color: white;margin-top: 20px;" open> <summary>On This Page</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list" id="nav_header_insertion_list"></ul> </nav> </details> </div> <a href="https://go.plotly.com/elevate-your-analytics?utm_source=Webinar:%20Dash%20Enterprise%205.7&utm_medium=graphing_libraries&utm_content=sidebar" target="_blank"> <img src="https://images.prismic.io/plotly-marketing-website-2/Z9mL0DiBA97Gimoh_Square_ads.jpg?auto=format,compress" style="width: 200px; height: 200px; position: fixed; bottom: 10px; left: 50px" alt="Sign up for the upcoming webinar: Elevate Your Analytics with Plotly Dash Enterprise 5.7"> </a> </aside>  <section class="--page-body --tutorial-index --base"> <header class="--welcome"> <div class="--welcome-body">  <div class="--title"> <div class="--body"> <div class="nav-breadcrumb-container"> <div> <div class="breadcrumb-nav"> <a href="/r"> R </a> > <a href="/r/plotly-fundamentals">Fundamentals</a> > <span>The Figure Data Structure</span> </div> </div> <div class="nav-breadcrumb-right"> <div class="--fork"> <a id="forklink" href= "https://github.com/plotly/plotly.r-docs/edit/master/r/2021-08-12-figure-data-structure.Rmd" > <div class="icon"> <svg style="width:20px;height:20px" viewbox="0 0 24 24"> <path fill="#000000" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"> </path> </svg> </div> <span>Suggest an edit to this page</span> </a> </div> </div> </div> <h1> The Figure Data Structure in R </h1> <p>The structure of a figure - data, traces and layout explained in R </p> <br>  <details> <summary><span style="cursor: pointer; color: #506784 !important">New to Plotly?</span></summary> <p>Plotly is a <a href="/r/is-plotly-free/">free and open-source</a> graphing library for R. We recommend you read our <a href="/r/getting-started/">Getting Started guide</a> for the latest installation or upgrade instructions, then move on to our <a href="/r/plotly-fundamentals/">Plotly Fundamentals tutorials</a> or dive straight in to some <a href="/r/basic-charts/">Basic Charts tutorials</a>.</p> </details> </div> </div> </div> </header>  <section class="tutorial-content"> <h3>Overview</h3> <p>Plotly's R graphing library makes interactive, publication-quality graphs. Examples of how to make line plots, scatter plots, area charts, bar charts, error bars, box plots, histograms, heatmaps, subplots, multiple-axes, and 3D (WebGL based) charts. Plotly.R is free and open source and you can view the source, report issues or contribute on GitHub. The rendering process uses the <a href="https://plotly.com/javascript/">Plotly.js JavaScript library</a> under the hood. Figures can be represented in R either as lists or as instances of the <code>plotly</code> , and are serialized as text in <a href="https://json.org/">JavaScript Object Notation (JSON)</a> before being passed to Plotly.js.</p> <p>Viewing the underlying data structure for any <code>plotly</code> object, can be done via <code>dput(fig)</code>.</p> <div class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">library</span><span class="p">(</span><span class="n">plotly</span><span class="p">)</span><span class="w"> </span><span class="n">fig</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">plot_ly</span><span class="p">()</span><span class="w"> </span><span class="o">%>%</span><span class="w"> </span><span class="n">add_lines</span><span class="p">(</span><span class="n">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="s2">"a"</span><span class="p">,</span><span class="s2">"b"</span><span class="p">,</span><span class="s2">"c"</span><span class="p">),</span><span class="w"> </span><span class="n">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="m">1</span><span class="p">,</span><span class="m">3</span><span class="p">,</span><span class="m">2</span><span class="p">))</span><span class="o">%>%</span><span class="w"> </span><span class="n">layout</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">"sample figure"</span><span class="p">,</span><span class="w"> </span><span class="n">xaxis</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'x'</span><span class="p">),</span><span class="w"> </span><span class="n">yaxis</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'y'</span><span class="p">),</span><span class="w"> </span><span class="n">plot_bgcolor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"#c7daec"</span><span class="p">)</span><span class="w"> </span><span class="n">str</span><span class="p">(</span><span class="n">fig</span><span class="o">$</span><span class="n">x</span><span class="p">)</span><span class="w"> </span></code></pre></div><div class="highlight"><pre><code class="language-" data-lang="">## List of 7 ## $ visdat :List of 1 ## ..$ 30d6bf3e7cd:function () ## $ cur_data : chr "30d6bf3e7cd" ## $ attrs :List of 2 ## ..$ 30d6bf3e7cd:List of 3 ## .. ..$ alpha_stroke: num 1 ## .. ..$ sizes : num [1:2] 10 100 ## .. ..$ spans : num [1:2] 1 20 ## ..$ 30d6bf3e7cd:List of 8 ## .. ..$ alpha_stroke: num 1 ## .. ..$ sizes : num [1:2] 10 100 ## .. ..$ spans : num [1:2] 1 20 ## .. ..$ x : chr [1:3] "a" "b" "c" ## .. ..$ y : num [1:3] 1 3 2 ## .. ..$ type : chr "scatter" ## .. ..$ mode : chr "lines" ## .. ..$ inherit : logi TRUE ## .. ..- attr(*, "class")= chr [1:2] "plotly_line" "list" ## $ layout :List of 3 ## ..$ width : NULL ## ..$ height: NULL ## ..$ margin:List of 4 ## .. ..$ b: num 40 ## .. ..$ l: num 60 ## .. ..$ t: num 25 ## .. ..$ r: num 10 ## $ source : chr "A" ## $ config :List of 2 ## ..$ modeBarButtonsToAdd: chr [1:2] "hoverclosest" "hovercompare" ## ..$ showSendToCloud : logi FALSE ## $ layoutAttrs:List of 1 ## ..$ 30d6bf3e7cd:List of 4 ## .. ..$ title : chr "sample figure" ## .. ..$ xaxis :List of 1 ## .. .. ..$ title: chr "x" ## .. ..$ yaxis :List of 1 ## .. .. ..$ title: chr "y" ## .. ..$ plot_bgcolor: chr "#c7daec" ## - attr(*, "TOJSON_FUNC")=function (x, ...) </code></pre></div><div class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">fig</span><span class="w"> </span></code></pre></div> <div class="plotly html-widget html-fill-item" id="htmlwidget-0b7ab9cd35387f7356eb" style="width:672px;height:480px;"></div> <script type="application/json" data-for="htmlwidget-0b7ab9cd35387f7356eb">{"x":{"visdat":{"30d6bf3e7cd":["function () ","plotlyVisDat"]},"cur_data":"30d6bf3e7cd","attrs":{"30d6bf3e7cd":{"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"x":["a","b","c"],"y":[1,3,2],"type":"scatter","mode":"lines","inherit":true}},"layout":{"margin":{"b":40,"l":60,"t":25,"r":10},"title":"sample figure","xaxis":{"domain":[0,1],"automargin":true,"title":"x","type":"category","categoryorder":"array","categoryarray":["a","b","c"]},"yaxis":{"domain":[0,1],"automargin":true,"title":"y"},"plot_bgcolor":"#c7daec","hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"x":["a","b","c"],"y":[1,3,2],"type":"scatter","mode":"lines","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"line":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script> <h3>Accessing figure structures in Dash</h3> <p><a href="https://dashr.plotly.com">Dash for R</a> is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.</p> <p>Learn about how to install Dash for R at https://dashr.plot.ly/installation.</p> <p>Everywhere in this page that you see fig, you can display the same figure in a Dash for R application by passing it to the figure argument.</p> <div class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">library</span><span class="p">(</span><span class="n">dash</span><span class="p">)</span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="n">dashCoreComponents</span><span class="p">)</span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="n">dashHtmlComponents</span><span class="p">)</span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="n">plotly</span><span class="p">)</span><span class="w"> </span><span class="n">fig</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">plot_ly</span><span class="p">()</span><span class="w"> </span><span class="o">%>%</span><span class="w"> </span><span class="n">add_lines</span><span class="p">(</span><span class="n">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="s2">"a"</span><span class="p">,</span><span class="s2">"b"</span><span class="p">,</span><span class="s2">"c"</span><span class="p">),</span><span class="w"> </span><span class="n">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="m">1</span><span class="p">,</span><span class="m">3</span><span class="p">,</span><span class="m">2</span><span class="p">))</span><span class="o">%>%</span><span class="w"> </span><span class="n">layout</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">"sample figure"</span><span class="p">)</span><span class="w"> </span><span class="n">app</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">Dash</span><span class="o">$</span><span class="n">new</span><span class="p">()</span><span class="w"> </span><span class="n">app</span><span class="o">$</span><span class="n">layout</span><span class="p">(</span><span class="w"> </span><span class="n">htmlDiv</span><span class="p">(</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="w"> </span><span class="n">dccGraph</span><span class="p">(</span><span class="n">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'graph'</span><span class="p">,</span><span class="w"> </span><span class="n">figure</span><span class="o">=</span><span class="n">fig</span><span class="p">),</span><span class="w"> </span><span class="n">htmlPre</span><span class="p">(</span><span class="w"> </span><span class="n">id</span><span class="o">=</span><span class="s1">'structure'</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">border</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'thin lightgrey solid'</span><span class="p">,</span><span class="w"> </span><span class="n">overflowY</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'scroll'</span><span class="p">,</span><span class="w"> </span><span class="n">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'275px'</span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="n">app</span><span class="o">$</span><span class="n">callback</span><span class="p">(</span><span class="w"> </span><span class="n">output</span><span class="p">(</span><span class="n">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'structure'</span><span class="p">,</span><span class="w"> </span><span class="n">property</span><span class="o">=</span><span class="s1">'children'</span><span class="p">),</span><span class="w"> </span><span class="n">params</span><span class="o">=</span><span class="nf">list</span><span class="p">(</span><span class="n">input</span><span class="p">(</span><span class="n">id</span><span class="o">=</span><span class="s1">'graph'</span><span class="p">,</span><span class="w"> </span><span class="n">property</span><span class="o">=</span><span class="s1">'figure'</span><span class="p">)),</span><span class="w"> </span><span class="k">function</span><span class="p">(</span><span class="n">fig_json</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">plotly_json</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="k">function</span><span class="p">(</span><span class="n">p</span><span class="p">,</span><span class="w"> </span><span class="n">...</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">plotly</span><span class="o">:::</span><span class="n">to_JSON</span><span class="p">(</span><span class="n">plotly_build</span><span class="p">(</span><span class="n">p</span><span class="p">),</span><span class="w"> </span><span class="n">...</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="n">jfig</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">plotly_json</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span><span class="w"> </span><span class="n">pretty</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w"> </span><span class="nf">return</span><span class="p">(</span><span class="n">jfig</span><span class="p">)</span><span class="w"> </span><span class="p">})</span><span class="w"> </span></code></pre></div> <p>After executing this code, give app$run_server() in the console to start the dash.</p> <h3>Figures as Trees of Attributes</h3> <p>Plotly.js supports inputs adhering to a well-defined schema, whose overall architecture is explained in this page and which is exhaustively documented in the <a href="https://plotly.com/r/reference/">Figure Reference</a> (which is itself generated from a <a href="https://raw.githubusercontent.com/plotly/plotly.js/master/dist/plot-schema.json">machine-readable JSON representation of the schema</a>). Figures are represented as trees with named nodes called "attributes".</p> <p>Attributes are referred to in text and in the <a href="https://plotly.com/r/reference/">Figure Reference</a> by their names. For example <code>"layout = list(width = NULL)"</code> refers to the attribute whose key is <code>"width"</code> inside a list which is the value associated with a key <code>"layout"</code> at the root of the figure. </p> <p>When manipulating a <code>plotly</code> object, attributes can be set directly using R object attributes e.g. <code>fig.layout.title.font.family="Open Sans"</code> or using fig %>% layout(title = list(font = 'Open Sans')).</p> <p>When building a figure, it is <em>not necessary to populate every attribute</em> of every object. At render-time, the JavaScript layer will compute default values for each required unspecified attribute, depending upon the ones that are specified, as documented in the <a href="https://plotly.com/r/reference/">Figure Reference</a>. An example of this would be <code>layout.xaxis.range</code>, which may be specified explicitly, but if not will be computed based on the range of <code>x</code> values for every trace linked to that axis. The JavaScript layer will ignore unknown attributes or malformed values, although the <code>plotly</code> module provides R-side validation for attribute values.</p> <h3>The Top-Level <code>data</code> Attribute</h3> <p>The first of the three top-level attributes of a figure is <code>data</code>, whose value must be a list referred to as "traces".</p> <ul> <li>Each trace has one of more than 40 possible types (see below for a list organized by subplot type, including e.g. <a href="https://plotly.com/r/line-and-scatter/"><code>scatter</code></a>, <a href="https://plotly.com/r/bar-charts/"><code>bar</code></a>, <a href="https://plotly.com/r/pie-charts/"><code>pie</code></a>, <a href="https://plotly.com/r/3d-surface-plots/"><code>surface</code></a>, <a href="https://plotly.com/r/choropleth-maps/"><code>choropleth</code></a> etc), and represents a set of related graphical marks in a figure. Each trace must have a <code>type</code> attribute which defines the other allowable attributes.</li> <li>Each trace is drawn on a single <a href="https://plotly.com/r/subplots/">subplot</a> whose type must be compatible with the trace's type, or is its own subplot (see below).</li> <li>Traces may have a single <a href="https://plotly.com/r/legend/">legend</a> entry, with the exception of pie and funnelarea traces (see below).</li> <li>Certain trace types support <a href="https://plotly.com/r/colorscales/">continuous color, with an associated colorbar</a>, which can be controlled by attributes either within the trace, or within the layout when using the <a href="https://plotly.com/r/reference/layout/coloraxis/">coloraxis attribute</a>.</li> </ul> <h3>The Top-Level <code>layout</code> Attribute</h3> <p>The second of the three top-level attributes of a figure is <code>layout</code>, whose value is referred to in text as "the layout" and must be a list, containing attributes that control positioning and configuration of non-data-related parts of the figure such as:</p> <ul> <li>Dimensions and margins, which define the bounds of "paper coordinates" (see below)</li> <li>Title and <a href="https://plotly.com/r/legend/">legend</a> (positionable in container and/or paper coordinates)</li> <li><a href="https://plotly.com/r/colorscales/">Color axes and associated color bars</a> (positionable in paper coordinates)</li> <li>Subplots of various types on which can be drawn multiple traces and which are positioned in paper coordinates: <ul> <li><code>xaxis</code>, <code>yaxis</code>, <code>xaxis2</code>, <code>yaxis3</code> etc: X and Y cartesian axes, the intersections of which are cartesian subplots</li> <li><code>scene</code>, <code>scene2</code>, <code>scene3</code> etc: 3d scene subplots</li> <li><code>ternary</code>, <code>ternary2</code>, <code>ternary3</code>, <code>polar</code>, <code>polar2</code>, <code>polar3</code>, <code>geo</code>, <code>geo2</code>, <code>geo3</code>, <code>mapbox</code>, <code>mapbox2</code>, <code>mabox3</code> etc: ternary, polar, geo or mapbox subplots</li> </ul></li> <li>Non-data marks which can be positioned in paper coordinates, or in data coordinates linked to 2d cartesian subplots: <ul> <li><code>annotations</code>: <a href="https://plotly.com/r/text-and-annotations/">textual annotations with or without arrows</a></li> <li><code>shapes</code>: <a href="https://plotly.com/r/shapes/">lines, rectangles, ellipses or open or closed paths</a></li> </ul></li> <li>Controls which can be positioned in paper coordinates and which can trigger Plotly.js functions when interacted with by a user: <ul> <li><code>updatemenus</code>: <a href="https://plotly.com/r/custom-buttons/">single buttons, toggles</a> and <a href="https://plotly.com/r/dropdowns/">dropdown menus</a></li> <li><code>sliders</code>: <a href="https://plotly.com/r/sliders/">slider controls</a></li> </ul></li> </ul> <h3>The Top-Level <code>frames</code> Attribute</h3> <p>The third of the three top-level attributes of a figure is <code>frames</code>, whose value must be a list that define sequential frames in an <a href="https://plotly.com/r/animations/">animated plot</a>. Each frame contains its own data attribute as well as other parameters. Animations are usually triggered and controlled via controls defined in layout.sliders and/or layout.updatemenus</p> <h3>Positioning With Paper, Container Coordinates, or Axis Domain Coordinates</h3> <p>Various figure components configured within the layout of the figure support positioning attributes named <code>x</code> or <code>y</code>, whose values may be specified in "paper coordinates" (sometimes referred to as "plot fractions" or "normalized coordinates"). Examples include <code>layout.xaxis.domain</code> or <code>layout.legend.x</code> or <code>layout.annotation.x</code>.</p> <p>Positioning in paper coordinates is <em>not</em> done in absolute pixel terms, but rather in terms relative to a coordinate system defined with an origin <code>(0,0)</code> at <code>(layout.margin.l, layout.margin.b)</code> and a point <code>(1,1)</code> at <code>(layout.width-layout.margin.r, layout.height-layout.margin.t)</code> (note: <code>layout.margin</code> values are pixel values, as are <code>layout.width</code> and <code>layout.height</code>). Paper coordinate values less than 0 or greater than 1 are permitted, and refer to areas within the plot margins.</p> <p>To position an object in "paper" coordinates, the corresponding axis reference is set to <code>"paper"</code>. For instance a shape's <code>xref</code> attribute would be set to <code>"paper"</code> so that the <code>x</code> value of the shape refers to its position in paper coordinates.</p> <p>Note that the contents of the <code>layout.margin</code> attribute are by default computed based on the position and dimensions of certain items like the title or legend, and may be made dependent on the position and dimensions of tick labels as well when setting the <code>layout.xaxis.automargin</code> attribute to <code>True</code>. This has the effect of automatically increasing the margin values and therefore shrinking the physical area defined between the <code>(0,0)</code> and <code>(1,1)</code> points. Positioning certain items at paper coordinates less than 0 or greater than 1 will also trigger this behavior. The <code>layout.width</code> and <code>layout.height</code>, however, are taken as givens, so a figure will never grow or shrink based on its contents.</p> <p>The figure title may be positioned using "container coordinates" which have <code>(0,0)</code> and <code>(1,1)</code> anchored at the bottom-left and top-right of the figure, respectively, and therefore are independent of the values of layout.margin.</p> <p>Furthermore, shapes, annotations, and images can be placed relative to an axis's domain so that, for instance, an <code>x</code> value of <code>0.5</code> would place the object halfway along the x-axis, regardless of the domain as specified in the <code>layout.xaxis.domain</code> attribute. This behavior can be specified by adding <code>' domain'</code> to the axis reference in the axis referencing attribute of the object. For example, setting <code>yref = 'y2 domain'</code> for a shape will refer to the length and position of the axis named <code>y2</code>.</p> <h3>2D Cartesian Trace Types and Subplots</h3> <p>The most commonly-used kind of subplot is a <a href="https://plotly.com/r/axes/">two-dimensional Cartesian subplot</a>. Traces compatible with these subplots support <code>xaxis</code> and <code>yaxis</code> attributes whose values must refer to corresponding objects in the layout portion of the figure. For example, if <code>xaxis="x"</code>, and <code>yaxis="y"</code> (which is the default) then this trace is drawn on the subplot at the intersection of the axes configured under <code>layout.xaxis</code> and <code>layout.yaxis</code>, but if <code>xaxis="x2"</code> and <code>yaxis="y3"</code> then the trace is drawn at the intersection of the axes configured under <code>layout.xaxis2</code> and <code>layout.yaxis3</code>. Note that attributes such as <code>layout.xaxis</code> and <code>layout.xaxis2</code> etc do not have to be explicitly defined, in which case default values will be inferred. Multiple traces of different types can be drawn on the same subplot.</p> <p>X- and Y-axes support the <code>type</code> attribute, which enables them to represent <a href="https://plotly.com/r/axes/">continuous values (<code>type="linear"</code>, <code>type="log"</code>)</a>, temporal values (<code>type="date"</code>) or <a href="https://plotly.com/r/bar-charts/#">categorical values (<code>type="category"</code>, <code>type="multicategory</code>)</a>. Axes can also be overlaid on top of one another to create <a href="https://plotly.com/r/multiple-axes/">dual-axis or multiple-axis charts</a>. 2-d cartesian subplots lend themselves very well to creating "small multiples" figures, also known as facet or trellis plots.</p> <p>The following trace types are compatible with 2d-cartesian subplots via the <code>xaxis</code> and <code>yaxis</code> attributes:</p> <ul> <li>scatter-like trace types: <a href="https://plotly.com/r/line-and-scatter/"><code>scatter</code></a> and <a href="https://plotly.com/r/webgl-vs-svg/"><code>scattergl</code></a>, which can be used to draw <a href="https://plotly.com/r/line-and-scatter/">scatter plots</a>, <a href="https://plotly.com/r/line-charts/">line plots and curves</a>, <a href="https://plotly.com/r/bubble-charts/">bubble charts</a>, <a href="https://plotly.com/r/dot-plots/">dot plots</a> and <a href="https://plotly.com/r/filled-area-plots/">filled areas</a> and also support <a href="https://plotly.com/r/error-bars/">error bars</a></li> <li><a href="https://plotly.com/r/bar-charts/"><code>bar</code></a>, <a href="https://plotly.com/r/funnel-charts/"><code>funnel</code></a>, <a href="https://plotly.com/r/waterfall-charts/"><code>waterfall</code></a>: bar-like trace types which can also be used to draw <a href="https://plotly.com/r/gantt/">timelines and Gantt charts</a></li> <li><a href="https://plotly.com/r/histograms/"><code>histogram</code></a>: an <em>aggregating</em> bar-like trace type</li> <li><a href="https://plotly.com/r/box-plots/#"><code>box</code></a> and <a href="https://plotly.com/r/violin/"><code>violin</code></a>: 1-dimensional distribution-like trace types</li> <li><a href="https://plotly.com/r/heatmaps/"><code>heatmap</code></a> and <a href="https://plotly.com/r/contour-plots/"><code>contour</code></a>: matrix trace types</li> <li><a href="https://plotly.com/r/2D-Histogram/"><code>histogram2d</code></a> and <a href="https://plotly.com/r/2d-histogram-contour/"><code>histogram2dcontour</code></a>: 2-dimensional distribution-like density trace types</li> <li><a href="https://plotly.com/r/ohlc-charts/"><code>ohlc</code></a> and <a href="https://plotly.com/r/candlestick-charts/"><code>candlestick</code></a>: stock-like trace types</li> <li><a href="https://plotly.com/r/carpet-plot/"><code>carpet</code></a>: a special trace type for building <a href="https://plotly.com/r/carpet-plot/">carpet plots</a>, in that other traces can use as subplots (see below)</li> <li><a href="https://plotly.com/r/splom/#"><code>splom</code></a>: multi-dimensional scatter plots which implicitly refer to many 2-d cartesian subplots at once.</li> </ul> <h3>3D, Polar and Ternary Trace Types and Subplots</h3> <p>Beyond 2D cartesian subplots, figures can include <a href="https://plotly.com/r/3d-charts/">three-dimensional cartesian subplots</a>, <a href="https://plotly.com/r/polar-chart/">polar subplots</a> and <a href="https://plotly.com/r/ternary-plots/">ternary subplots</a>. The following trace types support attributes named <code>scene</code>, <code>polar</code> or <code>ternary</code>, whose values must refer to corresponding objects in the layout portion of the figure i.e. <code>ternary="ternary2"</code> etc. Note that attributes such as <code>layout.scene</code> and <code>layout.ternary2</code> etc do not have to be explicitly defined, in which case default values will be inferred. Multiple traces of a compatible type can be placed on the same subplot.</p> <p>The following trace types are compatible with 3D subplots via the <code>scene</code> attribute, which contains special <a href="https://plotly.com/r/reference/layout/scene/#layout-scene-camera">camera controls</a>:</p> <ul> <li><a href="https://plotly.com/r/3d-scatter-plots/"><code>scatter3d</code></a>, which can be used to draw <a href="https://plotly.com/r/3d-scatter-plots/">individual markers</a>, <a href="https://plotly.com/r/3d-line-plots/">lines and curves</a></li> <li><a href="https://plotly.com/r/3d-surface-plots/"><code>surface</code></a> and <a href="https://plotly.com/r/3d-mesh/"><code>mesh</code></a>: 3d surface trace types</li> <li><a href="https://plotly.com/r/cone-plot/"><code>cone</code></a> and <a href="https://plotly.com/r/streamtube-plot/"><code>streamtube</code></a>: 3d vector field trace types</li> <li><a href="https://plotly.com/r/reference/volume/"><code>volume</code></a> and <a href="https://plotly.com/r/3d-isosurface-plots/"><code>isosurface</code></a>: 3d volume trace types</li> </ul> <p>The following trace types are compatible with polar subplots via the <code>polar</code> attribute:</p> <ul> <li>scatter-like trace types: <a href="https://plotly.com/r/polar-chart/"><code>scatterpolar</code> and <code>scatterpolargl</code></a>, which can be used to draw individual markers, <a href="https://plotly.com/r/radar-chart/">curves and filled areas (i.e. radar or spider charts)</a></li> <li><a href="https://plotly.com/r/polar-chart/"><code>barpolar</code></a></li> </ul> <p>The following trace types are compatible with ternary subplots via the <code>ternary</code> attribute:</p> <ul> <li><a href="https://plotly.com/r/ternary-plots/"><code>scatterternary</code></a>, which can be used to draw individual markers, <a href="https://plotly.com/r/ternary-contour/">curves and filled areas</a></li> </ul> <h3>Map Trace Types and Subplots</h3> <p>Figures can include two different types of map subplots: <a href="https://plotly.com/r/choropleth-maps/#base-map-configuration">geo subplots for outline maps</a> and <a href="https://plotly.com/r/mapbox-layers/">mapbox subplots for tile maps</a>. The following trace types support attributes named <code>geo</code> or <code>mapbox</code>, whose values must refer to corresponding objects in the layout i.e. <code>geo="geo2"</code> etc. Note that attributes such as <code>layout.geo2</code> and <code>layout.mapbox</code> etc do not have to be explicitly defined, in which case default values will be inferred. Multiple traces of a compatible type can be placed on the same subplot.</p> <p>The following trace types are compatible with geo subplots via the <code>geo</code> attribute:</p> <ul> <li><a href="https://plotly.com/r/scatter-plots-on-maps/"><code>scattergeo</code></a>, which can be used to draw <a href="https://plotly.com/r/scatter-plots-on-maps/">individual markers</a>, <a href="https://plotly.com/r/lines-on-maps/">line and curves</a> and filled areas on outline maps</li> <li><a href="https://plotly.com/r/choropleth-maps/"><code>choropleth</code></a>: <a href="https://plotly.com/r/choropleth-maps/">colored polygons</a> on outline maps</li> </ul> <p>The following trace types are compatible with mapbox subplots via the <code>mapbox</code> attribute:</p> <ul> <li><a href="https://plotly.com/r/scatter-plots-on-maps/"><code>scattermapbox</code></a>, which can be used to draw <a href="https://plotly.com/r/scatter-plots-on-maps/">individual markers</a>, <a href="https://plotly.com/r/lines-on-maps/">lines and curves</a> and <a href="https://plotly.com/r/filled-area-on-mapbox/">filled areas</a> on tile maps</li> <li><a href="https://plotly.com/r/choropleth-maps/"><code>choroplethmapbox</code></a>: colored polygons on tile maps</li> <li><a href="https://plotly.com/r/mapbox-density-heatmaps/"><code>densitymapbox</code></a>: density heatmaps on tile maps</li> </ul> <h3>Traces Which Are Their Own Subplots</h3> <p>Certain trace types cannot share subplots, and hence have no attribute to map to a corresponding subplot in the layout. Instead, these traces are their own subplot and support a <code>domain</code> attribute for position, which enables the trace to be positioned in paper coordinates (see below). With the exception of <code>pie</code> and <code>funnelarea</code>, such traces also do not support legends (see below)</p> <p>The following trace types are their own subplots and support a domain attribute:</p> <ul> <li><a href="https://plotly.com/r/pie-charts/"><code>pie</code></a> and <a href="https://plotly.com/r/waterfall-charts/"><code>funnelarea</code></a>: one-level part-to-whole relationships with legend items</li> <li><a href="https://plotly.com/r/sunburst-charts/"><code>sunburst</code></a> and <a href="https://plotly.com/r/treemaps/"><code>treemap</code></a>: hierarchical multi-level part-to-whole relationships</li> <li><a href="https://plotly.com/r/parallel-coordinates-plot/"><code>parcoords</code></a> and <a href="https://plotly.com/r/reference/parcats/"><code>parcats</code></a>: continuous and categorical multidimensional figures with <a href="https://plotly.com/r/parallel-coordinates-plot/">parallel coordinates</a> and <a href="https://plotly.com/r/reference/parcats/">parallel sets</a></li> <li><a href="https://plotly.com/r/sankey-diagram/"><code>sankey</code></a>: <a href="https://plotly.com/r/sankey-diagram/">flow diagrams</a></li> <li><a href="https://plotly.com/r/table/"><code>table</code></a>: <a href="https://plotly.com/r/table/">text-based tables</a></li> <li><a href="https://plotly.com/r/reference/indicator/"><code>indicator</code></a>: big numbers, <a href="https://plotly.com/r/gauge-charts/">gauges</a>, and <a href="https://plotly.com/r/bullet-charts/">bullet charts</a></li> </ul> <h3>Carpet Trace Types and Subplots</h3> <p>Certain trace types use <a href="https://plotly.com/r/carpet-plot/">traces of type <code>carpet</code> as a subplot</a>. These support a <code>carpet</code> attribute whose value must match the value of the <code>carpet</code> attribute of the <code>carpet</code> trace they are to be drawn on. Multiple compatible traces can be placed on the same <code>carpet</code> trace.</p> <p>The following trace types are compatible with <code>carpet</code> trace subplots via the <code>carpet</code> attribute:</p> <ul> <li><a href="https://plotly.com/r/carpet-scatter/"><code>scattercarpet</code></a>, which can be used to draw individual markers, curves and filled areas</li> <li><a href="https://plotly.com/r/carpet-plot/"><code>contourcarpet</code></a></li> </ul> <h3>Trace Types, Legends and Color Bars</h3> <p>Traces of most types can be optionally associated with a single legend item in the <a href="https://plotly.com/r/legend/">legend</a>. Whether or not a given trace appears in the legend is controlled via the <code>showlegend</code> attribute. Traces which are their own subplots (see above) do not support this, with the exception of traces of type <code>pie</code> and <code>funnelarea</code> for which every distinct color represented in the trace gets a separate legend item. Users may show or hide traces by clicking or double-clicking on their associated legend item. Traces that support legend items also support the <code>legendgroup</code> attribute, and all traces with the same legend group are treated the same way during click/double-click interactions.</p> <p>The fact that legend items are linked to traces means that when using <a href="https://plotly.com/r/colorscales/">discrete color</a>, a figure must have one trace per color in order to get a meaningful legend. </p> <p>Traces which support <a href="https://plotly.com/r/colorscales/">continuous color</a> can also be associated with color axes in the layout via the <code>coloraxis</code> attribute. Multiple traces can be linked to the same color axis. Color axes have a legend-like component called color bars. Alternatively, color axes can be configured within the trace itself.</p> <h3>What About Dash?</h3> <p><a href="https://dashr.plot.ly/">Dash for R</a> is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library. </p> <p>Learn about how to install Dash for R at https://dashr.plot.ly/installation.</p> <p>Everywhere in this page that you see <code>fig</code>, you can display the same figure in a Dash for R application by passing it to the <code>figure</code> argument of the <a href="https://dashr.plot.ly/dash-core-components/graph"><code>Graph</code> component</a> from the built-in <code>dashCoreComponents</code> package like this:</p> <div class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">library</span><span class="p">(</span><span class="n">plotly</span><span class="p">)</span><span class="w"> </span><span class="n">fig</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">plot_ly</span><span class="p">()</span><span class="w"> </span><span class="c1"># fig <- fig %>% add_trace( ... )</span><span class="w"> </span><span class="c1"># fig <- fig %>% layout( ... ) </span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="n">dash</span><span class="p">)</span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="n">dashCoreComponents</span><span class="p">)</span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="n">dashHtmlComponents</span><span class="p">)</span><span class="w"> </span><span class="n">app</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">Dash</span><span class="o">$</span><span class="n">new</span><span class="p">()</span><span class="w"> </span><span class="n">app</span><span class="o">$</span><span class="n">layout</span><span class="p">(</span><span class="w"> </span><span class="n">htmlDiv</span><span class="p">(</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="w"> </span><span class="n">dccGraph</span><span class="p">(</span><span class="n">figure</span><span class="o">=</span><span class="n">fig</span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="n">app</span><span class="o">$</span><span class="n">run_server</span><span class="p">(</span><span class="n">debug</span><span class="o">=</span><span class="kc">TRUE</span><span class="p">,</span><span class="w"> </span><span class="n">dev_tools_hot_reload</span><span class="o">=</span><span class="kc">FALSE</span><span class="p">)</span><span class="w"> </span></code></pre></div> </section>  </section> </div> </main> <script> var array = []; $('.tutorial-content :header:not(h6)').each(function (i, e) { var item = $(e); var itemText = item.text(); var hash = itemText.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/^-+|-+$/g, '').toLowerCase(); item.attr("id", hash); array.push({text: itemText, tag: item.prop("tagName"), hash: hash}); }); $("#nav_header_insertion_list").html(array.map(function(entry) { var text = entry.text.replace(/[^a-z0-9\s\.:\-\?\!)]/gi, ''); if(entry.tag.toLowerCase() < "h4"){ return('<li class="--sidebar-item"><a href="#' + entry.hash + '">' + text + '</a></li>'); } else { return('<li class="--sidebar-item"><a href="#' + entry.hash + '">' + text + '</a></li>'); } }).join("")); //$(".tutorial-content :header:not(h6)").append( "\<div class=\"icon copy\" data-tooltip=\"Click to copy direct link\"><svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\"><path fill=\"#000000\" d=\"M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z\"/> </svg> </div>"); </script> <footer class="--footer-main"> <section class="--footer-top"> <div class="--wrap"> <ul class="--footer-body"> <li class="--footer-column"> <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>			 <ul> 				 <li> <p class="subscribe-text"> Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more!</p> <a href="https://go.plot.ly/subscription" class="subscribe-button" target="_blank"> Subscribe </a> </li> </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#e763fa" class="--footer-heading">Products</h6>			 <ul> <li><a href="https://plotly.com/dash/" target="_self">Dash</a></li> 				 				 <li><a href="https://plotly.com/consulting-and-oem/" target="_self">Consulting and Training</a></li> </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#636efa" class="--footer-heading">Pricing</h6>			 <ul> <li><a href="https://plotly.com/get-pricing/" target="_self">Enterprise Pricing</a></li> 				 </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#00cc96" class="--footer-heading">About Us</h6>			 <ul> <li><a href="https://plotly.com/careers" target="_self">Careers</a></li> 				 <li><a href="https://plotly.com/resources/" target="_self">Resources</a></li> 				 <li><a href="https://medium.com/@plotlygraphs" target="_self">Blog</a></li> 				 </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#EF553B" class="--footer-heading">Support</h6>			 <ul> <li><a href="https://community.plot.ly/" target="_self">Community Support</a></li> 				 <li><a href="https://plotly.com/graphing-libraries" target="_self">Documentation</a></li> 				 </ul> </li> </ul> </div> </section> <section class="--footer-meta"> <div class="--wrap"> <div class="left"> <article class="--copyright">Copyright © 2025 Plotly. All rights reserved.</article> </div> <div class="right"> <article class="--tos"><a href="https://community.plotly.com/tos" target="_blank">Terms of Service</a> </article> <article class="--privacy"><a href="https://plotly.com/privacy/" target="_blank">Privacy Policy</a> </article> </div> </div> <div id="markprompt" /> </section> </footer> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content" id="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <span style="float: left; padding-top:13px; padding-right:10px;"><i class="fa fa-search fa-lg"></i></span> <input id="search-input" class="search-input" type="text" placeholder="" /> </div> <div class="modal-body" id="modal-body"> <div id="search-results" class="search-results"> <div id="primary-search-results" class="primary-search-results"></div> <div id="schema-search-results" class="schema-search-results"></div> </div> </div> </div> </div> </div> <script> window.plotly_doc_language = "r"; </script>  <script> window.ALGOLIA_CONFIG = { 'applicationId': '7EK9KHJW8M', 'indexName': 'r_docs', 'apiKey': '4dae07ded6a721de73bde7356eec9280', 'baseurl': '/' } </script> <script id="algolia__template" type="text/template"> <div class="algolia__result"> <a class="algolia__result-link" onClick="$('#myModal').modal('toggle')" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a> <div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div> </div> </script> <script id="algolia__secondary-template" type="text/template"> <div class="algolia__secondary-result"> <a class="algolia__result-link" onClick="$('#myModal').modal('toggle')" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a> <div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div> </div> </script> <script id="algolia__template--no-results" type="text/template">No results found.</script> <script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script> <script src="/all_static/javascripts/algolia/algolia.js"></script>  <script src="/all_static//javascripts/hash_offset.js"></script>  <script src="/all_static/javascripts/imghover.js"></script> <script src="/all_static/javascripts/improve.js?version=2025-03-21-13-40"></script>   <script src="/all_static/javascripts/highlight/highlight.min.js"></script> <script src="/all_static/javascripts/highlight/julia.min.js"></script> <script src="/all_static/javascripts/highlight.line-numbers.js"></script> </body> </html>

CINXE.COM

The figure data structure in R