31:T63a, ### 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 992 pixel width (Observable's global `width` variable after the Notebooks 2.0 update, 954 pixel width in earlier notebooks) and may break or look weird if you make your window narrower than that. Maximize your browser for best results. - Notice the menu of icons at the upper-right-hand corner of the Observable window. The paperclip icon includes a list of all the files attached to this notebook, and you can download or replace files there (in your own notebooks). There's also a gear icon, which you can use to publish your page and make it accessible to the outside world. 32:T919, 33:Ta33, ### 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 structured 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 `