EDC101: Week 7 Publishing a data visualisation

<!----- Make a pdf using:

decktape generic --key=ArrowRight --load-pause 1800 --slides '1-55' --size '1216x684' --url-load-timeout 80000 --page-load-timeout 40000 "week-07/slides/smi105-week-7.html" week-07/slides/smi105-week-7.pdf

----->

# Publishing a data visualisation
#### EDC101: Week 7

**Dr. Calum Webb**<br>
Sheffield Methods Institute, the University of Sheffield<br>
[c.j.webb@sheffield.ac.uk](mailto:c.j.webb@sheffield.ac.uk)

<div>
<style type="text/css">.xaringan-extra-logo {
width: 180px;
height: 128px;
z-index: 0;
background-image: url(header/smi-logo-white.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top:1em;right:2em;
}
</style>
<script>(function () {
  let tries = 0
  function addLogo () {
    if (typeof slideshow === 'undefined') {
      tries += 1
      if (tries < 10) {
        setTimeout(addLogo, 100)
      }
    } else {
      document.querySelectorAll('.remark-slide-content:not(.inverse):not(.hide_logo)')
        .forEach(function (slide) {
          const logo = document.createElement('div')
          logo.classList = 'xaringan-extra-logo'
          logo.href = null
          slide.appendChild(logo)
        })
    }
  }
  document.addEventListener('DOMContentLoaded', addLogo)
})()</script>
</div>

---

# Sign in

---

## Learning outcomes

By the end of this week you will know:

* How to take the publication medium your data visualisation will feature in into account when exporting and deciding on size, orientation, and so on

* How to apply different technical terms from print & design to describe differences in quality, orientation, size (e.g. aspect ratio), and method of reproduction (rasterised versus vectorised)

* How to make your data visualisation look good no matter where it's published!

]
]

---

# That's a nice data visualisation... .tuos_purple[How does it look on your phone?]

---

# That's a nice data visualisation... .white[How does it look on your phone?]

---

# That's a nice data visualisation... .white[How does it look on your laptop?]

---

# That's a nice data visualisation... .white[How does it look projected on the wall?]

---

# That's a nice data visualisation... .white[How does it look projected in a print newspaper?]

---

# Rarely is the same data visualisation suitable for everywhere it might be seen.

You might need to customise your data visualisation for different mediums, or test how it looks on different publication formats.

---

### Don't be the person that puts a screenshot of a dashboard in your report!

]

Or worse!

]

---

]
]

* An image of a Sankey plot from my personal website when viewed on a web browser...

]

---

]
]

* An image of a Sankey plot from my personal website when viewed on a web browser...

* And on my mobile phone.

Luckily the same image works fairly well regardless, but maybe the text is a bit too small for phones.

]

---

]
]

* Here's a graph that's from a research report I've written...

]

---

]
]

* Here's a graph that's from a research report I've written...

* But here's how it looks when I present it using a slidedeck...

]

---

]
]

* Here's a graph that's from a research report I've written...

* But here's how it looks when I present it using a slidedeck...

* And here's how it looks on the website

I've changed the aspect ratio so it fits the space better (not trying to squeeze a vertical image on a horizontal space), and on the website changed the theme background to blend in and make it look seamless.

]

---

]
]

* Here's a map from the same report in the report

]

---

]
]

* Here's a map from the same report in the report

* But here's how it looks on the website on a phone ratio

]

---

]
]

* Here's a map from the same report in the report

* But here's how it looks on the website on a phone ratio

* And on my presentation slides

Again, the background changes to make it seamless and in the phone and presentation slide versions I have **removed the place names**, because that information could be hidden and only shown on tap/hover/click. I also cut off Scotland and Northern Ireland to maximise the size and give the text the best chance of being readable.

]

---

# Publishing a data visualisation: Print

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* In-line versus stand-alone (splitting up the page)
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

All of these sound obvious, but on a big project it can be easy for them to go wrong! **You can have beautiful design, but if it doesn't suit the publication medium, it will look bad!**

]

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* **Layout, aspect ratio and orientation**
* In-line versus stand-alone (splitting up the page)
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

]

* Portrait
* Landscape

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* **Layout, aspect ratio and orientation**
* In-line versus stand-alone (splitting up the page)
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

]

]
]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* **Layout, aspect ratio and orientation**
* In-line versus stand-alone (splitting up the page)
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

]

]
]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* **In-line versus stand-alone (splitting up the page)**
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

]

