Du Bois Visualization Style Guide

Transcript

1. Anthony Starks version 1.1 (2023-03-18)
   W.E.B. Du Bois Visualization
   Style Guide
   

   View Slide

2. Table of Contents
   Introduction
   Taxonomy
   Bars
   Maps
   Circles
   Blocks
   Maps
   Dimensions
   Typography
   Legends
   Annotations
   Colors
   References
   1
   2
   3
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   

   View Slide

3. Exposition of the American Negro, 1900 Paris Exposition
   [1]
   Introduction
   To help designers, artists, developers, and scholars seeking to implement
   or study the “Du Bois Style”, this document describes aspects of the
   visualizations created by W. E. B Du Bois' team for the 1900 Paris
   exposition [1].
   To learn more see “W.E.B Du Bois's Data Portraits Visualizing Black
   America” [2]. by Whitney Battle-Baptise and Britt Rusert and the
   Library of Congress collection “African American Photographs Assembled
   for 1900 Paris Exposition” [3].
   The sources above use plate numbers to indicate the visuals, this
   document users the same convention.
   

   View Slide

4. Bars (53%) Maps (16%) Circles (14%)
   Blocks (12%) Line Graphs (5%)
   Taxonomy
   The approximately 60 visuals produced for the 1900 Exposition fall
   into these categories: bar charts (30), maps (9), visuals with circular
   features (7), visuals using large blocks of color (8), and line graphs
   (3). The visuals also use bold primary colors and abstract forms prior
   to modernist movements developed later in the twentieth century.
   [2]
   

   View Slide

5. Plate 3 Plate 39 Plate 19
   Plate 17 Plate 26
   Plate 62 [3]
   Bars
   The most prevalent type of visualization is bar charts. Some are conventional
   bar charts with labels on the left, using a single color, with the values
   sorted. Red tends to be the dominate color for this type, although
   other colors like gray, yellow and green are also used. In one case
   the bars echo the shape of its subject – the state of Georgia (plate
   19).
   There are three cases (plates 17, 26 and 62) where a bar is wrapped
   spanning 2-3 vertical lines.
   

   View Slide

6. Plate 23 Plate 14
   Plate 13
   Plate 50
   Plate 60
   [4]
   An unconventional use of bars is a “woven” pattern of two contrasting
   colors (indicating two cities, plate 23.). The weave is used in plate
   14 where the timeline is woven with the measure of literacy.
   Another bar chart type uses 1-3 vertical bars to describe proportion
   indicated by 2-3 solid colors (plates 13 and 50). In one case, plate
   60, the bar is tilted 45 degrees.
   

   View Slide

7. Plate 5 Plate 8 Plate 42
   Maps
   [5]
   The second most prevalent type of visual is the map; the majority
   of these use US state or Georgia county boundaries filled with color
   indicating some measure such as population distribution (plates
   2, 5, 6, and 8). The maps include colored legends with circles of
   color to denote the categories. The political outlines may also be
   labeled with other indicia such as arrows and measures. (plates 8,
   20) Two of the maps (plates 41, 42) use filled and outline shapes
   to compare the US with other countries.
   

   View Slide

8. Plate 11 Plate 25
   Plate 37 Plate 27 Plate 22
   Circles
   [6]
   Several charts use circular elements; notable are the spirals in plates
   11 and 25 (often highlighted when showing the Du Bois visuals).
   The spirals are used to indicate large measures; instead of stretching
   out the lines as in a conventional bar chart, the measures are rolled
   up in a spiral.
   Other uses of circles include conventional pie charts (plate 37), and
   the “fan” chart (plates 27). A novel “target chart” uses concentric
   circles with wedge-shaped pointers to the center.
   

   View Slide

9. Plate 51 Plate 53 Plate 54
   Plate 57
   Plate 55
   Plate 61
   Blocks
   [7]
   Bold blocks of color are used in several charts, for example, area
   graphs in plates 51, 53, 54:
   Some visuals use geometric (rectangular, triangular, pyramidal)
   blocks (plates 57, 55, 61)
   

   View Slide

10. Plate 7 Plate 21
    Plate 40
    Graphs
    [8]
    Only three of the visuals use the traditional line chart. Two of the
    three use red grid lines (plates 7, 21). The line graphs have annotations,
    often with rotated text. Plate 7 in unusual: the usual convention
    of time on x-axis with values on the y axis is reversed.
    

    View Slide

11. Dimensions
    [9]
    As displayed in Paris exposition, the Du Bois visualizations were
    large format, 22x28 inch posters, mostly in portrait orientation. (exceptions
    are plates 30 and 31). To duplicate this layout, use a aspect ratio
    of approximately 0.78 (portrait) or 1.27 (landscape). For example
    setting your canvas to 1584x2016 pixels, at 72 pixels/inch, will duplicate
    the original canvas. Alternatively smaller sizes can be used preserving
    the aspect ratio.
    28 in.
    22 in.
    

    View Slide

12. Plate 1 title Plate 60 title
    Typography
    [10]
    Each visual includes a title: typically hand-lettered, sans-serif bold,
    centered all-caps with a period at the end. The titles may span 2-3
    lines and its size of typically 3%-4% if the overall width. In some
    a smaller serif font is used.
    To duplicate using modern tools, Public Sans [4] and Charter [5]
    may be used for sans-serif and serif fonts, respectively. Other choices
    are B52-ULC W00 [6] for titles and Vasarely-Light [7] for running
    text. The font DU BOIS [8] from Vocal Type was specifically designed
    to pay homage to the Du Bois visualizations
    

    View Slide

13. Plate 27 legend Plate 60 legend
    Plate 5 legend
    Legends
    [11]
    Several visuals use colored legends (plate 2, plates 5-6, 37,38, 60).
    The legends usually use an outlined circle of color, (except for plate
    2), and may be horizontal or vertically oriented.
    

    View Slide

14. Plate 1 annotation
    Plate 21 annotation
    Plate 31 annotation
    Plate 40 annotation
    Annotations
    [12]
    Many visualizations include commentary and annotations, which
    are typically done in a lighter weight and color. All text is in ALL-CAPS.
    Annotations are also used to clarify the message of the visual display,
    (often using rotated text)
    

    View Slide

15. Colors
    [13]
    Bold solid colors are characteristic of the Du Bois style. To maintain
    consistency in your designs, here is a Du Bois-style color palette.
    Note the use of the Pan-African colors [9] (used 20 years before they
    were defined). Black, brown, and gold are used to indicate racial
    makeup in plates 1, 13, and 54. Plates 12, 50, and 51 use black to
    indicate slavery, and green for freedom.
    Color RGB Hex
    black
    brown
    tan
    gold
    pink
    crimson
    green
    blue
    purple
    rgb(0,0,0)
    rgb(101,67,33)
    rgb(210,180,140)
    rgb(255,215,0
    rgb(255,192,203)
    rgb(220,20,60)
    rgb(0,128,0)
    rgb(70,130,180)
    rgb(126,101,131)
    #000000
    #654321
    #d2b48c
    #ffd700
    #ffc0cb
    #dc143c
    #00aa00
    #4682b4
    #7e6583
    

    View Slide

16. References
    [14]
    [1] 1900 Paris Exposition
    [2] W.E.B Du Bois Data Portraits Visualizing Black America
    [3] African American Photographs Assembled for 1900 Paris Exposition
    [4] Public Sans Font
    [5] Charter Font
    [6] B-52 ULC Font
    [7] Vasarely-Light Font
    [8] DU BOIS Font
    [9] Pan African Colors
    [10] Du Bois Original Plate Catalog
    

    View Slide