These are slides and resources for a 1h talk on resources for high-quality figures and tables in presentations. In the related Gitlab project [1], "samples" includes some samples from the mentioned technologies, from my past papers, my PhD dissertation, and various resources on the web. [1]: https://gitlab.com/a.garcia-dominguez/2019-talk-presentations

1. Tips and resources for publication-grade
figures and tables
Antonio García-Domínguez
20 June 2019

2. Table of contents
1. Intro
2. Basics
3. Tables
4. Charts
5. Graphs
1

3. Intro

4. Why care about presentation quality?
Readers are busy!
• Readers and reviewers are busy academics
• They want to get the gist of your paper quickly
• Make their job easier with good graphics
• A good figure/table speaks a thousand words :-)
Competing with others
• In some scenarios, you are competing for attention
• For instance, poster sessions in conferences
• Something eye-catchy and well presented is best here
Personal pride and satisfaction
It’s just nice when you can sum up your research in a pretty picture!
2

5. Disclaimer: LATEX ahead!
• Many of the tips below will be using LATEX packages
• You can probably adapt the tips if not using LATEX
• Still, LATEX produces much better looks than Word :-)
3

6. Disclaimer: LATEX ahead!
• Many of the tips below will be using LATEX packages
• You can probably adapt the tips if not using LATEX
• Still, LATEX produces much better looks than Word :-)
• ... seriously, the layouting algorithm is much better
3

7. Basics

8. Vector versus bitmap graphics
Figure 1: Vector versus bitmap
graphics (Wikipedia)
Differences
• Bitmap: array of pixels
• Vector: drawing instructions
Tradeoffs
• Vector graphics can be scaled
arbitrarily, and stay sharp
• Bitmap graphics cannot be
scaled without pixelation
Common vector formats
• SVG: easily editable, standard
• PDF: easily viewable, portable,
and embeddable from LATEX
4

9. Lossy versus lossless raster graphics
Figure 2: JPG image of a cat, with
decreasing compression from left to
right (and increasing image quality)
Lossless vs lossy compression
• Lossless: bitwise-exact original
• Lossy: “similar” version
Example formats
• Audio: FLAC vs OGG/MP3
• Images: PNG/GIF vs JPG
• H.264/H.265 supports both
When to use which?
• Lossless for line drawings
• Lossy for photos at the last
stage: preprocessing should be
done using lossless originals
5

10. Choosing a color schema: the color wheel
Figure 3: Ignaz Schiffermüller, Versuch
eines Farbensystems (Vienna, 1772)
Structure
• 3 primary colors (RYB / CMY)
• 3 secondary colors
• 6 tertiary colors
• + all colors between them
Schemes
• Monochromatic: shades/tints
• Complementary: opposite
• Analogous: around center
• Triadic: triangle
• Tetradic: square
Let’s play around with canva.com.
Uses for each? 6

11. Choosing a color schema: ColorBrewer
There are predesigned palettes for specific intents, considering
colorblindness, photocopying and printability. Let’s check ColorBrewer. 7

12. Choosing a color schema: too many colors?
0 200 400 600 800 1,000
0
0.2
0.4
0.6
0.8
1
1.2
·104
Timeslice
Time(ms) Simulate Convert Update
Query Overheads
• Can’t find colorblind-safe, print-friendly, B/W-friendly diverging
schemas with >4 colors?
• Use pattern fills and line styles!
• Above example is from our SISSY 2019 paper :-)
8

13. Font families
Examples
• Serif: The quick brown fox jumps over a lazy dog
• Sans-serif: The quick brown fox jumps over a lazy dog
• Monospaced: The quick brown fox jumps over a lazy dog
Which one to use?
• Generally, sans-serif on screen media, serif on print media
• Serifs help readability if rendered well (hence their use in books!)
• However, many screens lack the resolution to represent them well
and distort their shape, cancelling their benefits
• This is especially bad with small font sizes!
• The quick brown fox jumps over a lazy dog
• The quick brown fox jumps over a lazy dog
9

14. Tables