.sans-serif[Most attention on the issue has been focused on the spreading of misinformation by unorganised individuals, at the expense of analysing the role that governments play in disseminating misinformation.]

]

.sans-serif[Experts are increasingly recognising that a tactic of foreign governments tends to include disseminating false of misleading claims about rival countries through official agencies on social media. Perhaps because social media is seen as a "less formal" means of communication, where intent can often be hard to discern...]

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* **In-line versus stand-alone (splitting up the page)**
  * More complex data visualisations (e.g. facets) showing variation may benefit from being stand-alone on their own page.
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

]

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* **In-line versus stand-alone (splitting up the page)**
  * Think about the most appropriate orientation depending on *how much of the page* your data visualisation is taking up.
* Resolution (dpi)
* Colour (or lack thereof!)
* File types (raster or vector images)

]

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* In-line versus stand-alone (splitting up the page)
* **Resolution (dpi)**
  * Refers to the "quality" and detail of the image. On paper there is no loading time, so data visualisations can be as high a resolution (dpi = dots per inch) as the printer allows. Some publishers will have requirements for dpi.
* Colour (or lack thereof!)
* File types (raster or vector images)

]

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

]

Plot at 100dpi (20kb)

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

]

Plot at 400dpi (100kb)

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

]

> "Line artwork should be supplied in tif or eps format, black and white1 (also known as 1- bit), **resolution 1200 dpi at final size**. Combination artwork (line/tone) should be supplied in tif or eps format, grayscale (also known as 8-bit), **resolution: 800 dpi at final size.**"

.right[Requirements for authors from the [Journal<br>of Social Policy](https://www.cambridge.org/core/journals/journal-of-social-policy/information/author-instructions/preparing-your-materials) (2024)]

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* In-line versus stand-alone (splitting up the page)
* Resolution (dpi)
* **Colour (or lack thereof!)**
  * Does the publication allow colour? If so, how much colour? Colour backgrounds? A limited number of colours?
* File types (raster or vector images)

]

If colour is allowed:

* High contrast works better (at least 20% difference between colours)
* Avoid white on black for text
* Avoid text font sizes smaller than size 6 
* Avoid transparency, use low saturation shades that blend into the background instead
* **Consider the base colour of the paper it's being printed on** — if it's brilliant white, use a more grey font colour (to avoid the contrast being too high). If it's off-white (e.g. newspaper), use black.

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

* Layout, aspect ratio and orientation
* In-line versus stand-alone (splitting up the page)
* Resolution (dpi)
* Colour (or lack thereof!)
* **File types (raster or vector images)**
  * Files come in many types: .png, .jpeg/.jpg, .tif/.tiff, .svg, .eps. Some file types are *rasterised* (drawn with pixels/dots), while others are *vectorised* (drawn with maths). Raster files work better when there is a lot of unique elements and colours, vector files work better when there are fewer elements and colours.

]

* **.TIFF** files are still popular with print media today because they are lossless (there is no compression to make the file size smaller — remember, we don't need to worry about file size because paper doesn't need to load!) and support more colours (other file formats were designed to be used with the limitations of screens).

Saving as .tiff: `ggsave("ex_plot1.tiff"), width = 4, height = 4)`

* **.EPS** files are the vectorised file of choice for print media. They store instructions on how to reproduce the shapes on your plot by drawing them, which means the data visualisation can be reproduced with no loss in quality at any size (because the shape is not broken down into pixels).

Saving as .eps: `ggsave("ex_plot1.eps"), width = 4, height = 4)`

**However, only professionals may have the software required to view these formats. More common formats that everyone can view (e.g. on phones) might be .png or .jpeg**

]

---

### How do we optimise the publication of data visualisation in print?

Things we want to consider:

]

.center[
[Another example of a vector and raster image here](https://calumwebb.co.uk/teaching/smi105-content/week-07/slides/images/vector-raster-comparison.pdf)
]

]

---

# Publishing a data visualisation: Web

---

Things we want to consider:

### How do we optimise the publication of data visualisation online?

* **Device (laptop/desktop, mobile, tablet)**
* Common aspect ratios and formats
* In-line versus standalone versus dashboard
* Interactive or static
* File types (raster or vector images)

]

**What kind of device is your data visualisation intended to be viewed on?**

* Do you need a different version of your data visualisation for **mobile phones**?
* Do you need a different version of your data visualisation for **social media**?
* Do you need a different version of your data visualisation for **desktop sites**?

