30:T909,blog_intro = md` Observable is the coolest. It has: * the best things about a coding notebook interface, like iPython or Jupyter * The editability and reactivity of a spreadsheet * the customizability and beauty of javascript and html * a massive library of examples It's a project by [Mike Bostock](https://bost.ocks.org/mike/) creator of [d3.js](https://d3js.org/). He's well known for some awesome interactive visualizations in the New York Times (like [Rent vs. Buy (2014)](https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html?_r=0). If somehow you're still skeptical, [Edward Tufte](https://en.wikipedia.org/wiki/Edward_Tufte) (author of the Data Viz bible: [The Visual Display of Quantitative Information](https://www.amazon.com/Visual-Display-Quantitative-Information/dp/1930824130)) [predicted](https://www.ft.com/content/dda1cb5c-f4c0-11e2-a62e-00144feabdc0) that Mike's work would be super important for the future of data visualization. I won't spend any more time extolling the virtues of Observable, since if you've found this page you're probably already familiar (if you do want examples and a quick intro, check out [this presentation](https://pcarleton.com/2019/09/01/do-it-live-with-observablehq-a-platform-by-the-creator-of-d3-js/), also [available in Spanish](https://observablehq.com/@pcarleton/hago-en-directo-con-observablehq)). It's quickly become my preferred way to start any kind of project, which has left my blog to gather dust. Fortunately, there are a couple ways to embed an observable notebook into another webpage. This will let me do my editing and coding in Observable, but still share on my blog so it's easier to discover and refer back to. This whole post was written in an observable notebook (fork it or give it a <3 [here](https://observablehq.com/@pcarleton/blog-test)) Here are some things you can do: 1. Embed the whole thing 2. Filter on certain pieces 3. Communicate back and forth with a notebook In the rest of this post, I'll go through the details of #1 and #2, and then I'll finish out with some really bad ideas around #3. In case you're just looking for the snippet for #1, it's right below (and here's the [official Observable page](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) about embeddding): `31:Ta68,//import {Scrubber} from "@mbostock/scrubber" function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); //disposal(form).then(stop); return form; }32:[] 2e:{"title":"Embedding Observable notebooks into a blog","cells":[{"id":47,"value":"// Make an H1 here because it becomes the title of this web page\nnotebook_only_title = md`# Embedding Observable notebooks into a blog`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"notebook_only_intro = html`

Read the blog post version here.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"blog_icon = {\n const svg = d3.select(DOM.svg(512, 512))\n .style('max-width', '100%')\n .style('height', '200px');\n\n let g = svg.append('g')\n .attr('transform', 'translate(512, 256) scale(0.7, 0.7)');\n \n let circles = g.selectAll('g.circle')\n .data(L)\n .enter()\n .append('g')\n .attr('transform', c => `translate(${c.x}, ${c.y})`)\n .attr('class', 'circle');\n \n circles.append('circle')\n .attr('fill', c => c.logo ? '#000' : `hsl(0, 0%, ${Math.round(c.r * 2)}%)`)\n .attr('r', c => Math.max(1, c.r - 2));\n \n circles.filter(c => c.logo)\n .append('path')\n .attr('fill', '#fff')\n .attr('transform', 'translate(-250, -250)')\n .attr('d', icon);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof blog_middlerad = {\n const start = 20;\n const max = 250;\n const interval = 15;\n const steps = (max - start)/interval;\n const vals = Array.from({length: steps}, (_, i) =>(i*interval)+start);\n return Scrubber(vals, {delay: 250, loop: false})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"blog_snippet = md`\n~~~html\n\n

\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"L = d3.packSiblings(\n [{r:blog_middlerad, logo: true}].concat(\n d3.range(350).map(i => ({r: (Math.random()) * (i/10)})).reverse()\n ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"icon = `M249.845659,446 C339.025723,446 357,337.265018 357,250 C357,154.424028 334.877814,54 249.845659,54 C160.665595,54 142,163.427562 142,250 C142,346.268551 164.122186,446 249.845659,446 Z M249.845659,295.710247 C224.266881,295.710247 204.909968,274.240283 204.909968,250.69258 C204.909968,226.452297 224.266881,204.982332 249.845659,204.982332 C275.424437,204.982332 295.472669,226.452297 295.472669,250.69258 C295.472669,274.240283 275.424437,295.710247 249.845659,295.710247 Z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}