https://shiny.posit.co/

Submitted URL:
https://shiny.posit.co/
Report Finished:
LinkText
https://github.com/rstudio/shiny
https://www.posit.co/
https://twitter.com/posit_pbc
https://www.youtube.com/playlist?list=PL9HYL-VRX0oRbLoj3FyL5zeASU5FMDgVe

JavaScript Variables · 63 found

NameType
0object
1object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
Headroomfunction
ClipboardJSfunction
@algolia/autocomplete-jsobject
eobject
tfunction

Console log messages · 0 found

HTML

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-1.4.557">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<meta name="description" content="Shiny is package that makes it easy to build interactive web apps straight from R &amp; Python.">

<title>Shiny</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
  width: 0.8em;
  margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
  vertical-align: middle;
}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
  }
pre.numberSource { margin-left: 3em;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
</style>


<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-2C0WZ1JHG0&amp;l=dataLayer&amp;cx=c&amp;gtm=45He4bk0v9103206369za200"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-8QJS108GF1&amp;l=dataLayer&amp;cx=c&amp;gtm=45He4bk0v9103206369za200"></script><script type="text/javascript" async="" src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-KHBDBW7"></script><script src="site_libs/quarto-nav/quarto-nav.js"></script>
<script src="site_libs/quarto-nav/headroom.min.js"></script>
<script src="site_libs/clipboard/clipboard.min.js"></script>
<script src="site_libs/quarto-search/autocomplete.umd.js"></script>
<script src="site_libs/quarto-search/fuse.min.js"></script>
<script src="site_libs/quarto-search/quarto-search.js"></script>
<meta name="quarto:offset" content="./">
<link href="./favicon.png" rel="icon" type="image/png">
<script src="site_libs/quarto-html/quarto.js"></script>
<script src="site_libs/quarto-html/popper.min.js"></script>
<script src="site_libs/quarto-html/tippy.umd.min.js"></script>
<link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
<link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="site_libs/bootstrap/bootstrap.min.js"></script>
<link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
<script id="quarto-search-options" type="application/json">{
  "location": "navbar",
  "copy-button": false,
  "collapse-after": 3,
  "panel-placement": "end",
  "type": "overlay",
  "limit": 50,
  "keyboard-shortcut": [
    "f",
    "/",
    "s"
  ],
  "show-item-context": false,
  "language": {
    "search-no-results-text": "No results",
    "search-matching-documents-text": "matching documents",
    "search-copy-link-title": "Copy link to search",
    "search-hide-matches-text": "Hide additional matches",
    "search-more-match-text": "more match in this document",
    "search-more-matches-text": "more matches in this document",
    "search-clear-button-title": "Clear",
    "search-text-placeholder": "",
    "search-detached-cancel-button-title": "Cancel",
    "search-submit-button-title": "Submit",
    "search-label": "Search"
  }
}</script>
<style>html{ scroll-behavior: smooth; }</style>
<!-- Google Tag Manager -->
<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-KHBDBW7');
</script>
<!-- End Google Tag Manager -->

<!-- Add rel="noopener noreferrer" to each target="_blank" -->
<script type="text/javascript">
  window.addEventListener("load",() =>
    [...document.querySelectorAll("a[target=_blank]")]
      .forEach(lnk => lnk.setAttribute("rel", "noopener noreferrer"))
  );
</script>
<!-- End Add rel="noopener noreferrer" to each target="_blank" -->

<link href="./_lib/font-awesome/css/all.css" rel="stylesheet" type="text/css">


<!-- Shinylive functionality in Components section -->


<script type="text/javascript">
  (function () {
    function addShinyliveEditLinks() {
      const codeWithLink = document.querySelectorAll(
        ".sourceCode[data-shinylive]"
      );
      codeWithLink.forEach((el) => {
        el.classList.add("code-with-shinylive-link");
        const url = el.dataset.shinylive;

        // <a class="edit-shinylive-button btn btn-link" href="<%= app.shinylive %>" data-bs-toggle="tooltip" data-bs-title="Edit in Shinylive" data-bs-placement="bottom">
        //  <i class="bi bi-lightning-fill"></i> <span class="visually-hidden">Edit in Shinylive</span>
        // </a>

        const link = document.createElement("a");
        link.classList.add("edit-shinylive-button", "btn", "btn-link");
        link.href = url;
        link.dataset.bsToggle = "tooltip";
        link.dataset.bsTitle = "Edit in Shinylive";
        link.dataset.bsPlacement = "bottom";

        const icon = document.createElement("i");
        icon.classList.add("bi", "bi-lightning-fill");
        link.appendChild(icon);

        const span = document.createElement("span");
        span.classList.add("visually-hidden");
        span.innerText = "Edit in Shinylive";
        link.appendChild(span);

        const btnCopy = el.querySelector(".code-copy-button");
        if (btnCopy) {
          btnCopy.parentElement.appendChild(link);
        } else {
          if (el.matches("pre")) {
            el.appendChild(link);
          } else {
            el.querySelector("pre").appendChild(link);
          }
        }

        if (window.bootstrap?.Tooltip) {
          new bootstrap.Tooltip(link);
        }
        el.removeAttribute("data-shinylive");
      });
    }

    function addWhatsShinyExpressTooltip() {
      const tooltipContents = `<p><strong>Shiny Express</strong> is a new, streamlined way to write a Shiny app.</p>
    <p><strong>Shiny Core</strong> refers to the original, functional Shiny syntax, which is still a great way to write Shiny apps.</p>
    <p class="fw-600" style="font-size:0.85em;"><a href="https://shiny.posit.co/blog/posts/shiny-express/">Read more <i class="bi bi-chevron-right align-text-top"></i></a></p>`;

      const tooltipDisplay = `<i class="bi bi-question-circle-fill d-inline d-sm-none"></i><span class="d-none d-sm-inline">What's this?</span>`;

      document
        .querySelectorAll(".panel-tabset.shiny-mode-tabset")
        .forEach(function (tabset) {
          const trigger = document.createElement("div");
          trigger.classList.add("what-shiny-express", "text-white");
          trigger.tabIndex = 0;
          trigger.innerHTML = tooltipDisplay;
          tabset.appendChild(trigger);

          if (!window.bootstrap?.Popover) {
            return;
          }

          new window.bootstrap.Popover(trigger, {
            html: true,
            title: "Express vs Core",
            content: tooltipContents,
            placement: "auto",
            trigger: "focus",
            container: tabset,
          });
        });
    }

    function handlePanelVariants() {
      document.querySelectorAll(".panel-pills > .nav").forEach((x) => {
        x.classList.remove("nav-tabs");
        x.classList.add("nav-pills");
      });
      document.querySelectorAll(".panel-underline > .nav").forEach((x) => {
        x.classList.remove("nav-tabs");
        x.classList.add("nav-underline");
      });
      document.querySelectorAll(".shiny-mode-tabset > .nav").forEach((x) => {
        x.classList.remove("nav-tabs");
        x.classList.add("nav-underline");
      });
    }

    function onLoad() {
      addShinyliveEditLinks();
      addWhatsShinyExpressTooltip();
      handlePanelVariants();
    }

    document.readyState === "loading"
      ? document.addEventListener("DOMContentLoaded", onLoad)
      : onLoad();
  })();
</script>


<meta property="og:title" content="Shiny">
<meta property="og:description" content="Shiny is a package that makes it easy to create interactive web apps using R and Python.">
<meta property="og:image" content="https://shiny.posit.co//images/shiny-thumb.png">
<meta property="og:site_name" content="Shiny">
<meta property="og:locale" content="en_US">
<meta property="og:image:height" content="630">
<meta property="og:image:width" content="1200">
<meta name="twitter:title" content="Shiny">
<meta name="twitter:description" content="Shiny is a package that makes it easy to create interactive web apps using R and Python.">
<meta name="twitter:image" content="https://shiny.posit.co//images/shiny-thumb.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image-height" content="630">
<meta name="twitter:image-width" content="1200">
<style id="quarto-target-style">
      section:target::before {
        content: "";
        display: block;
        height: 63px;
        margin: -63px 0 0;
      }</style></head>

<body class="nav-fixed fullcontent quarto-light" data-bs-offset="63" style="padding-top: 63px;">

<div id="quarto-search-results"></div>
  <header id="quarto-header" class="headroom fixed-top headroom--top headroom--not-bottom">
    <nav class="navbar navbar-expand-lg " data-bs-theme="dark">
      <div class="navbar-container container-fluid">
      <div class="navbar-brand-container mx-auto">
    <a href="https://shiny.posit.co/" class="navbar-brand navbar-brand-logo" data-original-href="https://shiny.posit.co/index.html">
    <img src="./images/shiny-solo.png" alt="Shiny logo." class="navbar-logo">
    </a>
  </div>
            <div id="quarto-search" class="type-overlay" title="Search"><div class="aa-Autocomplete" role="combobox" aria-expanded="false" aria-haspopup="listbox"><button type="button" class="aa-DetachedSearchButton"><div class="aa-DetachedSearchButtonIcon"><svg class="aa-SubmitIcon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path></svg></div><div class="aa-DetachedSearchButtonPlaceholder"></div><div class="aa-DetachedSearchButtonQuery"></div></button></div></div>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
  <span class="navbar-toggler-icon"></span>
</button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav navbar-nav-scroll ms-auto">
  <li class="nav-item">
    <a class="nav-link active" href="https://shiny.posit.co/" aria-current="page" data-original-href="https://shiny.posit.co/index.html"> 
<span class="menu-text">Home</span></a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" href="https://shiny.posit.co/getstarted.html" data-original-href="https://shiny.posit.co/getstarted.html"> 
<span class="menu-text">Get Started</span></a>
  </li>  
  <li class="nav-item dropdown ">
    <a class="nav-link dropdown-toggle" href="https://shiny.posit.co/#" id="nav-menu-shiny-for-r" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-original-href="https://shiny.posit.co/#">
 <span class="menu-text">Shiny for R</span>
    </a>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-menu-shiny-for-r">    
        <li class="dropdown-header"><img src="./images/r-light.png" class="navbar-sub-logo img-fluid" alt="The R language logo"></li>
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/getstarted/" data-original-href="https://shiny.posit.co/r/getstarted/">
 <span class="dropdown-text">Get Started</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/components/" data-original-href="https://shiny.posit.co/r/components/">
 <span class="dropdown-text">Components</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/layouts/" data-original-href="https://shiny.posit.co/r/layouts/">
 <span class="dropdown-text">Layouts</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/articles/" data-original-href="https://shiny.posit.co/r/articles/index.html">
 <span class="dropdown-text">Articles</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/gallery/" data-original-href="https://shiny.posit.co/r/gallery/index.html">
 <span class="dropdown-text">Gallery</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/reference/shiny" data-original-href="https://shiny.posit.co/r/reference/shiny">
 <span class="dropdown-text">Reference</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/help.html" data-original-href="https://shiny.posit.co/r/help.html">
 <span class="dropdown-text">Help</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/deploy.html" data-original-href="https://shiny.posit.co/r/deploy.html">
 <span class="dropdown-text">Deploy</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://shiny.posit.co/r/contribute.html" data-original-href="https://shiny.posit.co/r/contribute.html">
 <span class="dropdown-text">Contribute</span></a>
  </li>  
        <li>
    <a class="dropdown-item" href="https://github.com/rstudio/shiny" target="_blank" data-original-href="https://github.com/rstudio/shiny" rel="noopener noreferrer"><i class="bi bi-github" role="img">
</i> 
 <span class="dropdown-text"></span></a>
  </li>  
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://shiny.posit.co/py/" target="_blank" data-original-href="https://shiny.posit.co/py/" rel="noopener noreferrer"> 
<span class="menu-text">Shiny for Python</span></a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" href="https://shiny.posit.co/blog/" data-original-href="https://shiny.posit.co/blog/index.html"> 
<span class="menu-text">Blog</span></a>
  </li>  
</ul>
          </div> <!-- /navcollapse -->
          <div class="quarto-navbar-tools">
</div>
      </div> <!-- /container-fluid -->
    </nav>
</header>
<!-- content -->
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar" style="min-height: calc(100vh - 130px);">
<!-- sidebar -->
<!-- margin-sidebar -->
    
<!-- main -->
<main class="content page-columns page-full" id="quarto-document-content">
<!-- Google Tag Manager (noscript) -->
 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KHBDBW7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->




<div class="text-center column-screen-inset" style="z-index:999;max-width: 1220px;margin: auto;">
<div class="gradient-text display-4 fw-bolder pb-4">
Easy web apps for data science without the compromises
</div>
<h5 id="no-web-development-skills-required">No web development skills required</h5>
</div>
<div class="d-grid d-md-block pt-5 text-center" style="z-index:999;">
<p><a href="https://shiny.posit.co/r/getstarted" class="btn btn-dark m-2 px-5" data-original-href="https://shiny.posit.co/r/getstarted">Get started in R</a><a href="https://shiny.posit.co/py/" class="btn btn-dark m-2 px-5" data-original-href="https://shiny.posit.co/py/">Get started in Python</a></p>
</div>
<div class="column-screen hero-image">
<p class="mb-0">
<img src="images/hero-plot-blue.svg" class="mb-0 img-fluid">
</p>
</div>
<div class="column-screen bg-gray mb-0 px-3 px-md-5">
<section id="here-is-a-shiny-app" class="pt-5 pb-5 mx-auto" style="max-width:1100px;">
<h1>Here is a Shiny app</h1>
<h4 id="shiny-apps-are-easy-to-write.-let-users-interact-with-your-data-and-your-analysis-all-with-r-or-python">Shiny apps are easy to write. Let users interact with your data and your analysis, all with R or Python:</h4>
<ul class="nav nav-tabs mt-5" id="hello-shiny-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active px-5" id="r-tab" data-bs-toggle="tab" data-bs-target="#r" type="button" role="tab" aria-controls="r" aria-selected="true">
R
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link px-4" id="python-tab" data-bs-toggle="tab" data-bs-target="#python" type="button" role="tab" aria-controls="python" aria-selected="false" tabindex="-1">
Python
</button>
</li>
</ul>
<div id="hello-shiny-tabcontent" class="tab-content bg-white p-0">
<div id="r" class="tab-pane fade show active" role="tabpanel" aria-labelledby="r-tab">
<div class="grid bg-white pt-4 px-0">
<div class="g-col-12 mx-3">
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>app.R</strong></pre>
</div>
<div class="sourceCode" id="cb1" data-filename="app.R" style="max-height:410px;overflow:scroll;margin-bottom: 0.5rem;"><pre class="sourceCode r panel-tabset code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="https://shiny.posit.co/#cb1-1" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-1"></a><span class="fu">library</span>(shiny)</span>
<span id="cb1-2"><a href="https://shiny.posit.co/#cb1-2" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-2"></a><span class="fu">library</span>(bslib)</span>
<span id="cb1-3"><a href="https://shiny.posit.co/#cb1-3" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-3"></a><span class="fu">library</span>(dplyr)</span>
<span id="cb1-4"><a href="https://shiny.posit.co/#cb1-4" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-4"></a><span class="fu">library</span>(ggplot2)</span>
<span id="cb1-5"><a href="https://shiny.posit.co/#cb1-5" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-5"></a><span class="fu">library</span>(ggExtra)</span>
<span id="cb1-6"><a href="https://shiny.posit.co/#cb1-6" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-6"></a></span>
<span id="cb1-7"><a href="https://shiny.posit.co/#cb1-7" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-7"></a>penguins_csv <span class="ot">&lt;-</span> <span class="st">"https://raw.githubusercontent.com/jcheng5/simplepenguins.R/main/penguins.csv"</span></span>
<span id="cb1-8"><a href="https://shiny.posit.co/#cb1-8" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-8"></a></span>
<span id="cb1-9"><a href="https://shiny.posit.co/#cb1-9" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-9"></a>df <span class="ot">&lt;-</span> readr<span class="sc">::</span><span class="fu">read_csv</span>(penguins_csv)</span>
<span id="cb1-10"><a href="https://shiny.posit.co/#cb1-10" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-10"></a><span class="co"># Find subset of columns that are suitable for scatter plot</span></span>
<span id="cb1-11"><a href="https://shiny.posit.co/#cb1-11" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-11"></a>df_num <span class="ot">&lt;-</span> df <span class="sc">|&gt;</span> <span class="fu">select</span>(<span class="fu">where</span>(is.numeric), <span class="sc">-</span>Year)</span>
<span id="cb1-12"><a href="https://shiny.posit.co/#cb1-12" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-12"></a></span>
<span id="cb1-13"><a href="https://shiny.posit.co/#cb1-13" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-13"></a>ui <span class="ot">&lt;-</span> <span class="fu">page_sidebar</span>(</span>
<span id="cb1-14"><a href="https://shiny.posit.co/#cb1-14" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-14"></a>  <span class="at">sidebar =</span> <span class="fu">sidebar</span>(</span>
<span id="cb1-15"><a href="https://shiny.posit.co/#cb1-15" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-15"></a>    <span class="fu">varSelectInput</span>(<span class="st">"xvar"</span>, <span class="st">"X variable"</span>, df_num, <span class="at">selected =</span> <span class="st">"Bill Length (mm)"</span>),</span>
<span id="cb1-16"><a href="https://shiny.posit.co/#cb1-16" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-16"></a>    <span class="fu">varSelectInput</span>(<span class="st">"yvar"</span>, <span class="st">"Y variable"</span>, df_num, <span class="at">selected =</span> <span class="st">"Bill Depth (mm)"</span>),</span>
<span id="cb1-17"><a href="https://shiny.posit.co/#cb1-17" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-17"></a>    <span class="fu">checkboxGroupInput</span>(</span>
<span id="cb1-18"><a href="https://shiny.posit.co/#cb1-18" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-18"></a>      <span class="st">"species"</span>, <span class="st">"Filter by species"</span>,</span>
<span id="cb1-19"><a href="https://shiny.posit.co/#cb1-19" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-19"></a>      <span class="at">choices =</span> <span class="fu">unique</span>(df<span class="sc">$</span>Species), </span>
<span id="cb1-20"><a href="https://shiny.posit.co/#cb1-20" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-20"></a>      <span class="at">selected =</span> <span class="fu">unique</span>(df<span class="sc">$</span>Species)</span>
<span id="cb1-21"><a href="https://shiny.posit.co/#cb1-21" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-21"></a>    ),</span>
<span id="cb1-22"><a href="https://shiny.posit.co/#cb1-22" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-22"></a>    <span class="fu">hr</span>(), <span class="co"># Add a horizontal rule</span></span>
<span id="cb1-23"><a href="https://shiny.posit.co/#cb1-23" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-23"></a>    <span class="fu">checkboxInput</span>(<span class="st">"by_species"</span>, <span class="st">"Show species"</span>, <span class="cn">TRUE</span>),</span>
<span id="cb1-24"><a href="https://shiny.posit.co/#cb1-24" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-24"></a>    <span class="fu">checkboxInput</span>(<span class="st">"show_margins"</span>, <span class="st">"Show marginal plots"</span>, <span class="cn">TRUE</span>),</span>
<span id="cb1-25"><a href="https://shiny.posit.co/#cb1-25" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-25"></a>    <span class="fu">checkboxInput</span>(<span class="st">"smooth"</span>, <span class="st">"Add smoother"</span>),</span>
<span id="cb1-26"><a href="https://shiny.posit.co/#cb1-26" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-26"></a>  ),</span>
<span id="cb1-27"><a href="https://shiny.posit.co/#cb1-27" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-27"></a>  <span class="fu">plotOutput</span>(<span class="st">"scatter"</span>)</span>
<span id="cb1-28"><a href="https://shiny.posit.co/#cb1-28" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-28"></a>)</span>
<span id="cb1-29"><a href="https://shiny.posit.co/#cb1-29" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-29"></a></span>
<span id="cb1-30"><a href="https://shiny.posit.co/#cb1-30" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-30"></a>server <span class="ot">&lt;-</span> <span class="cf">function</span>(input, output, session) {</span>
<span id="cb1-31"><a href="https://shiny.posit.co/#cb1-31" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-31"></a>  subsetted <span class="ot">&lt;-</span> <span class="fu">reactive</span>({</span>
<span id="cb1-32"><a href="https://shiny.posit.co/#cb1-32" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-32"></a>    <span class="fu">req</span>(input<span class="sc">$</span>species)</span>
<span id="cb1-33"><a href="https://shiny.posit.co/#cb1-33" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-33"></a>    df <span class="sc">|&gt;</span> <span class="fu">filter</span>(Species <span class="sc">%in%</span> input<span class="sc">$</span>species)</span>
<span id="cb1-34"><a href="https://shiny.posit.co/#cb1-34" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-34"></a>  })</span>
<span id="cb1-35"><a href="https://shiny.posit.co/#cb1-35" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-35"></a></span>
<span id="cb1-36"><a href="https://shiny.posit.co/#cb1-36" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-36"></a>  output<span class="sc">$</span>scatter <span class="ot">&lt;-</span> <span class="fu">renderPlot</span>({</span>
<span id="cb1-37"><a href="https://shiny.posit.co/#cb1-37" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-37"></a>    p <span class="ot">&lt;-</span> <span class="fu">ggplot</span>(<span class="fu">subsetted</span>(), <span class="fu">aes</span>(<span class="sc">!!</span>input<span class="sc">$</span>xvar, <span class="sc">!!</span>input<span class="sc">$</span>yvar)) <span class="sc">+</span> <span class="fu">list</span>(</span>
<span id="cb1-38"><a href="https://shiny.posit.co/#cb1-38" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-38"></a>      <span class="fu">theme</span>(<span class="at">legend.position =</span> <span class="st">"bottom"</span>),</span>
<span id="cb1-39"><a href="https://shiny.posit.co/#cb1-39" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-39"></a>      <span class="cf">if</span> (input<span class="sc">$</span>by_species) <span class="fu">aes</span>(<span class="at">color =</span> Species),</span>
<span id="cb1-40"><a href="https://shiny.posit.co/#cb1-40" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-40"></a>      <span class="fu">geom_point</span>(),</span>
<span id="cb1-41"><a href="https://shiny.posit.co/#cb1-41" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-41"></a>      <span class="cf">if</span> (input<span class="sc">$</span>smooth) <span class="fu">geom_smooth</span>()</span>
<span id="cb1-42"><a href="https://shiny.posit.co/#cb1-42" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-42"></a>    )</span>
<span id="cb1-43"><a href="https://shiny.posit.co/#cb1-43" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-43"></a></span>
<span id="cb1-44"><a href="https://shiny.posit.co/#cb1-44" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-44"></a>    <span class="cf">if</span> (input<span class="sc">$</span>show_margins) {</span>
<span id="cb1-45"><a href="https://shiny.posit.co/#cb1-45" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-45"></a>      margin_type <span class="ot">&lt;-</span> <span class="cf">if</span> (input<span class="sc">$</span>by_species) <span class="st">"density"</span> <span class="cf">else</span> <span class="st">"histogram"</span></span>
<span id="cb1-46"><a href="https://shiny.posit.co/#cb1-46" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-46"></a>      p <span class="ot">&lt;-</span> ggExtra<span class="sc">::</span><span class="fu">ggMarginal</span>(p, <span class="at">type =</span> margin_type, <span class="at">margins =</span> <span class="st">"both"</span>,</span>
<span id="cb1-47"><a href="https://shiny.posit.co/#cb1-47" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-47"></a>        <span class="at">size =</span> <span class="dv">8</span>, <span class="at">groupColour =</span> input<span class="sc">$</span>by_species, <span class="at">groupFill =</span> input<span class="sc">$</span>by_species)</span>
<span id="cb1-48"><a href="https://shiny.posit.co/#cb1-48" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-48"></a>    }</span>
<span id="cb1-49"><a href="https://shiny.posit.co/#cb1-49" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-49"></a></span>
<span id="cb1-50"><a href="https://shiny.posit.co/#cb1-50" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-50"></a>    p</span>
<span id="cb1-51"><a href="https://shiny.posit.co/#cb1-51" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-51"></a>  }, <span class="at">res =</span> <span class="dv">100</span>)</span>
<span id="cb1-52"><a href="https://shiny.posit.co/#cb1-52" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-52"></a>}</span>
<span id="cb1-53"><a href="https://shiny.posit.co/#cb1-53" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-53"></a></span>
<span id="cb1-54"><a href="https://shiny.posit.co/#cb1-54" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb1-54"></a><span class="fu">shinyApp</span>(ui, server)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div>
<div class="hello-output g-col-12">
<iframe src="https://gallery.shinyapps.io/simplepenguins/" frameborder="0" width="100%" height="600" class="mb-0">
</iframe>
</div>
</div>
</div>
<div id="python" class="tab-pane fade" role="tabpanel" aria-labelledby="python-tab">
<div class="grid bg-white pt-4">
<div class="g-col-12 px-3">
<div class="code-with-filename">
<div class="code-with-filename-file">
<pre><strong>app.py</strong></pre>
</div>
<div class="sourceCode" id="cb2" data-filename="app.py" style="max-height:410px;overflow:scroll;margin-bottom: 0.5rem;"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb2-1"><a href="https://shiny.posit.co/#cb2-1" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-1"></a><span class="im">from</span> pathlib <span class="im">import</span> Path</span>
<span id="cb2-2"><a href="https://shiny.posit.co/#cb2-2" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-2"></a></span>
<span id="cb2-3"><a href="https://shiny.posit.co/#cb2-3" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-3"></a><span class="im">import</span> pandas <span class="im">as</span> pd</span>
<span id="cb2-4"><a href="https://shiny.posit.co/#cb2-4" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-4"></a><span class="im">import</span> seaborn <span class="im">as</span> sns</span>
<span id="cb2-5"><a href="https://shiny.posit.co/#cb2-5" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-5"></a></span>
<span id="cb2-6"><a href="https://shiny.posit.co/#cb2-6" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-6"></a><span class="im">from</span> shiny <span class="im">import</span> App, Inputs, Outputs, Session, reactive, render, req, ui</span>
<span id="cb2-7"><a href="https://shiny.posit.co/#cb2-7" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-7"></a></span>
<span id="cb2-8"><a href="https://shiny.posit.co/#cb2-8" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-8"></a>sns.set_theme()</span>
<span id="cb2-9"><a href="https://shiny.posit.co/#cb2-9" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-9"></a></span>
<span id="cb2-10"><a href="https://shiny.posit.co/#cb2-10" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-10"></a><span class="co"># https://raw.githubusercontent.com/jcheng5/simplepenguins.R/main/penguins.csv</span></span>
<span id="cb2-11"><a href="https://shiny.posit.co/#cb2-11" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-11"></a></span>
<span id="cb2-12"><a href="https://shiny.posit.co/#cb2-12" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-12"></a>df <span class="op">=</span> pd.read_csv(Path(<span class="va">__file__</span>).parent <span class="op">/</span> <span class="st">"penguins.csv"</span>, na_values<span class="op">=</span><span class="st">"NA"</span>)</span>
<span id="cb2-13"><a href="https://shiny.posit.co/#cb2-13" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-13"></a>numeric_cols <span class="op">=</span> df.select_dtypes(include<span class="op">=</span>[<span class="st">"float64"</span>]).columns.tolist()</span>
<span id="cb2-14"><a href="https://shiny.posit.co/#cb2-14" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-14"></a>species <span class="op">=</span> df[<span class="st">"Species"</span>].unique().tolist()</span>
<span id="cb2-15"><a href="https://shiny.posit.co/#cb2-15" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-15"></a>species.sort()</span>
<span id="cb2-16"><a href="https://shiny.posit.co/#cb2-16" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-16"></a></span>
<span id="cb2-17"><a href="https://shiny.posit.co/#cb2-17" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-17"></a>app_ui <span class="op">=</span> ui.page_sidebar(</span>
<span id="cb2-18"><a href="https://shiny.posit.co/#cb2-18" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-18"></a>    ui.sidebar(</span>
<span id="cb2-19"><a href="https://shiny.posit.co/#cb2-19" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-19"></a>        ui.input_selectize(</span>
<span id="cb2-20"><a href="https://shiny.posit.co/#cb2-20" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-20"></a>            <span class="st">"xvar"</span>, <span class="st">"X variable"</span>, numeric_cols, selected<span class="op">=</span><span class="st">"Bill Length (mm)"</span></span>
<span id="cb2-21"><a href="https://shiny.posit.co/#cb2-21" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-21"></a>        ),</span>
<span id="cb2-22"><a href="https://shiny.posit.co/#cb2-22" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-22"></a>        ui.input_selectize(</span>
<span id="cb2-23"><a href="https://shiny.posit.co/#cb2-23" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-23"></a>            <span class="st">"yvar"</span>, <span class="st">"Y variable"</span>, numeric_cols, selected<span class="op">=</span><span class="st">"Bill Depth (mm)"</span></span>
<span id="cb2-24"><a href="https://shiny.posit.co/#cb2-24" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-24"></a>        ),</span>
<span id="cb2-25"><a href="https://shiny.posit.co/#cb2-25" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-25"></a>        ui.input_checkbox_group(</span>
<span id="cb2-26"><a href="https://shiny.posit.co/#cb2-26" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-26"></a>            <span class="st">"species"</span>, <span class="st">"Filter by species"</span>, species, selected<span class="op">=</span>species</span>
<span id="cb2-27"><a href="https://shiny.posit.co/#cb2-27" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-27"></a>        ),</span>
<span id="cb2-28"><a href="https://shiny.posit.co/#cb2-28" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-28"></a>        ui.hr(),</span>
<span id="cb2-29"><a href="https://shiny.posit.co/#cb2-29" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-29"></a>        ui.input_switch(<span class="st">"by_species"</span>, <span class="st">"Show species"</span>, value<span class="op">=</span><span class="va">True</span>),</span>
<span id="cb2-30"><a href="https://shiny.posit.co/#cb2-30" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-30"></a>        ui.input_switch(<span class="st">"show_margins"</span>, <span class="st">"Show marginal plots"</span>, value<span class="op">=</span><span class="va">True</span>),</span>
<span id="cb2-31"><a href="https://shiny.posit.co/#cb2-31" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-31"></a>    ),</span>
<span id="cb2-32"><a href="https://shiny.posit.co/#cb2-32" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-32"></a>    ui.card(</span>
<span id="cb2-33"><a href="https://shiny.posit.co/#cb2-33" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-33"></a>        ui.output_plot(<span class="st">"scatter"</span>),</span>
<span id="cb2-34"><a href="https://shiny.posit.co/#cb2-34" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-34"></a>    ),</span>
<span id="cb2-35"><a href="https://shiny.posit.co/#cb2-35" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-35"></a>)</span>
<span id="cb2-36"><a href="https://shiny.posit.co/#cb2-36" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-36"></a></span>
<span id="cb2-37"><a href="https://shiny.posit.co/#cb2-37" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-37"></a></span>
<span id="cb2-38"><a href="https://shiny.posit.co/#cb2-38" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-38"></a><span class="kw">def</span> server(<span class="bu">input</span>: Inputs, output: Outputs, session: Session):</span>
<span id="cb2-39"><a href="https://shiny.posit.co/#cb2-39" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-39"></a>    <span class="at">@reactive.Calc</span></span>
<span id="cb2-40"><a href="https://shiny.posit.co/#cb2-40" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-40"></a>    <span class="kw">def</span> filtered_df() <span class="op">-&gt;</span> pd.DataFrame:</span>
<span id="cb2-41"><a href="https://shiny.posit.co/#cb2-41" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-41"></a>        <span class="co">"""Returns a Pandas data frame that includes only the desired rows"""</span></span>
<span id="cb2-42"><a href="https://shiny.posit.co/#cb2-42" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-42"></a></span>
<span id="cb2-43"><a href="https://shiny.posit.co/#cb2-43" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-43"></a>        <span class="co"># This calculation "req"uires that at least one species is selected</span></span>
<span id="cb2-44"><a href="https://shiny.posit.co/#cb2-44" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-44"></a>        req(<span class="bu">len</span>(<span class="bu">input</span>.species()) <span class="op">&gt;</span> <span class="dv">0</span>)</span>
<span id="cb2-45"><a href="https://shiny.posit.co/#cb2-45" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-45"></a></span>
<span id="cb2-46"><a href="https://shiny.posit.co/#cb2-46" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-46"></a>        <span class="co"># Filter the rows so we only include the desired species</span></span>
<span id="cb2-47"><a href="https://shiny.posit.co/#cb2-47" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-47"></a>        <span class="cf">return</span> df[df[<span class="st">"Species"</span>].isin(<span class="bu">input</span>.species())]</span>
<span id="cb2-48"><a href="https://shiny.posit.co/#cb2-48" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-48"></a></span>
<span id="cb2-49"><a href="https://shiny.posit.co/#cb2-49" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-49"></a>    <span class="at">@output</span></span>
<span id="cb2-50"><a href="https://shiny.posit.co/#cb2-50" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-50"></a>    <span class="at">@render.plot</span></span>
<span id="cb2-51"><a href="https://shiny.posit.co/#cb2-51" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-51"></a>    <span class="kw">def</span> scatter():</span>
<span id="cb2-52"><a href="https://shiny.posit.co/#cb2-52" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-52"></a>        <span class="co">"""Generates a plot for Shiny to display to the user"""</span></span>
<span id="cb2-53"><a href="https://shiny.posit.co/#cb2-53" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-53"></a></span>
<span id="cb2-54"><a href="https://shiny.posit.co/#cb2-54" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-54"></a>        <span class="co"># The plotting function to use depends on whether margins are desired</span></span>
<span id="cb2-55"><a href="https://shiny.posit.co/#cb2-55" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-55"></a>        plotfunc <span class="op">=</span> sns.jointplot <span class="cf">if</span> <span class="bu">input</span>.show_margins() <span class="cf">else</span> sns.scatterplot</span>
<span id="cb2-56"><a href="https://shiny.posit.co/#cb2-56" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-56"></a></span>
<span id="cb2-57"><a href="https://shiny.posit.co/#cb2-57" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-57"></a>        plotfunc(</span>
<span id="cb2-58"><a href="https://shiny.posit.co/#cb2-58" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-58"></a>            data<span class="op">=</span>filtered_df(),</span>
<span id="cb2-59"><a href="https://shiny.posit.co/#cb2-59" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-59"></a>            x<span class="op">=</span><span class="bu">input</span>.xvar(),</span>
<span id="cb2-60"><a href="https://shiny.posit.co/#cb2-60" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-60"></a>            y<span class="op">=</span><span class="bu">input</span>.yvar(),</span>
<span id="cb2-61"><a href="https://shiny.posit.co/#cb2-61" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-61"></a>            hue<span class="op">=</span><span class="st">"Species"</span> <span class="cf">if</span> <span class="bu">input</span>.by_species() <span class="cf">else</span> <span class="va">None</span>,</span>
<span id="cb2-62"><a href="https://shiny.posit.co/#cb2-62" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-62"></a>            hue_order<span class="op">=</span>species,</span>
<span id="cb2-63"><a href="https://shiny.posit.co/#cb2-63" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-63"></a>            legend<span class="op">=</span><span class="va">False</span>,</span>
<span id="cb2-64"><a href="https://shiny.posit.co/#cb2-64" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-64"></a>        )</span>
<span id="cb2-65"><a href="https://shiny.posit.co/#cb2-65" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-65"></a></span>
<span id="cb2-66"><a href="https://shiny.posit.co/#cb2-66" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-66"></a></span>
<span id="cb2-67"><a href="https://shiny.posit.co/#cb2-67" aria-hidden="true" tabindex="-1" data-original-href="https://shiny.posit.co/#cb2-67"></a>app <span class="op">=</span> App(app_ui, server)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
</div>
<div class="hello-output g-col-12">
<iframe src="https://gallery.shinyapps.io/simplepenguinspy/" frameborder="0" width="100%" height="600" class="mb-0">
</iframe>
</div>
</div>
</div>
</div>
</section>
<div class="d-grid d-md-block pb-5 text-center">
<p><a href="https://shiny.posit.co/r/getstarted" class="btn btn-dark m-2 px-5" data-original-href="https://shiny.posit.co/r/getstarted">Get started in R</a><a href="https://shiny.posit.co/py/" class="btn btn-dark m-2 px-5" data-original-href="https://shiny.posit.co/py/">Get started in Python</a></p>
</div>
</div>
<section id="hosting-and-deployment" class="text-white column-screen text-center bg-dark-blue py-5">
<h2 class="text-white">Hosting and Deployment</h2>
<h4 class="mt-0" id="put-your-shiny-app-on-the-web-by-using-your-own-servers-or-posits-hosting-service.">Put your Shiny app on the web by using your own servers or Posit’s hosting service.</h4>
<div class="pt-4 pb-2 mt-2">
<p><a href="https://shiny.posit.co/r/deploy" class="btn btn-link text-white m-2 text-decoration-none" data-original-href="https://shiny.posit.co/r/deploy">Deploy for R <i class="bi bi-chevron-right"></i></a><a href="https://shiny.posit.co/py/docs/deploy.html" target="_blank" class="btn btn-link text-white m-2 text-decoration-none" data-original-href="https://shiny.posit.co/py/docs/deploy.html" rel="noopener noreferrer">Deploy for Python <i class="bi bi-chevron-right"></i></a></p>
</div>
</section>
<section id="organizations-that-use-shiny" class="text-center column-screen-inset pt-5">
<h2 class="text-center">Organizations that use Shiny:</h2>
<div class="grid text-center mx-auto pt-4 mt-2" style="grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));justify-content:center;align-items: center;max-width: 1300px;">
<p><img src="images/pfizer.png" class="px-2 px-md-3 img-fluid"></p>
<p><img src="images/oxford.svg" class="px-3 px-md-4 img-fluid"></p>
<p><img src="images/janssen.svg" class="px-1 px-md-2 img-fluid"></p>
<p><img src="images/stack-overflow.svg" class="img-fluid"></p>
<p><img src="images/jnj.png" class="px-1 px-md-2 img-fluid"></p>
<p><img src="images/harvard-medical.svg" class="px-1 px-md-2 img-fluid"></p>
<p><img src="images/astra.png" class="img-fluid"></p>
</div>
</section>



</main> <!-- /main -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
  const toggleBodyColorMode = (bsSheetEl) => {
    const mode = bsSheetEl.getAttribute("data-mode");
    const bodyEl = window.document.querySelector("body");
    if (mode === "dark") {
      bodyEl.classList.add("quarto-dark");
      bodyEl.classList.remove("quarto-light");
    } else {
      bodyEl.classList.add("quarto-light");
      bodyEl.classList.remove("quarto-dark");
    }
  }
  const toggleBodyColorPrimary = () => {
    const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
    if (bsSheetEl) {
      toggleBodyColorMode(bsSheetEl);
    }
  }
  toggleBodyColorPrimary();  
  const isCodeAnnotation = (el) => {
    for (const clz of el.classList) {
      if (clz.startsWith('code-annotation-')) {                     
        return true;
      }
    }
    return false;
  }
  const clipboard = new window.ClipboardJS('.code-copy-button', {
    text: function(trigger) {
      const codeEl = trigger.previousElementSibling.cloneNode(true);
      for (const childEl of codeEl.children) {
        if (isCodeAnnotation(childEl)) {
          childEl.remove();
        }
      }
      return codeEl.innerText;
    }
  });
  clipboard.on('success', function(e) {
    // button target
    const button = e.trigger;
    // don't keep focus
    button.blur();
    // flash "checked"
    button.classList.add('code-copy-button-checked');
    var currentTitle = button.getAttribute("title");
    button.setAttribute("title", "Copied!");
    let tooltip;
    if (window.bootstrap) {
      button.setAttribute("data-bs-toggle", "tooltip");
      button.setAttribute("data-bs-placement", "left");
      button.setAttribute("data-bs-title", "Copied!");
      tooltip = new bootstrap.Tooltip(button, 
        { trigger: "manual", 
          customClass: "code-copy-button-tooltip",
          offset: [0, -8]});
      tooltip.show();    
    }
    setTimeout(function() {
      if (tooltip) {
        tooltip.hide();
        button.removeAttribute("data-bs-title");
        button.removeAttribute("data-bs-toggle");
        button.removeAttribute("data-bs-placement");
      }
      button.setAttribute("title", currentTitle);
      button.classList.remove('code-copy-button-checked');
    }, 1000);
    // clear code selection
    e.clearSelection();
  });
    var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
    var mailtoRegex = new RegExp(/^mailto:/);
      var filterRegex = new RegExp("^https?:\/\/((shiny\.(posit|rstudio)\.com?)|.+shiny-dev-center\.netlify)");
    var isInternal = (href) => {
        return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
    }
    // Inspect non-navigation links and adorn them if external
 	var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool)');
    for (var i=0; i<links.length; i++) {
      const link = links[i];
      if (!isInternal(link.href)) {
        // undo the damage that might have been done by quarto-nav.js in the case of
        // links that we want to consider external
        if (link.dataset.originalHref !== undefined) {
          link.href = link.dataset.originalHref;
        }
          // target, if specified
          link.setAttribute("target", "_blank");
          if (link.getAttribute("rel") === null) {
            link.setAttribute("rel", "noopener");
          }
      }
    }
  function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
    const config = {
      allowHTML: true,
      maxWidth: 500,
      delay: 100,
      arrow: false,
      appendTo: function(el) {
          return el.parentElement;
      },
      interactive: true,
      interactiveBorder: 10,
      theme: 'quarto',
      placement: 'bottom-start',
    };
    if (contentFn) {
      config.content = contentFn;
    }
    if (onTriggerFn) {
      config.onTrigger = onTriggerFn;
    }
    if (onUntriggerFn) {
      config.onUntrigger = onUntriggerFn;
    }
    window.tippy(el, config); 
  }
  const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
  for (var i=0; i<noterefs.length; i++) {
    const ref = noterefs[i];
    tippyHover(ref, function() {
      // use id or data attribute instead here
      let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
      try { href = new URL(href).hash; } catch {}
      const id = href.replace(/^#\/?/, "");
      const note = window.document.getElementById(id);
      if (note) {
        return note.innerHTML;
      } else {
        return "";
      }
    });
  }
  const xrefs = window.document.querySelectorAll('a.quarto-xref');
  const processXRef = (id, note) => {
    // Strip column container classes
    const stripColumnClz = (el) => {
      el.classList.remove("page-full", "page-columns");
      if (el.children) {
        for (const child of el.children) {
          stripColumnClz(child);
        }
      }
    }
    stripColumnClz(note)
    if (id === null || id.startsWith('sec-')) {
      // Special case sections, only their first couple elements
      const container = document.createElement("div");
      if (note.children && note.children.length > 2) {
        container.appendChild(note.children[0].cloneNode(true));
        for (let i = 1; i < note.children.length; i++) {
          const child = note.children[i];
          if (child.tagName === "P" && child.innerText === "") {
            continue;
          } else {
            container.appendChild(child.cloneNode(true));
            break;
          }
        }
        if (window.Quarto?.typesetMath) {
          window.Quarto.typesetMath(container);
        }
        return container.innerHTML
      } else {
        if (window.Quarto?.typesetMath) {
          window.Quarto.typesetMath(note);
        }
        return note.innerHTML;
      }
    } else {
      // Remove any anchor links if they are present
      const anchorLink = note.querySelector('a.anchorjs-link');
      if (anchorLink) {
        anchorLink.remove();
      }
      if (window.Quarto?.typesetMath) {
        window.Quarto.typesetMath(note);
      }
      // TODO in 1.5, we should make sure this works without a callout special case
      if (note.classList.contains("callout")) {
        return note.outerHTML;
      } else {
        return note.innerHTML;
      }
    }
  }
  for (var i=0; i<xrefs.length; i++) {
    const xref = xrefs[i];
    tippyHover(xref, undefined, function(instance) {
      instance.disable();
      let url = xref.getAttribute('href');
      let hash = undefined; 
      if (url.startsWith('#')) {
        hash = url;
      } else {
        try { hash = new URL(url).hash; } catch {}
      }
      if (hash) {
        const id = hash.replace(/^#\/?/, "");
        const note = window.document.getElementById(id);
        if (note !== null) {
          try {
            const html = processXRef(id, note.cloneNode(true));
            instance.setContent(html);
          } finally {
            instance.enable();
            instance.show();
          }
        } else {
          // See if we can fetch this
          fetch(url.split('#')[0])
          .then(res => res.text())
          .then(html => {
            const parser = new DOMParser();
            const htmlDoc = parser.parseFromString(html, "text/html");
            const note = htmlDoc.getElementById(id);
            if (note !== null) {
              const html = processXRef(id, note);
              instance.setContent(html);
            } 
          }).finally(() => {
            instance.enable();
            instance.show();
          });
        }
      } else {
        // See if we can fetch a full url (with no hash to target)
        // This is a special case and we should probably do some content thinning / targeting
        fetch(url)
        .then(res => res.text())
        .then(html => {
          const parser = new DOMParser();
          const htmlDoc = parser.parseFromString(html, "text/html");
          const note = htmlDoc.querySelector('main.content');
          if (note !== null) {
            // This should only happen for chapter cross references
            // (since there is no id in the URL)
            // remove the first header
            if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
              note.children[0].remove();
            }
            const html = processXRef(null, note);
            instance.setContent(html);
          } 
        }).finally(() => {
          instance.enable();
          instance.show();
        });
      }
    }, function(instance) {
    });
  }
      let selectedAnnoteEl;
      const selectorForAnnotation = ( cell, annotation) => {
        let cellAttr = 'data-code-cell="' + cell + '"';
        let lineAttr = 'data-code-annotation="' +  annotation + '"';
        const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
        return selector;
      }
      const selectCodeLines = (annoteEl) => {
        const doc = window.document;
        const targetCell = annoteEl.getAttribute("data-target-cell");
        const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
        const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
        const lines = annoteSpan.getAttribute("data-code-lines").split(",");
        const lineIds = lines.map((line) => {
          return targetCell + "-" + line;
        })
        let top = null;
        let height = null;
        let parent = null;
        if (lineIds.length > 0) {
            //compute the position of the single el (top and bottom and make a div)
            const el = window.document.getElementById(lineIds[0]);
            top = el.offsetTop;
            height = el.offsetHeight;
            parent = el.parentElement.parentElement;
          if (lineIds.length > 1) {
            const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
            const bottom = lastEl.offsetTop + lastEl.offsetHeight;
            height = bottom - top;
          }
          if (top !== null && height !== null && parent !== null) {
            // cook up a div (if necessary) and position it 
            let div = window.document.getElementById("code-annotation-line-highlight");
            if (div === null) {
              div = window.document.createElement("div");
              div.setAttribute("id", "code-annotation-line-highlight");
              div.style.position = 'absolute';
              parent.appendChild(div);
            }
            div.style.top = top - 2 + "px";
            div.style.height = height + 4 + "px";
            div.style.left = 0;
            let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
            if (gutterDiv === null) {
              gutterDiv = window.document.createElement("div");
              gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
              gutterDiv.style.position = 'absolute';
              const codeCell = window.document.getElementById(targetCell);
              const gutter = codeCell.querySelector('.code-annotation-gutter');
              gutter.appendChild(gutterDiv);
            }
            gutterDiv.style.top = top - 2 + "px";
            gutterDiv.style.height = height + 4 + "px";
          }
          selectedAnnoteEl = annoteEl;
        }
      };
      const unselectCodeLines = () => {
        const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
        elementsIds.forEach((elId) => {
          const div = window.document.getElementById(elId);
          if (div) {
            div.remove();
          }
        });
        selectedAnnoteEl = undefined;
      };
        // Handle positioning of the toggle
    window.addEventListener(
      "resize",
      throttle(() => {
        elRect = undefined;
        if (selectedAnnoteEl) {
          selectCodeLines(selectedAnnoteEl);
        }
      }, 10)
    );
    function throttle(fn, ms) {
    let throttle = false;
    let timer;
      return (...args) => {
        if(!throttle) { // first call gets through
            fn.apply(this, args);
            throttle = true;
        } else { // all the others get throttled
            if(timer) clearTimeout(timer); // cancel #2
            timer = setTimeout(() => {
              fn.apply(this, args);
              timer = throttle = false;
            }, ms);
        }
      };
    }
      // Attach click handler to the DT
      const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
      for (const annoteDlNode of annoteDls) {
        annoteDlNode.addEventListener('click', (event) => {
          const clickedEl = event.target;
          if (clickedEl !== selectedAnnoteEl) {
            unselectCodeLines();
            const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
            if (activeEl) {
              activeEl.classList.remove('code-annotation-active');
            }
            selectCodeLines(clickedEl);
            clickedEl.classList.add('code-annotation-active');
          } else {
            // Unselect the line
            unselectCodeLines();
            clickedEl.classList.remove('code-annotation-active');
          }
        });
      }
  const findCites = (el) => {
    const parentEl = el.parentElement;
    if (parentEl) {
      const cites = parentEl.dataset.cites;
      if (cites) {
        return {
          el,
          cites: cites.split(' ')
        };
      } else {
        return findCites(el.parentElement)
      }
    } else {
      return undefined;
    }
  };
  var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
  for (var i=0; i<bibliorefs.length; i++) {
    const ref = bibliorefs[i];
    const citeInfo = findCites(ref);
    if (citeInfo) {
      tippyHover(citeInfo.el, function() {
        var popup = window.document.createElement('div');
        citeInfo.cites.forEach(function(cite) {
          var citeDiv = window.document.createElement('div');
          citeDiv.classList.add('hanging-indent');
          citeDiv.classList.add('csl-entry');
          var biblioDiv = window.document.getElementById('ref-' + cite);
          if (biblioDiv) {
            citeDiv.innerHTML = biblioDiv.innerHTML;
          }
          popup.appendChild(citeDiv);
        });
        return popup.innerHTML;
      });
    }
  }
});
</script>
</div> <!-- /content -->
<footer class="footer">
  <div class="nav-footer">
    <div class="nav-footer-left">
<p>Proudly supported by <a href="https://www.posit.co/" class="no-icon" data-original-href="https://www.posit.co/" target="_blank" rel="noopener noreferrer"><img src="./images/posit-logo-black.svg" alt="Posit" width="80" style="padding-left: 3px;vertical-align:text-top;"></a></p>
</div>   
    <div class="nav-footer-center">
      &nbsp;
    </div>
    <div class="nav-footer-right">
      <ul class="footer-items list-unstyled">
    <li class="nav-item compact">
    <a class="nav-link" href="https://twitter.com/posit_pbc" data-original-href="https://twitter.com/posit_pbc">
      <i class="bi bi-twitter" role="img" aria-label="Posit Twitter">
</i> 
    </a>
  </li>  
    <li class="nav-item compact">
    <a class="nav-link" href="https://www.youtube.com/playlist?list=PL9HYL-VRX0oRbLoj3FyL5zeASU5FMDgVe" data-original-href="https://www.youtube.com/playlist?list=PL9HYL-VRX0oRbLoj3FyL5zeASU5FMDgVe">
      <i class="bi bi-youtube" role="img" aria-label="Shiny YouTube Playlist">
</i> 
    </a>
  </li>  
    <li class="nav-item compact">
    <a class="nav-link" href="https://shiny.posit.co/blog/index.xml" data-original-href="https://shiny.posit.co/blog/index.xml">
      <i class="bi bi-rss-fill" role="img" aria-label="Shiny Blog">
</i> 
    </a>
  </li>  
</ul>
    </div>
  </div>
</footer>




<script src="site_libs/quarto-html/zenscroll-min.js"></script>
</body></html>