31:T809f,//https://api.observablehq.com/document/@observablehq/timechart timechartNotebook = ({ id: "01b9f5889f32d3e6", slug: "timechart", trashed: false, description: "", like: false, likes: 23, publish_level: "public", forks: 0, fork_of: null, update_time: "2021-04-22T19:59:37.877Z", publish_time: "2021-04-21T16:50:27.577Z", publish_version: 1565, thumbnail: "b5c772e23e58a13c935d721ba487648b8c81be0f03530ccdfb126cf439fc5252", default_thumbnail: "f58beb0abd7dfa90000131fd463a8ed554b886749798e2dc36b8f30f46331282", roles: [], sharing: null, subscription: null, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" }, creator: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" }, collections: [ { id: "7eea0c678f957b61", type: "public", slug: "libraries", title: "Libraries", description: "Reusable notebooks, ready for import and remix.", update_time: "2020-12-01T00:42:27.585Z", pinned: true, ordered: true, custom_thumbnail: "a578557db9cf6c6689c756dd42172a43ad8d87b195c9589fcbe1e9a0cae9cdef", thumbnail: "a578557db9cf6c6689c756dd42172a43ad8d87b195c9589fcbe1e9a0cae9cdef", listing_count: 24, document_count: 24, collection_count: 0, parent_collection_count: 1, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" } } ], files: [], comments: [ { id: "c1cb43d1f29b329a", content: "I don't see a demo of using TimeAxis, especially combined with a TimeChart within a single cell (to get a grid behind all the TimeCharts?)", node_id: 810, create_time: "2021-04-20T17:56:17.801Z", update_time: null, resolved: true, user: { id: "595405df3c534894", github_login: "enjalot", avatar_url: "https://avatars2.githubusercontent.com/u/96189?v=4", login: "enjalot", name: "Ian Johnson", bio: "pixel flipper, data sifter. trying to see what I can while I'm here", home_url: "http://enjalot.github.io" } }, { id: "e94ad11ff619c2ae", content: "It’s not intended to be used that way, primarily; it’s intended to be used with one cell per chart, so that you can use the Observable UI to reorder the time series or comment on them separately. But we could include an example of that as an advanced topic.", node_id: 810, create_time: "2021-04-20T19:07:08.746Z", update_time: null, resolved: true, user: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" } }, { id: "c56f3e64b046d26a", content: "Added example, and also set the default marginTop to 0 instead of -16 so that you have to opt-in to the special overlapping behavior.", node_id: 810, create_time: "2021-04-21T16:32:27.753Z", update_time: null, resolved: true, user: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" } }, { id: "a9022775a908bb19", content: "Thank you for continuing your wonderful work!\nNot to be critical, but I can't help but wonder about the usability of the TimeChart representation.\nEven after using the tooltip and reading the other notebooks that describe Horizon Charts, I struggle to understand how to interpret the combination of color and vertical offset. Perhaps adding a color swatch legend with labeled value ranges would help?\nAlso, is TimeChart recommended for any time-series or just data with smooth/continuously varying values like those that can be approximated with sine -- I wonder how easy it would be to interpret if the values did not vary smoothly, such as random values.\nThanks!", node_id: 810, create_time: "2021-04-22T18:42:36.922Z", update_time: null, resolved: true, user: { id: "ba5c813f0f621f19", github_login: "jonhelfman", avatar_url: "https://avatars1.githubusercontent.com/u/17505060?v=4", login: "jonhelfman", name: "Jonathan Helfman", bio: "Student of math, d3, svg, es6, etc. Prototyper of visualizations for electronics design and test. ", home_url: "" } }, { id: "b50ff7cf4c649ac5", content: "I’ve been using horizon charts for years (e.g. [1]) so I would say try it for a while and see if you like it? It’s definitely my go-to for looking at time series. If you have strictly random (or highly noisy) values you’re not likely to see anything interesting by visualizing anyway, so it’s hard to answer your question directly.\n\nAlso, if you want to ease it to horizon charts, you could start by setting the bands: 1 option and you’ll get a basic area chart.\n\n[1] https://square.github.io/cubism/", node_id: 810, create_time: "2021-04-22T19:07:24.992Z", update_time: null, resolved: true, user: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" } }, { id: "9f98adbdc28e3ce5", content: "Being able to specify a baseline around which the values hover around would be convenient as well. E.g. values that hover around 1.", node_id: 915, create_time: "2021-04-22T16:19:51.661Z", update_time: null, resolved: true, user: { id: "3c5ecb707ecd20a7", github_login: "Martien", avatar_url: "https://avatars1.githubusercontent.com/u/6566925?v=4", login: "martien", name: "Martien van Steenbergen", bio: "Wise Fool.\nVisioneer.", home_url: "http://aardrock.com" } }, { id: "a17cc51c55fb0a8b", content: "The charts assume a zero baseline, but you could pass TimeChart values that are relative to the baseline if you prefer (and you could use a custom format function to undo the effect of the baseline). For example, data.map(({date, value}) => ({date, value: value - 1})) and then {format: value => value + 1}.", node_id: 915, create_time: "2021-04-22T17:05:46.431Z", update_time: null, resolved: true, user: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" } }, { id: "535d199303fa5090", content: "Yes, thanks. I’m doing the value: value - 1. The format: value + 1 is a nice touch which I didn’t realise at first. See https://observablehq.com/@martien/covid-19-netherlands-basic-reproduction-number-timechart", node_id: 915, create_time: "2021-04-22T18:21:57.507Z", update_time: null, resolved: true, user: { id: "3c5ecb707ecd20a7", github_login: "Martien", avatar_url: "https://avatars1.githubusercontent.com/u/6566925?v=4", login: "martien", name: "Martien van Steenbergen", bio: "Wise Fool.\nVisioneer.", home_url: "http://aardrock.com" } }, { id: "05c41aea14c99db4", content: "Would \"wrap\" perhaps have been a better choice, given that negative values wrap around on y?", node_id: 1152, create_time: "2021-04-22T09:13:44.338Z", update_time: null, resolved: true, user: { id: "07362516b5994994", github_login: "mootari", avatar_url: "https://avatars2.githubusercontent.com/u/322014?v=4", login: "mootari", name: "Fabian Iwand", bio: "Web developer and autodidact with an interest in creative coding.", home_url: "https://twitter.com/mootari" } }, { id: "d7ad16ddd73edf8d", content: "This terminology was adopted from the original horizon charts paper. See figure 2.\n\nhttp://vis.berkeley.edu/papers/horizon/2009-TimeSeries-CHI.pdf", node_id: 1152, create_time: "2021-04-22T17:04:14.382Z", update_time: null, resolved: true, user: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" } } ], commenting_lock: null, version: 1565, title: "TimeChart", license: "isc", copyright: "Copyright 2021 Observable, Inc.", nodes: [ { id: 0, value: "md`# TimeChart\n\nTimeChart is an importable component for visualizing time-series data. It can show many signals time-aligned as space-efficient horizon charts. If you hover over a chart, all charts on the page show the value at that time, aiding interpretation.`", pinned: false }, { id: 472, value: "TimeAxis({interval, start, stop})", pinned: false }, { id: 475, value: "viewof blues = TimeChart(wave({max: 100, round: true}), {title: \"Blues\", interval, start, stop, max: 100, scheme: \"blues\", marginTop: -16})", pinned: false }, { id: 481, value: "viewof greens = TimeChart(add(wave({max: 100, round: true, shift: 50, pow: 20}), wave({max: 20, round: true, period: 12})), {title: \"Greens\", interval, start, stop, max: 120, scheme: \"greens\", marginTop: -16})", pinned: false }, { id: 478, value: "viewof reds = TimeChart(add(blues, greens), {title: \"Reds\", interval, start, stop, max: 130, scheme: \"reds\", marginTop: -16})", pinned: false }, { id: 810, value: "md`To use in your notebook:\n\n~~~js\nimport {TimeChart, TimeAxis, d3} from \"@observablehq/timechart\"\n~~~\n\nThen, call TimeChart and TimeAxis to create charts as described below.`", pinned: false }, { id: 437, value: "md`---\n\n## Configuration\n\nTimeChart expects a consistent *x*-axis across plots so that you can see coincident patterns. TimeChart also expects exactly one data point per pixel to maximize data density. When you call TimeChart and TimeAxis, you pass in these options.`", pinned: false }, { id: 409, value: "interval = d3.utcMinute.every(10) // sample frequency", pinned: true }, { id: 268, value: "stop = interval() // exclusive", pinned: true }, { id: 270, value: "start = interval.offset(stop, -928) // inclusive", pinned: true }, { id: 875, value: "md`TimeChart expects *interval* to be specified as a [d3-time interval](https://github.com/d3/d3-time), though you can also use a named time interval such as “hour” or “minute” if you prefer.`", pinned: false }, { id: 418, value: "md`---\n\n## Example usage\n\nFirst we need data: an array of {*date*, *value*} objects at the expected time interval, such as hourly. TimeChart treats missing data as having zero value. We’ll use fake data here (a sine wave with random noise). You’ll want to replace this fake data with a [database client](/@observablehq/databases) or by fetching from an API.`", pinned: false }, { id: 267, value: "signups = wave({min: 0, max: 200, period: 120, round: true}) // fake data!", pinned: true }, { id: 493, value: "md`Next we need an axis. This is a separate component so that it needn’t be repeated for each chart. Sprinkle as many as you like throughout your notebook.`", pinned: false }, { id: 466, value: "TimeAxis({interval, start, stop})", pinned: true }, { id: 498, value: "md`Lastly, a chart! TimeChart takes two arguments, *data* and *options*. The *data* an array of {*date*, *value*} objects, as shown above. Three options are required, and below we pass in the corresponding cells of the same name we defined above:\n\n* *interval* - the time interval of the data (*e.g.*, hourly)\n* *start* - the start time of the chart (inclusive)\n* *stop* - the stop time of the chart (exclusive)\n\nIn addition, we recommend:\n\n* *title* - so that people know what they’re looking at\n* *max* - the maximum expected *y*-value, for consistency over time`", pinned: false }, { id: 72, value: "TimeChart(signups, {interval, start, stop, title: \"Sign-ups\", max: 240})", pinned: true }, { id: 905, value: "md`TimeChart generates a [horizon chart](/@d3/horizon-chart) with four bands by default. You can change the number of bands as desired. A single band will produce a conventional area chart.`", pinned: false }, { id: 911, value: "TimeChart(signups, {interval, start, stop, title: \"Sign-ups\", max: 240, bands: 1})", pinned: true }, { id: 1325, value: "md`The *scheme* option, which defaults to RdGy—red for negative, gray for positive—controls which colors are used for the bands. All ColorBrewer sequential and diverging color schemes are supported; see [D3 Color Schemes](/@d3/color-schemes). You may also pass in an array of arrays as the *scheme* argument following the same structure as D3 (*e.g.*, d3.schemeBlues).`", pinned: false }, { id: 1330, value: "TimeChart(signups, {interval, start, stop, title: \"Sign-ups\", max: 240, scheme: \"PuRd\"})", pinned: true }, { id: 915, value: "md`---\n\n## Advanced usage: negative values\n\nIf the data includes negative values, these values will by default hang down from the top of the chart in red.`", pinned: false }, { id: 970, value: "TimeChart(posneg, {interval, start, stop})", pinned: false }, { id: 1464, value: "md`Plotting negative values is also useful for paired signals, for example incoming (positive) and outgoing (negative) traffic volume to a network switch. Set the *marginTop* option to -16 to remove the gap between cells.`", pinned: false }, { id: 1455, value: "TimeChart(wave({min: 0, max: 1}), {title: \"Incoming\", interval, start, stop, max: 1, format: \"+.2f\"})", pinned: false }, { id: 1457, value: "TimeChart(wave({min: 0, max: -1}), {title: \"Outgoing\", interval, start, stop, max: 1, marginTop: -16, format: \"+.2f\"})", pinned: false }, { id: 1178, value: "md`The *mode* option changes the behavior of the horizon chart for negative values. The allowed values are:\n\n* *offset* - negative values to hang down from the top\n* *mirror* - reflect so that negative values grow up from the bottom\n\nThe default *offset* mode is preferred for accessibility, as *mirror* relys solely on hue to distinguish between positive and negative values. To better show the two modes, below are single-band charts without random noise.`", pinned: false }, { id: 1152, value: "TimeChart(wave({min: -1, max: 1, noise: 0}), {interval, start, stop, bands: 1, mode: \"offset\"})", pinned: true }, { id: 1181, value: "TimeChart(wave({min: -1, max: 1, noise: 0}), {interval, start, stop, bands: 1, mode: \"mirror\"})", pinned: true }, { id: 1194, value: "md`You should choose a diverging color scheme when plotting negative values: BrBG, PRGn, PiYG, PuOr, RdBu, RdGy, RdYlBu, RdYlGn, or Spectral. If you specify a sequential color scheme (such as blues), negative values will be drawn in gray.`", pinned: false }, { id: 1028, value: "TimeChart(posneg, {interval, start, stop, scheme: \"piyg\"})", pinned: true }, { id: 1090, value: "TimeChart(posneg, {interval, start, stop, scheme: \"rdbu\"})", pinned: true }, { id: 1239, value: "TimeChart(posneg, {interval, start, stop, scheme: \"blues\"})", pinned: true }, { id: 1318, value: "posneg = wave({min: -1, max: 1}) // fake data with some negative values", pinned: true }, { id: 748, value: "md`---\n\n## Advanced usage: custom defaults\n\nThe TimeChart.defaults function returns a TimeChart-like function that has the specified options as defaults. This is useful to avoid repeating options that should by shared by all charts on the page, such as *interval*, *start*, and *stop*. You can also change the default color scheme.`", pinned: false }, { id: 751, value: "timeChart = TimeChart.defaults({interval, start, stop, scheme: \"purples\"})", pinned: true }, { id: 763, value: "timeAxis = TimeAxis.defaults({interval, start, stop})", pinned: true }, { id: 783, value: "timeAxis()", pinned: true }, { id: 754, value: "timeChart(signups, {title: \"Sign-ups\"})", pinned: true }, { id: 738, value: "md`---\n\n## Advanced usage: onclick\n\nThe *onclick* option takes a function to be called when the user clicks on the chart. You can use this, for example, to open another notebook or to drive something else on the page (say with a mutable). Call this.invert(*event*) to have TimeChart lookup the data that was clicked on.`", pinned: false }, { id: 743, value: "timeChart(signups, {\n title: \"Sign-ups\", \n onclick(event) {\n const {date} = this.invert(event);\n open(`/d/e817ba556034bba5?date=${date.toISOString()}`, `target=_blank`);\n }\n})", pinned: true }, { id: 788, value: "md`---\n\n## Advanced usage: views\n\nTimeChart is compatible with Observable’s viewof operator. The value of the chart is the data you pass in.`", pinned: false }, { id: 792, value: "viewof florps = timeChart(wave(), {title: \"Florps\"})", pinned: true }, { id: 796, value: "florps", pinned: true }, { id: 1498, value: "md`---\n\n## Advanced usage: multiple charts in one cell\n\nTypically each chart goes in its own cell for ease of ordering and commenting. But if desired you can combine multiple charts and an axis in a cell as shown below.`", pinned: false }, { id: 1500, value: "html`${timeAxis()}${[wave(), wave()].map((data, i) => timeChart(data, {title: `wave ${i}`}))}`", pinned: true }, { id: 422, value: "md`---\n\n## Implementation`", pinned: false }, { id: 5, value: "TimeChart = {\n let clientX = 928 + 14;\n\n function TimeChart(data, {\n interval,\n start,\n stop,\n max = d3.quantile(data, 0.99, d => Math.abs(d.value) || NaN) || 1,\n title,\n locale = \"en-US\",\n dateFormat = localeFormat(locale),\n format = localeFormat(locale),\n marginTop = 0, // try -16 to remove the gap between cells\n height = 49, // inclusive of margin\n width,\n bands = 4,\n onclick,\n curve = d3.curveStepBefore,\n scheme = d3.schemeRdGy,\n mode = \"offset\"\n } = {}) {\n const values = new Map(data.map(d => [+d.date, +d.value]));\n const [ymin, ymax] = d3.extent(values, ([, value]) => value);\n\n // Normalize string arguments\n if (typeof format === \"string\") format = d3.format(format);\n else if (typeof format !== \"function\") format = localeFormat(locale, format);\n if (typeof dateFormat === \"string\") dateFormat = d3.utcFormat(dateFormat);\n else if (typeof dateFormat !== \"function\") dateFormat = localeFormat(locale, dateFormat);\n interval = maybeInterval(interval);\n curve = maybeCurve(curve);\n scheme = maybeScheme(scheme);\n mode = maybeMode(mode);\n bands = Math.floor(bands);\n if (!(bands >= 1 && bands < scheme.length)) throw new Error(`invalid bands: ${bands}`);\n\n // Normalize the color scheme\n let colors;\n if (scheme.length < 11) { // assume sequential, pad with greys\n colors = scheme[Math.max(3, bands)];\n colors = [...d3.reverse(d3.schemeGreys[colors.length]), undefined, ...colors];\n } else { // otherwise assume diverging\n colors = scheme[Math.max(3, 2 * bands + 1)];\n }\n\n // Normalize the data to the given interval, filling in any missing data with zeroes.\n data = interval.range(start, stop).map(date => ({date, value: values.get(+date) || 0}));\n if (width === undefined) width = data.length;\n\n const x = d3.scaleUtc([start, stop], [0, width]);\n const y = d3.scaleLinear([0, max], [0, -bands * height]);\n const clip = DOM.uid(\"clip\");\n const path = DOM.uid(\"path\");\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", `0 ${-marginTop} ${width} ${height}`)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .property(\"style\", `\n display: block;\n font: 12px var(--sans-serif, system-ui, sans-serif);\n font-variant-numeric: tabular-nums;\n margin: 0 0 ${+marginTop}px calc(100% - ${width}px);\n overflow: visible;\n `);\n\n const tooltip = svg.append(\"title\");\n\n svg.append(\"clipPath\")\n .attr(\"id\", clip.id)\n .append(\"rect\")\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"defs\").append(\"path\")\n .attr(\"id\", path.id)\n .attr(\"d\", d3.area()\n .curve(curve)\n .defined(d => !isNaN(d.value))\n .x(d => round(x(d.date)))\n .y0(0)\n .y1(d => round(y(d.value)))\n (data));\n\n const g = svg.append(\"g\")\n .attr(\"clip-path\", clip);\n\n g.append(\"g\")\n .selectAll(\"use\")\n .data(d3.range(bands)\n .map(i => [i, colors[i + 1 + (colors.length >> 1)]])\n .filter(([i, color]) => color != null && ymax > max * i / bands))\n .join(\"use\")\n .attr(\"fill\", ([, color]) => color)\n .attr(\"transform\", ([i]) => `translate(0,${(i + 1) * height})`)\n .attr(\"xlink:href\", path.href);\n\n g.append(\"g\")\n .selectAll(\"use\")\n .data(d3.range(bands)\n .map(i => [i, colors[(colors.length >> 1) - 1 - i]])\n .filter(([i, color]) => color != null && -ymin > max * i / bands))\n .join(\"use\")\n .attr(\"fill\", ([, color]) => color)\n .attr(\"transform\", mode === \"mirror\"\n ? ([i]) => `translate(0,${(i + 1) * height}) scale(1,-1)`\n : ([i]) => `translate(0,${-i * height})`)\n .attr(\"xlink:href\", path.href);\n\n const overlay = svg.append(\"g\");\n\n if (title != null) overlay.append(\"text\")\n .attr(\"class\", \"title\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"y\", 2 * 16)\n .attr(\"dy\", \"0.32em\")\n .text(title + \"\");\n\n overlay.append(\"text\")\n .attr(\"class\", \"label\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"y\", height - 16 - 1)\n .attr(\"dx\", -3)\n .attr(\"dy\", \"0.32em\");\n\n overlay.selectAll(\"text\")\n .select(function() {\n const clone = this.cloneNode(true);\n return this.parentNode.insertBefore(clone, this);\n })\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 4);\n\n overlay.append(\"line\")\n .attr(\"class\", \"line\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-dasharray\", \"1,1\")\n .style(\"mix-blend-mode\", \"screen\")\n .attr(\"y1\", 0)\n .attr(\"y2\", height);\n\n overlay.select(\"line\").clone(true)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-dashoffset\", 1);\n\n const line = overlay.selectAll(\".line\");\n const label = overlay.selectAll(\".label\");\n const text = overlay.selectAll(\".title\");\n\n function invert(event) {\n const [mx] = d3.pointer(event, svg.node());\n const i = d3.bisector(d => d.date).left(data, x.invert(mx), 0, data.length - 1);\n return data[i];\n }\n\n function mousemoved(event) {\n clientX = event.clientX;\n const d = invert(event);\n label.attr(\"x\", x(d.date)).text(format(d.value));\n line.attr(\"x1\", x(d.date) - 0.5).attr(\"x2\", x(d.date) - 0.5);\n tooltip.text(dateFormat(d.date));\n }\n\n function resized() {\n text.attr(\"x\", Math.max(0, width - document.body.clientWidth) + 4);\n }\n\n resized();\n addEventListener(\"resize\", resized);\n addEventListener(\"mousemove\", mousemoved);\n requestAnimationFrame(() => mousemoved({clientX, clientY: 0}));\n\n disposal(svg.node()).then(() => {\n removeEventListener(\"resize\", resized);\n removeEventListener(\"mousemove\", mousemoved);\n });\n\n return Object.assign(svg.node(), {onclick, value: data, invert});\n }\n\n TimeChart.defaults = defaults => {\n return (data, options) => {\n return TimeChart(data, {...defaults, ...options});\n };\n };\n\n return TimeChart;\n}", pinned: true }, { id: 464, value: "TimeAxis = {\n function TimeAxis({\n interval,\n start,\n stop,\n width,\n height = 33\n } = {}) {\n interval = maybeInterval(interval);\n if (width === undefined) width = interval.range(start, stop).length;\n return html``;\n }\n\n TimeAxis.defaults = defaults => {\n return options => {\n return TimeAxis({...defaults, ...options});\n };\n };\n\n return TimeAxis;\n}", pinned: true }, { id: 1160, value: "function round(x) {\n return Math.round(x * 2) / 2;\n}", pinned: true }, { id: 829, value: "function maybeInterval(interval) {\n if (interval == null) throw new Error(\"missing interval\");\n if (!(interval && typeof interval.range === \"function\")) {\n const i = (interval + \"\").toLowerCase();\n switch (i) {\n case \"millisecond\":\n case \"second\":\n case \"minute\":\n case \"hour\":\n case \"day\":\n case \"week\":\n case \"sunday\":\n case \"monday\":\n case \"tuesday\":\n case \"wednesday\":\n case \"thursday\":\n case \"friday\":\n case \"saturday\":\n case \"month\":\n case \"year\":\n return d3[`utc${camelize(i)}`];\n }\n throw new Error(`invalid interval: ${interval}`);\n }\n return interval; \n}", pinned: true }, { id: 838, value: "function maybeCurve(curve) {\n if (curve == null) throw new Error(\"missing curve\");\n if (typeof curve !== \"function\") {\n const c = d3[`curve${camelize(curve)}`];\n if (c === undefined) throw new Error(`unknown curve: ${curve}`);\n curve = c;\n }\n return curve;\n}", pinned: true }, { id: 832, value: "function maybeScheme(scheme) {\n if (scheme == null) throw new Error(\"missing scheme\");\n if (!Array.isArray(scheme)) {\n const s = (scheme + \"\").toLowerCase();\n switch (s) {\n case \"brbg\": return d3.schemeBrBG;\n case \"prgn\": return d3.schemePRGn;\n case \"piyg\": return d3.schemePiYG;\n case \"puor\": return d3.schemePuOr;\n case \"rdbu\": return d3.schemeRdBu;\n case \"rdgy\": return d3.schemeRdGy;\n case \"rdylbu\": return d3.schemeRdYlBu;\n case \"rdylgn\": return d3.schemeRdYlGn;\n case \"spectral\": return d3.schemeSpectral;\n case \"blues\": return d3.schemeBlues;\n case \"greens\": return d3.schemeGreens;\n case \"greys\": return d3.schemeGreys;\n case \"oranges\": return d3.schemeOranges;\n case \"purples\": return d3.schemePurples;\n case \"reds\": return d3.schemeReds;\n case \"bugn\": return d3.schemeBuGn;\n case \"bupu\": return d3.schemeBuPu;\n case \"gnbu\": return d3.schemeGnBu;\n case \"orrd\": return d3.schemeOrRd;\n case \"pubu\": return d3.schemePuBu;\n case \"pubugn\": return d3.schemePuBuGn;\n case \"purd\": return d3.schemePuRd;\n case \"rdpu\": return d3.schemeRdPu;\n case \"ylgn\": return d3.schemeYlGn;\n case \"ylgnbu\": return d3.schemeYlGnBu;\n case \"ylorbr\": return d3.schemeYlOrBr;\n case \"ylorrd\": return d3.schemeYlOrRd;\n }\n throw new Error(`invalid scheme: ${scheme}`);\n }\n return scheme;\n}", pinned: true }, { id: 1067, value: "function maybeMode(mode) {\n switch (mode = (mode + \"\").toLowerCase()) {\n case \"offset\": case \"mirror\": return mode;\n }\n throw new Error(`unknown mode: ${mode}`);\n}", pinned: true }, { id: 847, value: "function camelize(string) {\n return string\n .toLowerCase()\n .split(/-/g)\n .map(([f, ...r]) => `${f.toUpperCase()}${r.join(\"\")}`)\n .join(\"\");\n}", pinned: true }, { id: 1560, value: "function localeFormat(locale, format) {\n return date => date.toLocaleString(locale, format);\n}", pinned: true }, { id: 506, value: "function wave({\n min = 0,\n max = 1, \n shift = 0,\n period = 24 * 6, // matching the default 10-minute interval\n noise = 0.2,\n pow = 1,\n round = false\n} = {}) {\n return interval.range(start, stop).map((date, i) => {\n const t = (Math.sin((i - shift) / period * 2 * Math.PI) + 1) / 2;\n const n = Math.random();\n let value = +min + (max - min) * (t ** pow * (1 - noise) + n * noise);\n if (round) value = Math.round(value);\n return {date, value};\n });\n}", pinned: true }, { id: 552, value: "function add(first, ...series) {\n return first.map(({date, value}, i) => ({date, value: value + d3.sum(series, s => s[i].value)}));\n}", pinned: true }, { id: 18, value: "d3 = require(\"d3@6.7.0/dist/d3.min.js\")", pinned: true }, { id: 247, value: "import {disposal} from \"@observablehq/inputs\"", pinned: true } ] })32:Tab7f,inputsNotebook = ({ id: "a2e58f97fd5e8d7c", slug: "inputs", trashed: false, description: "", like: false, likes: 191, publish_level: "public", forks: 2, fork_of: null, update_time: "2021-04-15T15:02:30.811Z", publish_time: "2021-02-04T15:14:01.530Z", publish_version: 568, thumbnail: "2ac6f275bf8c2c8d920f672e948c122f247e035463378f21c85f2edad461fbf1", default_thumbnail: "9e066ac0ab453905c360d4fba74c9551aea1ce042f4fc1e8f85fa6136cdf057a", roles: [], sharing: null, subscription: null, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" }, creator: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" }, collections: [ { id: "01e1972879c83ae3", type: "public", slug: "observable-blog", title: "Observable Blog", description: "", update_time: "2021-04-09T03:24:10.059Z", pinned: false, ordered: false, custom_thumbnail: null, thumbnail: "06beb2a332605c43615c25fd9a3dbf025dabae74840235787a5a242dbb89b0bf", listing_count: 17, document_count: 17, collection_count: 0, parent_collection_count: 0, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" } }, { id: "c100282feee59b2a", type: "public", slug: "inputs", title: "Observable Inputs", description: "Lightweight interface components for exploring data and building interactive displays", update_time: "2021-02-04T15:11:35.329Z", pinned: false, ordered: true, custom_thumbnail: null, thumbnail: "2ac6f275bf8c2c8d920f672e948c122f247e035463378f21c85f2edad461fbf1", listing_count: 14, document_count: 14, collection_count: 0, parent_collection_count: 0, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" } }, { id: "73bc2f80830bc635", type: "public", slug: "views-interactivity", title: "Views & interactivity", description: "", update_time: "2020-12-19T01:46:34.173Z", pinned: false, ordered: true, custom_thumbnail: null, thumbnail: "308f81f536f24d71390afa538fe2d2bd14a6a756967ba03ab7c4131447123618", listing_count: 15, document_count: 15, collection_count: 0, parent_collection_count: 1, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" } }, { id: "7eea0c678f957b61", type: "public", slug: "libraries", title: "Libraries", description: "Reusable notebooks, ready for import and remix.", update_time: "2020-12-01T00:42:27.585Z", pinned: true, ordered: true, custom_thumbnail: "a578557db9cf6c6689c756dd42172a43ad8d87b195c9589fcbe1e9a0cae9cdef", thumbnail: "a578557db9cf6c6689c756dd42172a43ad8d87b195c9589fcbe1e9a0cae9cdef", listing_count: 24, document_count: 24, collection_count: 0, parent_collection_count: 1, owner: { id: "f35c755083683fe5", avatar_url: "https://avatars2.githubusercontent.com/u/30080011?v=4", login: "observablehq", name: "Observable", bio: "Use data to think, together.", home_url: "https://observablehq.com", type: "team" } } ], files: [ { id: "eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c", url: "https://static.observableusercontent.com/files/eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c", download_url: "https://static.observableusercontent.com/files/eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27us-state-capitals.tsv", name: "us-state-capitals.tsv", create_time: "2021-02-03T21:20:59.249Z", status: "public", size: 2886, mime_type: "text/tab-separated-values", content_encoding: "gzip" } ], comments: [ { id: "3f9f725310d98768", content: "Perhaps add an explicit link to github.com/observablehq/inputs?", node_id: 0, create_time: "2021-02-04T22:56:45.696Z", update_time: null, resolved: true, user: { id: "ddd7235babc79ce0", github_login: "jrus", avatar_url: "https://avatars3.githubusercontent.com/u/83411?v=4", login: "jrus", name: "Jacob Rus", bio: "geodetic computer", home_url: "" } }, { id: "3aeb0738408725e0", content: "It’s down below where it says “please see our repository.”", node_id: 0, create_time: "2021-02-04T23:01:17.227Z", update_time: null, resolved: true, user: { id: "074c414ad1d825f5", github_login: "mbostock", avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4", login: "mbostock", name: "Mike Bostock", bio: "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.", home_url: "https://bost.ocks.org/mike/" } }, { id: "bc63ebb4d7fa0f54", content: "Maybe I missed it, but is there a

