CINXE.COM

<!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.7.13"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="description" content="An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript."> <title>Quarto</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 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> <script src="site_libs/quarto-search/autocomplete-preset-algolia.umd.js"></script> <meta name="quarto:offset" content="./"> <link href="./favicon.png" rel="icon" type="image/png"> <script src="site_libs/quarto-html/quarto.js" type="module"></script> <script src="site_libs/quarto-html/tabsets/tabsets.js" type="module"></script> <script src="site_libs/quarto-html/popper.min.js"></script> <script src="site_libs/quarto-html/tippy.umd.min.js"></script> <script src="site_libs/quarto-html/anchor.min.js"></script> <link href="site_libs/quarto-html/tippy.css" rel="stylesheet"> <link href="site_libs/quarto-html/quarto-syntax-highlighting-66ab7fd5e73b7f0a764e0d49b3e29ab1.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-edca8729837184d2dfe7d745e69549a2.min.css" rel="stylesheet" append-hash="true" 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, "algolia": { "application-id": "ZPJB5I1QN7", "search-only-api-key": "41be6c1e0a7fea4a51b107810facf577", "index-name": "prod_QUARTO", "analytics-events": true, "show-logo": true, "libDir": "site_libs" }, "keyboard-shortcut": [ "f", "/", "s" ], "show-item-context": true, "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> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script> <script type="text/javascript"> var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights/dist/search-insights.iife.min.js"; !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){ (e[s].queue=e[s].queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0], i.async=1,i.src=n,c.parentNode.insertBefore(i,c) }(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa"); </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-algolia-insights"> </script> <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-FV9Z7SDZ0M"></script> <script type="text/javascript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-FV9Z7SDZ0M', { 'anonymize_ip': true}); </script> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="index.css"> <meta property="og:title" content="Quarto"> <meta property="og:description" content="An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript."> <meta property="og:image" content="https://quarto.org/quarto-dark-bg.jpeg"> <meta property="og:site_name" content="Quarto"> <meta name="twitter:title" content="Quarto"> <meta name="twitter:description" content="An open source technical publishing system for creating beautiful articles, websites, blogs, books, slides, and more. Supports Python, R, Julia, and JavaScript."> <meta name="twitter:image" content="https://quarto.org/quarto-dark-bg.jpeg"> <meta name="twitter:card" content="summary_large_image"> </head> <body class="nav-fixed fullcontent"> <div id="quarto-search-results"></div> <header id="quarto-header" class="headroom fixed-top"> <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="./index.html" class="navbar-brand navbar-brand-logo"> <img src="./quarto.png" alt="Quarto logo." class="navbar-logo"> </a> </div> <div id="quarto-search" class="" title="Search"></div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" role="menu" 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 me-auto"> <li class="nav-item"> <a class="nav-link active" href="./index.html" aria-current="page"> <span class="menu-text">Overview</span></a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/get-started/index.html"> <span class="menu-text">Get Started</span></a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/guide/index.html"> <span class="menu-text">Guide</span></a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/extensions/index.html"> <span class="menu-text">Extensions</span></a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/reference/index.html"> <span class="menu-text">Reference</span></a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/gallery/index.html"> <span class="menu-text">Gallery</span></a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/blog/index.html"> <span class="menu-text">Blog</span></a> </li> <li class="nav-item dropdown "> <a class="nav-link dropdown-toggle" href="#" id="nav-menu-help" role="link" data-bs-toggle="dropdown" aria-expanded="false"> <span class="menu-text">Help</span> </a> <ul class="dropdown-menu" aria-labelledby="nav-menu-help"> <li> <a class="dropdown-item" href="https://github.com/quarto-dev/quarto-cli/issues"><i class="bi bi-bug" role="img"> </i> <span class="dropdown-text">Report a Bug</span></a> </li> <li> <a class="dropdown-item" href="https://github.com/quarto-dev/quarto-cli/discussions"><i class="bi bi-chat-right-text" role="img"> </i> <span class="dropdown-text">Ask a Question</span></a> </li> <li> <a class="dropdown-item" href="./docs/faq/index.html"><i class="bi bi-question-circle" role="img"> </i> <span class="dropdown-text">FAQ</span></a> </li> </ul> </li> </ul> </div>  <div class="quarto-navbar-tools tools-wide"> <a href="https://twitter.com/quarto_pub" title="Quarto Twitter" class="quarto-navigation-tool px-1" aria-label="Quarto Twitter"><i class="bi bi-twitter"></i></a> <a href="https://github.com/quarto-dev/quarto-cli" title="Quarto GitHub" class="quarto-navigation-tool px-1" aria-label="Quarto GitHub"><i class="bi bi-github"></i></a> <a href="https://quarto.org/docs/blog/index.xml" title="Quarto Blog RSS" class="quarto-navigation-tool px-1" aria-label="Quarto Blog RSS"><i class="bi bi-rss"></i></a> </div> </div>  </nav> </header>  <div id="quarto-content" class="quarto-container page-layout-custom page-navbar">    <div class="hero-banner"> <div class="content-block"> <section id="welcome-to-quarto" class="mt-1 hero-text"> <h1 class="mt-1">Welcome to Quarto<sup><span class="trademark">®</span></sup></h1> <h3 id="an-open-source-scientific-and-technical-publishing-system">An open-source scientific and technical publishing system</h3> <ul> <li>Author using <a href="https://jupyter.org">Jupyter</a> notebooks or with plain text markdown in your favorite editor.</li> <li>Create dynamic content with <a href="./docs/computations/python.html">Python</a>, <a href="./docs/computations/r.html">R</a>, <a href="./docs/computations/julia.html">Julia</a>, and <a href="./docs/computations/ojs.html">Observable</a>.</li> <li>Publish reproducible, production quality articles, presentations, dashboards, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.</li> <li>Share knowledge and insights organization-wide by publishing to <a href="./docs/publishing/rstudio-connect.html">Posit Connect</a>, <a href="./docs/publishing/confluence.html">Confluence</a>, or other publishing systems.</li> <li>Write using <a href="https://pandoc.org">Pandoc</a> markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.</li> </ul> <h3 id="analyze.-share.-reproduce.-you-have-a-story-to-tell-with-datatell-it-with-quarto.">Analyze. Share. Reproduce. You have a story to tell with data—tell it with Quarto.</h3> <div class="hero-buttons"> <p><a href="./docs/get-started/index.html" class="btn-action-primary btn-action btn btn-success btn-lg" role="button">Get Started</a> <a href="./docs/guide/" id="btn-guide" class="btn-action btn btn-info btn-lg" role="button">Guide</a></p> </div> </section> <div class="hero-animation"> <video autoplay="" muted="" playsinline="" loop=""> <source src="images/hero_animation.mp4" type="video/mp4"> </video> </div> </div> </div> <div class="hello-quarto alt-background"> <div class="content-block"> <section id="hello-quarto" class="hello-quarto-banner"> <h1>Hello, Quarto</h1> <ul class="nav nav-pills" id="hello-quarto-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="python-tab" data-bs-toggle="tab" data-bs-target="#python" type="button" role="tab" aria-controls="python" aria-selected="true"> Python </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="knitr-tab" data-bs-toggle="tab" data-bs-target="#knitr" type="button" role="tab" aria-controls="knitr" aria-selected="false"> R </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="julia-tab" data-bs-toggle="tab" data-bs-target="#julia" type="button" role="tab" aria-controls="julia" aria-selected="false"> Julia </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="observable-tab" data-bs-toggle="tab" data-bs-target="#observable" type="button" role="tab" aria-controls="observable" aria-selected="false"> Observable </button> </li> </ul> </section> <div id="hello-quarto-tabcontent" class="tab-content"> <div id="python" class="tab-pane fade show active" role="tabpanel" aria-labelledby="python-tab"> <p>Combine Jupyter notebooks with flexible options to produce production quality output in a wide variety of formats. Author using traditional notebook UIs or with a plain text markdown representation of notebooks.</p> <div class="grid"> <div class="g-col-lg-6 g-col-12" style="max-height: 605px;"> <p><img src="images/demo-jupyter-plain.png" class="hello-output img-fluid" alt="Example Jupyter notebook entitled Palmer Penguins with code cells, text, and a scatterplot."></p> </div> <div class="g-col-lg-6 g-col-12" style="background-color: white; border: 1px solid #dee2e6; height: max-605px;"> <p><img src="images/demo-jupyter-output.png" class="img-fluid" alt="Output of example Jupyter notebook, Palmer Penguins, in HTML showing title, metadata, text, code, and scatterplot. At the top there is a dropdown option to show or hide the code."></p> </div> </div> </div> <div id="knitr" class="tab-pane fade" role="tabpanel" aria-labelledby="knitr-tab"> <p>Quarto is a multi-language, next generation version of R Markdown from Posit, with many new features and capabilities. Like R Markdown, Quarto uses <a href="https://yihui.org/knitr/">knitr</a> to execute R code, and is therefore able to render most existing Rmd files without modification.</p> <div class="grid"> <div class="g-col-lg-6 g-col-12"> <div class="sourceCode" id="cb1"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span> <span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "ggplot2 demo"</span></span> <span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="an">author:</span><span class="co"> "Norah Jones"</span></span> <span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="an">date:</span><span class="co"> "5/22/2021"</span></span> <span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span><span class="co"> </span></span> <span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="co"> html:</span></span> <span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="co"> fig-width: 8</span></span> <span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="co"> fig-height: 4</span></span> <span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a><span class="co"> code-fold: true</span></span> <span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span> <span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a></span> <span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a><span class="fu">## Air Quality</span></span> <span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a></span> <span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a>@fig-airquality further explores the impact of temperature on ozone level.</span> <span id="cb1-15"><a href="#cb1-15" aria-hidden="true" tabindex="-1"></a></span> <span id="cb1-16"><a href="#cb1-16" aria-hidden="true" tabindex="-1"></a><span class="in">```{r}</span></span> <span id="cb1-17"><a href="#cb1-17" aria-hidden="true" tabindex="-1"></a><span class="co">#| label: fig-airquality</span></span> <span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a><span class="co">#| fig-cap: "Temperature and ozone level."</span></span> <span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a><span class="co">#| warning: false</span></span> <span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a></span> <span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(ggplot2)</span> <span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(airquality, <span class="fu">aes</span>(Temp, Ozone)) <span class="sc">+</span> </span> <span id="cb1-23"><a href="#cb1-23" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>() <span class="sc">+</span> </span> <span id="cb1-24"><a href="#cb1-24" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_smooth</span>(<span class="at">method =</span> <span class="st">"loess"</span>)</span> <span id="cb1-25"><a href="#cb1-25" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span> <span id="cb1-26"><a href="#cb1-26" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> </div> <div class="g-col-lg-6 g-col-12"> <p><img src="images/hello-knitr.png" class="hello-output img-fluid" alt="Example output with title (ggplot2 demo), author (Norah Jones), and date (5/22/2021). Below is a header reading Air Quality followed by body text (Figure 1 further explores the impact of temperature on ozone level.) with a toggleable code field, and figure with caption Figure 1 Temperature and ozone level."></p> </div> </div> </div> <div id="julia" class="tab-pane fade" role="tabpanel" aria-labelledby="julia-tab"> <p>Combine markdown and Julia code to create dynamic documents that are fully reproducible. Quarto executes Julia code via the <a href="https://github.com/JuliaLang/IJulia.jl">IJulia</a> Jupyter kernel, enabling you to author in plain text (as shown below) or render existing Jupyter notebooks.</p> <div class="grid"> <div class="g-col-lg-6 g-col-12"> <div class="sourceCode" id="cb2"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span> <span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "Plots Demo"</span></span> <span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="an">author:</span><span class="co"> "Norah Jones"</span></span> <span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="an">date:</span><span class="co"> "5/22/2021"</span></span> <span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span></span> <span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="co"> html:</span></span> <span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="co"> code-fold: true</span></span> <span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a><span class="an">jupyter:</span><span class="co"> julia-1.8</span></span> <span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span> <span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a></span> <span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a><span class="fu">## Parametric Plots</span></span> <span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a></span> <span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a>Plot function pair (x(u), y(u)). </span> <span id="cb2-14"><a href="#cb2-14" aria-hidden="true" tabindex="-1"></a>See @fig-parametric for an example.</span> <span id="cb2-15"><a href="#cb2-15" aria-hidden="true" tabindex="-1"></a></span> <span id="cb2-16"><a href="#cb2-16" aria-hidden="true" tabindex="-1"></a><span class="in">```{julia}</span></span> <span id="cb2-17"><a href="#cb2-17" aria-hidden="true" tabindex="-1"></a><span class="co">#| label: fig-parametric</span></span> <span id="cb2-18"><a href="#cb2-18" aria-hidden="true" tabindex="-1"></a><span class="co">#| fig-cap: "Parametric Plots"</span></span> <span id="cb2-19"><a href="#cb2-19" aria-hidden="true" tabindex="-1"></a></span> <span id="cb2-20"><a href="#cb2-20" aria-hidden="true" tabindex="-1"></a><span class="im">using</span> <span class="bu">Plots</span></span> <span id="cb2-21"><a href="#cb2-21" aria-hidden="true" tabindex="-1"></a></span> <span id="cb2-22"><a href="#cb2-22" aria-hidden="true" tabindex="-1"></a><span class="fu">plot</span>(sin, </span> <span id="cb2-23"><a href="#cb2-23" aria-hidden="true" tabindex="-1"></a> <span class="fu">x->sin</span>(<span class="fl">2</span>x), </span> <span id="cb2-24"><a href="#cb2-24" aria-hidden="true" tabindex="-1"></a> <span class="fl">0</span>, </span> <span id="cb2-25"><a href="#cb2-25" aria-hidden="true" tabindex="-1"></a> <span class="fl">2</span>π, </span> <span id="cb2-26"><a href="#cb2-26" aria-hidden="true" tabindex="-1"></a> leg<span class="op">=</span><span class="cn">false</span>, </span> <span id="cb2-27"><a href="#cb2-27" aria-hidden="true" tabindex="-1"></a> fill<span class="op">=</span>(<span class="fl">0</span>,<span class="op">:</span>lavender))</span> <span id="cb2-28"><a href="#cb2-28" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span> <span id="cb2-29"><a href="#cb2-29" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> </div> <div class="g-col-lg-6 g-col-12"> <p><img src="images/hello-julia.png" class="hello-output img-fluid" alt="Example Plots Demo output with title, author, date published and main section on Parametric plots which contains text, a toggleable code field, and the output of the plot, with the caption Figure 1 Parametric Plots."></p> </div> </div> </div> <div id="observable" class="tab-pane fade" role="tabpanel" aria-labelledby="observable-tab"> <p>Quarto includes native support for Observable JS, a set of JavaScript enhancements created by Mike Bostock (the author of D3). Observable JS uses a reactive execution model, and is especially well suited for interactive data exploration and analysis.</p> <div class="grid"> <div class="g-col-lg-6 g-col-12"> <div class="sourceCode" id="cb3"><pre class="sourceCode markdown code-with-copy"><code class="sourceCode markdown"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span> <span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="an">title:</span><span class="co"> "observable plot"</span></span> <span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="an">author:</span><span class="co"> "Norah Jones"</span></span> <span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="an">format:</span><span class="co"> </span></span> <span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="co"> html: </span></span> <span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="co"> code-fold: true</span></span> <span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="co">---</span></span> <span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a></span> <span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a><span class="fu">## Seattle Precipitation by Day (2012 to 2016)</span></span> <span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a></span> <span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a><span class="in">```{ojs}</span></span> <span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a>data <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"seattle-weather.csv"</span>)</span> <span id="cb3-13"><a href="#cb3-13" aria-hidden="true" tabindex="-1"></a> <span class="op">.</span><span class="fu">csv</span>({<span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span>})</span> <span id="cb3-14"><a href="#cb3-14" aria-hidden="true" tabindex="-1"></a> </span> <span id="cb3-15"><a href="#cb3-15" aria-hidden="true" tabindex="-1"></a>Plot<span class="op">.</span><span class="fu">plot</span>({</span> <span id="cb3-16"><a href="#cb3-16" aria-hidden="true" tabindex="-1"></a> <span class="dt">width</span><span class="op">:</span> <span class="dv">800</span><span class="op">,</span> <span class="dt">height</span><span class="op">:</span> <span class="dv">500</span><span class="op">,</span> <span class="dt">padding</span><span class="op">:</span> <span class="dv">0</span><span class="op">,</span></span> <span id="cb3-17"><a href="#cb3-17" aria-hidden="true" tabindex="-1"></a> <span class="dt">color</span><span class="op">:</span> { <span class="dt">scheme</span><span class="op">:</span> <span class="st">"blues"</span><span class="op">,</span> <span class="dt">type</span><span class="op">:</span> <span class="st">"sqrt"</span>}<span class="op">,</span></span> <span id="cb3-18"><a href="#cb3-18" aria-hidden="true" tabindex="-1"></a> <span class="dt">y</span><span class="op">:</span> { <span class="dt">tickFormat</span><span class="op">:</span> i <span class="kw">=></span> <span class="st">"JFMAMJJASOND"</span>[i] }<span class="op">,</span></span> <span id="cb3-19"><a href="#cb3-19" aria-hidden="true" tabindex="-1"></a> <span class="dt">marks</span><span class="op">:</span> [</span> <span id="cb3-20"><a href="#cb3-20" aria-hidden="true" tabindex="-1"></a> Plot<span class="op">.</span><span class="fu">cell</span>(data<span class="op">,</span> Plot<span class="op">.</span><span class="fu">group</span>({<span class="dt">fill</span><span class="op">:</span> <span class="st">"mean"</span>}<span class="op">,</span> {</span> <span id="cb3-21"><a href="#cb3-21" aria-hidden="true" tabindex="-1"></a> <span class="dt">x</span><span class="op">:</span> d <span class="kw">=></span> <span class="kw">new</span> <span class="bu">Date</span>(d<span class="op">.</span><span class="at">date</span>)<span class="op">.</span><span class="fu">getDate</span>()<span class="op">,</span></span> <span id="cb3-22"><a href="#cb3-22" aria-hidden="true" tabindex="-1"></a> <span class="dt">y</span><span class="op">:</span> d <span class="kw">=></span> <span class="kw">new</span> <span class="bu">Date</span>(d<span class="op">.</span><span class="at">date</span>)<span class="op">.</span><span class="fu">getMonth</span>()<span class="op">,</span></span> <span id="cb3-23"><a href="#cb3-23" aria-hidden="true" tabindex="-1"></a> <span class="dt">fill</span><span class="op">:</span> <span class="st">"precipitation"</span><span class="op">,</span> </span> <span id="cb3-24"><a href="#cb3-24" aria-hidden="true" tabindex="-1"></a> <span class="dt">inset</span><span class="op">:</span> <span class="fl">0.5</span></span> <span id="cb3-25"><a href="#cb3-25" aria-hidden="true" tabindex="-1"></a> }))</span> <span id="cb3-26"><a href="#cb3-26" aria-hidden="true" tabindex="-1"></a> ]</span> <span id="cb3-27"><a href="#cb3-27" aria-hidden="true" tabindex="-1"></a>})</span> <span id="cb3-28"><a href="#cb3-28" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div> </div> <div class="g-col-lg-6 g-col-12"> <p><img src="images/hello-observable.png" class="img-fluid" style="background-color: white; border: 1px solid #dee2e6; height: 625px;" alt="Example output with title, author, and date. Below, the main section reads Seattle Precipitation by Day (2012 to 2016) with a toggleable section to show code and a heatmap of the precipitation by day."></p> </div> </div> </div> </div> <div class="grid"> </div> </div> </div> <div class="content-block"> <div class="features"> <section id="dynamic-documents" class="feature"> <h3>Dynamic Documents</h3> <p>Generate dynamic output using Python, R, Julia, and Observable. Create reproducible documents that can be regenerated when underlying assumptions or data change.</p> <div class="learn-more"> <p><a href="./docs/computations/python.html">Learn more »</a></p> </div> </section> <section id="beautiful-publications" class="feature"> <h3>Beautiful Publications</h3> <p>Publish high-quality articles, reports, presentations, websites, and books in HTML, PDF, MS Word, ePub, and more. Use a single source document to target multiple formats.</p> <div class="learn-more"> <p><a href="./docs/output-formats/all-formats.html">Learn more »</a></p> </div> </section> <section id="scientific-markdown" class="feature"> <h3>Scientific Markdown</h3> <p>Pandoc markdown has excellent support for LaTeX equations and citations. Quarto adds extensions for cross-references, figure panels, callouts, advanced page layout, and more.</p> <div class="learn-more"> <p><a href="./docs/authoring/markdown-basics.html">Learn more »</a></p> </div> </section> <section id="authoring-tools" class="feature"> <h3>Authoring Tools</h3> <p>Use your favorite tools including VS Code, RStudio, Jupyter Lab, or any text editor. Use the Quarto visual markdown editor for long-form documents.</p> <div class="learn-more"> <p><a href="./docs/tools/jupyter-lab.html">Learn more »</a></p> </div> </section> <section id="interactivity" class="feature"> <h3>Interactivity</h3> <p>Engage readers by adding interactive data exploration to your documents using Jupyter Widgets, htmlwidgets for R, Observable JS, and Shiny.</p> <div class="learn-more"> <p><a href="./docs/interactive/">Learn more »</a></p> </div> </section> <section id="websites-and-books" class="feature"> <h3>Websites and Books</h3> <p>Publish collections of documents as a blog or full website. Create books and manuscripts in both print formats (PDF and MS Word) and online formats (HTML and ePub).</p> <div class="learn-more"> <p><a href="./docs/websites/">Learn more »</a></p> </div> </section> </div> </div> <div class="get-started alt-background"> <div class="content-block"> <p><a href="./docs/get-started/index.html" class="btn-action-primary btn-action btn btn-success btn-lg" role="button" style="margin-top: 1em;">Get Started</a></p> </div> </div> <script type="text/javascript"> // replace cmd keyboard shortcut w/ control on non-Mac platforms const kPlatformMac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false; if (!kPlatformMac) { var kbds = document.querySelectorAll("kbd") kbds.forEach(function(kbd) { kbd.innerHTML = kbd.innerHTML.replace(/⌘/g, '⌃'); }); } // tweak headings in pymd document.querySelectorAll(".pymd span.co").forEach(el => { if (!el.innerText.startsWith("#|")) { el.style.fontWeight = 1000; } }); </script> <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 icon = ""; const anchorJS = new window.AnchorJS(); anchorJS.options = { placement: 'right', icon: icon }; anchorJS.add('.anchored'); const isCodeAnnotation = (el) => { for (const clz of el.classList) { if (clz.startsWith('code-annotation-')) { return true; } } return false; } const onCopySuccess = 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(); } const getTextToCopy = function(trigger) { const codeEl = trigger.previousElementSibling.cloneNode(true); for (const childEl of codeEl.children) { if (isCodeAnnotation(childEl)) { childEl.remove(); } } return codeEl.innerText; } const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', { text: getTextToCopy }); clipboard.on('success', onCopySuccess); if (window.document.getElementById('quarto-embedded-source-code-modal')) { const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', { text: getTextToCopy, container: window.document.getElementById('quarto-embedded-source-code-modal') }); clipboardModal.on('success', onCopySuccess); } var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//); var mailtoRegex = new RegExp(/^mailto:/); var filterRegex = new RegExp("https:\/\/quarto\.org"); 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):not(.about-link)'); 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; } } } 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); } 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>  <footer class="footer"> <div class="nav-footer"> <div class="nav-footer-left"> <p>Proudly supported by <a href="https://posit.co"><img src="https://posit.co/wp-content/uploads/2024/06/Posit-Logos-2024_horiz-full-color.svg" class="img-fluid" alt="Posit" width="65"></a></p> </div> <div class="nav-footer-center"> <ul class="footer-items list-unstyled"> <li class="nav-item"> <a class="nav-link" href="./about.html"> <p>About</p> </a> </li> <li class="nav-item"> <a class="nav-link" href="./docs/faq/index.html"> <p>FAQ</p> </a> </li> <li class="nav-item"> <a class="nav-link" href="./license.html"> <p>License</p> </a> </li> <li class="nav-item"> <a class="nav-link" href="./trademark.html"> <p>Trademark</p> </a> </li> </ul> <div class="toc-actions"><ul><li><a href="https://github.com/quarto-dev/quarto-web/edit/main/index.qmd" class="toc-action"><i class="bi bi-github"></i>Edit this page</a></li><li><a href="https://github.com/quarto-dev/quarto-cli/issues/new/choose" class="toc-action"><i class="bi empty"></i>Report an issue</a></li></ul></div></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/quarto_pub"> <i class="bi bi-twitter" role="img" aria-label="Quarto Twitter"> </i> </a> </li> <li class="nav-item compact"> <a class="nav-link" href="https://github.com/quarto-dev/quarto-cli"> <i class="bi bi-github" role="img" aria-label="Quarto GitHub"> </i> </a> </li> <li class="nav-item compact"> <a class="nav-link" href="https://quarto.org/docs/blog/index.xml"> <i class="bi bi-rss" role="img" aria-label="Quarto Blog RSS"> </i> </a> </li> </ul> </div> </div> </footer> </body></html>