Input UI components for the scatterPlot module

This should be placed in the UI where the inputs should be shown, with an id that matches the id used in the scatterPlotServer() and scatterPlotOutputUI() functions.

Usage

scatterPlotInputsUI(id, data, defaults = NULL, title = NULL, columns = 2)

Arguments

id: The ID for the Shiny module.
data: The data frame used for plot generation.
defaults: A named list of default values for the inputs.
title: An optional title for the UI grid.
columns: Number of columns for the UI grid.

Value

A Shiny tagList containing the UI elements

Details

The user inputs for this module are separated from the outputs to allow for more flexible UI design.

The inputs will automatically be organized into a grid layout via the organize_inputs() function, with columns controlling the number of columns in the grid.

Defaults can be set for each input by providing a named list of values to the defaults argument. Nearly all parameters for dittoViz::scatterPlot() can be set via these inputs, so see the help for that function for an exhaustive list.

Note that some of the parameters may have input types that differ from the actual function, e.g. shape.panel is a text input for comma-separated integers, while the function expects a vector of integers. The module will parse such inputs into the appropriate format for dittoViz::scatterPlot() automatically.

There are also a handful that are specific to the Shiny module that additionally modify the plotly output:

id: The ID for the Shiny module.

Author

Jared Andrews

Examples