15. Starting point: a Word-style tableau
ColA ColB ColC ColD ColE
A1 B1 Red 123.4 yes
A1 B1 Green 12 no
A1 B2 Red 274.37 no
A1 B2 Green 92.1 yes
A2 B1 Red 108.7 no
A2 B1 Green 121.840 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.678 yes
This is what a typical “table” in Word could look like.
We used lots of unnecessary formatting here: let’s clean up.
10

16. First step: align well
ColA ColB ColC ColD ColE
A1 B1 Red 123.4 yes
A1 B1 Green 12 no
A1 B2 Red 274.37 no
A1 B2 Green 92.1 yes
A2 B1 Red 108.7 no
A2 B1 Green 121.840 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.678 yes
In left-to-right cultures, text is left-centered, and numbers are
right-centered for easy addition / comparison.
However, the numbers still feel off.
11

17. Second step: really align well
ColA ColB ColC ColD ColE
A1 B1 Red 123.40 yes
A1 B1 Green 12.00 no
A1 B2 Red 274.37 no
A1 B2 Green 92.10 yes
A2 B1 Red 108.70 no
A2 B1 Green 121.84 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.68 yes
We didn’t have a consistent number of decimal places in our numbers.
Now we can easily compare numbers at a glance, and order-of-magnitude
differences are clear through whitespace.
12

18. Third step: drop vertical rules
ColA ColB ColC ColD ColE
A1 B1 Red 123.40 yes
A1 B1 Green 12.00 no
A1 B2 Red 274.37 no
A1 B2 Green 92.10 yes
A2 B1 Red 108.70 no
A2 B1 Green 121.84 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.68 yes
Vertical rules add a lot of noise — we do not need them!
13

19. Fourth step: drop colour
ColA ColB ColC ColD ColE
A1 B1 Red 123.40 yes
A1 B1 Green 12.00 no
A1 B2 Red 274.37 no
A1 B2 Green 92.10 yes
A2 B1 Red 108.70 no
A2 B1 Green 121.84 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.68 yes
Colour creates noise as well — drop it for now.
We will add back that structure in a moment.
14

20. Fifth step: use line weights, spacing and font weight
ColA ColB ColC ColD ColE
A1 B1 Red 123.40 yes
A1 B1 Green 12.00 no
A1 B2 Red 274.37 no
A1 B2 Green 92.10 yes
A2 B1 Red 108.70 no
A2 B1 Green 121.84 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.68 yes
Let’s switch to booktabs and use top/mid/bottom rules.
15

21. Sixth step: avoid repetition and embrace the emptiness!
ColA ColB ColC ColD ColE
A1 B1 Red 123.40
Green 12.00
B2 Red 274.37
Green 92.10
A2 B1 Red 108.70
Green 121.84
B2 Red 12.34
Green 45.68
We have removed all values that are repeated across rows, and left “no”
as implicit value for empty spaces in ColE. 16

22. Final step: adjust lengths of midrules
ColA ColB ColC ColD ColE
A1 B1 Red 123.40
Green 12.00
B2 Red 274.37
Green 92.10
A2 B1 Red 108.70
Green 121.84
B2 Red 12.34
Green 45.68
We tweak the length of the various midrules to create visual structure.
17

23. Thoughts so far
Word is not a good guide for good formatting
• People got used to formatting like Word suggested
• Word was not made by professional typesetters, though...
Recommendation: the booktabs package
• Easy to use, produces better results
• Documentation sums up basic rules for good tables, and compares
proper tables against the tableaux people usually go for
• In general:
• Avoid repetition or ditto signs
• Take advantage of visual grouping through whitespace
• Avoid useless “noise” in your tables and figures
18

24. Data-driven tables: pgfplotstable
A B
5,000 1.23 · 105
6,000 1.63 · 105
7,000 2.10 · 105
9,000 1.00 · 106
Table 1: Output from
snippet on the right
1pgfplotstabletypesetfile[
2every head row/.style={
3before row={toprule},
4after row={midrule}},
5every last row/.style={
6after row={bottomrule}},
7columns/a/.style={
8column name={textbf{A}},
9int detect},
10columns/b/.style={
11column name={textbf{B}},
12sci,sci zerofill,precision=2}
13]{data/example.csv}
Keeps your data separate from your formatting.
R can produce LATEX tables as well, but this is usually easier! 19