input (for multi-line text)?",
      node_id: 0,
      create_time: "2021-02-09T17:23:05.421Z",
      update_time: null,
      resolved: true,
      user: {
        id: "dc026342127b807b",
        github_login: "simonw",
        avatar_url: "https://avatars0.githubusercontent.com/u/9599?v=4",
        login: "simonw",
        name: "Simon Willison",
        bio: "",
        home_url: "https://simonwillison.net/"
      }
    },
    {
      id: "45d4f215e4c884ff",
      content:
        "Not yet, but you can thumbs up the issue: https://github.com/observablehq/inputs/issues/10",
      node_id: 0,
      create_time: "2021-02-09T17:36:13.978Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "2563bcb41d19fbf2",
      content:
        "Suggestion: move the `Text = Inputs.Text`, `Button = Inputs.Button` etc. cells to be at the top of the relevant sections, so that when someone clicks on e.g. the link to `Button` in the output of their `import {Button, Text} from '@observablehq/inputs'` cell in a different notebook, the link which points at https://observablehq.com/@observablehq/inputs#Button will scroll to a description instead of to the decontextualized assignment at the bottom of this page.",
      node_id: 0,
      create_time: "2021-03-12T21:35:29.038Z",
      update_time: null,
      resolved: true,
      user: {
        id: "ddd7235babc79ce0",
        github_login: "jrus",
        avatar_url: "https://avatars3.githubusercontent.com/u/83411?v=4",
        login: "jrus",
        name: "Jacob Rus",
        bio: "geodetic computer",
        home_url: ""
      }
    },
    {
      id: "4121027979e200e1",
      content:
        "Should searchFilter and the various format* helpers also get their own cells so that people become aware of these more easily?",
      node_id: 5,
      create_time: "2021-04-18T12:41:09.032Z",
      update_time: null,
      resolved: false,
      user: {
        id: "07362516b5994994",
        github_login: "mootari",
        avatar_url: "https://avatars2.githubusercontent.com/u/322014?v=4",
        login: "mootari",
        name: "Fabian Iwand",
        bio:
          "Web developer and autodidact with an interest in creative coding.",
        home_url: "https://twitter.com/mootari"
      }
    },
    {
      id: "a1d3f5c3e1a17e05",
      content:
        "Is there an easy way to make a slider that slides from the higher number to the lower number? I've had use for this in the past (https://next.observablehq.com/@borisvish/beyond-the-normal-distribution) and the trick that I used there needed to be explained to the person I was working with.",
      node_id: 29,
      create_time: "2021-02-04T16:54:18.287Z",
      update_time: null,
      resolved: true,
      user: {
        id: "de2630f386f3cdb1",
        github_login: "yurivish",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/ccaeb977161bbde75140e9c66fc0bab863b70292040ceaa394b802b18db625db",
        login: "yurivish",
        name: "Yuri Vishnevsky",
        bio:
          "Visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs. ",
        home_url: "https://yuri.is"
      }
    },
    {
      id: "5e70b9ec30a82b56",
      content:
        "(the \"Transform Normal to Skewed Distribution\" slider slides from 1 to -1, since 1 makes the chart lean left and -1 makes it lean right)",
      node_id: 29,
      create_time: "2021-02-04T17:01:48.605Z",
      update_time: null,
      resolved: true,
      user: {
        id: "de2630f386f3cdb1",
        github_login: "yurivish",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/ccaeb977161bbde75140e9c66fc0bab863b70292040ceaa394b802b18db625db",
        login: "yurivish",
        name: "Yuri Vishnevsky",
        bio:
          "Visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs. ",
        home_url: "https://yuri.is"
      }
    },
    {
      id: "2ec6b1155492b7bb",
      content:
        "@yurivish You can provide a transform function: Range([-1, 1], {transform: x => -x})",
      node_id: 29,
      create_time: "2021-02-04T17:14:19.512Z",
      update_time: null,
      resolved: true,
      user: {
        id: "07362516b5994994",
        github_login: "mootari",
        avatar_url: "https://avatars2.githubusercontent.com/u/322014?v=4",
        login: "mootari",
        name: "Fabian Iwand",
        bio:
          "Web developer and autodidact with an interest in creative coding.",
        home_url: "https://twitter.com/mootari"
      }
    },
    {
      id: "d6689e714af71e7e",
      content: "Oh cool, that works! Consider this resolved. Thanks @mootari!",
      node_id: 29,
      create_time: "2021-02-04T17:20:24.374Z",
      update_time: null,
      resolved: true,
      user: {
        id: "de2630f386f3cdb1",
        github_login: "yurivish",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/ccaeb977161bbde75140e9c66fc0bab863b70292040ceaa394b802b18db625db",
        login: "yurivish",
        name: "Yuri Vishnevsky",
        bio:
          "Visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs. ",
        home_url: "https://yuri.is"
      }
    },
    {
      id: "113dc7c25dcd28b9",
      content: "Thanks for answering @mootari!",
      node_id: 29,
      create_time: "2021-02-04T17:21:32.681Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "bd5eed38b349b317",
      content:
        "@yurivish if you do `{ var neg = x=>-x; neg.invert = neg; return Range([-1, 1], {transform: neg})}` you can save some root-finding.\n\nIf no explicit inverse is provided it falls back to github.com/observablehq/inputs/blob/main/src/range.js#L70-L81",
      node_id: 29,
      create_time: "2021-02-06T19:17:16.318Z",
      update_time: "2021-02-06T19:19:29.408Z",
      resolved: true,
      user: {
        id: "ddd7235babc79ce0",
        github_login: "jrus",
        avatar_url: "https://avatars3.githubusercontent.com/u/83411?v=4",
        login: "jrus",
        name: "Jacob Rus",
        bio: "geodetic computer",
        home_url: ""
      }
    },
    {
      id: "071565d21d82fc59",
      content:
        "Maybe Range could detect the [max, min] case and automatically apply a negate transform, too. https://github.com/observablehq/inputs/issues/70",
      node_id: 29,
      create_time: "2021-02-06T19:22:56.035Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "4c70fe98fb1ced76",
      content: "Good idea, thanks @jacobrus!",
      node_id: 29,
      create_time: "2021-02-06T19:31:52.222Z",
      update_time: null,
      resolved: true,
      user: {
        id: "de2630f386f3cdb1",
        github_login: "yurivish",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/ccaeb977161bbde75140e9c66fc0bab863b70292040ceaa394b802b18db625db",
        login: "yurivish",
        name: "Yuri Vishnevsky",
        bio:
          "Visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs. ",
        home_url: "https://yuri.is"
      }
    },
    {
      id: "af1ba834ff76877b",
      content: "Any chance of adding a datetime picker?",
      node_id: 37,
      create_time: "2021-02-08T17:49:06.869Z",
      update_time: null,
      resolved: true,
      user: {
        id: "f096aa7705d1f59d",
        github_login: "nickisnoble",
        avatar_url: "https://avatars1.githubusercontent.com/u/4031679?v=4",
        login: "nickisnoble",
        name: "Nick Noble",
        bio: "",
        home_url: "http://nicknoble.works"
      }
    },
    {
      id: "f6f095099920cc1c",
      content:
        "Feel free to thumbs up this issue: https://github.com/observablehq/inputs/issues/38",
      node_id: 37,
      create_time: "2021-02-08T21:16:52.931Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "9b49fa6c004cf6c3",
      content:
        "Hoping for a color input : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/color",
      node_id: 37,
      create_time: "2021-02-27T09:23:48.948Z",
      update_time: null,
      resolved: true,
      user: {
        id: "b8d79ca293134247",
        github_login: "triptych",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/d1c36a66e003eec2e0db6fd66f75fd73a94bf9c3381a8e3f11e98e36a07d8b3e",
        login: "triptych",
        name: "Andrew Wooldridge",
        bio:
          "📜JavaScript developer. \n\n🐲RPG fan. \n\n📚Storyteller and 🕹game developer. \n\n👨Father and Husband.",
        home_url: "http://andreww.xyz"
      }
    },
    {
      id: "1f86c612e638ddf4",
      content:
        "I see these on npm. Could I use these outside of observable with the dependecny?",
      node_id: 49,
      create_time: "2021-03-24T18:06:07.235Z",
      update_time: null,
      resolved: true,
      user: {
        id: "4deaac7bbdc47628",
        github_login: "DDDgfx",
        avatar_url: "https://avatars2.githubusercontent.com/u/1700366?v=4",
        login: "dddgfx",
        name: "Dan DeLorenzo",
        bio: "",
        home_url: "http://dgfx.studio"
      }
    },
    {
      id: "0bcfc469301e4d43",
      content: "Yes.",
      node_id: 49,
      create_time: "2021-03-24T19:38:14.906Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "944327b66f13389a",
      content:
        "Could this include a \"Friends & Family\" section, similar to the old one, for third party inputs which adhere to the new look?",
      node_id: 57,
      create_time: "2021-02-11T22:59:37.981Z",
      update_time: null,
      resolved: true,
      user: {
        id: "908c4be2279a714e",
        github_login: "rreusser",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/c8fb5130bd1e25efe02ca8103bfb85280ba1ef96773cb67c8aed2fbfe923e2f3",
        login: "rreusser",
        name: "Ricky Reusser",
        bio: "",
        home_url: "https://rreusser.github.io"
      }
    },
    {
      id: "58b6db61d68a548c",
      content:
        "Done! Added a table of third-party inputs, and took the liberty of adding your new FineRange to the list. Thanks for the suggestion.",
      node_id: 57,
      create_time: "2021-02-13T17:33:59.348Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "27259cda54f7a57e",
      content:
        "since these links go to the same place and Input seems most useful with bind, i'd reframe this section to just talk about bind (instead of a list of \"a few more advanced techniques\"). bind is amazing!! having an officially supported path for synchronized inputs feels like a big reason to upgrade",
      node_id: 71,
      create_time: "2021-02-04T00:39:42.073Z",
      update_time: null,
      resolved: true,
      user: {
        id: "0bb2842b01e0c652",
        github_login: "tophtucker",
        avatar_url: "https://avatars0.githubusercontent.com/u/841829?v=4",
        login: "tophtucker",
        name: "Toph Tucker",
        bio: "twitter.com/tophtucker",
        home_url: "http://tophtucker.com"
      }
    },
    {
      id: "227258b50d898765",
      content:
        "I’m planning for this section to grow over time and include third-party notebooks. Added a “coming soon”.",
      node_id: 71,
      create_time: "2021-02-04T01:09:13.359Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "9dcf3e2646bcac83",
      content:
        "Any plans to add the Scrubber as a first class input? As this range input only supports numbers, it'd be nice to have one that supports non-numeric ranges, especially with the \"Play\" functionality.",
      node_id: 84,
      create_time: "2021-02-05T17:11:38.680Z",
      update_time: null,
      resolved: true,
      user: {
        id: "2a6984a21bf6bf27",
        github_login: "RLesser",
        avatar_url: "https://avatars0.githubusercontent.com/u/12756127?v=4",
        login: "rlesser",
        name: "Robert Lesser",
        bio:
          "Software Engineer, Former Managing Web Editor @ The Michigan Daily. Building things I can see.",
        home_url: ""
      }
    },
    {
      id: "c70e05b4a3b615d6",
      content:
        "Yes, I think we should add Scrubber. I filed an issue. Thank you for the suggestion!",
      node_id: 84,
      create_time: "2021-02-06T06:21:36.563Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "1ef4ba9b2c9e074c",
      content:
        "It is perhaps a bit misleading that in this notebook these components are not imported this way.",
      node_id: 84,
      create_time: "2021-02-06T20:44:24.026Z",
      update_time: null,
      resolved: true,
      user: {
        id: "591dcad3c6121253",
        github_login: "esperanc",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/45c33aac6de4db8091e859c350978eea8024e0f8f0894aa7f13158d582ccfaaa",
        login: "esperanc",
        name: "Claudio Esperança",
        bio: "Computer Graphics & Visualization @ ufrj.br ",
        home_url: "https://cesperanca.org"
      }
    },
    {
      id: "cb2da876a2e18d11",
      content:
        "That’s because this is the notebook that defines the inputs. They have to live somewhere. 😆",
      node_id: 84,
      create_time: "2021-02-06T20:58:33.227Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "1425cec182bc5c4d",
      content:
        "I'm pretty sure the dates here are inaccurate. Was every current state capitol really established exactly on Jan 1 of the relevant year? My guess is someone took the list of years from Wikipedia or similar and arbitrarily added -01-01 to the end of every one.\n\n*capital",
      node_id: 314,
      create_time: "2021-03-04T23:21:25.813Z",
      update_time: "2021-03-04T23:22:28.461Z",
      resolved: true,
      user: {
        id: "ddd7235babc79ce0",
        github_login: "jrus",
        avatar_url: "https://avatars3.githubusercontent.com/u/83411?v=4",
        login: "jrus",
        name: "Jacob Rus",
        bio: "geodetic computer",
        home_url: ""
      }
    },
    {
      id: "c54fcabd8c9de55c",
      content:
        "JavaScript has no built-in type for representing ambiguity or imprecision with dates. We’re using the Date type here, but it isn’t intended to imply that the state was established on January 1 of the given year, or for that matter, at UTC midnight. Furthermore, the Table doesn’t know the precision of the date, and the minimum precision of the default format is YYYY-MM-DD:\n\nhttps://github.com/observablehq/inputs/blob/bf525033948bbdda452e65bc06c09a6b42f3b06c/src/format.js#L16-L27\n\nThis mirrors the behavior of d3.autoType, which is used by Observable’s typed: true option for CSV and TSV files, and needs at least YYYY-MM-DD to detect dates:\n\nhttps://github.com/d3/d3-dsv/blob/aba1cce0e59500db67eab8f1a07dbd6a7a175064/src/autoType.js#L9-L12\n\nWe could use a year number here instead, but a Date is preferred to indicate that it’s a date. (And numbers can’t inherently represent ambiguity either.) If desired, you can specify a custom format when rendering dates in a Table so as to drop the -01-01, or perhaps to indicate ambiguity explicitly. I did not do that above because it slightly complicates the example code. For example:\n\nTable(search, {format: {Since: d => d.getUTCFullYear()}})",
      node_id: 314,
      create_time: "2021-03-08T03:10:32.530Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "329e410c8e1764b0",
      content:
        "Is there a way to distinguish between the empty selection and full selection? I have a use case for wanting to show some extra information for the selection, but my table has hundreds of rows and I don't want to show all details for all rows by default.\n\nI though that comparing rows === search might work but this is false when there is no selection.",
      node_id: 338,
      create_time: "2021-02-10T00:11:29.818Z",
      update_time: "2021-02-10T00:12:03.321Z",
      resolved: true,
      user: {
        id: "de2630f386f3cdb1",
        github_login: "yurivish",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/ccaeb977161bbde75140e9c66fc0bab863b70292040ceaa394b802b18db625db",
        login: "yurivish",
        name: "Yuri Vishnevsky",
        bio:
          "Visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs. ",
        home_url: "https://yuri.is"
      }
    },
    {
      id: "7dcdb1ebddb6222c",
      content:
        "Yes, I agree. The value of a table with selectable rows should default to empty (for consistency with e.g. multi-select inputs), possibly with all rows available via a separate name.",
      node_id: 338,
      create_time: "2021-02-10T00:27:02.091Z",
      update_time: null,
      resolved: true,
      user: {
        id: "ddd7235babc79ce0",
        github_login: "jrus",
        avatar_url: "https://avatars3.githubusercontent.com/u/83411?v=4",
        login: "jrus",
        name: "Jacob Rus",
        bio: "geodetic computer",
        home_url: ""
      }
    },
    {
      id: "2b11e443e64b9236",
      content:
        "Maybe there should be a shortcut for pre-selecting all rows? (Or am I missing it?)",
      node_id: 338,
      create_time: "2021-02-10T00:31:18.084Z",
      update_time: null,
      resolved: true,
      user: {
        id: "ddd7235babc79ce0",
        github_login: "jrus",
        avatar_url: "https://avatars3.githubusercontent.com/u/83411?v=4",
        login: "jrus",
        name: "Jacob Rus",
        bio: "geodetic computer",
        home_url: ""
      }
    },
    {
      id: "95758fbf7c2c769f",
      content:
        "You can say\n\nviewof rows = Table(search, {value: search.slice(0, 2)})",
      node_id: 338,
      create_time: "2021-02-10T01:05:06.677Z",
      update_time: null,
      resolved: true,
      user: {
        id: "de2630f386f3cdb1",
        github_login: "yurivish",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/ccaeb977161bbde75140e9c66fc0bab863b70292040ceaa394b802b18db625db",
        login: "yurivish",
        name: "Yuri Vishnevsky",
        bio:
          "Visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs. ",
        home_url: "https://yuri.is"
      }
    },
    {
      id: "0e2f3ee05d0ce839",
      content:
        "The value of the Table is always an array, whereas the input can be an iterator, and also they can be in a different order if the table is sorted, so yeah, you can’t do an identity comparison to check whether the selection is empty.\n\nYou can preselect all rows by passing {value: data} (above, {value: search}), but I don’t think that’s what you want here because you’ll see lots of checked checkboxes.\n\nWe’re not going to change the default value to be the empty array, but I could see having an option, say {allowEmpty: true}, that when enabled would return the empty array when there is no selection, rather than all the data.",
      node_id: 338,
      create_time: "2021-02-10T01:05:36.720Z",
      update_time: null,
      resolved: true,
      user: {
        id: "074c414ad1d825f5",
        github_login: "mbostock",
        avatar_url: "https://avatars2.githubusercontent.com/u/230541?v=4",
        login: "mbostock",
        name: "Mike Bostock",
        bio:
          "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
        home_url: "https://bost.ocks.org/mike/"
      }
    },
    {
      id: "7164cdb1bfc6641b",
      content:
        "I made 2 custom inputs few years earlier, maybe it can be useful for someone.\nOne it's a color scheme and interpolator picker:\nhttps://observablehq.com/@zechasault/color-schemes-and-interpolators-picker\nAnd the other it's an Easing graph editor/picker, made with my brother:\nhttps://observablehq.com/@nhogs/easing-graphs-editor",
      node_id: 473,
      create_time: "2021-04-19T10:18:51.046Z",
      update_time: null,
      resolved: false,
      user: {
        id: "9dbe9421a5362c23",
        github_login: "Zechasault",
        avatar_url:
          "https://avatars.observableusercontent.com/avatar/6091dd8650856ab0cee16472a19fef6e0cfdd5fba717ddd82c8302b8846d8a01",
        login: "zechasault",
        name: "Zack",
        bio: "Freelance - Data visualization developer",
        home_url: "https://www.linkedin.com/in/zack-ciminera/"
      }
    }
  ],
  commenting_lock: null,
  version: 568,
  title: "Observable Inputs",
  license: null,
  copyright: "",
  nodes: [
    {
      id: 0,
      value:
        "md`# Observable Inputs\n\nThese lightweight interface components — buttons, sliders, dropdowns, tables, and the like — help you explore data and build interactive displays. For a walkthrough of how you might use these to support data analysis, see [Hello, Inputs!](/@observablehq/hello-inputs)`",
      pinned: false
    },
    {
      id: 84,
      value:
        "usage = md`---\n## Usage\n\nFirst [import](/@observablehq/introduction-to-imports) whichever components you’d like into your notebook:\n\n~~~js\nimport {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"\n~~~\n\nThen declare your inputs with [viewof](/@observablehq/introduction-to-views), like so:`",
      pinned: false
    },
    {
      id: 29,
      value: "viewof gain = Range([0, 11], {value: 5, label: \"Gain\"})",
      pinned: true
    },
    {
      id: 240,
      value:
        "md`Now you can reference the input’s value (here *gain*) in any cell, and the cell will run whenever the input changes. No event listeners required!`",
      pinned: false
    },
    { id: 238, value: "gain", pinned: true },
    {
      id: 247,
      value: "html`The current gain is ${gain.toLocaleString(\"en\")}!`",
      pinned: true
    },
    {
      id: 49,
      value:
        "md`Observable Inputs are released under the [ISC license](https://github.com/observablehq/inputs/blob/main/LICENSE) and depend only on [Hypertext Literal](/@observablehq/htl), our tagged template literal for safely generating dynamic HTML. If you are interested in contributing or wish to report an issue, please see [our repository](https://github.com/observablehq/inputs). For recent changes, please see [our release notes](https://github.com/observablehq/inputs/releases).`",
      pinned: false
    },
    {
      id: 37,
      value:
        "basics = md`---\n## Basics\n\nThese basic inputs will get you started.\n\n* [Button](/@observablehq/input-button) - do something when a button is clicked\n* [Toggle](/@observablehq/input-toggle) - toggle between two values (on or off)\n* [Checkbox](/@observablehq/input-checkbox) - choose any from a set\n* [Radio](/@observablehq/input-radio) - choose one from a set\n* [Range](/@observablehq/input-range) - choose a number in a range (slider)\n* [Select](/@observablehq/input-select) - choose one or any from a set (drop-down menu)\n* [Text](/@observablehq/input-text) - enter freeform single-line text\n* [Textarea](/@observablehq/input-textarea) - enter freeform multi-line text`",
      pinned: false
    },
    {
      id: 255,
      value:
        "md`---\n### [Button](/@observablehq/input-button) \n\nDo something when a button is clicked. [Examples ›](/@observablehq/input-button) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#button)`",
      pinned: false
    },
    { id: 258, value: "viewof clicks = Button(\"Click me\")", pinned: true },
    { id: 272, value: "clicks", pinned: true },
    {
      id: 431,
      value:
        "md`---\n### [Toggle](/@observablehq/input-toggle) \n\nToggle between two values (on or off). [Examples ›](/@observablehq/input-toggle) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#toggle)`",
      pinned: false
    },
    { id: 434, value: "viewof mute = Toggle({label: \"Mute\"})", pinned: true },
    { id: 435, value: "mute", pinned: true },
    {
      id: 260,
      value:
        "md`---\n### [Checkbox](/@observablehq/input-checkbox) \n\nChoose any from a set. [Examples ›](/@observablehq/input-checkbox) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#checkbox)`",
      pinned: false
    },
    {
      id: 264,
      value:
        "viewof colors = Checkbox([\"red\", \"green\", \"blue\"], {label: \"Colors\"})",
      pinned: true
    },
    { id: 274, value: "colors", pinned: true },
    {
      id: 266,
      value:
        "md`---\n### [Radio](/@observablehq/input-radio)\n\nChoose one from a set. [Examples ›](/@observablehq/input-radio) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#radio)`",
      pinned: false
    },
    {
      id: 269,
      value:
        "viewof color = Radio([\"red\", \"green\", \"blue\"], {label: \"Color\"})",
      pinned: true
    },
    { id: 276, value: "color", pinned: true },
    {
      id: 278,
      value:
        "md`---\n### [Range](/@observablehq/input-range)\n\nPick a number. [Examples ›](/@observablehq/input-range) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#range)`",
      pinned: false
    },
    {
      id: 281,
      value:
        "viewof n = Range([0, 255], {step: 1, label: \"Favorite number\"})",
      pinned: true
    },
    { id: 282, value: "n", pinned: true },
    {
      id: 296,
      value:
        "md`---\n### [Select](/@observablehq/input-select)\n\nChoose one, or any, from a menu. [Examples ›](/@observablehq/input-select) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#select)`",
      pinned: false
    },
    {
      id: 304,
      value:
        "viewof homeState = Select([null].concat(stateNames), {label: \"Home state\"})",
      pinned: true
    },
    { id: 307, value: "homeState", pinned: true },
    {
      id: 114,
      value:
        "viewof visitedStates = Select(stateNames, {label: \"Visited states\", multiple: true})",
      pinned: true
    },
    { id: 325, value: "visitedStates", pinned: true },
    {
      id: 368,
      value:
        "md`---\n### [Text](/@observablehq/input-text)\n\nEnter freeform single-line text. [Examples ›](/@observablehq/input-text) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#text)`",
      pinned: false
    },
    {
      id: 371,
      value:
        "viewof name = Text({label: \"Name\", placeholder: \"What’s your name?\"})",
      pinned: true
    },
    { id: 382, value: "name", pinned: true },
    {
      id: 538,
      value:
        "md`---\n### [Textarea](/@observablehq/input-textarea)\n\nEnter freeform multi-line text. [Examples ›](/@observablehq/input-textarea) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#textarea)`",
      pinned: false
    },
    {
      id: 542,
      value:
        "viewof bio = Textarea({label: \"Biography\", placeholder: \"What’s your story?\"})",
      pinned: true
    },
    { id: 549, value: "bio", pinned: true },
    {
      id: 214,
      value:
        "tables = md`---\n## Tabular data\n\nThese fancy inputs are designed to work with tabular data such as CSV or TSV [file attachments](/@observablehq/file-attachments) and [database clients](/@observablehq/databases).\n\n* [Search](/@observablehq/input-search) - query a tabular dataset\n* [Table](/@observablehq/input-table) - browse a tabular dataset`",
      pinned: false
    },
    {
      id: 353,
      value:
        "md`---\n### [Search](/@observablehq/input-search)\n\nQuery a tabular dataset. [Examples ›](/@observablehq/input-search) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#search)`",
      pinned: false
    },
    {
      id: 347,
      value:
        "viewof search = Search(capitals, {placeholder: \"Search U.S. capitals\"})",
      pinned: true
    },
    { id: 357, value: "search // see table below!", pinned: true },
    {
      id: 359,
      value:
        "md`---\n### [Table](/@observablehq/input-table)\n\nBrowse a tabular dataset. [Examples ›](/@observablehq/input-table) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#table)`",
      pinned: false
    },
    { id: 338, value: "viewof rows = Table(search)", pinned: true },
    {
      id: 405,
      value: "rows // click a checkbox in the leftmost column",
      pinned: true
    },
    {
      id: 71,
      value:
        "techniques = md`---\n## And more!\n\nGot the basics? Here are a few more advanced techniques:\n\n* [Synchronized inputs](/@observablehq/synchronized-inputs) - bind two or more inputs\n* [Introduction to Views](/@observablehq/introduction-to-views) - more on Observable’s viewof\n* More guides coming soon!\n`",
      pinned: false
    },
    {
      id: 57,
      value:
        "md`We are grateful to Jeremy Ashkenas for blazing the trail with [“The Grand Native Inputs Bazaar”](/@jashkenas/inputs). To migrate from Jeremy’s inputs to our new official inputs, consider our [legacy inputs](/@observablehq/legacy-inputs).`",
      pinned: false
    },
    {
      id: 473,
      value:
        "md`For even more, consider these “friends & family” inputs and techniques shared by the Observable community:\n\n${Table([\n  [[\"2D Slider\", \"/d/98bbb19bf9e859ee\"], \"Fabian Iwand\", \"a two-dimensional range\"],\n  [[\"Binary Input\", \"/@rreusser/binary-input\"], \"Ricky Reusser\", \"bitwise IEEE floating point\"],\n  [[\"DIY inputs\", \"/@bartok32/diy-inputs\"], \"Bartosz Prusinowski\", \"inputs with fun, custom styles\"],\n  [[\"FineRange\", \"/@rreusser/fine-range\"], \"Ricky Reusser\", \"high-precision numeric control\"],\n  [[\"Form Input\", \"/@mbostock/form-input\"], \"Mike Bostock\", \"multiple inputs in single cell\"],\n  [[\"Inputs\", \"/@jashkenas/inputs\"], \"Jeremy Ashkenas\", \"the original\"],\n  [[\"Player\", \"/@oscar6echo/player\"], \"oscar6echo\", \"detailed timing control for animation\"],\n  [[\"Scrubber\", \"/@mbostock/scrubber\"], \"Mike Bostock\", \"play/pause/scrub control for animation\"],\n  [[\"Range Slider\", \"/@mootari/range-slider\"], \"Fabian Iwand\", \"a two-ended range\"],\n  [[\"Ternary Slider\", \"/@yurivish/ternary-slider\"], \"Yuri Vishnevsky\", \"a proportion of three values\"],\n  [[\"Data driven range sliders\", \"/@bumbeishvili/data-driven-range-sliders\"], \"David B.\", \"a range input with a histogram\"],\n  [[\"Snapping Histogram Slider\", \"/@trebor/snapping-histogram-slider\"], \"Robert Harris\", \"a range input with a histogram\"],\n  [[\"Inputs in grid\", \"/@bumbeishvili/input-groups\"], \"David B.\", \"combine multiple inputs into a compact grid\"],\n  [[\"List Input\", \"/@harrislapiroff/list-input\"], \"Harris L.\", \"enter more than one of something\"],\n  [[\"Copier\", \"/@mbostock/copier\"], \"Mike Bostock\", \"a button to copy to the clipboard\"],\n  [[\"Tangle\", \"/@mbostock/tangle\"], \"Mike Bostock\", \"Bret Victor-inspired inline scrubbable numbers\"],\n  [[\"Editor\", \"/@cmudig/editor\"], \"CMU Data Interaction Group\", \"code editor with syntax highlighting\"]\n].map(([Name, Author, Description]) => ({Name, Author, Description})), {\n  sort: \"Name\",\n  rows: Infinity,\n  layout: \"auto\",\n  width: {\n    \"Description\": \"60%\"\n  },\n  format: {\n    Name: ([title, link]) => html`<a href=${link} target=_blank>${title}`\n  }\n})}\n\nTo share your reusable input or technique, please leave a comment.`",
      pinned: false
    },
    { id: 46, value: "md`---\n\n## Appendix`", pinned: false },
    {
      id: 5,
      value:
        "Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")",
      pinned: true
    },
    { id: 558, value: "svg = htl.svg", pinned: true },
    { id: 559, value: "html = htl.html", pinned: true },
    {
      id: 109,
      value: "htl = require(\"htl@0.2.5/dist/htl.min.js\")",
      pinned: true
    },
    {
      id: 314,
      value:
        "capitals = FileAttachment(\"us-state-capitals.tsv\").tsv({typed: true})",
      pinned: true
    },
    { id: 391, value: "stateNames = capitals.map(d => d.State)", pinned: true },
    { id: 6, value: "Button = Inputs.Button", pinned: true },
    { id: 438, value: "Toggle = Inputs.Toggle", pinned: true },
    { id: 8, value: "Radio = Inputs.Radio", pinned: true },
    { id: 183, value: "Checkbox = Inputs.Checkbox", pinned: true },
    { id: 10, value: "Range = Inputs.Range", pinned: true },
    { id: 12, value: "Select = Inputs.Select", pinned: true },
    { id: 14, value: "Text = Inputs.Text", pinned: true },
    { id: 545, value: "Textarea = Inputs.Textarea", pinned: true },
    { id: 16, value: "Search = Inputs.Search", pinned: true },
    { id: 18, value: "Table = Inputs.Table", pinned: true },
    { id: 20, value: "Input = Inputs.Input", pinned: true },
    { id: 22, value: "bind = Inputs.bind", pinned: true },
    { id: 24, value: "disposal = Inputs.disposal", pinned: true }
  ]
})33:[]
2f:{"title":"v0.6.0 of the Unofficial ObservableHQ Compiler","cells":[{"id":0,"value":"md`# v0.6.0 of the Unofficial ObservableHQ Compiler`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`The [first version](https://observablehq.com/@asg017/an-unofficial-observablehq-compiler) of the unofficial-observablehq-compiler came out a year and a half ago, and many improvements have been made since then! Most recently, in \\`v0.6.0\\`, several fundamental changes have been made, making it extremely easy to build your own Observable notebook editing experience!\n\nThis notebook will go over the recent changes to the compiler, but it won't be an exhaustive reference. [Check out the project on Github](https://github.com/asg017/unofficial-observablehq-compiler) for more!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Compiler *and* an Interpreter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`The biggest change in \\`v0.6.0\\` is the API change to distinguish between the library as a *compiler* and as an *interpreter*. Before, the entire thing was called a \"compiler\", but that wasn't really accurate. \n\nI don't want to get into arguments over what an \"interpreter\" is compared to a \"compiler\" (I never took a compilers class, sorry!), but in this library, the interpreter interprets (ie, executes) Observable JavaScript in a JavaScript environment, while the compiler compiles (ie, generates source code) Observable JavaScript into plain JavaScript as text. Previous versions of the library did this as well, but the API wasn't clear.\n\nLet's dive into it!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`### The Interpreter\n\nThe Interpreter takes Observable-style JavaScript and executes it. The Interpreter can be used in places like custom Observable notebook editors, or places that want to use Observable-style JavaScript and the Observable runtime.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"interpret = new Interpreter()","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"viewof source = html`<textarea rows=6 cols=60>a = 1;\nb = 2;\nc = a + b;\n\nviewof text = html\\`<input type=text>\\`;`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"{\n  const target = html`<div>`;\n  const runtime = new Runtime();\n  const main = runtime.module();\n  const observer = Inspector.into(target);\n\n  interpret.module(source, main, observer);\n  invalidation.then(() => runtime.dispose());\n\n  return target;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`### The Compiler\n\nThe compiler takes Observable JavaScript and compiles it to \"plain\" JavaScript, in the form of ES Modules. It's meant to make Observable source code more portable, since most other tools don't understand Observable JavaScript (but they can understand ES modules!).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"compile = new Compiler()","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"compile.module(source)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Tree-Shaking!\n\nWhen compiling, you now have to option to tree-shake the compiled output **on a cellular level**. The compiler that observablehq.com uses doesn't have this feature, meaning this Unofficial ObservableHQ Compiler has at least 1 more feature than the official version!\n\nSay your source code looks like this:\n\n~~~javascript\n${circleSource}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`This notebook defines a re-usable function \\`circle\\` that creates a circle, along with some documentation and example of how to use it. \n\nIf you were to compile this, the output would be:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"compile.module(circleSource)","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"md`Which is ${prettyBytes(compile.module(circleSource).length)} large.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`However, in most cases, if you were compiling this and using it somewhere else, it's likely that you only care about the \\`circle\\` function, and you'll never use the other markdown/example cells. The Observable runtime does ensure that unreachable cells don't get executed, so it doesn't ruin performance, but it does add unnecesary bloat to your compiled files.\n\nAnd, if any the of the example cells have any FileAttachments or import from other notebooks, then *those* imports and FileAttachments would appear in your compiled output as well, which starts to add up!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"md`Tree-shaking can fix this. You can specify which cells you want to include in your compiled output, and the Compiler will exclude any cells that aren't needed to define that cell, including unnamed cells, unused file attachments, and unused imports.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"compile.module(circleSource, { treeShake: [\"circle\"] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`Notice how much smaller the compiled output is now, ${prettyBytes(\n  compile.module(circleSource, { treeShake: [\"circle\"] }).length\n)}! \n\nLet's tree-shaking it on a more real world example, on the new [TimeChart](https://observablehq.com/@observablehq/timechart) notebook from Observable. This notebook's main cell is the re-usable \\`TimeChart\\` function, but it also includes several markdown and example cells of the TimeChart action. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`Compiling that notebook without tree-shaking outputs a file of\n**${prettyBytes(compile.module(timechartSource).length)}**\n, before minifying and gzipping. But, once compiled with tree-shaking targeting the \\`TimeChart\\` cell, the output is \n**${prettyBytes(\n  compile.module(timechartSource, { treeShake: [\"TimeChart\"] }).length\n)}**, half the size!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`Another real world example, the [@observablehq/inputs](https://observablehq.com/@observablehq/inputs) notebook. That notebook re-exports input components to make it easy to import specific components in one place. There's also a ton of documentation and example cells that you probably don't need to include in your compiled outputs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`Compiling that notebook without tree-shaking outputs a file of\n**${prettyBytes(inputCompiledBefore.length)}**. \nWith tree-shaking targeting just the \\`Table\\` cell, the output is \n**${prettyBytes(inputCompiledTreeShaked.length)}**, \n*${Math.floor(\n  10000 * (inputCompiledTreeShaked.length / inputCompiledBefore.length)\n) /\n  100}%* the size! Tree-shaking also knocked off one unused FileAttachment, shaving off an additional 3kB in this case.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`## It's being used in projects!\n\nA few different projects are currently using \\`v.0.6.0\\`, proving how re-usable powerful this new API is. Check them out!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`### [Dataflow](https://github.com/asg017/dataflow)\n\nA new project of mine, a self-hosted Observable notebook alternative. You can write Observable notebooks in git-friendly files, run your own local dev server, and export notebooks for use in other projects! Support for FileAttachments, Secrets, and custom standard libraries included.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`### [Starboard](https://starboard.gg/gz/open-source-observablehq-nfwK2VA)\n\nGuido Zuidhof, the creator of Starboard, an in-browser notebook that runs Javascript, HTML, markdown, and Python, created a [plugin](https://github.com/gzuidhof/starboard-observable) that allows you to run Observable notebook code inside of Starboard. Pretty cool!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`### [\"Let's build an Observable notebook editor\"](https://observablehq.com/d/63585ffc01d6a1af)\n\nAn Observable notebook that walks through the process of creating your own Observable notebook editor. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"cc = require(\"@alex.garcia/unofficial-observablehq-compiler@v0.6.0-alpha.6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Compiler = cc.Compiler","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"Interpreter = cc.Interpreter","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"parser = cc.parser","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"r = require(\"@observablehq/runtime\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Inspector = r.Inspector","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"Runtime = r.Runtime","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"Library = r.Library","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"inputCompiledTreeShaked = compile.module(inputsSource, { treeShake: [\"Table\"] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"inputCompiledBefore = compile.module(inputsSource)","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"prettyBytes = (await import('https://cdn.skypack.dev/pretty-bytes')).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"timechartSource = timechartNotebook.nodes.map(d => d.value).join(\"\\n\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"ojs = timechartNotebook.nodes.map(d => d.value).join(\"\\n\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"x = timechartNotebook.nodes.map(d => parser.parseCell(d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"compiled = {\n  const compile = new Compiler();\n  return {\n    default: compile.module(ojs),\n    treeShaked: compile.module(ojs, {\n      treeShake: [\"TimeChart\", \"TimeAxis\"]\n    })\n  };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"inputsSource = inputsNotebook.nodes.map(d => d.value).join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"inputs = {\n  const src = inputsNotebook.nodes.map(d => d.value).join(\"\\n\");\n  const compile = new Compiler();\n  return {\n    default: compile.module(src),\n    treeShaked: compile.module(src, {\n      treeShake: [\"Table\"]\n    })\n  };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"url = (source, invalidation) => {\n  const url = URL.createObjectURL(\n    new Blob([source], { type: \"text/javascript\" })\n  );\n  invalidation.then(() => URL.revokeObjectURL(url));\n  return url;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"render(\n  (await import(url(compiled.default, invalidation))).default,\n  invalidation\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"render(\n  (await import(url(compiled.treeShaked, invalidation))).default,\n  invalidation\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"function render(define, invalidation) {\n  const container = html`<div style=\"border: 2px solid #ccc; max-height: 450px; overflow: auto;\">\n  <div style=\"position: absolute; top: 0; left: 0; background-color: #ccc; font-weight: 700; padding: .02rem .5rem; border-radius: 0 0 .5rem 0; font-family: monospace; font-size: .875rem; z-index: 100;\">RENDERED NOTEBOOK</div>\n  <div class=\"target\"></div>\n</div>`;\n  const target = container.querySelector(\".target\");\n  const observer = Inspector.into(target);\n  const runtime = new Runtime();\n  const main = runtime.module(define, observer);\n  invalidation.then(() => runtime.dispose());\n  return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"circleSource = `\nmd\\`# Circle component\\`\n\nmd\\`examples\\`\n\nex1 = circle(40, \"red\")\n\nex2 = circle(40, \"green\")\n\nfunction circle(r, color) {\n  return svg\\`<svg width=\\${r * 2} height=\\${r * 2}>\n    <circle cx=\\${r} cy=\\${r} r=\\${r} fill=\\${color}></circle>\\`;\n}`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>