{%hackmd @siusoon/slide-style %} ### Diagramming Research Geoff Cox and Winnie Soon @ Digital Visual Studies, University of Zurich, Feb 2022 <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_03.jpg" width="700"> ---- ### schedule and note-taking https://ctp.cc.au.dk/pad/p/diagramming ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_03.jpg" width="700"> ---- ### premise As a form of visual knowledge, diagrams are broadly understood as representational resources useful for their problem-solving and explanatory capabilities, helping to define, communicate and illustrate problems and possible solutions. Flowcharts, for instance, have been used as tools since the early days of computer programming to communicate complex logic, and/or to visualize the steps to solve computational problems and further act as a schematic for later programming tasks. But what about their potential to operate outside of representation, as tools for problem-posing rather than problem-solving? Here we come close to theorising the diagram as an ‘abstract machine’ - a material assemblage of marks and lines of thought, a map of dynamic relations, where different knowledges collide (to paraphrase Deleuze). As such it might be tempting to dismiss graphical visualisation software as lacking this speculative and conceptual dimension. Yet, instead of privileging one tendency over the other, we are interested in combining these different ideas and approaches in this workshop, and to consider the potential of software as coming closer to a drawing practice. In this way, more like a sketch, the diagram becomes a means to scramble knowledge that is pregiven, to allow for the unknown to emerge, and to suggest further lines of research inquiry. ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_05.jpg" width="800"> <span class="ref">https://laurarosser.com/works/</span> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/Rosser-diagram.jpg" width="800"> ---- <img src="https://i.pinimg.com/originals/fb/26/9d/fb269ddbc25e322ad038b9fe4fce95c2.gif" width="500"> <span class="ref">Marcel Duchamp, *The Bride Stripped Bare by Her Bachelors, Even (The Large Glass)* (1915-23)</span> ---- The diagram is an 'abstract machine' that can offer a way to read the cartography of forces in opposition, where different knowledges collide. It is a material assemblage of marks and lines of thought, a map of dynamic relations. To Deleuze, diagrams have no intrinsic connection to visual representations and also, more importantly, “the problem-solving activity in which diagrams are involved is not necessarily performed by humans or robots, but may be instantiated in even simple material and energetic systems.” There is an “objective existence of problems (and their diagrams)” in the matter and form of things in the world: “matter is already pregnant with morphogenetic capabilities, therefore capable of generating form on its own.” ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/Kenning-flowchart.jpeg" width="500"> <span class="ref">Dean Kenning, *Jackson 5 Flowchart* (2017), A4, marker pen on paper</span> ---- When it comes to machine learning, "coding changes from what we might call symbolic logical diagrams to statistical algorithmic diagrams." He refers to Deleuze's suggestion that diagrams act "as a display of the relation between forces that constitute power [... and moreover] the diagram or abstract machine is the map of relations between forces, a map of destiny, or intensity." <span class="ref">Adrian Mackenzie, *Machine Learners: Archaeology of a Data Practice* (2017)</span> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_31.jpg" width="800"> ---- Deleuze and Guattari describe an "image of thought", in which thinking does not consist of problem-solving but on the contrary, thinking consists of "problem-posing, that is, in framing the right problems rather than solving them." "The diagrammatic or abstract machine does not function to represent, even something real, but rather constructs a real that is yet to come, a new type of reality." <span class="ref">Deleuze & Guattari, *A Thousand Plateaus: Capitalism and Schizophrenia* (1980)</span> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_33.jpg" width="800"> <span class="ref"> https://drawing-a-thousand-plateaus.tumblr.com/</span> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_41.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_39.jpg" width="800"> ---- "We are led to believe that problems are given ready-made, and that they disappear in the response or the solution… We are led to believe that the activity of thinking, along with truth and falsehood in relation to that activity, begins only with the search for solutions... According to this infantile prejudice, the master sets a problem, our task is to solve it, and the result is accredited true or false by a powerful authority... As if we would not remain slaves so long as we do not control the problems themselves, so long as we do not possess a right to the problems, to a participation in and management of the problems." <span class="ref">Deleuze, *Difference & Repetition* (1994)</span> ---- Draw your research project (try not to use any words, or only a few if you must) ---- "The hand-drawn nature of this kind of diagram is important [...] not least insofar as this necessarily involves a certain affect that accompanies any strictly conceptual work." <span class="ref">Simon O'Sullivan, "On the Diagram (and a Practice of Diagrammatics" (2016)</span> ---- "The diagram here is a strategy of experimentation that scrambles narrative, figuration - the givens - and allows something else, at last, to step forward. This is the production of the unknown from within the known, the unseen from within the seen. The diagram, we might say, is a strategy for sidestepping intention from within intention; it involves the production of something that then ‘speaks back’ to its progenitor.” ---- "A diagram, especially a drawing, often leads ahead of conceptual thought. It operates as a probe prior to any consistency (this we might say, is the diagram as sketch). The diagram can also move at another speed from, for example, writing, and as such can achieve an escape velocity from the purely textual (this, we might say, is the diagram as automatic writing). The speed of the hand (or intelligence of the body) can outrun the cogito (or, more simply, the diagram is of the unconscious, however the latter is figured)." ---- "One strategy to allow for this change in vision is to draw concepts (as diagrams) and then, perhaps, to allow the drawing itself to suggest further avenues of exploration." ---- "Might this diagrammatics also involve a different take on relations among the past, present, and future? This is the “drawing” of lines between different times, the building of circuits and the following of feedback loops; it is to understand time as specific to any given system (or practice) and not as neutral background." ---- ### (Computational) Flow Diagram <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_03.jpg" width="700"> ---- <img src="https://i.imgur.com/egFBKHx.png" width=600> > diagramming as a form of experimental practice, a way to spatialise, imagine and render relations (processes and flows) between ideas that are simultaneously concrete and abstract. ---- ### Flow of the chart -> Chart of the flow - Technical drawing (programming, engineering, architecture, etc) - Processes (e.g Data flow diagram, workflow diagram) - Characteristics: - Precision - Accuracy - Part of a larger network chain - processes/flows - spatial and temporal qualities ---- > "The Process Chart is a device for visualizing a process as a means of improving it. Every detail of a process is more or less affected by every other detail" - (Frank Bunker Gilbreth and Lillian Moller Gilbreth, 1921) ---- ### Software Development and Practice - Rooted in (large-scale) software development projects (60s) - Design schematic - critical task 1) analysis of the problem 2) development of the flowchart 3) translation of the flowchart into a programming language (understood by computers). - "Programmers must be able to draw and read flowcharts. Flowcharting is a necessary and basic skill for all programmers" (p. 331) <span class="ref">Ensmenger, Nathan. “The Multiple Meanings of a Flowchart.” *Information & Culture: A Journal of History* 51, no. 3 (2016): 321–51. https://doi.org/10.1353/lac.2016.0013.</span> ---- ### Flow charts in the 40s - early electronic computer <img src="https://i.imgur.com/cqC2NHU.jpg" width="850"> ---- ### Flow charts in the 40s <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Flow_chart_of_Planning_and_coding_of_problems_for_an_electronic_computing_instrument%2C_1947.jpg" width=400> <span class="ref">Flow chart of Planning and coding of problems for an electronic computing instrument (Goldstine and Von Neumann, 1947) </span> ---- ### Flow charts in the 60s <img src="https://aesthetic-programming.net/pages/ch10_1.png" width=700> <span class="ref">Basic flow diagram of keyword detection of ELIZA by Joseph Weizenbaum (1966)</span> ---- ### Drawing Flow charts in the 60s <img src="https://images.computerhistory.org/revonline/images/500004338-03-01.jpg?w=600"> <span class="ref">IBM programmer (ref: https://www.computerhistory.org/revolution/early-computer-companies/5/117/496)</span> ---- <img src="https://i.imgur.com/4403h4D.png" width=450> <span class="ref">IBM Data Processing Techniques - Flowcharting Techniques, White Plains, NY: IBM, ca 1963</span> ---- ### Beyond the representation Algorithmic thinking - abstract relations - what you know and don't know yet - The orderly and messy relations/becomings of things ---- ### Aesthetic Programming - ch. 4: flow charts <img src="https://gitlab.com/aesthetic-programming/book/-/raw/master/source/3-InfiniteLoops/ch3_0.svg" width=600> ---- ### Aesthetic Programming - TOC: flow charts <img src="https://gitlab.com/aesthetic-programming/book/-/raw/master/source/TOC.svg" width=400> ---- ### Aesthetic Programming - all: flow charts <img src="https://aesthetic-programming.net/pages/afterword.svg" width=850> <span class="ref">https://gitlab.com/aesthetic-programming/book/-/tree/master/source/11-Afterword_RecurrentImaginaries </span> ---- ### Diagramming - a practice for thinking and seeing <img src="https://i.imgur.com/O2TMveH.jpg" width="650" > <img src=" http://siusoon.net/projects/projects_mediaart/image/whatisanimage.svg" width="650" > <span class="ref">[What is an image?](https://hackmd.io/@siusoon/diagram) by Winnie Soon & Geoff Cox (2021) </span> ---- Task - Computing Flow Diagrams: 1. Explore diagramming as research method and experimental practice, as a way to spatialise, imagine and render relations between ideas that are simultaneously concrete and abstract. 2. The diagram becomes a means to scramble knowledge that is pregiven, to allow for the unknown to emerge, and to suggest further lines of research inquiry. Graphviz intro: https://hackmd.io/@siusoon/graphvizIntro Collaborative diagramming (DVS): https://hackmd.io/@siusoon/collaborativediagramming2 --- ## Practice of Diagrams and Flowcharts <img src="" height="50"> Geoff Cox & Winnie Soon <span class="ref">26-27 Jun 2021 @ transart institute</span> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_03.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_01.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_02.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_05.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_06.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_07.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_08.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_09.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_10.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_11.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_12.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_13.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_14.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_15.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_16.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_17.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_18.jpg" width="800"> ---- <img src="https://www.peacebiennale.info/blog/wp-content/uploads/2017/12/Fig-21.5-Baran_Diagrams-hi-res.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_19.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_20.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_21.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_22.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_23.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_24.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_25.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_26.jpg" width="800"> kkkkkkkkk ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_27.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_28.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_29.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_30.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_31.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_32.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_33.jpg" width="800"> <center><span class="ref"> https://drawing-a-thousand-plateaus.tumblr.com/ </span></center> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_34.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_36.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_37.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_38.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_39.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_40.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_41.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_43.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_44.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_45.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_46.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_47.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_48.jpg" width="800"> ---- <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_49.jpg" width="800"> <span class="ref"> !!! </span> ---- ## From flowcharts to diagrams <img src="https://siusoon.net/wp-content/uploads/2021/02/cover2-2.png" width=600> ---- ## Flowcharts  - Flow of the chart -> Chart of the flow - A type of a diagram <span class="ref">Pierrot, Peggy, Martino Morandi, Anita Burato, Christoph Haag, Michael Murtaugh, Femke Snelting, and Seda Gürses. The Techno-galactic guide to software observation. Brussels: Constant, 2018 </span> ---- ## A Baking algorithm "as a recipe, understood as a step-by-step guide that prescribes how to obtain a certain goal, given specific parameters. Understood as a procedure or method for processing data, the algorithm as recipe would be analogous to the operational logic for making a cake out of flour, water, sugar and eggs" ```graphviz digraph D { node[shape=box]; "procedure" -> "operational logic" ; "procedure" -> "flow of control"; } ``` <span class="ref">Bucher, Taina. *If...Then: Algorithmic Power and Politics.* Oxford University Press, 2018. </span> ---- ## Software Development and Practice - Rooted in (large-scale) software development projects (60s) - Design schematic - critical task 1) analysis of the problem 2) development of the flowchart 3) translation of the flowchart into a programming language (understood by computers). - "Programmers must be able to draw and read flowcharts. Flowcharting is a necessary and basic skill for all programmers" (p. 331) <span class="ref">Ensmenger, Nathan. “The Multiple Meanings of a Flowchart.” *Information & Culture: A Journal of History* 51, no. 3 (2016): 321–51. https://doi.org/10.1353/lac.2016.0013.</span> ---- <img src="https://gitlab.com/aesthetic-programming/book/-/raw/master/source/10-MachineUnlearning/ch10_1.png" width="600"> EXAMPLE: H: I know everybody laughed at me E: Who in particular are you thinking of? <span class="ref">Basic flow diagram of keyword detection of ELIZA by Joseph Weizenbaum (1966). </span> <!--chatbot - the logic of having a conversation with humans based on keywords identification and language appropriation for response generation--> ---- ## Representation - a step-by-step, English language description of the algorithm (Kunth 1963) - represent the conceptual structure of complex software systems (Ensmenger 2016) - a schematic representation of the logical structure of a computer program. (Ensmenger 2016) - a solution model to a given problem (typically) => Algorithmic thinking ---- ```javascript= let multi = ['🐵','🐭','🐮','🐱']; for (let species in multi) { console.log(multi[species]); } /*output 🐵 🐭 🐮 🐱 */ ``` ```graphviz digraph D { A [shape=circle; label="start";style=filled,color=lightgrey] B [shape=box; label="initialize\na list of emojis "] C [shape=diamond; label="loop through\n each emoji\n DONE?"] D [shape=circle; label="end";style=filled,color=lightgrey] E [shape=box; label="print/log the emoji\n (on the console screen)"] F [shape=box; label="go to\nthe next emoji"] G [label="", fixedsize="false", width=0, height=0, shape=none] //rank {rank = same; D, C} //graph A -> B [minlen=0.5]; B -> G [minlen=0.5,arrowhead=None]; G -> C [minlen=0.5]; C -> D [label="YES"]; C -> E [label=" NO",minlen=1]; E -> F -> G; } ``` ---- ### Standardization of flowchart symbols/vocabulary <img src="https://i.imgur.com/uzwQqLv.png" height="500"> <span class="ref">Gorn, S. “Conventions for the Use of Symbols in the Preparation of Flowcharts for Information Processing Systems.” Communications of the ACM 8, no. 7 (July 1965): 439–40. https://doi.org/10.1145/364995.364999.</span> ---- ## <img src="https://i.imgur.com/aSJSOYD.png" width=520> <span class="ref">Ensmenger, Nathan. “The Multiple Meanings of a Flowchart.” *Information & Culture: A Journal of History* 51, no. 3 (2016): 321–51. https://doi.org/10.1353/lac.2016.0013. </span> ---- ## A document for communication - Documentation - Blueprint (Kunth 1963, Ensmenger 2016) - Communication - "The flowchart serves as the central design document around which systems analysts, computer programmers, and end users communicate, negotiate, and represent complexity" (Ensmenger 2016) ---- ## Simple symbols for use <img src="http://lam-ictx.weebly.com/uploads/2/3/3/2/23323570/328197_orig.png" width=700> <span class="ref">http://lam-ictx.weebly.com/flowcharts.html</span> ---- ### Flowcharts in artistic projects (1) <img src="https://gitlab.com/aesthetic-programming/book/-/raw/master/source/9-AlgorithmicProcedures/ch9_2.gif" width="700"> Google will eat itself (2005), Cirio in collaboration with Alessandro Ludovico and UBERMORGEN ---- ### Flowcharts in artistic projects (2) Anatomy of an AI system by Kate Crawford and Vladan Joler (2018) https://anatomyof.ai/ ---- ### Flowcharts in artistic projects (3) <img src="https://gitlab.com/aesthetic-programming/book/-/raw/master/source/9-AlgorithmicProcedures/ch9_1.png" height="600"> [Vocable Code](https://dobbeltdagger.net/VocableCode_Educational/) by Winnie Soon ---- ## Diagramming - a practice for thinking - abstract relations - what you know and don't know yet - The orderly and messy relations/becomings of things <img src="http://siusoon.net/projects/finiteState_gallery_T2a_neato.svg" width="650"> <br> <span class="ref"> Recurrent Queer Imaginaries, Helen Pritchard & Winnie Soon </span> ---- ## Diagramming - a practice for thinking <img src="https://i.imgur.com/O2TMveH.jpg" width="650" > <span class="ref">[What is an image?](https://hackmd.io/@siusoon/diagram) by Winnie Soon & Geoff Cox </span> ---- ## Diagramming - a practice for thinking <img src="https://gitlab.com/xocffoeg/diagramming/-/raw/main/diagramming-transart2021_Page_03.jpg" width=700> - immediacy -> changing spatiality and relations - Demo ----