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

Recreating the DuBois Data Portraits

Anthony Starks
December 11, 2022

Recreating the DuBois Data Portraits

The process, tools, and results of recreating the DuBois Data Portraits

Anthony Starks

December 11, 2022
Tweet

More Decks by Anthony Starks

Other Decks in Design

Transcript

  1. Recreating the Du Bois
    Data Portraits

    View full-size slide

  2. “I can hardly realize they
    are all my people; that
    this great assembly of youth
    and intelligence are representatives
    of a race which twenty
    years ago was in bondage.”
    W.E.B. Du Bois at Fisk, circa 1885

    View full-size slide

  3. Atlanta University Debating Team, c. 1900 Women seated on steps of building at Atlanta University c. 1900

    View full-size slide

  4. W.E.B. Du Bois in Paris 1900 Exposition of the American Negro, Paris, 1900

    View full-size slide

  5. Historical Context
    1895 1896 1897 1898 1899 1900
    “Black America” Fair Plessy v. Ferguson Phila. Negro begins Wilmington Overthrow Lynchings Peak Paris Exposition

    View full-size slide

  6. We are here
    This is who we are
    This is how far we have come

    View full-size slide

  7. 22”
    28”

    View full-size slide

  8. Taxonomy
    Bars
    52.63%
    Maps
    15.79%
    Blocks
    14.04%
    Circles
    12.28%
    Graphs
    5.26%
    Bars Maps Blocks Circles Graphs

    View full-size slide

  9. Color Palette
    black brown tan gold pink red green blue purple
    #000000 #654321 #d2b48c #ffd700 #ffc0cb #dc143c #00aa00 #4682b4 #7e6583

    View full-size slide

  10. Typography
    Public Sans
    Charter
    DU BOIS

    View full-size slide

  11. Pen, Ink, Watercolor, Paper, Expos
    1900
    Scripting, Digital Fonts, PDF, Internet
    Today

    View full-size slide

  12. decksh
    Structure Text Lists
    Arrows Images Graphics
    Charts Loops Data
    Utility

    View full-size slide

  13. 10 20 30 40 50 60 70 80 90
    10
    20
    30
    40
    50
    60
    70
    80
    90
    Percent Grid

    View full-size slide

  14. Code Output Reference

    View full-size slide

  15. plate06/gapoly.dsh 800
    plate20/galand.dsh 548
    plate05/gapop.dsh 448
    plate26/bardata.dsh 276
    plate10/conjugal.dsh 256
    plate08/migration.dsh 231
    plate07/wc.dsh 208
    plate09/agedist.dsh 199
    plate53/conjugal.dsh 185
    plate23/property.dsh 164
    plate45/occupations.dsh 152
    plate08/l.dsh 117
    plate37/overview.dsh 114
    plate43/occupation.dsh 112
    plate31/income.dsh 111
    plate25/household.dsh 109
    plate21/propvalue.dsh 106
    plate54/dline.dsh 100
    plate30/tenant.dsh 94
    plate03/statepop.dsh 94
    plate40/popcompare.dsh 90
    plate49/enrolled.dsh 89
    plate44/proportion.dsh 89
    plate41/countries-pop.dsh 89
    plate15/children.dsh 88
    plate62/religion.dsh 84
    plate56/land.dsh 76
    plate52/ur.dsh 71
    plate47/natill.dsh 70
    plate22/propval.dsh 67
    plate14/illiteracy.dsh 67
    plate50/generation.dsh 66
    plate63/church.dsh 65
    plate11/population.dsh 65
    plate57/business.dsh 64
    plate27/occupation.dsh 63
    plate02/uspop.dsh 55
    plate51/free-slave.dsh 54
    plate46/teachers.dsh 54
    plate13/color.dsh 50
    plate60/crime.dsh 48
    plate54/pop.dsh 47
    plate24/farming.dsh 47
    plate17/students.dsh 46
    plate06/gapop2.dsh 42
    plate16/teachers.dsh 40
    plate26/occupation.dsh 39
    plate42/population-proportion.dsh 38
    plate55/property.dsh 37
    plate38/dist.dsh 32
    plate18/land.dsh 32
    platexx/illiteracy.dsh 30
    plate58/pauper.dsh 29
    plate61/news.dsh 28
    plate48/enrollment.dsh 22
    plate01/georgia-negro.dsh 21
    plate19/land.dsh 13
    plate59/mortality.dsh 11
    plate39/population.dsh 8
    plate37/pie.dsh 6
    plate23/lb4.dsh 6
    plate23/lb3.dsh 6
    plate23/lb2.dsh 6
    plate23/lb1.dsh 6
    plate23/db1.dsh 6
    plate04/georgia-pop.dsh 6
    Lines of decksh code
    Machine-Generated
    (mean=298.67)
    Hand-Coded
    (mean=59.83)
    Plates:
    Total LoC:
    Average LoC:
    57
    6,492
    98.37

    View full-size slide

  16. Code Management and Automation
    Directory Scripting Source Control
    dubois-data-stories
    data-portraits.pdf
    mkdeck-all
    plate01
    f.pdf
    f1.png
    original-plate01.jpg
    georgia-negro.dsh
    mkdeck
    mkdeck-png
    ...
    plate02
    data.csv
    ...
    plate63
    ./mkdeck # make the page
    ./mkdeck-png # make image
    ./mkdeck-all # make all pages
    git add ...
    git commit -m 'Add plate 23'
    git push origin master

    View full-size slide

  17. // Plate 39, Increase of the Negro population
    deck
    opts="-fulldeck=f -hbar -color red -val=f -ls 3.5"
    slide
    ctext "Increase of the Negro population in the United States of America" 50 95 2.5 "serif" "rgb(100,100,100)"
    ctext "Accroissement de la population Negre aux États-Unis d'Amérique" 50 90 1.5 "serif" "gray"
    dchart opts pop.d
    eslide
    edeck
    1750 - 220,000 220000
    1760 - 310,000 310000
    1770 - 462,000 462000
    1780 - 562,000 562000
    1790 - 757,208 757208
    1800 - 1,002,037 1002037
    1810 - 1,377,808 1377808
    1820 - 1,771,656 1771656
    1830 - 2,328,642 2328642
    1840 - 2,873,648 2873648
    1850 - 3,638,808 3638808
    1860 - 4,441,830 4441830
    1870 - 4,880,009 4880009
    1880 - 6,580,793 6580793
    1890 - 7,470,040 7470040

    View full-size slide

  18. deck
    slide
    h1=3
    h2=h1*0.70
    h3=h1*0.5
    // Top matter
    ctext "Pauperism among American Negroes." 50 97 h1 "serif"
    ctext "Pauperisme parmi les Nègres Americains" 50 92 h2 "serif"
    ctext "Done by Atlanta University" 50 87 h3 "serif"
    ctext "PROPORTION OF ALMSHOUSE PAUPERS IN EVERY 100,000 NEGROES." 50 75 h2
    hline 40 90 20 0.075
    hline 40 85 20 0.075
    // Population and Paupers
    ctext "100,000" 50 70 h2
    arc 50 30 50 50 0 180 50 "rgb(101,67,33)"
    arc 50 30 1.5 1.5 0 180 2 "crimson"
    ctext "86" 50 28 h2
    ctext "PAUPERS" 50 26 h2
    ctext "MALE" 25 19 h2
    hline 0 15 55 8 "green"
    ctext "FEMALE" 75 19 h2
    hline 55 15 45 8 "gold"
    ubrace 50 25 50 2 2
    eslide
    edeck

    View full-size slide

  19. barwidth=30
    freecolor="darkgreen"
    slavecolor="black"
    peasantcolor="maroon"
    tenantcolor=freecolor
    // left-hand bar
    left1=25
    bot1=5
    h1=30
    top1=bot1+h1
    len1=top1-bot1
    slave1=len1*0.89
    free=len1*0.11
    f1=bot1+slave1
    // right-hand bar
    left2=80
    bot2=20
    h2=60
    top2=bot2+h2
    len2=top2-bot2
    prop=len2*0.19
    p1=top2-prop
    vline left1 bot1 len1 barwidth slavecolor
    vline left1 f1 free barwidth freecolor
    vline left2 bot2 len2 barwidth freecolor
    vline left2 p1 prop barwidth peasantcolor

    View full-size slide

  20. Original and Modern: Expenditures

    View full-size slide

  21. Data from the
    Social Sciences

    View full-size slide

  22. https://github.com/ajstarks/dubois-data-portraits/tree/master/challenge/2022

    View full-size slide

  23. Repos
    github.com/ajstarks/dubois-data-portraits
    github.com/ajstarks/modern-dubois-viz

    View full-size slide

  24. Links and Resources
    Presentation
    Catalog
    Repo
    Dubois Style/Modern Data
    "The" Book
    Library of Congress Collection
    Style Guide
    decksh Code
    decksh Presentation
    Dignity and Debt
    Black America, 1895
    Nightingale Article
    #DuboisChallenge
    https://speakerdeck.com/ajstarks/recreating-the-dubois-data-portraits
    https://speakerdeck.com/ajstarks/recreations-of-w-dot-e-b-du-bois-data-portraits
    https://github.com/ajstarks/dubois-data-portraits
    https://github.com/ajstarks/modern-dubois-viz
    https://www.amazon.com/W-Boiss-Data-Portraits-Visualizing/dp/1616897066
    https://www.loc.gov/collections/african-american-photographs-1900-paris-exposition/
    https://github.com/ajstarks/dubois-data-portraits/blob/master/dubois-style.pdf
    https://github.com/ajstarks/decksh
    https://speakerdeck.com/ajstarks/decksh-a-little-language-for-decks
    https://www.dignityanddebt.org/projects/student-debt-racial-disparities/
    https://publicdomainreview.org/essay/black-america-1895
    https://medium.com/nightingale/recreating-w-e-b-du-boiss-data-portraits-87dd36096f34
    https://github.com/ajstarks/dubois-data-portraits/blob/master/challenge/README.md

    View full-size slide

  25. Anthony J. Starks
    Art + Code
    [email protected]
    @ajstarks
    github.com/ajstarks
    speakerdeck.com/ajstarks
    linkedin.com/in/ajstarks
    @duboisviz

    View full-size slide

  26. Plate 1 Plate 2

    View full-size slide

  27. Plate 3 Plate 4

    View full-size slide

  28. Plate 5 Plate 6

    View full-size slide

  29. Plate 7 Plate 8

    View full-size slide

  30. Plate 9 Plate 10

    View full-size slide

  31. Plate 11 Plate 12

    View full-size slide

  32. Plate 13 Plate 14

    View full-size slide

  33. Plate 15 Plate 16

    View full-size slide

  34. Plate 17 Plate 18

    View full-size slide

  35. Plate 19 Plate 20

    View full-size slide

  36. Plate 21 Plate 22

    View full-size slide

  37. Plate 23 Plate 24

    View full-size slide

  38. Plate 25 Plate 26

    View full-size slide

  39. Plate 27 Plate 30

    View full-size slide

  40. Plate 31 Plate 37

    View full-size slide

  41. Plate 38 Plate 39

    View full-size slide

  42. Plate 40 Plate 41

    View full-size slide

  43. Plate 42 Plate 43

    View full-size slide

  44. Plate 44 Plate 45

    View full-size slide

  45. Plate 46 Plate 47

    View full-size slide

  46. Plate 48 Plate 49

    View full-size slide

  47. Plate 50 Plate 51

    View full-size slide

  48. Plate 52 Plate 53

    View full-size slide

  49. Plate 54 Plate 55

    View full-size slide

  50. Plate 56 Plate 57

    View full-size slide

  51. Plate 58 Plate 59

    View full-size slide

  52. Plate 60 Plate 61

    View full-size slide

  53. Plate 62 Plate 63

    View full-size slide