Du Bois Visualization Style Guide

Transcript

1. Anthony Starks version 1.2 (2024-02-16) W.E.B. Du Bois Visualization Style Guide
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
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.
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]
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.
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.
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.
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.
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)
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.
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.
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
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.
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)
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
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