*More unique versions = more time, but could mean higher engagement and a more professional looking approach*.

]

---

Things we want to consider:

### How do we optimise the publication of data visualisation online?

* Device (laptop/desktop, mobile, tablet)
* **Common aspect ratios and formats**
* In-line versus standalone versus dashboard
* Interactive or static
* File types (raster or vector images)

]

Web images tend to have a fixed value of **72ppi** (pixels per inch) — much lower than the 600dpi of print media.

Rather, increased quality tends to be linked to **increased resolution** of images, for example:

* 1280 pixels (width) x 720 pixels (height), a.k.a. 720p
* 1920 x 1080 a.k.a. 1080p
* 3840 × 2160 a.k.a. 4k Ultra HD

]

---

]

---

]

---

]

---

]

---

Things we want to consider:

### How do we optimise the publication of data visualisation online?

* Device (laptop/desktop, mobile, tablet)
* **Common aspect ratios and formats**
* In-line versus standalone versus dashboard
* Interactive or static
* File types (raster or vector images)

]

**More pixels doesn't always mean better**, the best number of pixels is the *minimum number required to provide a clear, crisp graphic*. Too many pixels means the graphic will take longer to load, which is problematic because:

* The probability of someone giving up on the image loading increases by 32% between 1 second and 3 seconds. 
* Your graphic will take longer to load with excess resolution/file size in countries with poorer internet access
* You are trading a clear image for a *bad user experience*.

]

---

]

---

]

.center[
`ggsave(filename = "ex_plot1_twitter.png", width = 1400, height = 700, units = "px", scale = 1.3)`
]

---

]
]

.center[
`ggsave(filename = "ex_plot1_mobileportrait.png", width = 640, height = 1136, units = "px", scale = 1.7)`
]

]

---

Things we want to consider:

### How do we optimise the publication of data visualisation online?

* Device (laptop/desktop, mobile, tablet)
* Common aspect ratios and formats
* **In-line versus standalone versus dashboard**
* Interactive or static
* File types (raster or vector images)

]

]

---

Things we want to consider:

### How do we optimise the publication of data visualisation online?

* Device (laptop/desktop, mobile, tablet)
* Common aspect ratios and formats
* In-line versus standalone versus dashboard
* **Interactive or static**
  * Web platforms allow for interactivity (additional information to be encoded into the data visualisation and displayed on click or hover)
  * This also includes reactively re-sizing to the screen size — a nice benefit of interactive visualisations!
* File types (raster or vector images)

]

