https://github.com/nstrayer/js4shiny_r2d3

Repo for R2D3 section at the javascript for shiny users workshop at RStudio::Conf 2020
https://github.com/nstrayer/js4shiny_r2d3

Last synced: about 1 month ago
JSON representation

Repo for R2D3 section at the javascript for shiny users workshop at RStudio::Conf 2020

• Host: GitHub
• URL: https://github.com/nstrayer/js4shiny_r2d3
• Owner: nstrayer
• Created: 2020-01-04T22:26:14.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-01-28T20:07:50.000Z (almost 5 years ago)
• Last Synced: 2024-10-11T11:02:32.649Z (2 months ago)
• Language: JavaScript
• Homepage: http://nickstrayer.me/js4shiny_r2d3/slides/
• Size: 17.4 MB
• Stars: 15
• Watchers: 6
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - nstrayer/js4shiny_r2d3 - Repo for R2D3 section at the javascript for shiny users workshop at RStudio::Conf 2020 (JavaScript)

README

        
# JS4Shiny R2D3 Section

# Repo Layout

- `data/`: Various CSVs with raw and cleaned data.

- `data_manipulation_scripts/`: R Scripts to read and clean data for use in app. 

- `step_*/`: Full shiny app as it should exist at the end of each step.

- `tree_app/`: Final form of Shiny app. 

- `slides/`: RMarkdown slides for R2D3 presentation

# How to download

Either clone this repo or download [the zip file](https://github.com/nstrayer/js4shiny_r2d3/archive/master.zip) of all code. 

# Project

## Lost?

There are a few things you can do to get unstuck

- You can skip a sticky step by simply going each steps folder to find the code as it should be at the end of the step. 

- Click the step title to see the exact code that should change for each step

- Ask questions! If it's confusing I guarentee it's not just you. This is complicated stuff!

## Steps

### [Step 1: Run shiny app with regression model to see how it works](https://github.com/nstrayer/jsforshiny_project/commit/b77bab206cb83bcff5ae11f51c08d3f9ad7cc7f1)

1. Open `step_1/app.R`

2. Press "Run App".

    

   

### [Step 2: Find visualization on Observable and paste into r2d3 script in RStudio](https://github.com/nstrayer/jsforshiny_project/commit/bbd6808fe32476a2c779cd8a500b0d93b9d996dc)

1. Go to [observable notebook with species visualization](https://observablehq.com/@nstrayer/js4shiny-workshop-demo)

2. Copy all the code inside comments `// Start copying here` and `// End copying here`.

3. Create a new "D3 Script" in RStudio

4. Paste all code from Observable into new file

5. Replace `data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)` in header with `readr::read_csv("data/tree_benefits.csv")`

6. Save file as `tree_viz.js` in `step_1/` folder

### [Step 3: Add display of plot to shiny app](https://github.com/nstrayer/jsforshiny_project/commit/c6abf7b1f585fe672776d79724fb6406e2df29eb)

1. Add `d3Output("tree_viz")` in your UI function

2. Add `output$tree_viz <- renderD3({r2d3(data = tree_benefits, script = "tree_viz.js")})` to Server function

3. Run app again

### [Step 4: Wire up message from visualization to shiny](https://github.com/nstrayer/jsforshiny_project/commit/89169aa0a61bfa374adbe7df9d14f4ff1e68bf4f)

1. In `tree_viz.js`, search for the function `submit_selection()` and uncomment the lines to send to shiny that starts with `// if(Shiny){...`.

2. Replace the lines for getting chosen species from `species_1 <- input$species_1` to `species_1 <- input$selected_species[1]` and `species_2 <- input$species_2` to `species_2 <- input$selected_species[2]`.

3. Add a `req(input$selected_species)` line at start of `output$regressionOutput <- renderPlot({` to avoid shiny attempting to run without input.