31:T5c2,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 954 pixel width (Observable's global \`width\` variable) and may break or look weird if you make your window narrower than that. Maximize your browser for best results. - Notice the set of vertical dots in the upper-right-hand corner of the Observable window. These are links to various key points in the tutorials — treat them like a Table of Contents with more information, since they also reveal code cell **dependencies**. `32:T929,html` `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":1075,"value":"md`\nUsing any of the SVG concepts introduced above, *create an SVG copy* of one of Sol Lewitt's work — either one of the examples above or any other of his works you can find in Google. Please record any reactions you have while going through this exercise and document your process on your Observable page. Did you use stroked lines? Rectangles? Fancy [blend modes](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)? So many possible approaches! You can easily [style rich text with Markdown in Observable](https://observablehq.com/@jaynel/markdown-summary) if you would like to have some text descriptions on your page.\n\nPrepare to share a copy of your SVG code with your peers next week.\n\nPlease do not use Illustrator! Hand-writing the code in an Observable cell will definitely aid your intuition as we continue into Javascript next week.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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":"$W39","stdlib":"1","titling":"auto"}