diff --git a/1-hello-dashboards/1-hello-dashboards.qmd b/1-hello-dashboards/1-hello-dashboards.qmd index bbeeae3..265861f 100644 --- a/1-hello-dashboards/1-hello-dashboards.qmd +++ b/1-hello-dashboards/1-hello-dashboards.qmd @@ -67,16 +67,16 @@ One link for all materials ## Schedule -| Time | Activity | -|:--------------|:---------------------| -| 09:00 - 10:30 | Hello, dashboards! | -| 10:30 - 11:00 | ☕ *Coffee break* | -| 11:00 - 12:30 | Dashboard components | -| 12:30 - 13:30 | 🍽️ *Lunch break* | -| 13:30 - 15:00 | Theming and styling | -| 15:00 - 15:30 | ☕ *Coffee break* | +| Time | Activity | +|:--------------|:------------------------------------------| +| 09:00 - 10:30 | Hello, dashboards! | +| 10:30 - 11:00 | ☕ *Coffee break* | +| 11:00 - 12:30 | Dashboard components | +| 12:30 - 13:30 | 🍽️ *Lunch break* | +| 13:30 - 15:00 | Theming and styling | +| 15:00 - 15:30 | ☕ *Coffee break* | | 15:30 - 17:00 | Parameters, interactivity, and deployment | -| 16:30 - 17:00 | Quarto Q & A | +| 16:30 - 17:00 | Quarto Q & A | ## WiFi @@ -768,16 +768,16 @@ from plotnine.data import mpg # Your turn -## Start - -Locate one of the following documents, depending on whether you prefer to work in R or Python, either in Posit Cloud or the computing environment of your choice. +## Start {.smaller} ::: r-box -Start with `olympicdash-r-1.qmd`. +- Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `1 - Hello, Dashboards!`. + +- Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-1.qmd.` ::: ::: python-box -Start with `olympicdash-py-1.qmd`. +Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-1.qmd.` ::: ## Goal @@ -790,6 +790,7 @@ Your goal is to create one of the following dashboards. ![](images/olympicdash-r-1.png) ::: ::: + ::: column ::: python-box ![](images/olympicdash-py-1.png) @@ -800,8 +801,8 @@ Your goal is to create one of the following dashboards. ## Step 1 ::: your-turn -- Turn the output to a dashboard. -- Add `title`s to code cells. +- Turn the output to a dashboard. +- Add `title`s to code cells. ::: ::: columns @@ -810,6 +811,7 @@ Your goal is to create one of the following dashboards. ![](images/olympicdash-r-1.png) ::: ::: + ::: column ::: python-box ![](images/olympicdash-py-1.png) @@ -822,17 +824,17 @@ Your goal is to create one of the following dashboards. ## Step 2 ::: your-turn -- Add a GitHub icon and link to a GitHub repository (that may or may not contain the code for the dashboard you're building). -- Add the olympics logo from the `images` folder. +- Add a GitHub icon and link to a GitHub repository (that may or may not contain the code for the dashboard you're building). +- Add the olympics logo from the `images` folder. ::: - ::: columns ::: column ::: r-box ![](images/olympicdash-r-1.png) ::: ::: + ::: column ::: python-box ![](images/olympicdash-py-1.png) @@ -848,13 +850,13 @@ Your goal is to create one of the following dashboards. Reorganize the cards into rows and columns as shown below. ::: - ::: columns ::: column ::: r-box ![](images/olympicdash-r-1.png) ::: ::: + ::: column ::: python-box ![](images/olympicdash-py-1.png) diff --git a/1-hello-dashboards/index.qmd b/1-hello-dashboards/index.qmd index 930dec3..5e9ce98 100644 --- a/1-hello-dashboards/index.qmd +++ b/1-hello-dashboards/index.qmd @@ -9,7 +9,12 @@ title: "Hello, Dashboards!" ```{=html} ``` - ## Exercises -To be posted. +- R: + + - Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `1 - Hello, Dashboards!`. + + - Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-1.qmd.` + +- Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-1.qmd.` diff --git a/2-dashboard-components/2-dashboard-components.qmd b/2-dashboard-components/2-dashboard-components.qmd index 768c457..9f8b10a 100644 --- a/2-dashboard-components/2-dashboard-components.qmd +++ b/2-dashboard-components/2-dashboard-components.qmd @@ -140,7 +140,7 @@ The content of cards typically maps to *cells* in your notebook or source docume ## Navigation buttons -- alternative {.smaller auto-animate="true"} -Special aliases are recognized for certain navigation buttons: `linkedin`, `facebook`, `reddit`, `twitter`, and `github`. +Special aliases are recognized for certain navigation buttons: `linkedin`, `facebook`, `reddit`, `twitter`, and `github`. ::: {data-id="code"} ```` {.yaml filename="dashboard-r.qmd" code-line-numbers="|6-7"} @@ -411,7 +411,7 @@ This option is handy for adding more rows of cards to a dashboard, however sprea ```` {.yaml filename="dashboard-r.qmd" code-line-numbers="|12|24"} {{< include _per-page-controls.qmd >}} -```` +```` ## Tabsets {auto-animate="true"} @@ -423,7 +423,7 @@ This option is handy for adding more rows of cards to a dashboard, however sprea ## Tabsets {.smaller auto-animate="true"} -Each card within a row/column or each row/column within another becomes a tab: +Each card within a row/column or each row/column within another becomes a tab: ::: columns ::: {.column width="40%"} @@ -493,26 +493,27 @@ Which of the following cells will become a card in a dashboard? ::: columns ::: column -a. +a. ```{{r}} library(palmerpenguins) ``` -b. +b. ```{{r}} x <- 2 ``` ::: + ::: column -c. +c. ```{{r}} plot(cars) ``` -d. +d. ```{{r}} #| output: false @@ -668,7 +669,7 @@ You can control layout of multiple outputs with `layout-ncol`: ```` {.yaml} ::: {.card title="Title goes here"} Text goes here. - + ```{{r}} # code generating output goes here ``` @@ -680,14 +681,14 @@ You can control layout of multiple outputs with `layout-ncol`: ## Start -Locate one of the following documents, depending on whether you prefer to work in R or Python, either in Posit Cloud or the computing environment of your choice. - ::: r-box -Start with `olympicdash-r-2.qmd`. +- Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `2 - Dashboards components`. + +- Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-2.qmd.` ::: ::: python-box -Start with `olympicdash-py-2.qmd`. +Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-2.qmd.` ::: ## Goal @@ -699,8 +700,8 @@ Your goal is to create a dashboard that looks like the following: ## Step 1 {.smaller} ::: your-turn -- Add two pages - one for Summer Olympics and one for Winter Olympics. -- Duplicate existing dashboard content for the two types of olympic games with subsets of data from the corresponding season. +- Add two pages - one for Summer Olympics and one for Winter Olympics. +- Duplicate existing dashboard content for the two types of olympic games with subsets of data from the corresponding season. ::: ![](images/olympicdash-r-2-step-1.png) @@ -712,9 +713,9 @@ Your goal is to create a dashboard that looks like the following: ::: your-turn In the Summer Olympics page: -- Make the columns 65% (first) and 35% (second) of width of the dashboard. -- Divide the first column into rows of 60% (first) and 40% (second) of height of the dashboard. -- In the second row of the first column, combine markdown text about cancelled olympic games with the medals by year plot in the same cell. +- Make the columns 65% (first) and 35% (second) of width of the dashboard. +- Divide the first column into rows of 60% (first) and 40% (second) of height of the dashboard. +- In the second row of the first column, combine markdown text about cancelled olympic games with the medals by year plot in the same cell. ::: ![](images/olympicdash-r-2-step-2.png) @@ -726,9 +727,9 @@ In the Summer Olympics page: ::: your-turn In the Summer Olympics page: -- Divide the second column into rows of 25% (first) and 75% (second) of height of the dashboard. -- In the second row of the second column, create tables (using **gt** for R or **great_tables** for Python) of top 30 and bottom 30 total medals by team, sorted in descending order for the top 30 and ascending order for the bottom 30 total medals, and add color to the table based on data values. -- Place these tables in tabsets with descriptive text about table content in the same card/tab. +- Divide the second column into rows of 25% (first) and 75% (second) of height of the dashboard. +- In the second row of the second column, create tables (using **gt** for R or **great_tables** for Python) of top 30 and bottom 30 total medals by team, sorted in descending order for the top 30 and ascending order for the bottom 30 total medals, and add color to the table based on data values. +- Place these tables in tabsets with descriptive text about table content in the same card/tab. ::: ![](images/olympicdash-r-2-step-3.png) diff --git a/2-dashboard-components/index.qmd b/2-dashboard-components/index.qmd index a492893..946dac6 100644 --- a/2-dashboard-components/index.qmd +++ b/2-dashboard-components/index.qmd @@ -9,6 +9,13 @@ title: "Dashboard components" ```{=html} ``` + ## Exercises -To be posted. +- R: + + - Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `2 - Dashboard components`. + + - Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-2.qmd.` + +- Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-2.qmd.` diff --git a/3-theming-styling/3-theming-styling.qmd b/3-theming-styling/3-theming-styling.qmd index 69abbed..5b0b9f7 100644 --- a/3-theming-styling/3-theming-styling.qmd +++ b/3-theming-styling/3-theming-styling.qmd @@ -171,14 +171,14 @@ You can provide a light and dark theme and Quarto will automatically place a lig ## Start -Locate one of the following documents, depending on whether you prefer to work in R or Python, either in Posit Cloud or the computing environment of your choice. - ::: r-box -Start with `olympicdash-r-3.qmd`. +- Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `3 - Theming and styling`. + +- Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-3.qmd.` ::: ::: python-box -Start with `olympicdash-py-3.qmd`. +Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-3.qmd.` ::: ## Goal diff --git a/3-theming-styling/index.qmd b/3-theming-styling/index.qmd index 33c7c1d..df15f34 100644 --- a/3-theming-styling/index.qmd +++ b/3-theming-styling/index.qmd @@ -12,4 +12,10 @@ title: "Theming and styling" ## Exercises -To be posted. +- R: + + - Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `3 - Theming and styling`. + + - Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-3.qmd.` + +- Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-3.qmd.` diff --git a/4-parameters-interactivity-deployment/4-parameters-interactivity-deployment.qmd b/4-parameters-interactivity-deployment/4-parameters-interactivity-deployment.qmd index 5bc3f33..105d799 100644 --- a/4-parameters-interactivity-deployment/4-parameters-interactivity-deployment.qmd +++ b/4-parameters-interactivity-deployment/4-parameters-interactivity-deployment.qmd @@ -183,6 +183,18 @@ Using [ShinyLive](https://posit-dev.github.io/r-shinylive/) # Your turn +## Start + +::: r-box +- Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `4 - Parameters, interactivity, and deployment`. + +- Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-4.qmd.` +::: + +::: python-box +Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-4.qmd.` +::: + ## Goal ::: your-turn diff --git a/4-parameters-interactivity-deployment/index.qmd b/4-parameters-interactivity-deployment/index.qmd index 3988dd6..0eff195 100644 --- a/4-parameters-interactivity-deployment/index.qmd +++ b/4-parameters-interactivity-deployment/index.qmd @@ -15,4 +15,11 @@ Materials for this module to be updated before the workshop start. ``` ## Exercises -To be posted. +- R: + + - Option 1 - Cloud: Go to Posit Cloud for the workshop, open project titled `4 - Parameters, interactivity, and deployment`. + + - Option 2 - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-r-4.qmd.` + +- Python - Local: Clone the GitHub repo `posit-conf-2024/olympicdash` () and work on `olympicdash-py-4.qmd.` + diff --git a/_freeze/setup/execute-results/html.json b/_freeze/setup/execute-results/html.json index b15fb6e..08924a5 100644 --- a/_freeze/setup/execute-results/html.json +++ b/_freeze/setup/execute-results/html.json @@ -1,9 +1,11 @@ { - "hash": "6e4bbc19f3da89ca87fc80be75e5ad49", + "hash": "6a8f073dd1877f61c711e028fa70ec6a", "result": { "engine": "knitr", - "markdown": "---\ntitle: \"Setup instructions\"\n---\n\n\n\n\nPrior to the workshop check you have the required software and set up any accounts you might need for publishing your dashboard.\n\n## Software\n\nYou will be able to follow along with this workshop in R or in Python.\nSee the required software suite for each language below.\n\n### R\n\n- [R](https://cran.r-project.org): 4.4.1\n\n- [Quarto](https://quarto.org/docs/download/): v1.5\n\n- [RStudio](https://posit.co/download/rstudio-desktop/): 2024.04.2+764\n\n- Packages:\n\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\npkg_list <- c(\n \"tidyverse\", \"gt\", \"ggthemes\", \"DT\", \"here\"\n)\ninstall.packages(pkg_list)\n```\n:::\n\n\n\n\n### Python\n\n- [Python](https://www.python.org/downloads/): 3\n\n\n\n\n```{=html}\n\n```\n\n\n\n- [Quarto](https://quarto.org/docs/download/): v1.5\n\n- [VS Code](https://code.visualstudio.com/download) as well as the [VS Code Quarto Extension](https://marketplace.visualstudio.com/items?itemName=quarto.quarto) and [VS Code Jupyter Extension](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)\n\n- Packages: We recommend `pip install`ing the following packages. If you have a different preferred way of managing your environment, you’re welcomed to do so. Just make sure you have these packages installed in order to be able to follow along with the examples.\n\n```\ngreat_tables==0.10.0\nipykernel==6.29.5\njupyter==1.0.0\npandas==2.2.2\nplotnine==0.13.6\n```\n\n## Publishing accounts\n\nYou do not need to publish your dashoard during the workshop, but it would be good pracice!\n\nTo publish your website you'll need an account on one of Quarto's publishing venues:\n\n- **(Recommended)** [Quarto Pub](https://quartopub.com/sign-up)\n- [GitHub](https://github.com) only **if you are already** a Git/GitHub user\n\n## Discord\n\nWe're not going to be making heavy use of Discord during the workshop, but it's a great place to share code snippets for questions that come up or (inevitable) typos that need to be fixed. \n\nMore importantly, it's a great place to connect with other conference attendees.\n\n- [pos.it/conf-event-portal](http://pos.it/conf-event-portal) > Login\n- Click on \"Join Discord, the virtual networking platform!\"\n- Browse Channels -> #workshop-quarto-dashboards\n\n\n", - "supporting": [], + "markdown": "---\ntitle: \"Setup instructions\"\n---\n\n\n\n\nPrior to the workshop check you have the required software and set up any accounts you might need for publishing your dashboard.\n\n## Software\n\nYou will be able to follow along with this workshop in R or in Python.\nSee the required software suite for each language below.\n\n### R\n\n- [R](https://cran.r-project.org): 4.4.1\n\n- [Quarto](https://quarto.org/docs/download/): v1.5\n\n- [RStudio](https://posit.co/download/rstudio-desktop/): 2024.04.2+764\n\n- Packages:\n\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\npkg_list <- c(\n \"tidyverse\", \"gt\", \"ggthemes\", \"DT\", \"here\", \"paletteer\"\n)\ninstall.packages(pkg_list)\n```\n:::\n\n\n\n\n### Python\n\n- [Python](https://www.python.org/downloads/): 3\n- [Quarto](https://quarto.org/docs/download/): v1.5\n- [VS Code](https://code.visualstudio.com/download) as well as the [VS Code Quarto Extension](https://marketplace.visualstudio.com/items?itemName=quarto.quarto) and [VS Code Jupyter Extension](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)\n- Packages: We recommend `pip install`ing the following packages. If you have a different preferred way of managing your environment, you’re welcomed to do so. Just make sure you have these packages installed in order to be able to follow along with the examples.\n\n``` \ngreat_tables==0.10.0\nipykernel==6.29.5\njupyter==1.0.0\npandas==2.2.2\nplotnine==0.13.6\n```\n\n## Publishing accounts\n\nYou do not need to publish your dashboard during the workshop, but it would be good practice!\n\nTo publish your website you'll need an account on one of Quarto's publishing venues:\n\n- **(Recommended)** [Quarto Pub](https://quartopub.com/sign-up)\n- [GitHub](https://github.com) only **if you are already** a Git/GitHub user\n\n## Discord\n\nWe're not going to be making heavy use of Discord during the workshop, but it's a great place to share code snippets for questions that come up or (inevitable) typos that need to be fixed.\n\nMore importantly, it's a great place to connect with other conference attendees.\n\n- [pos.it/conf-event-portal](http://pos.it/conf-event-portal) \\> Login\n- Click on \"Join Discord, the virtual networking platform!\"\n- Browse Channels -\\> #workshop-quarto-dashboards\n", + "supporting": [ + "setup_files" + ], "filters": [ "rmarkdown/pagebreak.lua" ], diff --git a/_quarto.yml b/_quarto.yml index f27f1ab..f29a971 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -64,4 +64,4 @@ execute: freeze: auto echo: true -editor: visual +editor: source