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

2. Introductions Andrew 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.

3. Introductions Allan Just, M.Phil. 4 th 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.

4. Course Objectives Provide 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

5. 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. 6 Internal Dose Cotinine, DDE Molecular Dose DNA-, protein- adducts Biological Effect Mutated oncogenes/ tumor suppressor genes Susceptibility Genetic polymorphisms, nutrition, DNA repair Exposure Disease Biomarker Continuum [Perera & Weinstein, 1982]

7. 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.

10. Graphic Design as Part of Career Development NCBI is setting up an image search system similar to Pubmed.

11. Downloads In a web browser go to: http://www.columbia.edu/~agr3/EPIC/

12. Basic Concepts in Computer Graphics

13. 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.

14. Raster Graphics

15. Raster Graphics: File Formats Graphic 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.

16. Raster Graphics

17. Raster Graphics: File Formats Joint 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.

18. Raster Graphics: File Formats Portable 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.

19. 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.

20. Vector Graphics Loin Belly Leg, Ham Spare Ribs

21. 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.

23. 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

24. Developing PowerPoint Presentations

25. Background Choices Select a background that provides contrast to your text and illustrations.

26. Design Elements: Text Boxes Text Boxes

27. 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 Black Font Test at 24 point.Arial Font Test at 24 point.Verdana Font Test at 24 point.Gils Sans MT Font Test at 24 point.Times New Roman

28. Fonts: Point Size Arial Black 24 Arial Black 20 Arial Black 18 Arial 24 Arial 20 Arial 18 Verdana 24 Verdana 20 Verdana 18 Times New Roman 24 Times New Roman 20 Time New Roman 18 Gills Sans MT 24 Gills Sans MT 20 Gills Sana MT 18

29. Fonts: Serifs, Widths and Stroke A A a a B B b b C C c c S Serifs Width Stroke

30. Design Elements: Text Boxes Text Boxes

31. 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 color8 bit color24 bit color

32. PowerPoint Color Tools

34. 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

35. MenWomen Adjusted BMI Adjusted 1 Mean BMI by Gender and Race/Ethnicity 1.Adjusted for age and education

36. MenWomen Adjusted BMI Adjusted 1 Mean BMI by Gender and Race/Ethnicity 1.Adjusted for age and education

37. Design Elements: Text Boxes

38. Text Boxes

39. Design Elements: Text Boxes Text Boxes Second line  Third line

40. Design Elements: Primitives

47. Try to Make these Primitives

48. 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.

49. Design Elements: Images

50. Design Elements: Image Recolor

51. Design and Layout

52. 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.

53. 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.

54. Slide Layout Guidelines

55. 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.

56. 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.

57. Design and Layout Options MS provides automatic layout options.  Home tab  Slides  Layout

58. Design and Layout Options MS provides automatic layout options.  Home tab  Slides  Layout

59. 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.

60. 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.

61. 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. Susceptibility Genetic polymorphisms, nutrition, DNA repair 62 Internal Dose Cotinine, DDE Molecular Dose DNA-, protein- adducts Biological Effect Mutated oncogenes/ tumor suppressor genes Exposure Disease Biomarker Continuum [Perera, Weinstein, 1982]

63. Design and Layout Tools: Order

64. Susceptibility Genetic polymorphisms, nutrition, DNA repair 64 Internal Dose Cotinine, DDE Molecular Dose DNA-, protein- adducts Biological Effect Mutated oncogenes/ tumor suppressor genes Exposure Disease Biomarker Continuum [Perera, Weinstein, 1982]

65. Design and Layout Tools: Snaps Constrains placement of primitives to points on a grid. Can be useful and also annoying.

66. Design and Layout Tools: Snaps

67. Design and Layout Tools: Tables

68. Prenatal and Early Life Predictors Age 5 BMI Z Beta, p-value Age 7 BMI Z Beta, p-value Waist Circumference Beta 1, p-value Dominican ethnicity 0.12, p=0.430.24, p=0.112.37, p=0.01 Mother 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.0010.04, p=0.0070.29, p=0.003 Mothers weight before pregnancy 0.004, p=0.040.008, p<0.0010.05, p<0.001 Prenatal and Early Life Predictors of Body Size 1. Model also controls for child’s age and gender

69. Prenatal and Early Life Predictors Age 5 BMI Z Beta, p-value Age 7 BMI Z Beta, p-value Waist Circumference Beta 1, p-value Dominican ethnicity0.12, p=0.43 Mother 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

70. Prenatal and Early Life Predictors Age 5 BMI Z Beta, p-value Age 7 BMI Z Beta, p-value Waist Circumference Beta 1, p-value Dominican ethnicity0.12, p=0.430.24, p=0.11 Mother received public assistance during pregnancy 0.02, p=0.91-0.17, p=0.22 Birth weight per 100 grams 0.05, p=0.0010.04, p=0.007 Mothers weight before pregnancy 0.004, p=0.040.008, p<0.001 Prenatal and Early Life Predictors of Body Size

71. Prenatal and Early Life Predictors Age 5 BMI Z Beta, p-value Age 7 BMI Z Beta, p-value Waist Circumference Beta 1, p-value Dominican ethnicity 0.12, p=0.430.24, p=0.112.37, p=0.01 Mother 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.0010.04, p=0.0070.29, p=0.003 Mothers weight before pregnancy 0.004, p=0.040.008, p<0.0010.05, p<0.001 Prenatal and Early Life Predictors of Body Size 1. Model also controls for child’s age and gender

72. 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. 73 ExposureDisease ExposureDisease Molecular Epidemiology Traditional Epidemiology Black Box

74. 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.

75. 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.

76. 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.

77. Construct Validity of the Questionnaire: Physical Activity and Adjusted Mean BMI RecreationalHousehold Adjusted for gender, smoking status and occupational activity

78. Glutathione Detoxifies Reactive Oxygen Species GPx Co-factor GSH Peroxide GSSG H2OH2O