3f:null 40:["$","title",null,{"children":"Introduction to HTML | aminehd | Observable"}] 46:[] 44:{"id":"bc579732f3a97bb9","slug":"introduction-to-html","title":"Introduction to HTML","thumbnail":"9a4fbb03f4ca2da757bbfbefbd5483902234461d3e6707c0f9c97a09be360198","access_level":"public","create_time":"$D2020-01-27T01:45:50.234Z","update_time":"$D2020-01-27T03:16:10.902Z","view_time":null,"first_public_time":"$D2020-01-27T02:33:58.472Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5d840e5bd3c0dbe0","login":"aminehd","name":"","avatar_url":"https://avatars-next.observableusercontent.com/771dffe7d949f9dc5cd371e11f7b3218c07fafce656a607e1119c873ee988aa3","tier":"starter_2024","bio":"","following":false},"version":706,"publish_version":706,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfef64ad3654fac4","login":"aminehd","name":"","avatar_url":"https://avatars-next.observableusercontent.com/771dffe7d949f9dc5cd371e11f7b3218c07fafce656a607e1119c873ee988aa3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bfef64ad3654fac4","login":"aminehd","name":"","avatar_url":"https://avatars-next.observableusercontent.com/771dffe7d949f9dc5cd371e11f7b3218c07fafce656a607e1119c873ee988aa3","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\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":636,"value":"d3.interpolateRainbow(8.9);","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 \n for (let distance = 8; distance < 128; distance += 8) {\n let loc = position(distance, project_to( now, distance ) )\n context.beginPath();\n context.arc( loc.x, loc.y, 4, 0, project_to(now, 2 * Math.PI));\n context.fillStyle = d3.interpolateRainbow(distance / 100);;\n \n context.fill();\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":561,"value":"// project input x to a number less than p\n// z is mapped to zero\nfunction project_to(x, p, z= 1000 ){\n x = (x / z) * 2 *p;\n x = x % (2 * p);\n if( x > p ){\n return 2 * p - x;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"function position(distance, time){\n var pos = {}\n pos.x = Math.sqrt( distance * distance - time* time);\n pos.y = time;\n return pos;\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":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.