31:[] 2f:{"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"},{"id":22,"value":"html`

I am a paragraph element!

`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":42,"value":"md`Even better, you can write Markdown:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`I, too, am a *paragraph* element.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":460,"value":"md`My favorite number is ${Math.random() * 100 | 0}.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":492,"value":"md`I like Markdown for prose, but ${tex`\\KaTeX`} for math.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":323,"value":"md`The current time is ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":457,"value":"md`Or, as SVG:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":582,"value":"d3.range(8, 128, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":348,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"{\n // Create a square

I am a highlighted paragraph.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`Use caution when applying global styles: if a style affects a cell’s height, the runtime may not notice unless the affected cell is re-evaluated. For example, if you edit the *highlight* cell above to have a font-size of 128px, the highlighted paragraph immediately gets bigger but the following cells aren’t repositioned. Likewise, avoid [floats](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Floats) or remember to clear them! (You can explicitly tell the runtime to recompute cell heights by dispatching a *load* event, but it shouldn’t be necessary in most cases.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`A cell can return a DOM element that’s already being displayed somewhere else on the page. In this case, the value inspector is used, rather than showing the element inline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"slider // This slider is already visible above!","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`While this notebook only gives a cursory overview of the type of content you can put in an Observable notebook, hopefully it gives a sense of the panoply of options afforded by the modern web.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}