<div class="plotly html-widget html-fill-item" id="htmlwidget-b3ac250b772b253be301" style="width:500px;height:500px;"></div>
<script type="application/json" data-for="htmlwidget-b3ac250b772b253be301">{"x":{"data":[{"x":[2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023],"y":[1.0810280898876403,1.0936235955056177,1.1065561797752808,1.1551516853932586,1.1927150837988827,1.2089553072625696,1.231117318435754,1.2565083798882681,1.274223463687151,1.2899608938547487,1.3072122905027932,1.3099106145251396,1.3570223463687152,1.3624748603351957,1.375290502793296,1.408027932960894,1.4236815642458098],"text":"","type":"scatter","mode":"lines","line":{"width":7.559055118110237,"color":"rgba(0,0,0,1)","dash":"solid"},"hoveron":"points","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023],"y":[1.0810280898876403,1.0936235955056177,1.1065561797752808,1.1551516853932586,1.1927150837988827,1.2089553072625696,1.231117318435754,1.2565083798882681,1.274223463687151,1.2899608938547487,1.3072122905027932,1.3099106145251396,1.3570223463687152,1.3624748603351957,1.375290502793296,1.408027932960894,1.4236815642458098],"text":["Year: 2007<br>Score from 0-4: 1.08","Year: 2008<br>Score from 0-4: 1.09","Year: 2009<br>Score from 0-4: 1.11","Year: 2010<br>Score from 0-4: 1.16","Year: 2011<br>Score from 0-4: 1.19","Year: 2012<br>Score from 0-4: 1.21","Year: 2013<br>Score from 0-4: 1.23","Year: 2014<br>Score from 0-4: 1.26","Year: 2015<br>Score from 0-4: 1.27","Year: 2016<br>Score from 0-4: 1.29","Year: 2017<br>Score from 0-4: 1.31","Year: 2018<br>Score from 0-4: 1.31","Year: 2019<br>Score from 0-4: 1.36","Year: 2020<br>Score from 0-4: 1.36","Year: 2021<br>Score from 0-4: 1.38","Year: 2022<br>Score from 0-4: 1.41","Year: 2023<br>Score from 0-4: 1.42"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,0,0,1)","opacity":1,"size":1.8897637795275593,"symbol":"circle","line":{"width":1.8897637795275593,"color":"rgba(0,0,0,1)"}},"hoveron":"points","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":130,"r":20,"b":20,"l":20,"pad":4},"plot_bgcolor":"rgba(248,248,248,1)","paper_bgcolor":"rgba(248,248,248,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[2006.2,2023.8],"tickmode":"array","ticktext":["2008","2010","2012","2014","2016","2018","2020","2022"],"tickvals":[2008,2010,2012,2014,2016,2018,2020,2022],"categoryorder":"array","categoryarray":["2008","2010","2012","2014","2016","2018","2020","2022"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(50,50,50,1)","family":"Helvetica","size":9.2984640929846396},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0,"zeroline":false,"anchor":"y","title":{"text":"","font":{"color":"rgba(50,50,50,1)","family":"Helvetica","size":9.2984640929846396}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[0.63500000000000001,2.0649999999999999],"tickmode":"array","ticktext":["Rarely","Sometimes"],"tickvals":[1,2],"categoryorder":"array","categoryarray":["Rarely","Sometimes"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(50,50,50,1)","family":"Helvetica","size":9.2984640929846396},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0,"zeroline":false,"anchor":"x","title":{"text":"Avg. Expert Score","font":{"color":"rgba(50,50,50,1)","family":"Helvetica","size":9.2984640929846396}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","layer":"below","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":false,"legend":{"bgcolor":"rgba(248,248,248,1)","bordercolor":"rgba(248,248,248,1)","borderwidth":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.68949771689498}},"hovermode":"closest","barmode":"relative","title":{"text":"Countries are increasingly lying about<br>eachother on social media<br>","x":0.22},"autosize":true},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"179316517934":{"x":{},"y":{},"type":"scatter"},"179314eec4829":{"x":{},"y":{},"text":{}}},"cur_data":"179316517934","visdat":{"179316517934":["function (y) ","x"],"179314eec4829":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>

]

---

Things we want to consider:

### How do we optimise the publication of data visualisation online?

* Device (laptop/desktop, mobile, tablet)
* Common aspect ratios and formats
* In-line versus standalone versus dashboard
* Interactive or static
* **File types (raster or vector images)**

]

**.PNG** files are the most common rasterised file format for web graphics (and for a lot of print). They support transparency and usually do not lose as much quality when compressed (file size is reduced to save space).

`ggsave("ex_plot1.png")`

**.JPG/JPEG** files are also a common rasterised file format, but is now less common than png files.

`ggsave("ex_plot1.jpg")`

**.SVG** files are the most common vector file format found online, commonly used for text logos and infographics. Like other vectore file formats, SVG files do not support transparency.

`ggsave("ex_plot1.svg")`

]

---

## Summary

* While the idea of taking your data visualisation from R and into publication after applying good graphic design principles may seem straightforward, there are a lot of considerations to make to ensure your data visualisation works *within* a publication.

* There are some common formats and standards that you can follow in order to identify how to size, set the quality, and include interaction or other features within your data visualisation.

* Key questions to ask yourself:
  * Print? Digital? Both?
  * Is there a one-size fits all for your audiences, or do you need some different versions?
  * How can you balance visual quality and user experience (speed of loading)?
  * Should your visualisation be viewed in-line with text, or is it standalone?

---

## Workshop this week

Let’s start drawing **maps**. We’re going to work with some existing data that includes spatial information to draw different kinds of maps, and consider the information that needs to be included when we draw maps.

]

## Tasks to look at in advance of Week 8

#### Core tasks:

**Before lecture**: Find a map in the news that is being used to present some data. Then, share on Blackboard: (i) the map you find, (ii) where it was published (if that’s not obvious) and (iii) one observation about how well, or not, you think it is integrated into the place where it has been published (one sentence will do).

**Before lecture**: Read [When maps shouldn’t be maps](http://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/) http://www.ericson.net/content/2011/10/when-maps-shouldnt-be-maps/

**Before workshop**: Work through the task at the end of the workshop handout

**Supplementary tasks**:

* Before workshop: Read chapter 7/Draw maps of the Healy book

]