This repo contains the code for the examples and demonstrations presented on my site: davidruvolo51.github.io/shinytutorials/.
In my early days of learning shiny, I kept a document of tips and tricks. It worked nicely, but it quickly became too cluttered and scattered. I decided to create this project to organize the material in to a series of practical examples and to make it available for the wider R community.
I am interested in web accessibility, data visualization and the communication of results, and good design practices. Many of the examples that I developed rely heavily on HTML, CSS, and JavaScript methods. I will try to keep things simple and provide links for further reading.
Suggestions for improvement are always welcome!
I plan on developing a new Shiny app every now and then. Checkout the issues label Tutorial Ideas for examples that I'm currently developing or planning. New ideas are also welcome!
There are two types of examples: available and archived. Available examples are regularly maintained and updated. The archived examples still work, but the methods are outdated or the example was replaced by a newer one.
You can clone the entire repository, but be aware that you will also clone the entire git history. You can either download the files or folders that you want or use git sparse-checkout. In the terminal, run the following commands.
git clone --filter=blob:none --sparse https://github.com/davidruvolo51/shinyAppTutorials
cd shinyAppTutorials
git sparse-checkout init --cone
git sparse-checkout set drag-and-dropReplace drag-and-drop for the subdirectory that you wish to checkout locally. For more information, take a look at this GitHub blog post: Bring your monorepo down to size with sparse-checkout.
| name | description | version | link |
|---|---|---|---|
| data-editor | A shiny app for editing dataset in shiny | 1.0.0 | tutorial |
| drag-and-drop | create a drag and drop component | 1.0.1 | tutorial |
| get-window-dims | sending data from javascript | 1.1.0 | tutorial |
| js-handlers | getting started with custom handlers | 1.1.1 | tutorial |
| leaflet-loading-screens | creating a loading screen for leaflet | 1.0.0 | tutorial |
| login-screen | Adding basic user authentication to shiny apps | 1.1.0 | tutorial |
| progress-bars-example | creating a shiny progressbar using R6 classes | 1.1.0 | tutorial |
| responsive-datatables | create responsive datatables in R | 1.1.0 | tutorial |
| rmarkdown-app | using Rmarkdown as Shiny UI | 1.1.0 | tutorial |
| sass-in-shiny | integrating SASS into your Shiny development workflow | 1.1.0 | tutorial |
| setting-html-attributes | set document attributes | 1.0.1 | tutorial |
| shiny-accordion | A component for collapsing HTML elements | 1.0.0 | tutorial |
| shiny-landing-page | create a landing page | 1.1.0 | tutorial |
| shiny-links | a component for within app navigation | 1.1.0 | tutorial |
| shiny-listbox | create listbox components in shiny | 1.1.0 | tutorial |
| time-input | creating a custom time input for use in shiny | 1.1.0 | tutorial |
The examples listed in the following table are achived. They still work, but they are either outdated or were replaced by a newer example. (I'm a bit hesitant to remove these examples in case some follows a link to a page that doesn't exist.)
| name | description | version | link |
|---|---|---|---|
| internal-links | Create a link from a leaflet popup to a shiny page | 1.1.0 | tutorial |
| internal-links-basic-ex | Create links from one shiny page to another | 1.1.0 | tutorial |
| internal-links-demo | Navigate to a specific tab on another page | 1.1.0 | tutorial |
| select-input-styling | Style a select input element using CSS | 1.1.0 | tutorial |
The internal links examples are outdated. Instead, use the shinyLink component described in the Shiny Link subdirectory (02 August 2020).
Many of the tutorials rely heavily on HTML, CSS and JavaScript to create specific layouts and interactivity. These are good skills to have, and they will come in handy when building custom applications. Throughout the examples, I've tried to keep things simple and provide links to outside sources where applicable. If something isn't clear or you have suggestions for improvement, feel free to open a new issue.
If you would like to learn more, here are some links that you may find useful.
- W3C Online Courses (free on edx.org)
- a11y project
- Accessibility Developer Guide
- Mozilla's Learn Accessibility
- macOS Voice Over Commands
- WAI's Web Accessibility Tutorials
- Web Accessibility Initiative
- CSS Tricks
- Mozilla's CSS documentation
- Mozilla's Learn CSS
- Mozilla's Learn HTML
- Mozilla's Learn JavaScript
- Resources for Front-End Beginners
If you would like to add your own tutorial, that would be wonderful! Get in touch with me by opening a new issue and checkout the Contributing Guidelines.