Data Visualization and Graphic Design Andrew Rundle, Dr.P.H . Allan Just, M.Phil .

Data Visualization and Graphic Design

Andrew Rundle, Dr.P.H.Allan Just, M.Phil.

IntroductionsAndrew Rundle, Dr.P.H.

• Associate Professor of Epidemiology.• Studied 3D computer graphics at the Fu

Foundation School of Engineering.• Studied at the Art Students’ League.• Art Credits: Science, National University, School

of Design and Architecture (Argentina), La Jolla Museum of Contemporary Art, 555 Gallery (Detroit), M&A (Los Angeles), Universidad Del Claustro De Sor Juana (Mexico City), PBS.

• Opinionated regarding PowerPoint.

IntroductionsAllan Just, M.Phil.

• 4th Year Ph.D. Candidate in Environmental Health Sciences.

• Has studied the use of R for applied statistics and data visualization since 2007.

• Led a graduate Introduction to R workshop and departmental seminars on Exploratory Data Graphics and Principles of Scientific Data Visualization.

• Is frequently asked for help with R code.

Course ObjectivesProvide a framework for thinking about graphic design, illustration and data visualization as part of career development and success.

Provide you with the tools needed to produce:• High quality PowerPoint presentations• Illustrations for journal articles, presentations

and posters• Data visualizations and graphs

Graphic Design as Part of Career Development

• Effective presentations are remembered by audiences and conference planners. Increases likelihood of subsequent speaking

invitations.

• Effective slides generate – “Can I use your slide on…” requests.

• Slides that effectively illustrate theories, paradigms or ideas become an important vehicle through which the idea is discussed.

6

Internal Dose

Cotinine, DDE

Molecular Dose

DNA-, protein- adducts

Biological Effect

Mutated oncogenes/ tumor suppressor genes

SusceptibilityGenetic polymorphisms, nutrition, DNA repair

Exposure

Disease

Biomarker Continuum

[Perera & Weinstein, 1982]


• For commentary, review, and theoretical papers, journal editors often request figures. Makes the paper more ‘citable’.

• Several journals now package figures from papers as downloadable PowerPoint slides.

• The re-use of your figures/illustrations increases your profile and hopefully the citation rate of the original paper.


NCBI is setting up an image search system similar to Pubmed.

Downloads

In a web browser go to:

http://www.columbia.edu/~agr3/EPIC/

Basic Concepts in Computer Graphics

Raster Graphics• Also known as bitmaps, they are grids of colored

points called pixels.

• Described by the height and width of the image in pixels and the number of bits of color information per pixel.

• Image quality is resolution dependent and images cannot be scaled up without loss of image quality.

• Raster images are generated by digital cameras and software like Photoshop.

Raster Graphics

Raster Graphics: File FormatsGraphic Interchange Format (GIF)

• One of the earliest image files on the Internet (CompuServe 1987).

• Can display 256 colors, transparent pixels and animations.

• Good for logos and images with areas of solid color.

• Not a good format for photos.

Raster Graphics

Raster Graphics: File FormatsJoint Photographic Expert Group (JPEG)

• Defines an approach to ‘lossy’ image compression. Every time the image is recompressed information is lost.

• The most common image format on the Web, the standard was approved in 1992.

• Best for photos with smooth variations of tone and color, supports millions of colors.

• Not suited for line drawings and other textual or iconic graphics.

Raster Graphics: File FormatsPortable Network Graphics (PNG)

• Developed due to patent issues with GIF.

• Uses lossless image compression.

• Supports millions of colors.

• Full and partial transparency.

• Larger file size than JPG.

• Equivalent in quality to JPG for photos.

• Better than JPG for text, line art or graphics.

Vector Graphics• Uses geometrical primitives such as points, lines,

curves, and shapes to represent images.

• Primitives are defined using equations. Can scale indefinitely to any resolution. Transformations such as rotate, mirror, stretch

and skew are easy to apply.

• Smaller file sizes than raster images.

• Converting vector to raster is easy, but going the opposite direction is difficult.

Vector Graphics

Loin

BellyLeg, HamSpare Ribs

PowerPoint• Primarily a vector based layout and

