Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Recreating the DuBois Data Portraits
Search
Anthony Starks
December 11, 2022
Design
6
4.8k
Recreating the DuBois Data Portraits
The process, tools, and results of recreating the DuBois Data Portraits
Anthony Starks
December 11, 2022
Tweet
Share
More Decks by Anthony Starks
See All by Anthony Starks
Interactive image manipulation with popi
ajstarks
0
34
giftsh: a DSL and shell for image editing
ajstarks
0
43
Du Bois Challenge 2024 Recap
ajstarks
1
240
decksh object reference
ajstarks
2
1.1k
Installing and Running decksh/pdfdeck
ajstarks
1
700
decksh - a little language for decks
ajstarks
4
20k
The Freedom of Womanhood
ajstarks
1
130
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
520
Collected Friday Feed, 2023
ajstarks
0
100
Other Decks in Design
See All in Design
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
900
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
240
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
880
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
520
OLTA株式会社/デザイン紹介資料
taxy
0
110
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.6k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
500
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
250
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.4k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
NAHO SHIMONO_Portfolio2025
nahohphp
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Designing Experiences People Love
moore
140
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Making Projects Easy
brettharned
116
6k
It's Worth the Effort
3n
184
28k
The Invisible Side of Design
smashingmag
299
50k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Transcript
Recreating the Du Bois Data Portraits
“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
Atlanta University Debating Team, c. 1900 Women seated on steps
of building at Atlanta University c. 1900
W.E.B. Du Bois in Paris 1900 Exposition of the American
Negro, Paris, 1900
Historical Context 1895 1896 1897 1898 1899 1900 “Black America”
Fair Plessy v. Ferguson Phila. Negro begins Wilmington Overthrow Lynchings Peak Paris Exposition
We are here This is who we are This is
how far we have come
None
None
22” 28”
Taxonomy Bars 52.63% Maps 15.79% Blocks 14.04% Circles 12.28% Graphs
5.26% Bars Maps Blocks Circles Graphs
Bars
Maps
Circles
Blocks
Graphs
Color Palette black brown tan gold pink red green blue
purple #000000 #654321 #d2b48c #ffd700 #ffc0cb #dc143c #00aa00 #4682b4 #7e6583
Typography Public Sans Charter DU BOIS
None
None
Pen, Ink, Watercolor, Paper, Expos 1900 Scripting, Digital Fonts, PDF,
Internet Today
None
None
decksh Structure Text Lists Arrows Images Graphics Charts Loops Data
Utility
10 20 30 40 50 60 70 80 90 10
20 30 40 50 60 70 80 90 Percent Grid
Code Output Reference
None
None
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
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
Examples
// 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
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
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
Modern Data
None
Original and Modern: Expenditures
None
Data from the Social Sciences
https://github.com/ajstarks/dubois-data-portraits/tree/master/challenge/2022
Repos github.com/ajstarks/dubois-data-portraits github.com/ajstarks/modern-dubois-viz
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
Anthony J. Starks Art + Code
[email protected]
@ajstarks github.com/ajstarks speakerdeck.com/ajstarks
linkedin.com/in/ajstarks @duboisviz
Catalog
Plate 1 Plate 2
Plate 3 Plate 4
Plate 5 Plate 6
Plate 7 Plate 8
Plate 9 Plate 10
Plate 11 Plate 12
Plate 13 Plate 14
Plate 15 Plate 16
Plate 17 Plate 18
Plate 19 Plate 20
Plate 21 Plate 22
Plate 23 Plate 24
Plate 25 Plate 26
Plate 27 Plate 30
Plate 31 Plate 37
Plate 38 Plate 39
Plate 40 Plate 41
Plate 42 Plate 43
Plate 44 Plate 45
Plate 46 Plate 47
Plate 48 Plate 49
Plate 50 Plate 51
Plate 52 Plate 53
Plate 54 Plate 55
Plate 56 Plate 57
Plate 58 Plate 59
Plate 60 Plate 61
Plate 62 Plate 63
Plate XX