31:T5c9,conventions = md` ----- ### Tutorial Conventions As this is the first *coding* tutorial, let us set up some conventions: - *italics* will be used for emphasis, and **bold** is reserved for introducing important vocabulary terms. - Code that is left **pinned** and visible is intended to be directly experimented with as part of the tutorial. Code/Markdown that is **unpinned** and hidden is still definitely available for your experimentation too, but is probably uninteresting. - Referenced code in text will be styled in a \`monospaced font\` in longform text. - Menu item titles or button names in GUI programs like Adobe Illustrator or Excel will be surrounded with "double quotation marks". Submenu navigation items will be introduced with an arrow like this ->. - All [links](#conventions) are designed to be followed for more nuance and technical content, though anything essential will be covered directly in the Observable text. Please view the linked content if you can! - All visual elements in Observable are designed at 1152 pixel width (Observable's global \`width\` variable max) and may break or look weird if you make your window narrower than that. Maximize your browser for best results. - Notice the menu in the upper-right-hand corner of the Observable window. There, you will find useful shortcuts to tools for navigating Observable documents, including the one that looks like a "z"-shaped bezier curve, which reveals code cell **dependencies**. `32:T921, 33:T8ba,svg_elements = md` ### SVG Elements and Relationships The first thing that you probably noticed when looking at this SVG code is that almost every line in SVG is surrounded by angle brackets like so \`< ... >\`, and this will perhaps remind some of you of writing HTML code. SVG and HTML are both related to a programming standard called [XML](https://en.wikipedia.org/wiki/XML), which defines a shared linguistic syntax for creating any sort of web content. We sometimes encounter datasets prepared in this XML format, and it is kind of a pain to deal with. Dizzy with all the abbreviations yet? This angle bracket structure, called a **tag**, create an entity on the web page, and we call these entities **elements**. In this short code snippet, we see an **element** created for the \`

\n\n\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"[Yoko Ono](https://en.wikipedia.org/wiki/Yoko_Ono), often [unfairly maligned](https://www.newyorker.com/magazine/2022/06/20/yoko-onos-art-of-defiance) for \"Breaking up the Beatles\", was an avant-garde artist well before meeting John Lennon. Like Sol Lewitt, her works are similarly defined by a set of instructions, though her [procedural works](https://www.moma.org/artists/4410) often instead propose performances, contemplative and transient actions, lengthy behavior change experiments, and poetic textual outputs. \n\nHer work is a useful model for how designers might now collaborate with advanced media generating AI models like [Dall-E](https://openai.com/blog/dall-e/) as they advance into [time-](https://www.synthesia.io) and [experience-based](https://modl.ai) media.","pinned":false,"hidden":false,"mode":"md"},{"id":1192,"value":"\n\n

\n\n

\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1075,"value":"$39","pinned":false,"hidden":false,"mode":"md"},{"id":662,"value":"appendix = md`\n-----\n\n### Appendix\nDisregard everything below, this is just some code for the managing the footnote interlinking and visualization above.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"footnote = (referencingCellName, number, text) => {\n return html`

^ ${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}