Interactive Data Visualization with R Shiny for Life Sciences

Adventure: Web development in 20 minutes

Michael Teske & Jonas Schmid, Zurich 11 April 2024

How do websites work?

A server creates and sends the webpage data, which is then rendered by a browser (Firefox, Chrome etc.)

ui ui ui

R Shiny creates webpages!

view_page_source

Introduction to HTML

HTML, or HyperText Markup Language, serves as the foundation for creating web pages. It employs elements enclosed in tags to structure content.

  • Elements consist of opening and closing tags:
    <element>Content</element>
  • HTML elements can have attributes:
    <element attribute="...">...</element>
  • Void elements like the img tag do not require closing tags:
    <img src="...">
  • Anatomy of an HTML Document: 
    										
											<!DOCTYPE html>
											<html>
												<head>Information about the Document</head>
												<body>Actual Content</body>
											</html>

R Shiny creates HTML Documents

Shiny abstracts away a lot of complexity for us!

We are still allowed to change the generated HTML, breaking free of predefined options in R Shiny.

R Shiny 
								
									sliderInput(
										"dotsize", 
										label = "Dot Size", 
										min   = 0.1, 
										max   = 5, 
										value = 1, 
										step  = 0.1
									)
dot_size_slider
produced HTML 
								
									<div class="form-group shiny-input-container">
										<label class="control-label" id="dotsize-label" for="dotsize">Dot Size</label>
										<span class="irs irs--shiny js-irs-0 irs-with-grid">
											<span class="irs">
												<span class="irs-line" tabindex="0"></span>
												<span class="irs-min" style="visibility: visible;">0.1</span>
												<span class="irs-max" style="visibility: visible;">5</span>
												<span class="irs-from" style="visibility: hidden;">0</span>
												<span class="irs-to" style="visibility: hidden;">0</span>
												<span class="irs-single" style="left: 18.8178%;">1</span>
											</span>
											<span class="irs-grid" style="width: 89%; left: 5.4%;">
												<span class="irs-grid-pol" style="left: 0%"></span>
												<span class="irs-grid-text js-grid-text-0" style="left: 0%; margin-left: -4.625%;">0.1</span>
												<span class="irs-grid-pol small" style="left: 6.802721088435375%"></span>
												<!-- Other grid spans omitted for brevity -->
												<span class="irs-grid-text js-grid-text-10" style="left: 100%; visibility: visible; margin-left: -2.75%;">5</span>
											</span>
											<span class="irs-bar irs-bar--single" style="left: 0px; width: 21.8469%;"></span>
											<span class="irs-shadow shadow-single" style="display: none;"></span>
											<span class="irs-handle single" style="left: 16.3469%;"><i></i><i></i><i></i></span>
										</span>
										<input class="js-range-slider irs-hidden-input shiny-bound-input" id="dotsize" data-skin="shiny" data-min="0.1" data-max="5" data-from="1" data-step="0.1" data-grid="true" data-grid-num="9.8" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number" tabindex="-1" readonly="">
									</div>

3 Key Web Technologies

HTML alone is just colourless, static content. Therefore, HTML documents usually include CSS and JavaScript.

  • HTML (HyperText Markup Language): Structure of the document/content
  • CSS (Cascading Style Sheets): Styling of HTML elements (size, colour etc.)
  • JavaScript: function/interactivity

Selectors

To apply CSS or JavaScript to HTML elements, they need to be found. This is accomplished with selectors.

  • Tag selector: finding all HTML elements just with a specific tag (e.g. img)
  • ID: finding an HTML element with an unique ID, using a hashtag (e.g. #dotsize)
  • Class: finding HTML elements with a specific class, using a dot (e.g. .btn)
							
								<img src="..." id="uniqueId" class="class-one class-two">

Elements can have both an ID and classes. They can also be combined in a selector to be more specific. 

							
								img.class-one

Let's see if you understood!

expired_poll_css_ids_classes hashtag or point, unique or can be used many times

CSS Rules

Some common properties:

							
								/* Comment */

								tag {width: 200px}

								#id {
									color: #0077CC;
									font-size: 12pt;
								}

								.class {
									margin: 12pt;
									background: #FFFFFF;
								}

selector { property: value ; }

Colour Codes

Colours are composed of red, green & blue (RGB)

  • 2^8 values: 0-255
  • rgb(0, 0, 0) = black
  • rgb(255, 255, 255) = white
  • rgb(0, 255, 0) = green

HEX Colour Codes

HEX colours are RGB colours in the hexadecimal system, they start with a #

0  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15
0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F
  • In the decimal system, digits go from 0-9 (10 digits)
  • In the hexadecimal system, digits go from 0-F (16 digits)
  • Digits greater than 9 are symbolized by letters A, B, C, D, E, F
  • #FFFFFF stands for rgb(255, 255, 255)
  • #00FF00 stands for green
  • (FF = 16^1 * 15 + 16^0 * 15 = 240 + 15 = 255)

Let's see if you understood!

poll_hex_colours_expired which colour is #00FFFF

Action! Let's fix the download button!

Access your browser's developer tools now
[F12]

use the inspector to select the download button
and try to change a CSS style. Reloading the page will reset the styles.

Task: Incorporate CSS Styles into your Shiny app

  • Create css file "style.css" in same folder (RStudio: New File → CSS File)
  • Write the rules you want to apply, using an appropriate selector: 
    									
										aside .btn {
											margin: 12px;
											color: #000000;
										}
  • Include the css file using includeCSS, like this: 
    									
										# Check your working directory
										tags$head(
											includeCSS('style.css')
										)
  • Use !important to enforce your CSS rules: 
    									
										aside .btn {
											margin: 12px;
											color: #000000 !important;
										}

The button is fixed ✓

Further reading

mystical_book

Questions?