index.qmd

---
pagetitle: "Quarto"
page-layout: custom
section-divs: false
toc: false
css: index.css
editor: source
description: | 
  Quarto® is an open-source scientific and technical publishing system built on Pandoc.
image: /images/hero_right.png
---

::: {.hero-banner}

::: {.hero-image .hero-image-left}
![](images/hero_left.png){fig-alt="Stack of three printed articles with text, code, and graphics."}
:::

::: {.content-block}

# Welcome to Quarto

### Quarto^[®]{.trademark}^ is an open-source scientific and technical publishing system built on [Pandoc](https://pandoc.org)

- Create dynamic content with [Python](docs/computations/python.qmd), [R](docs/computations/r.qmd), [Julia](docs/computations/julia.qmd), and [Observable](docs/computations/ojs.qmd). 
- Author documents as plain text markdown or [Jupyter](https://jupyter.org/) notebooks.
- Publish high-quality articles, reports, presentations, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.
- Author with scientific markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.

::: {.hero-buttons}
[Get Started](docs/get-started/){.btn-action-primary .btn-action .btn .btn-success .btn-lg role="button"}
[Guide](docs/guide/){#btn-guide .btn-action .btn .btn-info .btn-lg role="button"}
::: 

:::

::: {.hero-image .hero-image-right}
![](images/hero_right.png){fig-alt="Stack of three printed articles with text, code, and graphics."}
:::

:::


::: {.hello-quarto .alt-background}
::: {.content-block}

::: {.hello-quarto-banner}
# Hello, Quarto 
<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>
:::

<div class="tab-content" id="hello-quarto-tabcontent">

<div class="tab-pane fade  show active" id="python" role="tabpanel" aria-labelledby="python-tab">

Weave together narrative text and code to produce elegantly formatted output. Quarto documents are fully reproducible. Use markdown with code cells executed via Jupyter (shown below) or render existing Jupyter notebooks.

::: {.grid}
::: {.g-col-lg-6 .g-col-12}
````markdown
---
title: "matplotlib demo"
format:
  html:
    code-fold: true
jupyter: python3
---

For a demonstration of a line plot on a polar axis, see @fig-polar.

```{{python}}
#| label: fig-polar
#| fig-cap: "A line plot on a polar axis"

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(
  subplot_kw = {'projection': 'polar'} 
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```
````
:::

::: {.hello-output .g-col-lg-6 .g-col-12}
![](images/hello-jupyter.png){fig-alt="Example output where header reads: matplotlib demo, the body reads: For a demonstration of a line plot on a polar axis, see Figure 1. Below the body text is a toggleable field to reveal the code, and the Figure 1 image with a caption that reads: Figure 1: A line plot on a polar axis."}
:::
:::

</div>

<div class="tab-pane fade" id="knitr" role="tabpanel" aria-labelledby="knitr-tab">

Quarto is a multi-language, next generation version of R Markdown from Posit, with many new new features and capabilities. Like R Markdown, Quarto uses [Knitr](https://yihui.org/knitr/) to execute R code, and is therefore able to render most existing Rmd files without modification.

::: {.grid}
::: {.g-col-lg-6 .g-col-12}
````markdown
---
title: "ggplot2 demo"
author: "Norah Jones"
date: "5/22/2021"
format: 
  html:
    fig-width: 8
    fig-height: 4
    code-fold: true
---

## Air Quality

@fig-airquality further explores the impact of temperature on ozone level.

```{{r}}
#| label: fig-airquality
#| fig-cap: Temperature and ozone level.
#| warning: false

library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess"
)
```
````
:::

::: {.hello-output .g-col-lg-6 .g-col-12}
![](images/hello-knitr.png){fig-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."}
:::
:::

</div>

<div class="tab-pane fade" id="julia" role="tabpanel" aria-labelledby="julia-tab">

Combine markdown and Julia code to create dynamic documents that are fully reproducible. Quarto executes Julia code via the [IJulia](https://github.com/JuliaLang/IJulia.jl) Jupyter kernel, enabling you to author in plain text (as shown below) or render existing Jupyter notebooks.

::: {.grid}
::: {.g-col-lg-6 .g-col-12}
````markdown
---
title: "Plots Demo"
author: "Norah Jones"
date: "5/22/2021"
format:
  html:
    code-fold: true
jupyter: julia-1.8
---

## Parametric Plots

Plot function pair (x(u), y(u)). 
See @fig-parametric for an example.

```{{julia}}
#| label: fig-parametric
#| fig-cap: "Parametric Plots"

using Plots

plot(sin, 
     x->sin(2x), 
     0, 
     2π, 
     leg=false, 
     fill=(0,:lavender))
```
````
:::

::: {.hello-output .g-col-lg-6 .g-col-12}
![](images/hello-julia.png){fig-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."}
:::
:::

</div>

<div class="tab-pane fade" id="observable" role="tabpanel" aria-labelledby="observable-tab">

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.



::: {.grid}
::: {.g-col-lg-6 .g-col-12}
````markdown
---
title: "observable plot"
author: "Norah Jones"
format: 
  html: 
    code-fold: true
---

## Seattle Precipitation by Day (2012 to 2016)

```{{ojs}}
data = FileAttachment("seattle-weather.csv")
  .csv({typed: true})
  
Plot.plot({
  width: 800, height: 500, padding: 0,
  color: { scheme: "blues", type: "sqrt"},
  y: { tickFormat: i => "JFMAMJJASOND"[i] },
  marks: [
    Plot.cell(data, Plot.group({fill: "mean"}, {
      x: d => d.date.getUTCDate(),
      y: d => d.date.getUTCMonth(),
      fill: "precipitation", 
      inset: 0.5
    }))
  ]
})
```
````
:::


::: {.hello-output .g-col-lg-6 .g-col-12}
![](images/hello-observable.png){fig-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."}
:::


:::

</div>

</div>



::: {.grid}


:::
:::
:::


::: {.content-block}
::: {.features}

::: {.feature}
### Dynamic Documents
Generate dynamic output using Python, R, Julia, and Observable. Create reproducible documents that can be regenerated when underlying assumptions or data change.

::: {.learn-more}
[Learn more »](docs/computations/python.qmd)
:::
:::

::: {.feature}
### Beautiful Publications
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.

::: {.learn-more}
[Learn more »](docs/output-formats/all-formats.qmd)
:::
:::

::: {.feature}
### Scientific Markdown
Pandoc markdown has excellent support for LaTeX equations and citations. Quarto adds extensions for cross-references, figure panels, callouts, advanced page layout, and more.

::: {.learn-more}
[Learn more »](docs/authoring/markdown-basics.qmd)
:::
:::

::: {.feature}
### Authoring Tools
Use your favorite tools including VS Code, RStudio, Jupyter Lab, or any text editor. Use the Quarto visual markdown editor for long-form documents.

::: {.learn-more}
[Learn more »](docs/tools/jupyter-lab.qmd)
:::
:::

::: {.feature}
### Interactivity
Engage readers by adding interactive data exploration to your documents using Jupyter Widgets, htmlwidgets for R, Observable JS, and Shiny.

::: {.learn-more}
[Learn more »](docs/interactive/)
:::
:::

::: {.feature}
### Websites and Books
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).

::: {.learn-more}
[Learn more »](docs/websites/)
:::
:::

:::
:::


::: {.get-started .alt-background}
::: {.content-block}

### Analyze. Share. Reproduce. Your data has a story---tell it with Quarto.

[Get Started](docs/get-started/index.html){.btn-action-primary  .btn-action .btn .btn-success .btn-lg role="button"}

:::
:::