2d:null 2e:["$","title",null,{"children":"Week 1 : Programmatic Images | Zach Pino | Observable"}] 33:Tcfc,homework_summary = md` ----- ### Homework due 9/2 Please log your time working on these assignments, and if you find yourself spending more than 8 hours total on this work this week, **stop** and let Zach know. As this is new content, presented in a new medium, in a newish classroom model — we will need some time to calibrate the workload. Note the time estimates provided below. ##### Logistics (~30 minutes) - Read the [Syllabus](https://observablehq.com/@zachpino/iit-institute-of-design-data-viz-workshop?collection=@zachpino/id-iit-fall-2020-data-visualization-workshop) and log any questions. - Create a free [Observable](https://observablehq.com/) account. ##### Technical Learning (~4.5 hours) - Read through this short [Intro to Observable](https://observablehq.com/@observablehq/a-taste-of-observable). Much of it will be confusing, but it is nice to see the powerful features available to us before we get started. After that, you may also want to check out this nice [summary page](https://observablehq.com/@jaynel/markdown-summary) showing how to style explanatory text in Observable cells using Markdown. - Work through this whole page [tutorial](#conventions), and complete the [SVG solar system challenge](#svg_drawing_challenge) described below. ##### Exposure (~2.5 hours) - Try to build a sustainable (and beautiful!) ecosystem in [Orb.Farm](https://orb.farm). Record any thoughts and experiences, and prepare for class discussion and sharing of your virtual [terrarium ecosystem](https://en.wikipedia.org/wiki/Terrarium). Diagram out on paper all of the interactions in this virtual ecosystem. How does one *lose* or *win* this game? Can you *cheat*? - Listen to this [DataStori.es podcast](https://datastori.es/161-people-of-the-pandemic-with-shirley-wu/) with data visualizer Shirley Wu. She discusses her new COVID simulation/model/game [*People of the Pandemic*](https://peopleofthepandemicgame.com). Play it! - Visit all of the *key references* listed on our *Week 1* Miro board, and spend some time browsing and playing especially with the examples at [Pudding.cool](https://pudding.cool), [538](https://fivethirtyeight.com), and [Nicky Case's site](https://ncase.me). Choose a single interactive experience, research it, and prepare to present and review it informally to your peers in small group discussion next week. Consider the legibility, persuasiveness, educational value, memorability, aethetics, and interaction design qualities. Would you have done anything differently if you were visualizing the same data? ##### Ongoing Work (~30 minutes) - In the class Shared Google Drive (called \`Data Visualization Workshop - Fall 2020\`, note two important Google sheets. Both will be ongoing projects: one is a *glossary* of new terms, and the other a list of *open questions* that we have not been able to answer with satisfaction just yet. Please, everyone, add freely to both! We will start class in these documents next week. - Keep track in a bookmark folder any interesting data visualizations or interactive data experiences that you encounter. When we have any free time, we can share cool examples with one another! - Let Zach know how he can improve these tutorial things! - Join Zach on Friday afternoon or Monday morning if you have any questions or want to chat. ----- `34:T42f,conventions = md` ### Tutorial Conventions For consistency and clarity in these Observable tutorials... - *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. - Referenced code in text will be styled in a \`monospaced font\`. - All [links](#) 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 800 pixel width, and may break or look weird if you make your window narrower than that. Maximize your browser for best results. - Notice in the upper-right-hand corner of the observable window a set of dots. These are links to various key points in the tutorial below — treat it like a Table of Contents. ----- `35:T929,html` `36: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 \`

^ ${text}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 32:"$31:body"