2a:null 2b:["$","title",null,{"children":"Introduction to HTML | T3L35 | Observable"}] 30:[] 2e:{"id":"4cd7804667b85ebf","slug":"introduction-to-html","title":"Introduction to HTML","thumbnail":"babdc0fcc5b312cdd15b3537cb62dd14d8e11cc7c819ddbd3c5c0689a2b8c718","access_level":"public","create_time":"$D2020-09-17T15:16:14.086Z","update_time":"$D2020-09-19T14:55:04.902Z","view_time":null,"first_public_time":"$D2020-09-19T14:51:13.239Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1f2c6bd35a10718f","login":"tlsgit","name":"T3L35","avatar_url":"https://avatars-next.observableusercontent.com/a73185564e83b5b6e500c4d8e70253a9ab0dc783f6e830cfbb250636d3b89992","tier":"starter_2024"},"version":50,"publish_version":50,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bba73788a51f4ec","login":"tlsgit","name":"T3L35","avatar_url":"https://avatars-next.observableusercontent.com/a73185564e83b5b6e500c4d8e70253a9ab0dc783f6e830cfbb250636d3b89992","tier":null}],"members":[{"type":"individual","id":"0bba73788a51f4ec","login":"tlsgit","name":"T3L35","avatar_url":"https://avatars-next.observableusercontent.com/a73185564e83b5b6e500c4d8e70253a9ab0dc783f6e830cfbb250636d3b89992","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to HTML","cells":[{"id":0,"value":"md`# Introduction to HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`

I am a paragraph element!

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`I, too, am a *paragraph* element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`My favorite number is ${Math.random() * 100 | 0}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`I like Markdown for prose, but ${tex`\\KaTeX`} for math.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function sparkline(values, width = 64, height = 17) {\n const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3.line().x((d, i) => x(i)).y(y).context(context);\n context.beginPath(), line(values), context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`The current time is ${new Date(now).toLocaleTimeString()}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\n const p = md`Less-angry rainbows are the *best* rainbows.`;\n p.style.color = d3.interpolateRainbow(now / 1000);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n const context = DOM.context2d(128, 128);\n for (let radius = 8; radius < 128; radius += 8) {\n context.beginPath();\n context.arc(0, 0, radius, 0, 2 * Math.PI);\n context.stroke();\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"{\n // Create a square