illustration tool. Text boxes, primitives, word art, graphs,

within slide animation and between slide transitions.

Works as flip-book or deck of cards.

• Can import raster images and perform some editing functions.

• Can export combined vector and raster compositions to raster.

GNU Image Manipulation Program (GIMP)

• An open-source raster editing program.• Has the functionality of Adobe Photoshop.• We’ll use GIMP to:

Resize and compress images Crop images Clean images Make transparent areas Layer images

Developing PowerPoint Presentations

Background Choices• Select a background that provides contrast to your

text and illustrations.

Design Elements: Text Boxes

Text Boxes

Fonts• My primary objective for font selection is

readability from the back of the room.

• Squint test: squint at your monitor, if you can still read the text, the font is probably fine.

Font Test at 24 point. Arial BlackFont Test at 24 point. ArialFont Test at 24 point. VerdanaFont Test at 24 point. Gils

Sans MTFont Test at 24 point. Times New

Roman

Fonts: Point Size

Arial Black 24Arial Black 20Arial Black 18

Arial 24Arial 20Arial 18

Verdana 24Verdana 20Verdana 18

Times New Roman 24Times New Roman 20Time New Roman 18

Gills Sans MT 24Gills Sans MT 20Gills Sana MT 18

Fonts: Serifs, Widths and Stroke

AA aa BB bb CC cc

S S

Serifs

Width

Stroke


Text Boxes

Colors• PowerPoint uses Red, Green, Blue (RGB) additive

color model. R, B and G are added together to make a wide

array of colors. Each primary color can have a value from 0 to

255, known as 8 bit color, for a total of 16.7 million possible colors.

1 bit color 8 bit color 24 bit color

PowerPoint Color Tools

A little Bit of Color Theory

• The eye is sensitive to differences in color, but don’t forget contrast.

• Visually, warm colors come forward, cool colors recede.

255, 0, 0

51, 153, 255

0, 0, 255

255, 51, 153

202224262830

Asian Caucasian Hispanic Caribbean African AmericanMen Women

Adju

sted

BM

I

Adjusted1 Mean BMI by Gender and Race/Ethnicity

1. Adjusted for age and education


Text Boxes


Text BoxesSecond line

Third line

Design Elements: Primitives

Try to Make these Primitives

Design Elements: Images

• Images can be added in two ways: As an inserted image element, As a texture-map filling a primitive.

• Images can be cropped and scaled.

• The color balance, contrast and brightness can be altered.

• Colors can be set to transparent.

Design Elements: Images

Design Elements: Image Recolor

Design and Layout

Slide Layout Guidelines • Positive space: text, images, graphs….

• Negative space: your Background color.

• Balance the negative space on the left and right of the positive space.

• Vertically center the positive space, but leave slightly more negative space at the bottom.

or

• Use animated entrances for text.

Slide Layout Guidelines

• Don’t be wordy and use dense blocks of text.

• Insert whole or half lines between bullets.

Use indented bullets to make sub-points.

• Use images or graphics whenever you can.


• This text is not really meaningful. The words have been chosen to demonstrate ragged right edges, which look ugly.

• Hanging words also don’t look that good.

• These issues throw off the balance between negative and positive space and take up valuable slide space.


• This text is not really meaningful. The words have been chosen to demonstrate ragged right edges, which look ugly.

• Hanging words also don’t look that good.

Design and Layout Options • MS provides automatic layout options.

Home tab Slides Layout

Design and Layout Options

• MS provides automatic layout options. Home tab Slides Layout

• But the font size and line spacing re-size as you type and add lines of text.

• Its better not to use the automated layouts.

• Manually add text boxes, images and shapes.

Design and Layout Tools: Indents & Line Spacing

• The Paragraph menu is in the Home tab.

• Use it to set line spacing, remember you can type in your own point value.

Design and Layout Tools: Align

• These tools are in the Home tab.

• They also appear in the Drawing Tools Format tab once a text box or primitive is selected.

62


Internal Dose

Cotinine, DDE

Molecular Dose


Biological Effect


Exposure

Disease

Biomarker Continuum

[Perera, Weinstein, 1982]

