3e:null 3f:["$","title",null,{"children":"Introduction to HTML -- 4 GES | pbogden | Observable"}] 45:[] 43:{"id":"270d5c9c33cfedac","slug":"introduction-to-html-4-ges","title":"Introduction to HTML -- 4 GES","thumbnail":"3ab8098f8618fa16d0f549136cd38a1b765ae96da973df82a18eacbb0403d8cf","access_level":"public","create_time":"$D2021-02-11T00:40:35.549Z","update_time":"$D2021-02-11T01:20:30.541Z","view_time":null,"first_public_time":"$D2021-02-11T00:41:01.996Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":"starter_2024","bio":""},"version":600,"publish_version":600,"role":null,"authored":false,"authors":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null,"bio":""}],"members":[{"type":"individual","id":"e151b61ef71fc904","login":"pbogden","name":"pbogden","avatar_url":"https://avatars-next.observableusercontent.com/7691d2facf985b942cdf89fa28273672d4b7fb060b62cab329e61adce36a44b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"0d59e4818c79a290","slug":"ges","title":"ges","owner":{"id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden"}},"type":"notebook","body":{"titling":"auto","title":"Introduction to HTML -- 4 GES","cells":[{"id":0,"value":"md`# Introduction to HTML -- 4 GES\n\nIn the [introduction to code](/@observablehq/introduction-to-code), we looked at cells that return data structures such as numbers, strings, arrays and objects. But what if we want an interactive visualization? Or for that matter, just some text?\n\nIf a cell returns a DOM element, that DOM element is displayed as-is!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`

I am a paragraph element!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`Or using the W3C DOM API directly (not that you should—it’s quite verbose):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"{\n const p = document.createElement(\"p\");\n p.appendChild(document.createTextNode(\"I am also a \"));\n p.appendChild(document.createElement(\"i\")).appendChild(document.createTextNode(\"paragraph\"));\n p.appendChild(document.createTextNode(\" element!\"));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Even better, you can write Markdown:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`I, too, am a *paragraph* element.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Markdown supports a variety of styles and structural elements, such as lists and tables. See [GitHub’s guide to Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) for more. \n\nSince all cells in Observable are JavaScript—a “Markdown cell” is just a JavaScript cell of a Markdown [tagged template literal](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals)—Markdown and HTML cells can be dynamic: you can embed expressions \\`\\${…}\\` in template literals. For example, the favorite number below is randomly generated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`My favorite number is ${Math.random() * 100 | 0}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`Embedded expressions can also be DOM nodes. This lets you embed dynamic content, such as little charts in SVG or mathematical notation in LaTeX, within Markdown.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`I like Markdown for prose, but ${tex`\\KaTeX`} for math.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`And of course, Markdown can be reactive, too! The \\`now\\` built-in from the Observable [standard library](/@observablehq/standard-library) is a reactive variable whose value is the current time. So, embedding a reference to \\`now\\` causes the Markdown to re-evaluate continuously:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`The current time is ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`You can manipulate DOM generated from Markdown with JavaScript, say to mix dynamic and static content. The text below cycles through D3’s rainbow scheme.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`Another common type of dynamic content is Canvas. The standard library method DOM.context2d returns a CanvasRenderingContext2D of the specified width and height (and automatic scaling for high-resolution displays). Draw to the context, and then return the canvas to display it in the notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`Or, as SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"{\n // styling with CSS\n const container = html``;\n \n const data = [8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120];\n \n const circles = data.map(radius => svg``)\n \n circles.forEach(circle => container.appendChild(circle));\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"d3.range(8, 128, 8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`Often you’ll use a helper library such as [D3](https://d3js.org) to generate dynamic content. We’ll cover third-party libraries in more detail later in the introduction, but here’s a quick example generating colorful concentric circles in SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"{\n // Create a square

I am a highlighted paragraph.