library(dittoVizModules)
data(mtcars)
scatterPlotInputsUI("scatterPlot", mtcars)
#> <div class="tabbable">
#>   <ul class="nav nav-tabs shiny-tab-input" id="scatterPlot-scatterPlotTabsetPanel" data-tabsetid="2330">
#>     <li class="active">
#>       <a href="#tab-2330-1" data-toggle="tab" data-bs-toggle="tab" data-value="Data">Data</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-2" data-toggle="tab" data-bs-toggle="tab" data-value="Adjustments">Adjustments</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-3" data-toggle="tab" data-bs-toggle="tab" data-value="Points">Points</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-4" data-toggle="tab" data-bs-toggle="tab" data-value="Colors">Colors</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-5" data-toggle="tab" data-bs-toggle="tab" data-value="Facets">Facets</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-6" data-toggle="tab" data-bs-toggle="tab" data-value="Annotations">Annotations</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-7" data-toggle="tab" data-bs-toggle="tab" data-value="Legend/Scale">Legend/Scale</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-8" data-toggle="tab" data-bs-toggle="tab" data-value="Trajectory">Trajectory</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-9" data-toggle="tab" data-bs-toggle="tab" data-value="Plotly">Plotly</a>
#>     </li>
#>     <li>
#>       <a href="#tab-2330-10" data-toggle="tab" data-bs-toggle="tab" data-value="Extras">Extras</a>
#>     </li>
#>   </ul>
#>   <div class="tab-content" data-tabsetid="2330">
#>     <div class="tab-pane active" data-value="Data" id="tab-2330-1">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-x.by-label" for="scatterPlot-x.by">X-axis variable</label>
#>             <div>
#>               <select id="scatterPlot-x.by" class="shiny-input-select"><option value=""></option>
#> <option value="mpg" selected>mpg</option>
#> <option value="cyl">cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#>               <script type="application/json" data-for="scatterPlot-x.by">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-y.by-label" for="scatterPlot-y.by">Y-axis variable</label>
#>             <div>
#>               <select id="scatterPlot-y.by" class="shiny-input-select"><option value=""></option>
#> <option value="mpg">mpg</option>
#> <option value="cyl" selected>cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#>               <script type="application/json" data-for="scatterPlot-y.by">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-color.by-label" for="scatterPlot-color.by">Color by</label>
#>             <div>
#>               <select id="scatterPlot-color.by" class="shiny-input-select"><option value="" selected></option>
#> <option value="mpg">mpg</option>
#> <option value="cyl">cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#>               <script type="application/json" data-for="scatterPlot-color.by">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-shape.by-label" for="scatterPlot-shape.by">Shape by</label>
#>             <div>
#>               <select id="scatterPlot-shape.by" class="shiny-input-select"><option value="" selected></option></select>
#>               <script type="application/json" data-for="scatterPlot-shape.by">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-split.by-label" for="scatterPlot-split.by">Split by</label>
#>             <div>
#>               <select class="shiny-input-select form-control" id="scatterPlot-split.by" multiple="multiple"><option value="" selected></option></select>
#>               <script type="application/json" data-for="scatterPlot-split.by">{"maxItems":2,"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-rows.use-label" for="scatterPlot-rows.use">Rows to plot</label>
#>             <input id="scatterPlot-rows.use" type="text" class="shiny-input-text form-control" value="" placeholder="Filter expression, e.g. Sepal.Length &gt; 5"/>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Adjustments" id="tab-2330-2">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-x.adjustment-label" for="scatterPlot-x.adjustment">X-axis adjustment</label>
#>             <div>
#>               <select id="scatterPlot-x.adjustment" class="shiny-input-select"><option value="" selected></option>
#> <option value="z-score">z-score</option>
#> <option value="relative.to.max">relative.to.max</option></select>
#>               <script type="application/json" data-for="scatterPlot-x.adjustment">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-y.adjustment-label" for="scatterPlot-y.adjustment">Y-axis adjustment</label>
#>             <div>
#>               <select id="scatterPlot-y.adjustment" class="shiny-input-select"><option value="" selected></option>
#> <option value="z-score">z-score</option>
#> <option value="relative.to.max">relative.to.max</option></select>
#>               <script type="application/json" data-for="scatterPlot-y.adjustment">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-color.adjustment-label" for="scatterPlot-color.adjustment">Color adjustment</label>
#>             <div>
#>               <select id="scatterPlot-color.adjustment" class="shiny-input-select"><option value="" selected></option>
#> <option value="z-score">z-score</option>
#> <option value="relative.to.max">relative.to.max</option></select>
#>               <script type="application/json" data-for="scatterPlot-color.adjustment">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-x.adj.fxn-label" for="scatterPlot-x.adj.fxn">X-axis adjustment function</label>
#>             <div>
#>               <select id="scatterPlot-x.adj.fxn" class="shiny-input-select"><option value="" selected></option>
#> <option value="log2">log2</option>
#> <option value="log">log</option>
#> <option value="log10">log10</option>
#> <option value="log1p">log1p</option>
#> <option value="as.factor">as.factor</option>
#> <option value="abs">abs</option>
#> <option value="sqrt">sqrt</option></select>
#>               <script type="application/json" data-for="scatterPlot-x.adj.fxn">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-y.adj.fxn-label" for="scatterPlot-y.adj.fxn">Y-axis adjustment function</label>
#>             <div>
#>               <select id="scatterPlot-y.adj.fxn" class="shiny-input-select"><option value="" selected></option>
#> <option value="log2">log2</option>
#> <option value="log">log</option>
#> <option value="log10">log10</option>
#> <option value="log1p">log1p</option>
#> <option value="as.factor">as.factor</option>
#> <option value="abs">abs</option>
#> <option value="sqrt">sqrt</option></select>
#>               <script type="application/json" data-for="scatterPlot-y.adj.fxn">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-color.adj.fxn-label" for="scatterPlot-color.adj.fxn">Color adjustment function</label>
#>             <div>
#>               <select id="scatterPlot-color.adj.fxn" class="shiny-input-select"><option value="" selected></option>
#> <option value="log2">log2</option>
#> <option value="log">log</option>
#> <option value="log10">log10</option>
#> <option value="log1p">log1p</option>
#> <option value="as.factor">as.factor</option>
#> <option value="abs">abs</option>
#> <option value="sqrt">sqrt</option></select>
#>               <script type="application/json" data-for="scatterPlot-color.adj.fxn">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Points" id="tab-2330-3">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-size-label" for="scatterPlot-size">Point size</label>
#>             <input id="scatterPlot-size" type="number" class="shiny-input-number form-control" value="1" min="0.1"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-opacity-label" for="scatterPlot-opacity">Point opacity</label>
#>             <input id="scatterPlot-opacity" type="number" class="shiny-input-number form-control" value="1" min="0" max="1" step="0.05"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-show.others" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#>                 <span>Show others</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-split.show.all.others" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#>                 <span>Show split others</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-plot.order-label" for="scatterPlot-plot.order">Plot order</label>
#>             <div>
#>               <select id="scatterPlot-plot.order" class="shiny-input-select"><option value="unordered" selected>unordered</option>
#> <option value="increasing">increasing</option>
#> <option value="decreasing">decreasing</option>
#> <option value="randomize">randomize</option></select>
#>               <script type="application/json" data-for="scatterPlot-plot.order" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-shape.panel-label" for="scatterPlot-shape.panel">Shape panel</label>
#>             <input id="scatterPlot-shape.panel" type="text" class="shiny-input-text form-control" value="16, 15, 17, 23, 25, 8"/>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Colors" id="tab-2330-4">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-min.color">Min color</label>
#>             <input id="scatterPlot-min.color" type="text" class="form-control shiny-colour-input" data-init-value="#F0E442" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-max.color">Max color</label>
#>             <input id="scatterPlot-max.color" type="text" class="form-control shiny-colour-input" data-init-value="#0072B2" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-contour.color">Contour color</label>
#>             <input id="scatterPlot-contour.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-contour.linetype-label" for="scatterPlot-contour.linetype">Contour linetype</label>
#>             <div>
#>               <select id="scatterPlot-contour.linetype" class="shiny-input-select"><option value="solid" selected>solid</option>
#> <option value="dashed">dashed</option>
#> <option value="dotted">dotted</option>
#> <option value="dotdash">dotdash</option>
#> <option value="longdash">longdash</option>
#> <option value="twodash">twodash</option></select>
#>               <script type="application/json" data-for="scatterPlot-contour.linetype" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container color-picker">
#>             <label class="control-label" id="scatterPlot-color.panel-label" for="scatterPlot-color.panel">Color panel</label>
#>             <select data-state-input="true" id="scatterPlot-color.panel" class="selectpicker form-control" autocomplete="off">
#>               <optgroup label="Defaults">
#>                 <option value="dittoColors" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #E69F00 0%, #E69F00 12%, #56B4E9 12%, #56B4E9 25%, #009E73 25%, #009E73 38%, #F0E442 38%, #F0E442 50%, #0072B2 50%, #0072B2 62%, #D55E00 62%, #D55E00 75%, #CC79A7 75%, #CC79A7 88%, #666666 88%, #666666 100%);;color:white&#39;&gt;dittoColors&lt;/div&gt;" selected="selected">dittoColors</option>
#>                 <option value="ggplot2" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F8766D 0%, #F8766D 11%, #D39200 11%, #D39200 22%, #93AA00 22%, #93AA00 33%, #00BA38 33%, #00BA38 44%, #00C19F 44%, #00C19F 56%, #00B9E3 56%, #00B9E3 67%, #619CFF 67%, #619CFF 78%, #DB72FB 78%, #DB72FB 89%, #FF61C3 89%, #FF61C3 100%);;color:white&#39;&gt;ggplot2&lt;/div&gt;">ggplot2</option>
#>               </optgroup>
#>               <optgroup label="Viridis">
#>                 <option value="viridis" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #440154FF 0%, #440154FF 10%, #482878FF 10%, #482878FF 20%, #3E4A89FF 20%, #3E4A89FF 30%, #31688EFF 30%, #31688EFF 40%, #26828EFF 40%, #26828EFF 50%, #1F9E89FF 50%, #1F9E89FF 60%, #35B779FF 60%, #35B779FF 70%, #6DCD59FF 70%, #6DCD59FF 80%, #B4DE2CFF 80%, #B4DE2CFF 90%, #FDE725FF 90%, #FDE725FF 100%);;color:white&#39;&gt;viridis&lt;/div&gt;">viridis</option>
#>                 <option value="magma" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #000004FF 0%, #000004FF 10%, #180F3EFF 10%, #180F3EFF 20%, #451077FF 20%, #451077FF 30%, #721F81FF 30%, #721F81FF 40%, #9F2F7FFF 40%, #9F2F7FFF 50%, #CD4071FF 50%, #CD4071FF 60%, #F1605DFF 60%, #F1605DFF 70%, #FD9567FF 70%, #FD9567FF 80%, #FEC98DFF 80%, #FEC98DFF 90%, #FCFDBFFF 90%, #FCFDBFFF 100%);;color:white&#39;&gt;magma&lt;/div&gt;">magma</option>
#>                 <option value="inferno" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #000004FF 0%, #000004FF 10%, #1B0C42FF 10%, #1B0C42FF 20%, #4B0C6BFF 20%, #4B0C6BFF 30%, #781C6DFF 30%, #781C6DFF 40%, #A52C60FF 40%, #A52C60FF 50%, #CF4446FF 50%, #CF4446FF 60%, #ED6925FF 60%, #ED6925FF 70%, #FB9A06FF 70%, #FB9A06FF 80%, #F7D03CFF 80%, #F7D03CFF 90%, #FCFFA4FF 90%, #FCFFA4FF 100%);;color:white&#39;&gt;inferno&lt;/div&gt;">inferno</option>
#>                 <option value="plasma" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #0D0887FF 0%, #0D0887FF 10%, #47039FFF 10%, #47039FFF 20%, #7301A8FF 20%, #7301A8FF 30%, #9C179EFF 30%, #9C179EFF 40%, #BD3786FF 40%, #BD3786FF 50%, #D8576BFF 50%, #D8576BFF 60%, #ED7953FF 60%, #ED7953FF 70%, #FA9E3BFF 70%, #FA9E3BFF 80%, #FDC926FF 80%, #FDC926FF 90%, #F0F921FF 90%, #F0F921FF 100%);;color:white&#39;&gt;plasma&lt;/div&gt;">plasma</option>
#>                 <option value="cividis" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #00204DFF 0%, #00204DFF 10%, #00336FFF 10%, #00336FFF 20%, #39486BFF 20%, #39486BFF 30%, #575C6DFF 30%, #575C6DFF 40%, #707173FF 40%, #707173FF 50%, #8A8779FF 50%, #8A8779FF 60%, #A69D75FF 60%, #A69D75FF 70%, #C4B56CFF 70%, #C4B56CFF 80%, #E4CF5BFF 80%, #E4CF5BFF 90%, #FFEA46FF 90%, #FFEA46FF 100%);;color:white&#39;&gt;cividis&lt;/div&gt;">cividis</option>
#>               </optgroup>
#>               <optgroup label="Diverging">
#>                 <option value="BrBG" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #543005 0%, #543005 9%, #8C510A 9%, #8C510A 18%, #BF812D 18%, #BF812D 27%, #DFC27D 27%, #DFC27D 36%, #F6E8C3 36%, #F6E8C3 45%, #F5F5F5 45%, #F5F5F5 55%, #C7EAE5 55%, #C7EAE5 64%, #80CDC1 64%, #80CDC1 73%, #35978F 73%, #35978F 82%, #01665E 82%, #01665E 91%, #003C30 91%, #003C30 100%);;color:white&#39;&gt;BrBG&lt;/div&gt;">BrBG</option>
#>                 <option value="PiYG" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #8E0152 0%, #8E0152 9%, #C51B7D 9%, #C51B7D 18%, #DE77AE 18%, #DE77AE 27%, #F1B6DA 27%, #F1B6DA 36%, #FDE0EF 36%, #FDE0EF 45%, #F7F7F7 45%, #F7F7F7 55%, #E6F5D0 55%, #E6F5D0 64%, #B8E186 64%, #B8E186 73%, #7FBC41 73%, #7FBC41 82%, #4D9221 82%, #4D9221 91%, #276419 91%, #276419 100%);;color:white&#39;&gt;PiYG&lt;/div&gt;">PiYG</option>
#>                 <option value="PRGn" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #40004B 0%, #40004B 9%, #762A83 9%, #762A83 18%, #9970AB 18%, #9970AB 27%, #C2A5CF 27%, #C2A5CF 36%, #E7D4E8 36%, #E7D4E8 45%, #F7F7F7 45%, #F7F7F7 55%, #D9F0D3 55%, #D9F0D3 64%, #A6DBA0 64%, #A6DBA0 73%, #5AAE61 73%, #5AAE61 82%, #1B7837 82%, #1B7837 91%, #00441B 91%, #00441B 100%);;color:white&#39;&gt;PRGn&lt;/div&gt;">PRGn</option>
#>                 <option value="PuOr" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #7F3B08 0%, #7F3B08 9%, #B35806 9%, #B35806 18%, #E08214 18%, #E08214 27%, #FDB863 27%, #FDB863 36%, #FEE0B6 36%, #FEE0B6 45%, #F7F7F7 45%, #F7F7F7 55%, #D8DAEB 55%, #D8DAEB 64%, #B2ABD2 64%, #B2ABD2 73%, #8073AC 73%, #8073AC 82%, #542788 82%, #542788 91%, #2D004B 91%, #2D004B 100%);;color:white&#39;&gt;PuOr&lt;/div&gt;">PuOr</option>
#>                 <option value="RdBu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #67001F 0%, #67001F 9%, #B2182B 9%, #B2182B 18%, #D6604D 18%, #D6604D 27%, #F4A582 27%, #F4A582 36%, #FDDBC7 36%, #FDDBC7 45%, #F7F7F7 45%, #F7F7F7 55%, #D1E5F0 55%, #D1E5F0 64%, #92C5DE 64%, #92C5DE 73%, #4393C3 73%, #4393C3 82%, #2166AC 82%, #2166AC 91%, #053061 91%, #053061 100%);;color:white&#39;&gt;RdBu&lt;/div&gt;">RdBu</option>
#>                 <option value="RdGy" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #67001F 0%, #67001F 9%, #B2182B 9%, #B2182B 18%, #D6604D 18%, #D6604D 27%, #F4A582 27%, #F4A582 36%, #FDDBC7 36%, #FDDBC7 45%, #FFFFFF 45%, #FFFFFF 55%, #E0E0E0 55%, #E0E0E0 64%, #BABABA 64%, #BABABA 73%, #878787 73%, #878787 82%, #4D4D4D 82%, #4D4D4D 91%, #1A1A1A 91%, #1A1A1A 100%);;color:white&#39;&gt;RdGy&lt;/div&gt;">RdGy</option>
#>                 <option value="RdYlBu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #A50026 0%, #A50026 9%, #D73027 9%, #D73027 18%, #F46D43 18%, #F46D43 27%, #FDAE61 27%, #FDAE61 36%, #FEE090 36%, #FEE090 45%, #FFFFBF 45%, #FFFFBF 55%, #E0F3F8 55%, #E0F3F8 64%, #ABD9E9 64%, #ABD9E9 73%, #74ADD1 73%, #74ADD1 82%, #4575B4 82%, #4575B4 91%, #313695 91%, #313695 100%);;color:white&#39;&gt;RdYlBu&lt;/div&gt;">RdYlBu</option>
#>                 <option value="RdYlGn" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #A50026 0%, #A50026 9%, #D73027 9%, #D73027 18%, #F46D43 18%, #F46D43 27%, #FDAE61 27%, #FDAE61 36%, #FEE08B 36%, #FEE08B 45%, #FFFFBF 45%, #FFFFBF 55%, #D9EF8B 55%, #D9EF8B 64%, #A6D96A 64%, #A6D96A 73%, #66BD63 73%, #66BD63 82%, #1A9850 82%, #1A9850 91%, #006837 91%, #006837 100%);;color:white&#39;&gt;RdYlGn&lt;/div&gt;">RdYlGn</option>
#>                 <option value="Spectral" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #9E0142 0%, #9E0142 9%, #D53E4F 9%, #D53E4F 18%, #F46D43 18%, #F46D43 27%, #FDAE61 27%, #FDAE61 36%, #FEE08B 36%, #FEE08B 45%, #FFFFBF 45%, #FFFFBF 55%, #E6F598 55%, #E6F598 64%, #ABDDA4 64%, #ABDDA4 73%, #66C2A5 73%, #66C2A5 82%, #3288BD 82%, #3288BD 91%, #5E4FA2 91%, #5E4FA2 100%);;color:white&#39;&gt;Spectral&lt;/div&gt;">Spectral</option>
#>               </optgroup>
#>               <optgroup label="Qualitative">
#>                 <option value="Accent" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #7FC97F 0%, #7FC97F 12%, #BEAED4 12%, #BEAED4 25%, #FDC086 25%, #FDC086 38%, #FFFF99 38%, #FFFF99 50%, #386CB0 50%, #386CB0 62%, #F0027F 62%, #F0027F 75%, #BF5B17 75%, #BF5B17 88%, #666666 88%, #666666 100%);;color:white&#39;&gt;Accent&lt;/div&gt;">Accent</option>
#>                 <option value="Dark2" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #1B9E77 0%, #1B9E77 12%, #D95F02 12%, #D95F02 25%, #7570B3 25%, #7570B3 38%, #E7298A 38%, #E7298A 50%, #66A61E 50%, #66A61E 62%, #E6AB02 62%, #E6AB02 75%, #A6761D 75%, #A6761D 88%, #666666 88%, #666666 100%);;color:white&#39;&gt;Dark2&lt;/div&gt;">Dark2</option>
#>                 <option value="Paired" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #A6CEE3 0%, #A6CEE3 8%, #1F78B4 8%, #1F78B4 17%, #B2DF8A 17%, #B2DF8A 25%, #33A02C 25%, #33A02C 33%, #FB9A99 33%, #FB9A99 42%, #E31A1C 42%, #E31A1C 50%, #FDBF6F 50%, #FDBF6F 58%, #FF7F00 58%, #FF7F00 67%, #CAB2D6 67%, #CAB2D6 75%, #6A3D9A 75%, #6A3D9A 83%, #FFFF99 83%, #FFFF99 92%, #B15928 92%, #B15928 100%);;color:white&#39;&gt;Paired&lt;/div&gt;">Paired</option>
#>                 <option value="Pastel1" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FBB4AE 0%, #FBB4AE 11%, #B3CDE3 11%, #B3CDE3 22%, #CCEBC5 22%, #CCEBC5 33%, #DECBE4 33%, #DECBE4 44%, #FED9A6 44%, #FED9A6 56%, #FFFFCC 56%, #FFFFCC 67%, #E5D8BD 67%, #E5D8BD 78%, #FDDAEC 78%, #FDDAEC 89%, #F2F2F2 89%, #F2F2F2 100%);;color:white&#39;&gt;Pastel1&lt;/div&gt;">Pastel1</option>
#>                 <option value="Pastel2" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #B3E2CD 0%, #B3E2CD 12%, #FDCDAC 12%, #FDCDAC 25%, #CBD5E8 25%, #CBD5E8 38%, #F4CAE4 38%, #F4CAE4 50%, #E6F5C9 50%, #E6F5C9 62%, #FFF2AE 62%, #FFF2AE 75%, #F1E2CC 75%, #F1E2CC 88%, #CCCCCC 88%, #CCCCCC 100%);;color:white&#39;&gt;Pastel2&lt;/div&gt;">Pastel2</option>
#>                 <option value="Set1" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #E41A1C 0%, #E41A1C 12%, #377EB8 12%, #377EB8 25%, #4DAF4A 25%, #4DAF4A 38%, #984EA3 38%, #984EA3 50%, #FF7F00 50%, #FF7F00 62%, #FFFF33 62%, #FFFF33 75%, #A65628 75%, #A65628 88%, #F781BF 88%, #F781BF 100%);;color:white&#39;&gt;Set1&lt;/div&gt;">Set1</option>
#>                 <option value="Set2" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #66C2A5 0%, #66C2A5 12%, #FC8D62 12%, #FC8D62 25%, #8DA0CB 25%, #8DA0CB 38%, #E78AC3 38%, #E78AC3 50%, #A6D854 50%, #A6D854 62%, #FFD92F 62%, #FFD92F 75%, #E5C494 75%, #E5C494 88%, #B3B3B3 88%, #B3B3B3 100%);;color:white&#39;&gt;Set2&lt;/div&gt;">Set2</option>
#>                 <option value="Set3" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #8DD3C7 0%, #8DD3C7 8%, #FFFFB3 8%, #FFFFB3 17%, #BEBADA 17%, #BEBADA 25%, #FB8072 25%, #FB8072 33%, #80B1D3 33%, #80B1D3 42%, #FDB462 42%, #FDB462 50%, #B3DE69 50%, #B3DE69 58%, #FCCDE5 58%, #FCCDE5 67%, #D9D9D9 67%, #D9D9D9 75%, #BC80BD 75%, #BC80BD 83%, #CCEBC5 83%, #CCEBC5 92%, #FFED6F 92%, #FFED6F 100%);;color:white&#39;&gt;Set3&lt;/div&gt;">Set3</option>
#>               </optgroup>
#>               <optgroup label="Sequential">
#>                 <option value="Blues" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F7FBFF 0%, #F7FBFF 11%, #DEEBF7 11%, #DEEBF7 22%, #C6DBEF 22%, #C6DBEF 33%, #9ECAE1 33%, #9ECAE1 44%, #6BAED6 44%, #6BAED6 56%, #4292C6 56%, #4292C6 67%, #2171B5 67%, #2171B5 78%, #08519C 78%, #08519C 89%, #08306B 89%, #08306B 100%);;color:black&#39;&gt;Blues&lt;/div&gt;">Blues</option>
#>                 <option value="BuGn" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11%, #E5F5F9 11%, #E5F5F9 22%, #CCECE6 22%, #CCECE6 33%, #99D8C9 33%, #99D8C9 44%, #66C2A4 44%, #66C2A4 56%, #41AE76 56%, #41AE76 67%, #238B45 67%, #238B45 78%, #006D2C 78%, #006D2C 89%, #00441B 89%, #00441B 100%);;color:black&#39;&gt;BuGn&lt;/div&gt;">BuGn</option>
#>                 <option value="BuPu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F7FCFD 0%, #F7FCFD 11%, #E0ECF4 11%, #E0ECF4 22%, #BFD3E6 22%, #BFD3E6 33%, #9EBCDA 33%, #9EBCDA 44%, #8C96C6 44%, #8C96C6 56%, #8C6BB1 56%, #8C6BB1 67%, #88419D 67%, #88419D 78%, #810F7C 78%, #810F7C 89%, #4D004B 89%, #4D004B 100%);;color:black&#39;&gt;BuPu&lt;/div&gt;">BuPu</option>
#>                 <option value="GnBu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F7FCF0 0%, #F7FCF0 11%, #E0F3DB 11%, #E0F3DB 22%, #CCEBC5 22%, #CCEBC5 33%, #A8DDB5 33%, #A8DDB5 44%, #7BCCC4 44%, #7BCCC4 56%, #4EB3D3 56%, #4EB3D3 67%, #2B8CBE 67%, #2B8CBE 78%, #0868AC 78%, #0868AC 89%, #084081 89%, #084081 100%);;color:black&#39;&gt;GnBu&lt;/div&gt;">GnBu</option>
#>                 <option value="Greens" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F7FCF5 0%, #F7FCF5 11%, #E5F5E0 11%, #E5F5E0 22%, #C7E9C0 22%, #C7E9C0 33%, #A1D99B 33%, #A1D99B 44%, #74C476 44%, #74C476 56%, #41AB5D 56%, #41AB5D 67%, #238B45 67%, #238B45 78%, #006D2C 78%, #006D2C 89%, #00441B 89%, #00441B 100%);;color:black&#39;&gt;Greens&lt;/div&gt;">Greens</option>
#>                 <option value="Greys" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFFFFF 0%, #FFFFFF 11%, #F0F0F0 11%, #F0F0F0 22%, #D9D9D9 22%, #D9D9D9 33%, #BDBDBD 33%, #BDBDBD 44%, #969696 44%, #969696 56%, #737373 56%, #737373 67%, #525252 67%, #525252 78%, #252525 78%, #252525 89%, #000000 89%, #000000 100%);;color:black&#39;&gt;Greys&lt;/div&gt;">Greys</option>
#>                 <option value="Oranges" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFF5EB 0%, #FFF5EB 11%, #FEE6CE 11%, #FEE6CE 22%, #FDD0A2 22%, #FDD0A2 33%, #FDAE6B 33%, #FDAE6B 44%, #FD8D3C 44%, #FD8D3C 56%, #F16913 56%, #F16913 67%, #D94801 67%, #D94801 78%, #A63603 78%, #A63603 89%, #7F2704 89%, #7F2704 100%);;color:black&#39;&gt;Oranges&lt;/div&gt;">Oranges</option>
#>                 <option value="OrRd" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFF7EC 0%, #FFF7EC 11%, #FEE8C8 11%, #FEE8C8 22%, #FDD49E 22%, #FDD49E 33%, #FDBB84 33%, #FDBB84 44%, #FC8D59 44%, #FC8D59 56%, #EF6548 56%, #EF6548 67%, #D7301F 67%, #D7301F 78%, #B30000 78%, #B30000 89%, #7F0000 89%, #7F0000 100%);;color:black&#39;&gt;OrRd&lt;/div&gt;">OrRd</option>
#>                 <option value="PuBu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11%, #ECE7F2 11%, #ECE7F2 22%, #D0D1E6 22%, #D0D1E6 33%, #A6BDDB 33%, #A6BDDB 44%, #74A9CF 44%, #74A9CF 56%, #3690C0 56%, #3690C0 67%, #0570B0 67%, #0570B0 78%, #045A8D 78%, #045A8D 89%, #023858 89%, #023858 100%);;color:black&#39;&gt;PuBu&lt;/div&gt;">PuBu</option>
#>                 <option value="PuBuGn" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFF7FB 0%, #FFF7FB 11%, #ECE2F0 11%, #ECE2F0 22%, #D0D1E6 22%, #D0D1E6 33%, #A6BDDB 33%, #A6BDDB 44%, #67A9CF 44%, #67A9CF 56%, #3690C0 56%, #3690C0 67%, #02818A 67%, #02818A 78%, #016C59 78%, #016C59 89%, #014636 89%, #014636 100%);;color:black&#39;&gt;PuBuGn&lt;/div&gt;">PuBuGn</option>
#>                 <option value="PuRd" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #F7F4F9 0%, #F7F4F9 11%, #E7E1EF 11%, #E7E1EF 22%, #D4B9DA 22%, #D4B9DA 33%, #C994C7 33%, #C994C7 44%, #DF65B0 44%, #DF65B0 56%, #E7298A 56%, #E7298A 67%, #CE1256 67%, #CE1256 78%, #980043 78%, #980043 89%, #67001F 89%, #67001F 100%);;color:black&#39;&gt;PuRd&lt;/div&gt;">PuRd</option>
#>                 <option value="Purples" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FCFBFD 0%, #FCFBFD 11%, #EFEDF5 11%, #EFEDF5 22%, #DADAEB 22%, #DADAEB 33%, #BCBDDC 33%, #BCBDDC 44%, #9E9AC8 44%, #9E9AC8 56%, #807DBA 56%, #807DBA 67%, #6A51A3 67%, #6A51A3 78%, #54278F 78%, #54278F 89%, #3F007D 89%, #3F007D 100%);;color:black&#39;&gt;Purples&lt;/div&gt;">Purples</option>
#>                 <option value="RdPu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFF7F3 0%, #FFF7F3 11%, #FDE0DD 11%, #FDE0DD 22%, #FCC5C0 22%, #FCC5C0 33%, #FA9FB5 33%, #FA9FB5 44%, #F768A1 44%, #F768A1 56%, #DD3497 56%, #DD3497 67%, #AE017E 67%, #AE017E 78%, #7A0177 78%, #7A0177 89%, #49006A 89%, #49006A 100%);;color:black&#39;&gt;RdPu&lt;/div&gt;">RdPu</option>
#>                 <option value="Reds" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFF5F0 0%, #FFF5F0 11%, #FEE0D2 11%, #FEE0D2 22%, #FCBBA1 22%, #FCBBA1 33%, #FC9272 33%, #FC9272 44%, #FB6A4A 44%, #FB6A4A 56%, #EF3B2C 56%, #EF3B2C 67%, #CB181D 67%, #CB181D 78%, #A50F15 78%, #A50F15 89%, #67000D 89%, #67000D 100%);;color:black&#39;&gt;Reds&lt;/div&gt;">Reds</option>
#>                 <option value="YlGn" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11%, #F7FCB9 11%, #F7FCB9 22%, #D9F0A3 22%, #D9F0A3 33%, #ADDD8E 33%, #ADDD8E 44%, #78C679 44%, #78C679 56%, #41AB5D 56%, #41AB5D 67%, #238443 67%, #238443 78%, #006837 78%, #006837 89%, #004529 89%, #004529 100%);;color:black&#39;&gt;YlGn&lt;/div&gt;">YlGn</option>
#>                 <option value="YlGnBu" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFFFD9 0%, #FFFFD9 11%, #EDF8B1 11%, #EDF8B1 22%, #C7E9B4 22%, #C7E9B4 33%, #7FCDBB 33%, #7FCDBB 44%, #41B6C4 44%, #41B6C4 56%, #1D91C0 56%, #1D91C0 67%, #225EA8 67%, #225EA8 78%, #253494 78%, #253494 89%, #081D58 89%, #081D58 100%);;color:black&#39;&gt;YlGnBu&lt;/div&gt;">YlGnBu</option>
#>                 <option value="YlOrBr" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFFFE5 0%, #FFFFE5 11%, #FFF7BC 11%, #FFF7BC 22%, #FEE391 22%, #FEE391 33%, #FEC44F 33%, #FEC44F 44%, #FE9929 44%, #FE9929 56%, #EC7014 56%, #EC7014 67%, #CC4C02 67%, #CC4C02 78%, #993404 78%, #993404 89%, #662506 89%, #662506 100%);;color:black&#39;&gt;YlOrBr&lt;/div&gt;">YlOrBr</option>
#>                 <option value="YlOrRd" data-content="&lt;div style=&#39;width:100%;border-radius:4px; padding: 2px;background:linear-gradient(to right, #FFFFCC 0%, #FFFFCC 11%, #FFEDA0 11%, #FFEDA0 22%, #FED976 22%, #FED976 33%, #FEB24C 33%, #FEB24C 44%, #FD8D3C 44%, #FD8D3C 56%, #FC4E2A 56%, #FC4E2A 67%, #E31A1C 67%, #E31A1C 78%, #BD0026 78%, #BD0026 89%, #800026 89%, #800026 100%);;color:black&#39;&gt;YlOrRd&lt;/div&gt;">YlOrRd</option>
#>               </optgroup>
#>             </select>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Facets" id="tab-2330-5">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-split.nrow-label" for="scatterPlot-split.nrow">Split nrow</label>
#>             <input id="scatterPlot-split.nrow" type="number" class="shiny-input-number form-control" value="NA" min="0" step="1"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-split.ncol-label" for="scatterPlot-split.ncol">Split ncol</label>
#>             <input id="scatterPlot-split.ncol" type="number" class="shiny-input-number form-control" value="NA" min="0" step="1"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-multivar.split.dir-label" for="scatterPlot-multivar.split.dir">Multivar split dir</label>
#>             <div>
#>               <select id="scatterPlot-multivar.split.dir" class="shiny-input-select"><option value="col" selected>col</option>
#> <option value="row">row</option></select>
#>               <script type="application/json" data-for="scatterPlot-multivar.split.dir" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Annotations" id="tab-2330-6">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-annotate.by-label" for="scatterPlot-annotate.by">Annotate by</label>
#>             <div>
#>               <select id="scatterPlot-annotate.by" class="shiny-input-select"><option value="" selected></option>
#> <option value="mpg">mpg</option>
#> <option value="cyl">cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#>               <script type="application/json" data-for="scatterPlot-annotate.by">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-annotation.color">Annotation color</label>
#>             <input id="scatterPlot-annotation.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-annotation.ax-label" for="scatterPlot-annotation.ax">Annotation x-axis offset</label>
#>             <input id="scatterPlot-annotation.ax" type="number" class="shiny-input-number form-control" value="20" step="1"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-annotation.ay-label" for="scatterPlot-annotation.ay">Annotation y-axis offset</label>
#>             <input id="scatterPlot-annotation.ay" type="number" class="shiny-input-number form-control" value="-20" step="1"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-annotation.size-label" for="scatterPlot-annotation.size">Annotation size</label>
#>             <input id="scatterPlot-annotation.size" type="number" class="shiny-input-number form-control" value="10" min="1" step="0.5"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-annotation.showarrow" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#>                 <span>Show arrow</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-annotation.arrowcolor">Arrow color</label>
#>             <input id="scatterPlot-annotation.arrowcolor" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-annotation.arrowhead-label" for="scatterPlot-annotation.arrowhead">Arrowhead style</label>
#>             <input id="scatterPlot-annotation.arrowhead" type="number" class="shiny-input-number form-control" value="2" min="0" max="7" step="1"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-annotation.arrowwidth-label" for="scatterPlot-annotation.arrowwidth">Arrow linewidth</label>
#>             <input id="scatterPlot-annotation.arrowwidth" type="number" class="shiny-input-number form-control" value="1.5" min="0.1" step="0.25"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <button id="scatterPlot-annotation.clear" type="button" class="btn btn-default action-button">Clear annotations</button>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Legend/Scale" id="tab-2330-7">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-legend.show" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#>                 <span>Enable legend</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-legend.color.title-label" for="scatterPlot-legend.color.title">Legend title</label>
#>             <input id="scatterPlot-legend.color.title" type="text" class="shiny-input-text form-control" value="make"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-legend.color.size-label" for="scatterPlot-legend.color.size">Legend color size</label>
#>             <input id="scatterPlot-legend.color.size" type="number" class="shiny-input-number form-control" value="5" min="1"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-legend.shape.size-label" for="scatterPlot-legend.shape.size">Legend shape size</label>
#>             <input id="scatterPlot-legend.shape.size" type="number" class="shiny-input-number form-control" value="5" min="1"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-legend.color.breaks-label" for="scatterPlot-legend.color.breaks">Legend tick breaks</label>
#>             <input id="scatterPlot-legend.color.breaks" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. -3, 0, 3"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-min.value-label" for="scatterPlot-min.value">Min value</label>
#>             <input id="scatterPlot-min.value" type="number" class="shiny-input-number form-control" value="NA"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-max.value-label" for="scatterPlot-max.value">Max value</label>
#>             <input id="scatterPlot-max.value" type="number" class="shiny-input-number form-control" value="NA"/>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Trajectory" id="tab-2330-8">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-trajectory.group.by-label" for="scatterPlot-trajectory.group.by">Trajectory group by</label>
#>             <div>
#>               <select id="scatterPlot-trajectory.group.by" class="shiny-input-select"><option value="" selected></option></select>
#>               <script type="application/json" data-for="scatterPlot-trajectory.group.by">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-add.trajectory.by.groups-label" for="scatterPlot-add.trajectory.by.groups">Add trajectory by groups</label>
#>             <input id="scatterPlot-add.trajectory.by.groups" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. [A,B],[C,D,E]"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-trajectory.arrow.size-label" for="scatterPlot-trajectory.arrow.size">Trajectory arrow size</label>
#>             <input id="scatterPlot-trajectory.arrow.size" type="number" class="shiny-input-number form-control" value="0.15" min="0" step="0.05"/>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Plotly" id="tab-2330-9">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-webgl" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#>                 <span>Plot with webGL</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-download.format-label" for="scatterPlot-download.format">Download format</label>
#>             <div>
#>               <select id="scatterPlot-download.format" class="shiny-input-select"><option value="svg" selected>svg</option>
#> <option value="png">png</option></select>
#>               <script type="application/json" data-for="scatterPlot-download.format" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-shape.fill">Shape fill</label>
#>             <input id="scatterPlot-shape.fill" type="text" class="form-control shiny-colour-input" data-init-value="rgba(0, 0, 0, 0)" data-show-colour="both" data-palette="square" data-allow-alpha="true"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-shape.line.color">Shape line color</label>
#>             <input id="scatterPlot-shape.line.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square" data-allow-alpha="true"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-shape.line.width-label" for="scatterPlot-shape.line.width">Shape line width</label>
#>             <input id="scatterPlot-shape.line.width" type="number" class="shiny-input-number form-control" value="4" min="0" step="0.25"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-shape.linetype-label" for="scatterPlot-shape.linetype">Shape linetype</label>
#>             <div>
#>               <select id="scatterPlot-shape.linetype" class="shiny-input-select"><option value="solid" selected>solid</option>
#> <option value="dot">dot</option>
#> <option value="dash">dash</option>
#> <option value="longdash">longdash</option>
#> <option value="dashdot">dashdot</option>
#> <option value="longdashdot">longdashdot</option></select>
#>               <script type="application/json" data-for="scatterPlot-shape.linetype" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-shape.opacity-label" for="scatterPlot-shape.opacity">Shape opacity</label>
#>             <input id="scatterPlot-shape.opacity" type="number" class="shiny-input-number form-control" value="1" min="0" max="1" step="0.01"/>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="tab-pane" data-value="Extras" id="tab-2330-10">
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-do.ellipse" type="checkbox" class="shiny-input-checkbox"/>
#>                 <span>Enable ellipses</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-do.contour" type="checkbox" class="shiny-input-checkbox"/>
#>                 <span>Enable contour</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <div class="checkbox">
#>               <label>
#>                 <input id="scatterPlot-show.grid.lines" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#>                 <span>Show gridlines</span>
#>               </label>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-hover.data-label" for="scatterPlot-hover.data">Hover data</label>
#>             <div>
#>               <select class="shiny-input-select form-control" id="scatterPlot-hover.data" multiple="multiple"><option value="" selected></option>
#> <option value="mpg">mpg</option>
#> <option value="cyl">cyl</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="gear">gear</option>
#> <option value="carb">carb</option></select>
#>               <script type="application/json" data-for="scatterPlot-hover.data">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-hover.round.digits-label" for="scatterPlot-hover.round.digits">Hover round digits</label>
#>             <input id="scatterPlot-hover.round.digits" type="number" class="shiny-input-number form-control" value="5" min="1" step="1"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-add.xline-label" for="scatterPlot-add.xline">Add xlines</label>
#>             <input id="scatterPlot-add.xline" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. 2, -2"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-add.yline-label" for="scatterPlot-add.yline">Add ylines</label>
#>             <input id="scatterPlot-add.yline" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. 2, -2"/>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-xline.linetype-label" for="scatterPlot-xline.linetype">xline linetype</label>
#>             <div>
#>               <select id="scatterPlot-xline.linetype" class="shiny-input-select"><option value="solid" selected>solid</option>
#> <option value="dashed">dashed</option>
#> <option value="dotted">dotted</option>
#> <option value="dotdash">dotdash</option>
#> <option value="longdash">longdash</option>
#> <option value="twodash">twodash</option></select>
#>               <script type="application/json" data-for="scatterPlot-xline.linetype" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container">
#>             <label class="control-label" id="scatterPlot-yline.linetype-label" for="scatterPlot-yline.linetype">yline linetype</label>
#>             <div>
#>               <select id="scatterPlot-yline.linetype" class="shiny-input-select"><option value="solid" selected>solid</option>
#> <option value="dashed">dashed</option>
#> <option value="dotted">dotted</option>
#> <option value="dotdash">dotdash</option>
#> <option value="longdash">longdash</option>
#> <option value="twodash">twodash</option></select>
#>               <script type="application/json" data-for="scatterPlot-yline.linetype" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>             </div>
#>           </div>
#>         </div>
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-xline.color">xline color</label>
#>             <input id="scatterPlot-xline.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>       </div>
#>       <div class="row">
#>         <div class="col-sm-6">
#>           <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#>             <label class="control-label" for="scatterPlot-yline.color">yline color</label>
#>             <input id="scatterPlot-yline.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>   </div>
#> </div>
#> <button id="scatterPlot-update" type="button" class="btn btn-default action-button">Update Plot</button>
#> <br/>