Design and Layout Tools: Order

64


Internal Dose

Cotinine, DDE

Molecular Dose


Biological Effect


Exposure

Disease

Biomarker Continuum

[Perera, Weinstein, 1982]

Design and Layout Tools: Snaps • Constrains placement

of primitives to points on a grid.

• Can be useful and also annoying.

Design and Layout Tools: Snaps

Design and Layout Tools: Tables

Prenatal and Early Life Predictors

Age 5 BMI ZBeta, p-value


Waist CircumferenceBeta1, p-value

Dominican ethnicity 0.12, p=0.43 0.24, p=0.11 2.37, p=0.01Mother received public assistance during pregnancy

0.02, p=0.91 -0.17, p=0.22 -1.09, p=0.25

Birth weight per 100 grams 0.05, p=0.001 0.04, p=0.007 0.29, p=0.003

Mothers weight before pregnancy 0.004, p=0.04 0.008, p<0.001 0.05, p<0.001

Prenatal and Early Life Predictors of Body Size

1. Model also controls for child’s age and gender





Dominican ethnicity 0.12, p=0.43Mother received public assistance during pregnancy

0.02, p=0.91

Birth weight per 100 grams 0.05, p=0.001

Mothers weight before pregnancy 0.004, p=0.04






Dominican ethnicity 0.12, p=0.43 0.24, p=0.11Mother received public assistance during pregnancy

0.02, p=0.91 -0.17, p=0.22

Birth weight per 100 grams 0.05, p=0.001 0.04, p=0.007

Mothers weight before pregnancy 0.004, p=0.04 0.008, p<0.001






Dominican ethnicity 0.12, p=0.43 0.24, p=0.11 2.37, p=0.01Mother received public assistance during pregnancy

0.02, p=0.91 -0.17, p=0.22 -1.09, p=0.25

Birth weight per 100 grams 0.05, p=0.001 0.04, p=0.007 0.29, p=0.003

Mothers weight before pregnancy 0.004, p=0.04 0.008, p<0.001 0.05, p<0.001


1. Model also controls for child’s age and gender

PowerPoint Presentation Management

• As your career develops: your collection of slides will grow, speaking invitations will become frequent.

• Need to efficiently create presentations.

• Pick a presentation style and stick with it.

• The return investment for making a few key illustrations, graphs and figures will increase.

73

Exposure Disease

Exposure Disease

Molecular Epidemiology

Traditional Epidemiology

Black Box

Standardized Formatting

• Makes mixing and matching slides to create new presentations very efficient.

• Can set the ‘text box’ tool to default to your preferred style. Left click on text box to activate it, Right click

on text box to bring up options.

• To switch styles you can use the Clipboard ‘brush’ to paint on new formats.

Arial Black 32, R: 255, G: 255, B: 0• Fade background from Black (R: 0, G: 0, B: 0) to

Blue (R: 0, G: 0, B: 255).

• Arial Black 24, R: 255, G: 255, B: 255, round bullet, ½ inch indent, ½ inch hanging indent. Arial Black 24, R: 255, G: 255, B: 255, arrow

bullet, ½ inch indent.

• Custom animation, Entrance, Expand.

• My formal presentation style.

Comic Sans MS 32, R: 255, G: 0, B: 0

• Spiral notebook background. Background, File or Texture, Image file,

Tiled.• Comic Sans MS 24, R: 0, G: 0, B: 0.• Try and line the text up will notebook lines.

• I use this style when I am presenting new ideas or showing preliminary data.

Construct Validity of the Questionnaire:

Physical Activity and Adjusted Mean BMI

0-12 >12-24 >24-39 >3924

25

26

27

MET*Hours/Wk

Adju

sted

BM

I

Recreational

Household

Adjusted for gender, smoking status and occupational activity

Glutathione Detoxifies Reactive Oxygen Species

GPxCo-factor

GSH

Peroxide

GSSG

H2O

Data Visualization and Graphic Design Andrew Rundle, Dr.P.H . Allan Just, M.Phil .

Documents

Transcript of Data Visualization and Graphic Design Andrew Rundle, Dr.P.H . Allan Just, M.Phil .