Application in Rshiny that generates a Pokémon based on user input and displays the Pokémon and visualizations. https://haileystahl.shinyapps.io/PokemonGenerator/
Start
Side Bar Layout
Main Panel
Server
Deployment Notes
Helpful References
Line 1-13: Is included before the start of the ui.
I included graphs that were not dependent on output from the application at the start to make it easier to understand.
Line 59: This is the start of the ui code for the front end of the application.
I used a theme for the rshiny application instead of the default theme and the title for the application
Line 63:: The side bar layout is a way to include the sidebar panel and main panel.
I included the side bar panel first which is the grey bar going down the side of the application.
Note this side bar is static and does not go in and out.
Line 65-101: Includes the two buttons at the top of the panel.
The buttons have an ID in " " which reference the output by the server at the end.
After is the creation of each input inside of the side bar panel. (8 total inputs)
Line 110: Starts the creation of the main panel which is the area outside of the sidebar that was just created.
It's important to make sure a ) ends the sidebarPanel but does not end the sidebarLayout section.
The main panel has be included with the side bar layout.
The tabsetPanel() enables being able to switch tabs and change the display of the window.
The tabPanel() is each tab in the panel.
Each tab panel should still be inside the tabsetPanel() and the content in each tab should be within the TabPanel() of the individual tab.
Line 112 -115: This is the first tab in the tabsetPanel.
It includes a title,a uiOutput from the server, tags$hr() which is a way to insert a line, data table Output from the server.
The tab ends with the enclosed )
Line 116 -131: This is the second tab in the tabsetPanel.
This includes all of the plotOutput from the server and different tags$ for the text output on the tab.
Line 132 -154: This is the third tab in the tabsetPanel.
The tags$br allows for the text to stay on the esame line.
Line 155- 162: This is the fourth tab in the tabsetPanel.
The tags$a lets you link a text to a url.
*It's important to keep proper track of the ) so the information within each tab stays in the tab you want.
Line 165: This includes parenthesis to end eveyrthing inside the <-ui function starting on line 59.
Line 169: Starts the function for the back end part of the application.
Line 170 - 238: Includes every action that will occur when the "actionbutton" is pressed. This is the "Complete" Button on the top of the page.
Line 170: Connects every action to the button with the ({ to the $actionbutton.
Line 171 - 177: Converts the inputs from the user to the correct type.This will let us compare and perform calculations with the user input to our actual data set.
Line 179 -191: Is details on how the generator was created, and how the table was able to match the output of the generator.
- The Total score was calculated by adding each user input
- A range was created based on this total.
- The Total score in the data set is checked to see if it falls inside the range.The check function returns a Boolean.
- The data is subsetted based on the user type matching the Type1 of the data set.
- Then the data is subsetted based on if the check function returns TRUE meaning the Total from the data set falls within the users total range.
- OR the data is subsetted based on if the check function returns FALSE meaning the Total from the data set does not fall within the users total range.
Based on Order of operations, the first statement line 5 will be first and if this fails then the second or statement will execute.
This was done so the generator would generate a Pokemon even if the user total score does not match a Pokemon of the same type with a similar Total range.
Line 192-193: This is how the dynamically changing link was made.
The original data set does not include image url link, but the image source includes every picture for each Pokemon based on their Pokemon index number in order.
I created a script in Python to generate the format of the end of the link and put this in a column in the data set.
The first line takes the same subsetted dataset which matches a single Pokemon.
The $ accesses the imageurl column and since this only includes one Pokemon it will have the associated imageurl for the Pokemon.
The second line converts this to an output.
RenderUI has to be used because the text after includes HTML tags and this is not allowed for normal render text.
tags$a() allows this to be a hyper link
href is equal to the variable we put the associated $imageurl in.
,target= allows the link to pop up in another tab and the text after is what the user will see.
I included these two lines of code inside each button so it would display no matter what button is pressed to generate the Pokemon.
You will the code inside this button is copied into the "Random Button" So the same results will show.
Line 196-199: Generates the table output.
The subsetted data that matches to one Pokemon is used again and is subsetted again to only include the column numbers labled.
searching = FALSE, turns off the search component the table originally comes with.
pageLength = 1, Limits table to only output one page.
lengthMenu = c(1) makes the entries able to display nothing.
Line 202-210: Is the reactive Histogram that has a line that moves based on the Pokemon chosen.
I created the moving line by making the v = a variable that holds the Pokemon Total based on the subsetted data that includes only that Pokemon.
Line 212-233: The code for these chart is originally in the first few lines of this code.
You can output charts that are not create inside the ui function or server function!
The grid.arrange function to combine the two charts together side by side.
Line 238: This } Ends the contents inside of the Action Button.
Line 241- 292: Includes every action that will occur when the "randombutton": is pressed.
The same code for the Action Button is inside the randombutton to generate the same output for each button.
Line 299: This } ends the content inside of the server. It's important to make sure this matches up or you will get an error before the ShinyApp line.
Below is notes that allowed my application to be deployed successfully
- Make sure thee is no install.packages
- Should be no errors in the application! This means errors that pop up or warnings even when your application continues to run locally.
- Make sure you are using the correct dataset when you deploy your application.
- Your data set should not include empty columns.
EX: If importing from excel>CSV then uploading R should not show blank columns from excel that are not being used. - Check to make sure the col names that output in the terminal are correct and include every column in your dataset.
- Data set and application file should be in the same directory.
- Your data should be in the same directory so the import statement should be ("filename".csv") not ("/.../...filename.csv).
- DO not have a setwd(~) in the code.
- Switch to the Mark up tab in R to see any messages about Deployment issues.
Even the smallest errors that don't disrupt your local application can interupt Deployment.
Guide to HTML Tags
Guide to Debugging Rshiny Errors
R Shiny Data Table Customization