Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Du Bois Visualization Style Guide

Du Bois Visualization Style Guide

Anthony Starks

March 18, 2023
Tweet

More Decks by Anthony Starks

Other Decks in Design

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