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]
Graphic Design as Part of Career Development
• 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.
Graphic Design as Part of Career Development
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
Design Elements: Text Boxes
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
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
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
Design Elements: Text Boxes
Design Elements: Text Boxes
Text Boxes
Design Elements: Text Boxes
Text BoxesSecond line
Third line
Design Elements: Primitives
Design Elements: Primitives
Design Elements: Primitives
Design Elements: Primitives
Design Elements: Primitives
Design Elements: Primitives
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.
Slide Layout Guidelines
Slide Layout Guidelines
• 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.
Slide Layout Guidelines
• 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
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
SusceptibilityGenetic polymorphisms, nutrition, DNA repair
Internal Dose
Cotinine, DDE
Molecular Dose
DNA-, protein- adducts
Biological Effect
Mutated oncogenes/ tumor suppressor genes
Exposure
Disease
Biomarker Continuum
[Perera, Weinstein, 1982]
Design and Layout Tools: Order
64
SusceptibilityGenetic polymorphisms, nutrition, DNA repair
Internal Dose
Cotinine, DDE
Molecular Dose
DNA-, protein- adducts
Biological Effect
Mutated oncogenes/ tumor suppressor genes
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
Age 7 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
Prenatal and Early Life Predictors
Age 5 BMI ZBeta, p-value
Age 7 BMI ZBeta, p-value
Waist CircumferenceBeta1, p-value
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
Prenatal and Early Life Predictors of Body Size
Prenatal and Early Life Predictors
Age 5 BMI ZBeta, p-value
Age 7 BMI ZBeta, p-value
Waist CircumferenceBeta1, p-value
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
Prenatal and Early Life Predictors of Body Size
Prenatal and Early Life Predictors
Age 5 BMI ZBeta, p-value
Age 7 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
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