25. Charts

26. What do you mean with a chart?
• You represent objects in a 2D space
• You relate them together with arrows/lines
• You group them with containers
• Essentially, “boxes and arrows”
We will discuss numerical plots later!
20

27. Inkscape: general vector drawing tool
• Open-source, free to use, standards-based (SVG)
• Great for custom figures or to finish generated SVGs
• Takes a while to master, though
• That one is from my PhD dissertation :-) 21

28. yEd: graph-oriented graphics editor
• Closed-source, but still free to use
• Understands graphs (nodes + edges)
• Provides automated layouting
• Supports a few standard notations (flowcharts, UML, BPMN, E/R)
22

29. Graphviz: DSL for autolayouted graphs
Task 1: Product
definition
Product
catalogue
Task 2: Demand
estimation
Task 3: Production
planning
Expected
demand
Task 5: Raw
material acquisition
Required
materials
Task 4: Production
scheduling
Production
plan
Suppliers
Orders
Raw
materials
Acquired
stock
Task 6: Manufacturing
Production
schedule
Finished
products
Task 7: Sales
Customers
Product
design
Management
Demand
adjustments
Production
adjustments
Priorities and
availability
Sales and
marketing
Sales
history
Market
studies
Bulk
orders
Frit and glazing
suppliers
Machine
config.
Machinery Stock
Stock
digraph InfoFlows {
subgraph Tasks {
node [shape=box, style=filled ,
bgcolor=lightgray];
t1 [ label ="Task␣1..."];
...
}
...
production −> t3 [label="Prod..."];
...
}
• dot: hierarchical digraphs
• neato: energy-based springs
• fdp: force-based springs
• sfdp: multiscale (large graphs)
• twopi: radial 23

30. TikZ: powerful LaTeX graphics package
Evaluate
Send
Invoice Pay
Close
3 2 1
0.4
0.2 0.2
0.2
0.4
Figure 4: Sample TikZ figure
• TikZ: TikZ ist kein Zeichenprogramm (LATEX package)
• Huge set of macros and libraries for drawing diagrams
• Based on PGF (same core as pgfplots, shown later)
• Latest version supports autolayouts if using LuaTeX
Let’s check texamples.net!
24

31. Graphs

32. Things to consider when plotting your data
What is the data about?
• Distribution over a space = points in space → scatter plot
• Evolution over time/size = line/area over axis → line plot
• Ratio over total = area comparison → stacked bar/area plot
• Comparisons between alternatives = shape comparison → radar plot
What is this plot for?
• Print media (poster, paper)?
• Non-interactive screen media (slides)?
• Interactive screen media (web)?
25

33. By the way, let’s kill the (3D) pie chart
Pineapple
Tomato
Kiwi
Banana
Figure 5: 3D pie charts, as awful as ever
Can you guess what are the percentages?
The fake 3D adds absolutely nothing here.
26

34. By the way, let’s kill the (3D) pie chart
Pineapple
Tomato
Kiwi
Banana
Figure 6: 2D pie charts, slightly less useless
If you have a good eye for pizza, you should be able to guess now.
27

35. By the way, let’s kill the (3D) pie chart
# favorite
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
Pineapple
Tomato
Kiwi
Banana
Figure 7: Stacked bar charts are always a better option
It’s much easier to compare areas of rectangles than pie slices.
We also get a very nice X axis that readers can refer to.
28

36. By the way, let’s kill the (3D) pie chart
# favorite
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
25 5 10 60
Pineapple
Tomato
Kiwi
Banana
Figure 8: Now with the answers
How did you do?
In general, think of the reader when formatting!
29

37. Simple LaTeX data plots: pgfplots
0 200 400 600 800 1,000
0
50
100
150
200
Timeslice
Time(ms)
Figure 9: X-Y plot with pgfplots
• Provides both 2D and 3D plots: line/area/bars/mesh/quiver plots
• Has its own 500-page reference + manual
• Built on top of the same PGF core used by TikZ
• Main advantage: can easily combine with high-quality math
formulas, typesetting and fonts from LATEX
• Your slides and your figures will look consistent and professional
30

