class: center, middle, inverse, title-slide .title[ # Data Analysis and Visualization ] .subtitle[ ## Chapter 4. Advanced Visualization and Communication ] .author[ ### Iñaki Úcar ] .institute[ ### Department of Statistics | uc3m-Santander Big Data Institute ] .institute[ ### Bachelor in Data and Business Analytics ] .date[ ###
Licensed under Creative Commons Attribution
CC BY 4.0
Last generated: 2025-09-06
] --- class: base24, middle, clear - [Geospatial Analysis](ch3_6.html#3) - [Network Analysis](ch3_7.html#3) - [Other Resources](ch3_8.html#3) - [Reproducible Documents](ch4_2.html#3) --- class: inverse, center, middle # R Markdown ## The source code for documents --- class: base24 # Introduction <div style="float:right; width:25%"> <img src="ch4_files/figure-html/smcr-1.png" style="display: block; margin: auto;" /> </div> ## Goals -- - How to _communicate_ data with a visualization, i.e. how to effectively _encode_ a visual .blue[**message**], was covered in chapter 1. -- - Here, we refer to the .red[**channel**] used to _share_ that message. -- - We will talk about - Document formats (e.g.: article, report, book, presentation, website...) - File formats (e.g.: HTML, PDF, EPUB, DOCX, PPTX...) - **Reproducibility** (and automation) --- class: base24 # Introduction ## Markup language .pull-left[ - "a **text-encoding system** consisting of a set of symbols inserted in a text document to control its **structure**, formatting, or the relationship between its parts." - "Markup is often used to control the **display** of the document or to enrich its content to facilitating **automated processing**." ] .pull-right[ ```html <!DOCTYPE html> <html> <body> <h2>My First Heading</h2> <p>My first <b>paragraph</b></p> <a href="#">This is a link</a> </body> </html> ``` <h2>My First Heading</h2> <p>My first <b>paragraph</b>.</p> <a href="#">This is a link</a> ] --- class: base24 # Introduction ## Markdown .pull-left[ - Gruber & Swartz, 2004 - A markup language<br>**appealing to human readers**. - Rise, divergence, then standardization in 2012. - Many flavors still today. - Key component: **pandoc**,<br>by John MacFarlane. ] .pull-right[ ```markdown ## My First Heading My first **paragraph**. [This is a link](#) ``` .footnote[[Markdown Basics](https://rmarkdown.rstudio.com/lesson-8.html), [Pandoc's Markdown](https://pandoc.org/MANUAL.html#pandocs-markdown)] ## My First Heading My first **paragraph**. [This is a link](#) ] --- class: base24 # Introduction ## YAML .pull-left[ - _YAML Ain't Markup Language_ - Human-readable data-serialization language - Configuration files, etc. - Here, **document metadata** ] .pull-right[ ```yaml title: "Title: it contains a colon" author: - Author One - Author Two keywords: [nothing, nothingness] abstract: | This is the abstract. It consists of two paragraphs. ``` ] .footnote[[YAML syntax](https://en.wikipedia.org/wiki/YAML#Syntax)] --- class: base24 # R Markdown .footnote[[Reference guide](https://www.rstudio.com/wp-content/uploads/2015/03/rmarkdown-reference.pdf), [Cheatsheet](https://github.com/rstudio/cheatsheets/raw/main/rmarkdown-2.0.pdf)] .pull-left[ - An (optional) YAML header surrounded by `---`s - Text mixed with simple text formatting in Markdown - **Executable code chunks** surrounded by ` ``` `s ] -- .pull-right[  ] -- .center[] --- class: base24 # R Markdown ## Showcase <div style="position:fixed; left:40%; width:86%"> <img src="assets/img/ch4/code-1-options.png"> </div> - [Code chunks](https://rmarkdown.rstudio.com/lesson-3.html) - Chunk options - Figure output - [Inline code](https://rmarkdown.rstudio.com/lesson-4.html) - [Code languages](https://rmarkdown.rstudio.com/lesson-5.html) - [Parameters](https://rmarkdown.rstudio.com/lesson-6.html) - [Tables](https://rmarkdown.rstudio.com/lesson-7.html) - [Output formats](https://rmarkdown.rstudio.com/lesson-9.html) --- class: base24 # Documents and Notebooks ## Showcase <div style="position:fixed; left:40%; width:86%"> <img src="assets/img/ch4/code-1-options.png"> </div> - [HTML document](https://bookdown.org/yihui/rmarkdown/html-document.html) - [Notebook](https://bookdown.org/yihui/rmarkdown/notebook.html) - [PDF document](https://bookdown.org/yihui/rmarkdown/pdf-document.html) - [Word document](https://bookdown.org/yihui/rmarkdown/word-document.html) - Raw markup --- class: base24 # Presentations ## Showcase <div style="position:fixed; left:40%; width:86%"> <img src="assets/img/ch4/code-1-options.png"> </div> - [ioslides](https://bookdown.org/yihui/rmarkdown/ioslides-presentation.html) - [slidy](https://bookdown.org/yihui/rmarkdown/slidy-presentation.html) - [Beamer (PDF)](https://bookdown.org/yihui/rmarkdown/beamer-presentation.html) - [PowerPoint](https://bookdown.org/yihui/rmarkdown/powerpoint-presentation.html) - [reveal.js](https://bookdown.org/yihui/rmarkdown/revealjs.html) - [xaringan](https://bookdown.org/yihui/rmarkdown/xaringan.html) --- class: base24 # Other Formats ## Showcase <div style="position:fixed; left:40%; width:86%"> <img src="assets/img/ch4/code-1-options.png"> </div> - [Tufte Handouts](https://bookdown.org/yihui/rmarkdown/tufte-handouts.html) - [Websites](https://bookdown.org/yihui/rmarkdown/websites.html) - [Books](https://bookdown.org/yihui/rmarkdown/books.html) - [Journals](https://bookdown.org/yihui/rmarkdown/journals.html) - [**Distill**](https://rstudio.github.io/distill/) --- class: base24 # HTML Widgets - The `htmlwidgets` package provides a framework for creating R bindings to create **web components**. - Charts, but also maps, diagrams, tables, forms... and even mini-apps. Basically, any HTML component with optional **JavaScript**. -- - You don't generally need to use the `htmlwidgets` package directly. Many packages use it to provide many components. -- - They can be - used at the R console for data analysis, just like conventional R plots; - embedded within any **HTML document**; - saved as standalone web pages for ad-hoc sharing. --- # HTML Widgets .pull-left-mod[ ``` r p <- ggplot(gapminder::gapminder) + aes(gdpPercap, lifeExp) + geom_point(aes(size=pop, color=continent), alpha=0.7) + scale_size(range=c(2, 12), guide=NULL) + scale_x_log10() + theme_gray(base_size=10) + aes(frame=year, text=country) library(plotly) ggplotly(p) |> layout(legend=list( x=1, y=0, xanchor="right")) ``` ] .pull-right-mod[
] --- # HTML Widgets .pull-left-mod[ ``` r library(leaflet) g <- c( "OpenStreetMap", "CartoDB.DarkMatter", "CartoDB.Positron") leaflet() |> addProviderTiles(g[1], group=g[1]) |> addProviderTiles(g[2], group=g[2]) |> addProviderTiles(g[3], group=g[3]) |> addLayersControl(g, "Markers") |> addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R", group="Markers") ``` ] .pull-right-mod[
] --- # HTML Widgets .pull-left-mod[ ``` r library(networkD3) data(MisLinks) data(MisNodes) forceNetwork( Links = MisLinks, Nodes = MisNodes, Source = "source", Target = "target", Value = "value", NodeID = "name", Group = "group", opacity = 0.8) ``` ] .pull-right-mod[
] --- # HTML Widgets ``` r DT::datatable(iris, options=list(pageLength=6)) ```
--- # HTML Widgets <iframe src="https://gallery.htmlwidgets.org/" style="position:relative;left:0;top:0;width:100%;height:100%" frameborder="0" scrolling="yes"></iframe>