Scaling of plot sensitive to window size, week 3 and 4 lab

[jthurman10]

I'm having an issue when I knit my Rmd file for week 4. I knit the file directly after copying over my code from week 3, just to see what the plot looked like in dashboard output. The issue I'm having is that various aspects of my plot seem sensitive to the size of the window used to display it. Here are a couple of pictures to illustrate.

This window is as close as I can get the plot to looking like the preview of the plot in R Studio (though even there, it is not identical; numerous lines are cut off, as seen in the text near the bottom axis):

But if I maximize the window displaying this plot, it turns to this:

As can be seen, most of the text is gone or been moved, the scatterplot points have been stretched to fit the window size, while the line graph overlaying the average has not, and the horizontal lines have been stretched beyond the x-axis.

I haven't had any luck finding answers to this issue online. I'm not attaching the entire Rmd file, since it contains my entire solution to week 3's lab, and the submission instructions say not to do that. But I do have two lines of code that didn't come from the assign readings, and I wonder if they might be part of the problem.

Code 1:

par(pin=c(10, 6))

Code 2:

clip(1900, 2018, -1, 15)

I used the first line to make the plot a rectangle, as in the NYT piece, rather than the square that R uses by default. The second line was used to delimit the area covered by the gray horizontal lines. The lines were create with this line of code:

abline(h=c(seq(1:9)), lty="dashed", col="gray")

By default, they went outside the bounds of the graph, so I used the clip() function to fix it. I had forgotten about the segments() function when I did so.

Edit: I went in and commented out the two suspicious lines of code (individually and together), just to see what would happen. It seems that the first line, with the par() function, is causing much of the issue. The plot without that line is better behaved than the original, but not without issue.

The plot with the default window size that appears after knitting:

The plot with the window maximized:

As you can see, some lines of text get moved more than others when the window is maximized.

Any ideas why this is happening?

[lecy]

The plot looks great!

Scaling graphics is actually a really complicated topic, especially in the internet world where an HTML page might appear on a very small or a very large screen.

If you are creating graphics for specific purposes like printing, first and foremost try to create a vectorized version, such as a PDF file:

pdf( "filename.pdf" )
# graphics code
dev.off()

Vector graphics are infinitely scalable, so you can zoom in as far as you want and it won't impact resolution. Or you can enlarge as much as you want, and the graphic will just be re-drawn. That is not the case for raster graphics like PNG or JPG files.

For RMD documents, the easiest fix is to use code chunk arguments, not par() arguments.

```{r, fig.width=10, fig.height=8}
# code

If you are working extensively in HTML files like dashboards, there are dynamic graphics packages like Plotly and D3 libraries that render graphics to javascript objects, which are dynamic objects in web environments. They re-scale easily and can also allow users to interact with the graphics by hovering, clicking, zooming, etc. 

The NYT graphic for this lab was designed in R, for example, then implemented in a javascript library. 

It's a bit of a rabbit hole! You can get 80 or 90% to great pretty quickly, but that extra 10% requires a lot of customization in a package that fits your specific environment. 

[lecy]

Nice blog on the topic:

http://zevross.com/blog/2017/06/19/tips-and-tricks-for-working-with-images-and-figures-in-r-markdown-documents/

[jthurman10]

Interesting. That certainly is a rabbit hole! Like pretty much everything in R that I've looked into! Specifying width and height is what I did for week 3 to (mostly) fix the issue, though I put the arguments in a different place. In the first chunk of the document,

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, message=F, warning=F, fig.width=11.5, fig.height=9)
library( dplyr )
#library( pander )

Is there any difference between this method and the method you wrote of putting the arguments in the code chunk?

Also, does this process not work for the Shiny output? The fig.width and height arguments don't seem to do anything.

[lecy]

The knitr::opts_chunk$set() is a global argument (will change all chunks), and individual chunk arguments are local - will only impact that chunk (and will also over-ride the global setting).

Also, does this process not work for the Shiny output? The fig.width and height arguments don't seem to do anything.

I'm not sure what you mean by Shiny output. You can use shiny widgets in RMD documents, in which case the chunk arguments should work. But Shiny's original purpose was to create web apps, which requires extra steps to design user interfaces. You can create containers to hold output like graphics. Those do not use RMD chunk arguments.

Flexdashboard is an RMD template for creating dashboards. It is somewhere between a regular RMD document and a fully-customized shiny app.

[jthurman10]

I used the local arguments for the main code chunk.

```{r, fig.width=11.5, fig.height=9}
renderPlot({
# code for the plot
})

Then I click the "Run Document" button at the top of the Rstudio frame. The result is the html preview within R (which I can also open in browser, and I get the same behavior).

The html preview window is initially sized appropriately for the graph and looks like this: But when I maximize, I get this: The plot scales to the window size, and some of the text doesn't scale the way I'd like, despite the fig arguments in the code chunk.

[lecy]

Got it. Does your code include par() settings?

Long answer short, base R graphics are not great for responsive web apps. There are a bunch of options for more control, but most are out of scope of this intro class:

https://paldhous.github.io/ucb/2017/dataviz/week13.html

http://enhancedatascience.com/2017/04/12/pick-best-r-packages-data-visualization/

[jthurman10]

No par() settings this time. But good to know about web apps. Those resources you linked look helpful. Thanks for the assistance.