38. Advanced data plots: R
Hawk
8210
311
767
2784
83
71
CS
PL
RS
SN
SM
SS
Neo4j, EOL
Neo4j, EPL
Orient, EOL
Orient, EPL
Query execution times with various
configurations of Hawk (ms)
• R is the data science language
• Very quirky, but powerful
• Many non-standard viz available
• ggplot2 library is very flexible
• Let’s check the R Graph Gallery
R + TikZ
• tikzDevice library generates
TikZ code from your plot
• You can combine R data
analysis with LATEX typesetting
• Heard about this one from
Felipe yesterday! :-)
31

39. Interactive data plots for the web: D3 and C3.js (I)
• D3 is a JavaScript library which can generate/bind SVG to data
• Basically, you can make *any* drawing data-aware, duplicating
elements and changing location/size/appearance based on the data
• Since it runs in a browser, it can be interactive and animated
• Let’s check the D3 Graph Gallery and the official website
32

40. Interactive data plots for the web: D3 and C3.js (II)
• As powerful as D3 is, sometimes we just want a standard chart
• C3.js implements those on top of D3 in a much easier way
• C3.js provides some standard controls (focus, disable/enable...)
• We still get the benefits of smooth animations and interactivity
• We can check the C3.js examples, too
33

41. Thank you!
Resources are here: https://bit.ly/2RnRATh
Why care about presentation quality?
Readers are busy!
• Readers and reviewers are busy academics
• They want to get the gist of your paper quickly
• Make their job easier with good graphics
• A good figure/table speaks a thousand words :-)
Competing with others
• In some scenarios, you are competing for attention
• For instance, poster sessions in conferences
• Something eye-catchy and well presented is best here
Personal pride and satisfaction
It’s just nice when you can sum up your research in a pretty picture!
2
Vector versus bitmap graphics
Figure 1: Vector versus bitmap
graphics (Wikipedia)
Differences
• Bitmap: array of pixels
• Vector: drawing instructions
Tradeoffs
• Vector graphics can be scaled
arbitrarily, and stay sharp
• Bitmap graphics cannot be
scaled without pixelation
Common vector formats
• SVG: easily editable, standard
• PDF: easily viewable, portable,
and embeddable from LATEX
4
Starting point: a Word-style tableau
ColA ColB ColC ColD ColE
A1 B1 Red 123.4 yes
A1 B1 Green 12 no
A1 B2 Red 274.37 no
A1 B2 Green 92.1 yes
A2 B1 Red 108.7 no
A2 B1 Green 121.840 yes
A2 B2 Red 12.34 no
A2 B2 Green 45.678 yes
This is what a typical “table” in Word could look like.
We used lots of formatting, but there is far too much noise here.
10
Inkscape: general vector drawing tool
• Open-source, free to use, standards-based (SVG)
• Great for custom figures or to finish generated SVGs
• Takes a while to master, though
• That one is from my PhD dissertation :-) 21
By the way, let’s kill the (3D) pie chart
Pineapple
Tomato
Kiwi
Banana
Figure 5: 3D pie charts, as awful as ever
Can you guess what are the percentages?
The fake 3D adds absolutely nothing here.
26
Advanced data plots: R
Hawk
8210
311
767
2784
83
71
CS
PL
RS
SN
SM
SS
Neo4j, EOL
Neo4j, EPL
Orient, EOL
Orient, EPL
Query execution times with various
configurations of Hawk (ms)
• R is the data science language
• Very quirky, but powerful
• Many non-standard viz available
• ggplot2 library is very flexible
• Let’s check the R Graph Gallery
R + TikZ
• tikzDevice library generates
TikZ code from your plot
• You can combine R data
analysis with LATEX typesetting
• Heard about this one from
Felipe yesterday! :-)
31
a.garcia-dominguez@aston.ac.uk
@antoniogado