% !TEX TS-program = LuaLaTeX
% !TEX encoding = UTF-8 Unicode 
% !TEX root = ../../mal-core.tex

\def\kapitola#1{\par\noindent\textbf{#1.}}
\newdimen\delka
\delka=\textwidth
\advance\delka by -2pt
\fboxrule=1pt
\fboxsep=0pt

\gdef\mujnazevCS{Rozšířená knižní recenze: Data Sketches}
\gdef\mujnazevEN{Extended book review: Data Sketches}
\gdef\mujnazevPR{\mujnazevCS}
\gdef\mujnazevDR{\mujnazevEN}
\gdef\mujauthor{Pavel Stříž}

\bonushyper

\nazev{\mujnazevCS}

\nazev{\mujnazevEN}

\author{\mujauthor}

%\Adresa{}

\Email{pavel@striz.cz}

%\Abstrakt{}
%\smallskip
%\KlicovaSlova{}

%\Abstract{}
%\smallskip
%\KeyWords{}

\fboxrule=1pt
\fboxsep=0pt

\newdimen\mal 
\mal=38mm
%\medskip
\enlargethispage{1\baselineskip}%

%\vskip-1.5\baselineskip

\section*{Co knihu předchází}

Knihu \textit{Data Sketches} autorek Nadieh Bremer (fotka uprostřed) a~Shirley Wu (vpravo) z~února 2021 předchází velká oblast vizualizace dat jako taková\footnote{\href{https://uxknowledgebase.com/introduction-to-designing-data-visualizations-part-1-31c056556133}{\tt https://uxknowledgebase.com/introduction-to-designing-data-\\visualizations-part-1-31c056556133}}%
\textsuperscript{\normalfont,}%
\footnote{\href{https://uxknowledgebase.com/tables-other-charts-data-visualization-part-2-cfc582e4712c}{\tt https://uxknowledgebase.com/tables-other-charts-\\data-visualization-part-2-cfc582e4712c}}%
\textsuperscript{\normalfont,}%
\footnote{\href{https://uxknowledgebase.com/tables-other-charts-data-visualization-part-3-5bfab15ce525}{\tt https://uxknowledgebase.com/tables-other-charts-\\data-visualization-part-3-5bfab15ce525}}. Průkopnické byly knihy Edwarda Tufteho, žezlo převzal Mike Bostock (D3js). 
%Jistý n
Nedávný mezník ve vizualizaci dat zaznamenala oblast infographics\footnote{\url{https://coolinfographics.com/}}.
%, kde existují smíšené názory.
%(je to nové a hezké versus je to příliš komplikované). 
Postupně se oblast náčrtků k~vizualizaci dat rýsuje\footnote{\url{http://research.jagoda.ca/j/data-sketches/}}. Náčrtky jako takové nejsou novinkou, používají se především před přípravou technické dokumentace jako rychlý náhled. 
A~ještě předtím bychom našli kořeny v~kresbě a~malbě.

%dataviz
%information graphics (mně se nelíbilo)
%na webu vykreslení 3D grafiky (to se mi líbilo), 
%motorka u Animation Nodes
%sketches --> CAD
%sketchnote handbook ?

Autorky postup práce zhruba popisují jako: data sketches $\rightarrow$ software prototyping $\rightarrow$ final visualisation. Projekt začal jako webový \url{https://www.datasketch.es/}, ale postupně vykrystalizoval do knižní podoby jako trvalý odkaz. Knihu lze považovat za jistý mezník.
Autorky mají své stránky na: \url{https://www.visualcinnamon.com/} a~\url{https://shirleywu.studio/}. 

Github rozcestník je: \url{https://github.com/nbremer/datasketches}. Autorky mají své účty pod \url{https://github.com/nbremer} a~\url{https://github.com/sxywu}.
%
Čtivou recenzi knihy v~angličtině jsem našel zde\footnote{\url{https://medium.com/nightingale/drawing-out-data-sketches-58da7e6fd824}}.

\noindent
\fbox{\includegraphics[height=\mal]{obalka-data-sketches}}\hfill
%\fbox{\includegraphics[height=5cm]{autorky-data-sketches}}%
\fbox{\includegraphics[height=\mal]{nadieh-bremer}}\hfill%
\fbox{\includegraphics[height=\mal]{shirley}}%


\section*{O čem kniha je: 5 úrovní}

Tato část recenze vznikla náhodou, kdy se mě ve stejný den tři kamarádi zeptali o~čem kniha je a~já každému odpověděl jinou větou. Zkusil jsem to rozepsat víc ve stylu \textbf{WIRED: In 5 Levels of Difficulty.}

\textbf{Child,} žák(yně) základní školy. --- Dvě Amazonky, jedna z~Holandska pomalovaná azurově, jedna z~Číny pomalovaná růžově, kouzlí s~barvami, ničí lenost, tvůrčí krizi a~vše další životu nebezpečné. Je to napínavé, jak malé gatě. Knihu si rozstříhej a~polep si tím zdi. Jasně, že můžeš, je to tvá obrázková kniha. Jsou tam i~bezva emotikony, tušíš už, co to je? 

\textbf{Teen,} student(ka) střední školy. --- V~knize najdeš 24 projektů z~vizualizace dat a~počítačové grafiky. %ToDo: ukázky. 
Můžeš si zkusit pročíst části, které tě zaujmou, nebo i~celou, angličtina je čtivá. Pokud máš internet či mobilní data; notebook, tablet či chytráka mobila, můžeš si proklikat ukázky, řada projektů je pro malá zařízení uzpůsobena, hledej Datasketch$\vert$es. Základem pro jejich tvorbu je JavaScript. Zkoušeli jste si ve škole něco naprogramovat?

\textbf{College Student,} posluchač(ka) na vysoké škole. -- Je představeno 2$\times$12 unikátních vizualizačních projektů u~dat a~celý proces tvorby je popsán. Je to pohled dam, jedna je z~Východu, druhá ze Západu, takže si můžeš pročíst a~srovnat jejich různé úvahy na problémy ze stejné oblasti. V~knize jsou odkazy na data, snippety mají na GitHubu. Lze se na to dívat jako na skripta. Ačkoliv mají skoro 500 stran, čte se to rychle, dá se projít za pár dní. Na každou kapitolu ze zvolené oblasti byl časový rámec přibližně jednoho měsíce. Tedy takový dvousemestrový projekt a~práce v~týmu. Pracuješ na seminárních pracích raději sám(a) či v~týmu? Pokud ano, jaká velikosti týmu ti vyhovuje?

\textbf{Grad Student,} kandidát(ka) doktorského titulu. --- Jak je náčrtek a~pak výkres u~technické dokumentace, tak kniha představuje obdobu u~tvorby grafiky z~dat, častokrát jsou zmíněny i~ukázky slepých a~neužitých uliček. %12 témat je: ... 
Profesionální sazeč či analytik by se za takovou práci nemusel stydět. 
Autorky v~rozhovoru pro OpenVis Lisboa na YouTube uznaly, že obálku ani sazbu nedělaly, byť se o~to pokusily, ale nefungovalo to.
Něco, co by si každý měl za svého života zkusit a~nepracovat jen v~rámci prokrastinace. Autorky si navíc daly časový rámec, lze vidět ten časový nátlak, jako kdyby pracovaly na skutečném projektu pro velké zákazníky, což se častokrát skutečně stalo. Projekt jim zabral rok a~doladění 400+ stránkové knihy další tři roky. Angličtina je na úrovni rodilého mluvčího a~korektury jim dělali profesionálové. Je to inspirativní kniha, kdy popsaly, jak se vyrovnaly s~tvůrčí krizí. Pro obě některý z~projektů znamenal průlom v~kariéře. Tvoříš ty něco na YouTube?

\textbf{Expert,} docent(ka) či profesor(ka). --- Kniha je průřezem vzniku unikátních, dosud nevídaných a~atypických grafů, se kterými se člověk ještě nesetkal: od sepsání si nápadů (iPad Pro, do papírových deníčků), po sběr, zpracování a~čištění dat až po získání zpětné vazby publikovaných projektů pro velké organizace typu Google. Autorky/programátorky na volné noze zmiňují nástroje a~balíčky ze světa výpočetního prostředí R a~D3.js. Zmiňují co jim šlo a~co jim nešlo zautomatizovat ve fázi sběru, předzpracování a~čištění dat. 
%
Zaujala mě příprava parsování zdokumentovaného formátu (DDR) či dat souhvězdí z~programu Stellarium (Puppis constellation lines), odhad narození osoby v~neúplných rodokmenech evropské šlechty a~hledání nejkratší cesty u~masivních dat (pokrevní linie), spojování datových souborů a~potažmo limity regulárních výrazů. Jsou to ideální partie na poukázání a~zařazení do přednášek Operačního výzkumu či Algoritmizace. Dámy hodně přednáší na konferencích (záznamy jsou na YouTube, Twitch ad.), stálo by za to se s~nimi dát do řeči či jim nabídnout spolupráci na grantovém projektu. Mám je oslovit já, nebo vy?

Nyní již směle do postřehů ke 12 kapitolám jejich knihy.

\section{Movies, July 2016} % 1.

\kapitola{The Words of the Lord of the Rings}
Nadieh si vybrala Pána prstenů a~kde která postava ze Společenství prstenu mluví. Je zde krásný vtip, jak se běžně užitá zkratka LOTR, píše jako LotR: tedy hodně jazyka R. Vyzkoušela si rozhraní k~IMDb: \url{http://www.omdbapi.com} a~\url{https://www.imdb.com/interfaces/}.
Data čerpala hlavně z~\url{https://github.com/jennybc/lotr}. Rozpis dle fyzického místa, nikoliv scén, to dopsala ručně, cca 700 řádků. Užívá širší a~užší geografické místo na upřesnění lokality.
%
Projekt je představen na \url{https://lotr.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[trim=0 8cm 0 4cm, clip, width=\delka]{01-nadieh-original}}%

\kapitola{Film Flowers}
Shirley též zkusila OMDb API, ale hlavně rozšířené hledání. Její nápad je, že parametry filmů graficky znázorní. U~práce s~Bézierovými křivkami zmiňuje 
\url{http://blogs.sitepointstatic.com/examples/tech/svg-curves/cubic-curve.html}.
%
Projekt je na: \url{http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/}.

\noindent
\fbox{\includegraphics[width=\delka]{01-flowers}}%



\section{Olympics, August 2016} % 2

\kapitola{Olympic Feathers}
Nadieh si vybrala znázornění zlatých medailí na olympiádách. 
Za hlavní zdroje měla především \url{https://www.theguardian.com/sport/datablog/2012/jun/25/olympic-medal-winner-list-data} a~
%aktuálnější 
také stránku
\href{https://www.theguardian.com/sport/datablog/2012/aug/10/olympics-2012-list-medal-winners}{\tt www.theguardian.com/sport/datablog/2012/aug/10/olympics-\\2012-list-medal-winners}.
Identifikátory zemí užila z~R. Inspiraci zmiňuje z~blogu \href{https://dribbble.com/rdbosse/projects/230311-Adobe-Creative-Cloud}{\tt dribbble.com/rdbosse/projects/230311-Adobe-Creative-Cloud}, dále olympijskými kruhy a~barvami. Líbí se mi její termín \textit{visual variables}.
Projekt je na: 
\url{https://olympicfeathers.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[height=37mm]{02-olympics-1}}%
\hfill
\fbox{\includegraphics[height=37mm]{02-olympics-2}}%

\kapitola{Dive Fractals}
Shirley se pustila do dat dvojic v~synchronizovaných skocích. 
Inspiraci našla na
%https://yuri.is/
\url{http://yuri.is/cardcrafting/}, a~poněvadž autor nezveřejňuje zdrojové kódy, poradil jí termín \textit{fractal search algorithm}. To ji přes známého posunulo k
\textit{sweeping fractal lines}, konkrétně na \url{http://rectangleworld.com/blog/archives/462}.
Líbilo se mi její vytištění a~popsání si cizího kódu na papíře, aby kód dobře pochopila.
Projekt je na \url{http://shirleywu.studio/olympics/}.

\noindent
\fbox{\includegraphics[trim=0 4cm 0 10cm, clip, width=\delka]{02-shirley-big}}%


\section{Travel, September 2016} % 3

\kapitola{My Life in Vacations}
Osobní projekty autorek. Nadieh získala data s~pomocí maminky, z~rodinných alb, metadat fotek a~ze svých deníků z~cest. Něco, co já bych nedal dohromady ani kdybych se rozkrájel.
Zaujala mě zmínka užití \textit{blur filter} místo gradientů. %gradient -> blur filter
Projekt je na \url{https://vacations.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{03-nadieh}}%


\kapitola{Four Years of Vacations in 20,000 Colors}
Shirley se pustila do zpracování fotek na úrovni barev, užívá GraphicsMagick a~Node.js. Ze zajímavých odkazů poukazuje na
The Noun Project (\url{https://thenounproject.com/})
Gooey Effect: spojení barev v~SVG, 
Blur Filter a~zvýšování kontrastu.
Upozorňuje u~inspirace na \url{https://www.informationisbeautifulawards.com},
%https://www.c82.net/, 
\url{https://www.c82.net/offthestaff/}
či na zajímavý problém řazení dle barev: \url{http://www.alanzucconi.com/2015/09/30/colour-sorting/}.
Projekt je na \url{https://shirleywu.studio/travel/}.

\noindent
\fbox{\includegraphics[width=\delka]{03-shirley}}%



\section{Presidents \& Royals, October 2016} % 4

\kapitola{Royal Constellations}
Nadieh se pustila do rodokmenu evropské šlechty, data užila především z~\url{http://www.daml.org/2001/01/gedcom/royal92.ged} plus si udělala vlastní parsovač. Dopisovala $\pm150$ panovníků, odhadovala rok narození a~ve finále užila lidi od roku 1000 do současnosti.
Moc se mi líbilo její časování hodina dvojtečka minuta u~zmíněných náčrtků. Její vizuální chyba \textit{hair\-ball} je hezký vtípek.
%f místo of nature
Na hledání nejkratší cesty v~grafu (pokrevní linie) u~masivních dat užila \url{https://github.com/julianbrowne/dijkstra/blob/master/javascripts/ShortestPathCalculator.js}.
Projekt je uložen na \url{https://royalconstellations.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{04-nadieh}}%

\kapitola{Putting Emojis on the President's Face}
Shirley se pustila do analýzy videí Obamy a~jeho manželky. Především jaký výraz tváře mají. Užila opět IMDb a~YouTube Search API. Zmiňuje inspiraci a~nástroje z~konference d3.unconf, Google Cloud Vision API, knihu Tony Chu, Stephanie Yee, \textit{A~Visual Introduction to Machine Learning}, \href{http://www.r2d3.us/visual-intro-to-machine-learning-part-1/}{\tt www.r2d3.us/visual-intro-to-machine-learning-part-1/}, blog Tony Chu, \textit{Small Scroll linked Animation Demo}, 
\href{http://bl.ocks.org/tonyhschu/raw/af64df46f7b5b760fc1db1260dd6ec6a/}{\tt bl.ocks.org/tonyhschu/raw/af64df46f7b5b760fc1db1260\\dd6ec6a},
\textit{fisheye effect}
a~\href{https://russellgoldenberg.github.io/scrollama}{\tt russellgoldenberg.github.io/scrollama}.

Z~článků odkazuje na \textit{Front Row to Fashion Week,} 
\href{https://www.nytimes.com/newsgraphics/2014/02/14/fashion-week-editors-picks/index.html}{\tt https://www.nytimes.\\com/newsgraphics/2014/02/14/fashion-week-editors-picks},
\url{https://www.sarasoueidan.com/blog/svg-coordinate-systems/} a~nástroj
isMobile, \url{https://www.npmjs.com/package/ismobilejs}. Projekt je na
\url{https://shirleywu.studio/obamas/}.

\noindent
\fbox{\includegraphics[width=\delka]{04-shirley}}%


\section{Books, November 2016} % 5

\kapitola{Magic is Everywhere}
V~tomto projektu o~podobenství knih o~fantasy zmínila Nadieh řadu nástrojů v~R: rvest, rgoodreads, tSNE, TSP, včetně odborného termínu 
Document Term Matrix. Opět došlo na blur filter v~SVG.
Projekt je na \url{https://magiciseverywhere.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{05-nadieh}}%

\kapitola{Every Line in Hamilton}
Shirley získala souhlas na užití textů a~písni amerického hiphopového muzikálu. Zaměřila se na filtrování textů. Inspiraci zmínila
Tony Chu, \textit{Animation, Pacing, and Exposition,} \url{https://www.youtube.com/watch?v=Z4tB6qyxHJA}.
Oddělila vizualizaci a~analýzu textů, přidala tečky, které nemají přímý vliv k~vizualizaci dat jako lahůdku pro čtenáře.
Místo linek notové osnovy užila jinou hudební značku.
Užila hidden canvas, quadtree a~má tam přehrání písničky po nakliknutí textu. Poukazovala v~textu na chyby ve své vizualizaci.
Nastartovalo to její kariéru, jak vizualizaci viděli lidi i~mimo její obor. 
Projekt byl publikován v~The Pudding, \url{https://pudding.cool/2017/03/hamilton/index.html}.

\noindent
\fbox{\includegraphics[width=\delka]{05-shirley}}%


\section{Music, December 2016} % 6

\kapitola{The Top 2000 $\color{red}\varheartsuit$ the 70's \& 80's}
Pro hudební tématiku Nadieh zvolila dva zdroje 
Top 2000, \url{https://www.nporadio2.nl/top2000}, a~Top 40, \url{https://www.top40.nl/}. Podrobně zmiňuje spojení těchto dvou seznamů.
Z~R užívá stringdist, speciálně Full Damerau-Levenshtein distance (Levenshtein distance + transposition).
Píše o~přidání detailů nad rámec dat. 
V~tomto případě užila kolečka jako malé vinylové desky.
Líbí se mi zmínka o~\textit{%
%adding details, nad rámec dat, 
visual channels}, tedy o~možnostech dané grafiky.
%kolečka na vinylové desky, zvýraznění
Tento projekt zaměřila na vytištění, u~vykopírování přímo bere SVG nebo NYT SVG Crowbar, viz \url{https://top2000.visualcinnamon.com/img/Top2000PosterEnglish.png}.
Z~R dále užívá knihovny ggplot2 a~trend.
%, 18 editions of the Top 2000
Tento projekt pro ni znamená pracovní úspěch přes zveřejnění na LinkedIn.
Projekt je dostupný na 
\url{https://top2000.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{06-nadieh}}%

\kapitola{Data-Driven Revolutions}
Dance Dance Revolution (DDR) je formát na hudební kroky (přehrání např. od PS2).
%pro přehrání. % od PS2.
Zdrojem byl server DDR Freak, \url{http://www.ddrfreak.com/}.
Vytvořila si parsovač na soubory STP/DWI. Zmínila inspiraci přes termín \textit{data art}, konkrétně TeamLab's Crystal Universe, \url{https://www.teamlab.art/w/dmm-crystaluniverse/}.
Objevil se zajímavý problém sazby na spirálu se stejnou vzdáleností mezi body. Odkazuje k~řešení na příspěvek Issac Kelly, \textit{Mark Equidistant Points on a~Spiral,} \href{https://www.issackelly.com/blog/2017/01/20/mark-equidistant-points-on-a-spiral}{\tt www.issackelly.com/blog/2017/01/20/mark-equidistant-points-on-a-spiral}. 
Projekt je dostupný na
\url{http://shirleywu.studio/ddr/}.

\noindent
\fbox{\includegraphics[trim=0 6cm 0 7cm, clip, width=\delka]{06-shirley-big}}%


\section{Nostalgia, January 2017} % 7

\kapitola{All the Fights in Dragon Ball Z}
Nadieh zvolila anime. Zdrojem dat byla stránka Dragon Ball Wiki, \url{https://dragonball.fandom.com/wiki/Main_Page}.
Příjemně překvapila různou silou linky u~křivek, konkrétně v~tomto případě u~oblouků. Technicky jde o~dvě křivky (směr tam a~zpět), které vytvoří uzavřený útvar.
%různá síla linky u~křivky
Navíc technicky dokázala dokreslit minimapu celé grafiky.
Oblouk kladných postav jde doleva (Protagonists), záporných postav doprava (Antagonists).
Projekt je na \url{http://dragonballz.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{07-nadieh}}%

\kapitola{The Most Popular of Them All}
Shirley zvolila příspěvky ze serveru fanoušků \url{https://harrypotterfanfiction.com/}. Původní knihy neriskovala skrz autorská práva.
Na stažení a~předzpracování dat užívá knihovny http a~html2json při Node.js. 
Inspiraci zmiňuje z~článku The Pudding: \textit{The Shape of Slavery,} \url{https://pudding.cool/2017/01/shape-of-slavery/}.
Kamarádka Catherine Madden jí vytvořila kresby postav.
Projekt byl na \url{https://shirleywu.studio/hpff}.

\noindent
\fbox{\includegraphics[width=\delka]{07-shirley}}%

\noindent
\fbox{\includegraphics[width=\delka]{07-shirley-hpff-clipped}}%


\section{Nature, February 2017} % 8

\kapitola{Marble Butterflies}
Inspirací ke kresbě motýlů byl server \textit{Gardens with Wings}, \url{http://gardenswithwings.com/} a~její pokusy s~mícháním barev jsou zmíněné na \textit{Color blending—infinity showcase}, \url{http://bl.ocks.org/nbremer/cbf61944aeb3204d3e4986ea645afc2b}.
V~knize padla jména umělců (Generative Artists) Jared Tarbell, \url{http://www.complexification.net/}, a~Anders Hoff, \url{https://inconvergent.net/}, speciálně jeho stránka \textit{Sand Spline}, \url{https://inconvergent.net/generative/sand-spline/}.
Za jazyk JavaScript byly zmíněny \url{https://soulwire.github.io/sketch.js/}, 
\url{https://github.com/bgrins/TinyColor} a~k~písmům \url{https://opentype.js.org/}. Projekt je na \url{https://marblebutterflies.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[trim=0 4.5cm 0 6.5cm, clip, width=\delka]{08-nadieh-big}}%

\kapitola{Send Me Love}
Data jsou od SFMOMA (San Francisco Museum of Modern Art) a~projekt \textit{Send Me SFMOMA} přes rozhraní SFMOMA API. Za nástroje byl zmíněn sentiment u~Node.js.
%: sentiment
%Shannon Entropy, SFMOMA API
Ze zdrojů a~kolem inspirace postupně došlo na %články
\href{https://tylerxhobbs.com/essays/2017/a-generative-approach-to-simulating-watercolor-paints}{\tt https://tylerxhobbs.com/essays/2017/a-generative-approach-to-simulating-watercolor-paints},
\href{https://twitter.com/tylerxhobbs/status/959178572375232517}{\tt https://twitter.com/ty\\lerxhobbs/status/959178572375232517},
dále na
\href{https://github.com/rolyatmax/watercolor-canvas}{\tt https://github.com/ro\\lyatmax/watercolor-canvas},
\textit{A~Complete Guide to Grid;} část \mbox{CSS-Tricks,} \url{https://css-tricks.com/snippets/css/complete-guide-grid/} a
tutori\-ál Dana Shifmana, \textit{Introduction -- Perlin Noise and p5.js}, \url{https://www.youtube.com/watch?v=Qf4dIN99e2w}. V~technické části se objevují termíny Shannon entropy, web workers a~carousel format.
Vytvořila si u~tohoto projektu pohlednice.
Projekt je dostupný na \url{https://send-me-love.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{08-shirley}}%


\section{Culture, March 2017} % 9

\kapitola{Beautiful in English}
U~tohoto projektu spolupracovaly s~\href{https://newsinitiative.withgoogle.com/google-news-lab}{Google News Lab}, kariérní mezník pro obě autorky. 
Cíl Nadieh: Co lidé častokrát z~jiných jazyků překládají, jaké jsou nejčastější slova. Zaměřila se na podstatná a~přídavná jména. Užila OpenNLP v~R, automatické označkování slov. Dávala si pozor na stejné slovo pro mužský a~ženský rod, užití synonym. 
Cíl je srovnání mezi 10 jazyky. Práci konzultovala s~\href{https://www.wiktionary.org/}{Wiktionary}. 
Projekt představuje 10 nejčastějších slov v~jazyku a~pak přes všechny jazyky (bodový systém). 
V~anotaci přes d3-annotation.js má slova z~\href{https://www.wiktionary.org/}{Google Trends}, užila animaci slov na křivkách i~celé grafiky plus vlastní návrh nadpisů. Místo běžného zmenšování/vrstvení objektů užila design z~kruhu (monitor) na obdélníkový (mobilní verze). Byl to pro ni placený projekt na jinak nezískatelných datech.
Je dostupný na \url{http://www.beautifulinenglish.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{09-nadieh}}%

\kapitola{Explore Adventure}
Za inspiraci byli zmíněni Alberto Cairo a~Simon Rogers, \textit{Accurate, Truth \& Beauty,} \url{https://truth-and-beauty.net/}.
Byla to Shirley první spolupráce s~další osobou (subdodavatelem): stažení a~úprava dat. Užila \href{https://developers.google.com/knowledge-graph}{Google Knowledge Graph}. Podařila se jí práce s~mapami, vhodné zařazení animace a~bonusové grafiky (papírová vlaštovka).
Za inspiraci: Datawrapper, \textit{What to Consider When Creating a~Pie Chart}, 
\href{https://academy.datawrapper.de/article/127-what-to-consider-when-creating-a-pie-chart}{\tt https://academy.\\datawrapper.de/article/127-what-to-consider-when-creating-a-pie-\\chart}, 
GSAP (\href{https://greensock.com/gsap/}{Greensock Animation Platform}) a~příspěvek Zan Armstrong, \textit{Why choose? Scrollytelling \& Steppers},
\href{https://medium.com/@zanarmstrong/why-choose-scrollytelling-steppers-155a59dd97fe}{\tt medium.com/@zanarmstrong/why-choose-scrollytelling-steppers-155a59dd97fe}.
Líbilo se mi užití termínu \textit{visual bug}. Tedy technicky je vše ve zdrojovém kódu v~pořádku, ale vizuálně vyskočila na obrazovku ulítlost.
Projekt je dostupný na serveru \url{http://explore-adventure.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{09-shirley}}%


\section{Community, April 2017} % 10

\kapitola{Breathing Earth}
Zdrojem dat byl server NOAA STAR, \url{https://www.star.nesdis.noaa.gov/smcd/emb/vci/VH/}, na otevření souborů typu HDF a~\mbox{GeoTIFF} použila GDAL, přesněji rgdal v~R. Jedná se o~technický projekt, kdy se snažila stejný výstup získat přes Canvas HTML5, Pixi.js (sprites) a~WebGL (GLSL, shaders, regl a~three.js), a~to tak, aby jí fungovala poloprůhlednost, antialiasing kruhů a~násobení barev. To se jí nakonec podařilo.
%pixi.js -> sprites
%regl, three.js
%chroma.js
%webgl, GLSL and shaders
%opacities, antialiasing circles a~multiply
Zdrojů zmiňuje nespočet, zde jsou některé vybrané:
Peter Beshai, \textit{Beautifully Animate Points with WebGL and regl}\footnote{\href{https://peterbeshai.com/blog/2017-05-26-beautifully-animate-points-with-webgl-and-regl/}{\tt https://peterbeshai.com/blog/2017-05-26-beautifully-\\animate-points-with-webgl-and-regl/}}, 
Adam Pearce, \textit{Regl demo}\footnote{\url{https://bl.ocks.org/1wheel/e025cbd91ac499d360a8b3346cb6f9e7}},
Alastair Dant, \textit{Pixi circle animation example}\footnote{\url{https://bl.ocks.org/rfow/55bc49a1b8f36df1e369124c53509bb9}},
Yannick Assogba, \textit{Animate 100,000 points with regl}\footnote{\url{https://bl.ocks.org/tafsiri/dba04b04ae949760f96f97a2fba23ba6}},
Alastair Dant, \textit{ReGL circle animation example}\footnote{\url{http://bl.ocks.org/rfow/39692bd181fb1eb0b077a4caf886b077}},
Robert Monfera, \textit{Shapes and WebGL tweening}\footnote{\url{http://bl.ocks.org/monfera/85aa9627de1ae521d3ac5b26c9cd1c49}} a
Ricky Reusser, \textit{Regl multiply blend weights}\footnote{\url{https://codepen.io/rsreusser/pen/YVRXzy?editors=0010}}.
Projekt je dostupný na \url{https://breathingearth.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[trim=0 5mm 0 0, clip, width=\delka]{10-nadieh}}%

\kapitola{655 Frustrations Doing Data Visualization}
Projekt zpracovává dotazník Data Visualization Survey z~roku 2017\footnote{\href{https://medium.com/visualizing-the-field/655-frustrations-doing-data-visualization-e1087c8176fc}{\tt https://medium.com/visualizing-the-field/655-frustrations-\\doing-data-visualization-e1087c8176fc}}. Zdrojem dat je tento soubor\footnote{\url{https://github.com/data-visualization-society/data_visualization_survey/blob/master/data/cleaned_survey_results_2017.csv}}. Zajímavá byla úvaha seskupování odpovědí do logických bloků.
Je zmíněn nástroj Vega-lite. Líbila se mi zmínka na \textit{visual metaphors}, v~jejím projektu, když je frustrace (vysázet níž), a~když je něco pozitivního (vysázet výš).
Projekt je dostupný na \url{http://shirleywu.studio/community/}.

\noindent
\fbox{\includegraphics[width=\delka]{10-shirley}}%


\section{Myths \& Legends, May+ 2017} % 11

\kapitola{Figures in the Sky}
Tady se Nadieh vytáhla. Ačkoliv předposlední projekt, skončila s~tímto nakonec. 
Na stahování užila rvest v~R a~na prototypování \href{https://quickdraw.withgoogle.com/}{Google Quickdraw}. Zaměřila se na souhvězdí a~data přebrala z~programu \href{https://stellarium.org/}{Stellarium}, složky \texttt{/skycultures/}.
%Stellarium skycultures folder: https://github.com/Stellarium/stellarium/tree/master/skycultures
Udělala si parsovací program a~napojila dostupné na databázi HYG přes tzv. Hipparcos star ID (HIP).
Více viz \textit{Stellarium User Guide}, \url{https://github.com/Stellarium/stellarium/releases/download/v0.19.1/stellarium_user_guide-0.19.1-1.pdf}, 
databáze HYG, \url{https://github.com/astronexus/HYG-Database}.
%a : HYG database <-> Stellarium
Aby toho nebylo málo, musela ještě sáhnout po \textit{List of proper names of stars}, \url{https://en.wikipedia.org/wiki/List_of_proper_names_of_stars} a
stránce \textit{Universe \mbox{Guide}}, \url{https://www.universeguide.com/star/atlas}.
Jako šablonu užila dva zdroje: Mike Bostock, \textit{Star Map}, \url{https://observablehq.com/@mbostock/star-map} a~Matteo Abrate, \textit{Sky}, \url{http://bl.ocks.org/nitaku/9607405}.
Projekt je na \url{https://figuresinthesky.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{11-nadieh}}%

\kapitola{Legends}
Shirley si zkusila práci ve 3D. Konkrétně zobrazila nositele Nobelovy ceny jako hvězdy a~nositelky jako diamanty.
Za inspirační zdroje zmínila: The Pudding, \textit{What Does the Path to Fame Look Like?} \url{https://pudding.cool/2018/10/wiki-breakout/} a
Rebecca Chaperon, \textit{Crystals}, \url{https://www.thechaperon.ca/gallery/crystals}. Pracovala s~Wiki.js a~Three.js.

Vedle toho poukázala na Matt DesLauriers, \textit{Frontend Masters}, \url{https://frontendmasters.com/teachers/matt-deslauriers/},
Matsuda \& Lea, \textit{WebGL Programming Guide}, \url{https://sites.google.com/site/webglbook},
Patricio Gonzalez Vivo, \textit{The Book of Shaders}, \url{https://thebookofshaders.com/} a~také experiment Raoula v. R.,
\href{https://vanruesc.github.io/postprocessing/public/demo/#bloom}{\tt vanruesc.github.io/postprocessing\\/public/demo/\#bloom}.
Zároveň projekt podpořila fyzickou výrobou kvítků místo diamantů.
Projekt je na \url{http://shirleywu.studio/legends/}.

\noindent
\fbox{\includegraphics[width=\delka]{11-shirley}}%


\section{Fearless, June+ 2017} % 12

\kapitola{An Ode to Cardcaptor Sakura}
Nadieh sáhla po anime ještě jedenkrát. Tentokrát se zaměřila na zpracování obrazu. %image data analysis
Zdrojem dat byla stránka \textit{Cardcaptor Sakura Wiki}, \url{https://ccsakura.fandom.com/wiki/Books#Artbooks}
V~R použila imager a~zkusila dosáhnout tiskařského CMYK efektu. Jedná se o~rotaci tiskařských desek %s tečkami 
a~docílení vizuálního klamu všech barev na papíře.
Za inspiraci zmiňuje stránky:
Noah Veltman, \textit{CMYK Halftone Printing}, \href{https://bl.ocks.org/veltman/50a350e86de82278ffb2df248499d3e2}{\tt bl.ocks.org/veltman/50a350e86de82278ffb2df248499d3e2},
 Patrick Matte, \textit{\mbox{Color} Halftone Filter}, \url{http://www.patrickmatte.com/?p=352} a
též autora s~přez\-dívkou \href{https://ucnv.org/}{ucnv}, \textit{Canvas Halftoning}, \url{https://gist.github.com/ucnv/249486}.
Projekt je na 
\url{https://cardcaptorsakura.visualcinnamon.com/}.

\noindent
\fbox{\includegraphics[width=\delka]{12-nadieh}}%

\kapitola{One Amongst Many}
Společný projekt Shirley a~dvou spolužaček (Tina Rungsawang, Christina Dacanay) v~magisterském programu na ITP NYU.
Jedná se o~instalaci a~představení významných žen, experimenty s~Arduinem a~NeoPixel ledky.
%
Inspirací jim byl projekt Judith G. Levy, \textit{Memory Cloud},
\href{https://judithglevy.com/section/421361-Memory-Cloud-1-Indianapolis-Museum-of-Art-an-interactive-installation.html}{\tt https://judithglevy.com/section/421361-Memory-Cloud-1-Indianapo\\lis-Museum-of-Art-an-interactive-installation.html}.
Studentky k~to\-mu napsaly blogy s~bohatou fotodokumentací:
Tina Rungsawang, \url{https://tina.pizza/one-amongst-many} a
Christina Dacanay, \textit{One Amongst Many— Connecting Women in Computing},
\href{http://www.cdacanay.com/itp-blog/2019/12/23/one-amongst-many-connecting-womxn-in-computing}{\tt http://www.cdacanay.com/itp-blog/20\\19/12/23/one-amongst-many-connecting-womxn-in-computing}.
V~pozadí Shirley použila D3.js, Three.js, Greensock a~Vue.js.
Projekt je dostupný na \url{https://oneamongstmany.com/}.

\noindent
\fbox{\includegraphics[trim=0 26mm 0 0, clip, width=\delka]{12-shirley}}%


\section*{Interview with Series Editor \href{https://dfp.ubc.ca/people/team/tamara-munzner}{Tamara Munzner}}

Závěrečná kapitola je rozhovor editorky nakladatelství \href{https://www.taylorfrancis.com/books/data-sketches-nadieh-bremer-shirley-wu/10.1201/9780429445019}{CRC Press} s~autorkami.
%
U~této knihy se to ukázalo v~plné kráse: ženy jsou pečlivější, svědomitější, plné nápadů, kriticky k~sobě ostřejší, jazykově vytříbenější, mají silnější motor k~dosažení cíle, s~lehkostí jim vlastní dokáží komunikovat a~spolupracovat s~dalšími lidmi. %Kam my muži se na ně hrabeme, dodávám s~úsměvem. 
1. vydání z 9.\,2.\,2021. DOI: \url{https://doi.org/10.1201/9780429445019}, eBook ISBN 9780429445019, 428~stran.

\enlargethispage{1\baselineskip}

\section*{Závěrečné postřehy}
%\enlargethispage{\baselineskip}

\kapitola{Mínusy}
V~PDF nejsou odkazy automaticky klikatelné. Takže se musely vykopírovávat.
Řada odkazů již nefunguje, častokrát skrz divis$\rightarrow$mezera a~ligatury ff, fl, fi ad., kdy druhé písmenko vypadlo. Či se odkaz úplně změnil.
To jsou však drobnosti, které knize neubírají na významu. 

\kapitola{Plusy}
Čtení knihy jsem si rozložil na tři dny, recenzi na další tři, šlo to samo.
Získávání zpětné vazby přes webové zveřejnění. 
Dotazování se komunity, pokud něco technicky nevěděly.
Každý hotový projekt je okomentovaný, jak jej číst a~co vše umí, obvykle v~části \textit{How to read this visualization}. To častokrát na první pohled není zřejmé, především u~anotací a~další interakce se čtenářem.
V~poznámkách na boku stran knihy jsou postřehy autorek: ohlednutí po letech nazpět.
Nadieh častokrát zmínila počet hodin strávených nad projektem. Ale přiznává, že se jednalo spíš o~odhady, že se občas zamyslela a~zapomněla si zapnout hodiny.%
%\medskip

Zaslouženě získaly v~2019 zlatou cenu v~kategorii \textit{Unusual,} \url{https://www.informationisbeautifulawards.com/news/269-the-winners-unusual}. 

Klobouk dolů, dámy! Knihu samozřejmě nemohu nedoporučit! V~duchu knihy skončím slovy (Připravit, pozor, teď!): \textit{Data, design, code!} $(\widehat{\ }\_\widehat{\ })/\!\!\sim\sim\sim$

\vfill

\noindent
\fbox{\includegraphics[trim=0 22mm 0 22mm, clip, width=\delka]{13}}%

