25:["$","title",null,{"children":"Standard Library | Xi Wenchuan | Observable"}] 49:T5bc,## Table of Contents - [currentUser](#currentUserSection) - Identify the current user. - [DatabaseClient](#databaseClientSection) - Create a database client. - [DOM](#domSection) - Create HTML and SVG elements. - [FileAttachment](#fileAttachmentSection) - Read local or remote files. - [Generators](#generatorsSection) - Utilities for generators and iterators. - [Graphviz and the dot template](#graphvizSection) - Use the dot template and Graphviz to create charts. - [html](#htmlSection) - Render HTML. - [Inputs](#inputsSection) (see [Observable Inputs](https://observablehq.com/@observablehq/inputs?collection=@observablehq/getting-data-in-and-out)) - [invalidation](#invalidationSection) - Dispose of resources. - [md](#mdSection) - Render Markdown. - [now](#nowSection) - Return the current value of Date.now. - [Promises](#promisesSection) - Utilities for promises. - [require](#requireSection) - Load third-party libraries. - [Sample Datasets](#sampleDataSection) - Sample datasets for experimentation. - [Secrets](#secretsSection) - Store access keys to make private data accessible without revealing the keys. - [SVG](#svgSection) - Render Scalable Vector Graphics. - [tex](#texSection) - Render LaTeX. - [visibility](#visibilitySection) - A special promise that waits for visibility. - [width](#widthSection) - Returns the current page width. - [Recommended Libraries](#additionalLibrariesSection) - [Deprecated/No Longer Recommended](#deprecatedSection) 4a:T5a4,The type of event that triggers promise resolution depends on the _input_ type as follows: - For button, submit, and checkbox inputs, _click_ events. - For file inputs, _change_ events. - For all other types, _input_ events. The resolved value is likewise dependent on the _input_.`type` as follows: - For range and number inputs, _input_.`valueAsNumber`. - For date inputs, _input_.`valueAsDate`. - For checkbox inputs, _input_.`checked`. - For single-file inputs (_input_.`multiple` is falsey), _input_.`files[0]`. - For multi-file inputs (_input_.`multiple` is truthy), _input_.`files`. - For all other types, _input_.`value`. The specified _input_ need not be an `HTMLInputElement`, but it must support the _target_.`addEventListener` and _target_.`remoteEventListener` methods of the [`EventTarget`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) interface. `Generators.input` is used by Observable’s [`viewof` operator](https://observablehq.com/@observablehq/introduction-to-views) to define the current value of a view, and is based on [`Generators.observe`](#generatorsObserveSection). Usually you do not use `Generators.input` directly, but it can be used to define a [generator cell](https://observablehq.com/@observablehq/generator-cells-functions-and-objects) exposing the current value of an input, and you can also read the yielded values by hand. For example, to accumulate the first four values:4b:T526,### DOM methods that have been deprecated | Name | Suggested substitution | |-|-| | DOM.**canvas**() | Deprecated; use **htl.html** | | DOM.**download**() | Deprecated; use the cell menu or **Blob** | | DOM.**element**() | Deprecated; use **htl.html** | | DOM.**input**() | Deprecated; use **htl.html** or **Inputs** | | DOM.**range**() | Deprecated; use **htl.html** or **Inputs.range** | | DOM.**select**() | Deprecated; use **htl.html** or **Inputs.select** | | DOM.**svg**() | Deprecated; use **htl.html** | | DOM.**text**() | Deprecated; use **htl.html** |4c:[{"id":"cc3b5f708cba11ec4ae9dd3c9028eed14acfd69863d2fa29cda039b723d4cefd16b97cbc30c4ba5426cea6f0ecc3b613b29cdc04a4c10f85deb95b0b012fa110","href":"https://static.observableusercontent.com/files/cc3b5f708cba11ec4ae9dd3c9028eed14acfd69863d2fa29cda039b723d4cefd16b97cbc30c4ba5426cea6f0ecc3b613b29cdc04a4c10f85deb95b0b012fa110","name":"image.png","type":"image/png","lastModified":1666072912168.286,"size":3010150},{"id":"2aff4aaf99f1d1b11dbcbf1365ce399e4714900c6fcd2c552bbf8b8393c06f4d7335fd2b785b907248b9b3ea42170f7b07e579375fbe29639af4b3a1a05c2a4d","href":"https://static.observableusercontent.com/files/2aff4aaf99f1d1b11dbcbf1365ce399e4714900c6fcd2c552bbf8b8393c06f4d7335fd2b785b907248b9b3ea42170f7b07e579375fbe29639af4b3a1a05c2a4d","name":"image@1.png","type":"image/png","lastModified":1666072912168.286,"size":2349595},{"id":"036293060a3d1be9b3ad33fca12dbd546157c3a20cbc2dcee6400a04c4e26b407d247697c0b5a6b23c9c03d263698913e9f5055b1c3fa2cfe6fc1826ec8c7ad0","href":"https://static.observableusercontent.com/files/036293060a3d1be9b3ad33fca12dbd546157c3a20cbc2dcee6400a04c4e26b407d247697c0b5a6b23c9c03d263698913e9f5055b1c3fa2cfe6fc1826ec8c7ad0","name":"Laser_Report_2020.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1666072912168.286,"size":462969},{"id":"880426472f67ca25f8401c05e8c10466a3709a8870275b28a1fb5aebe9ec234a20cd651273434438b98d5aa0a6d18221ab155dccbe133c9453bde00537ab29a8","href":"https://static.observableusercontent.com/files/880426472f67ca25f8401c05e8c10466a3709a8870275b28a1fb5aebe9ec234a20cd651273434438b98d5aa0a6d18221ab155dccbe133c9453bde00537ab29a8","name":"Dog_Photos.zip","type":"application/zip","lastModified":1666072912168.286,"size":516016}] 29:{"id":"8d3512e41ee723a9","slug":null,"title":"Standard Library","thumbnail":"5a8d92da8e3ba985b0f568c02543420a883fe44998e12fb266cdb0a907d0b98d","access_level":"public","create_time":"$D2022-10-18T06:01:52.168Z","update_time":"$D2022-10-18T06:01:52.168Z","view_time":null,"first_public_time":"$D2022-10-18T06:01:52.168Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0e04592eda5513f5","login":"xiwenchuan","name":"Xi Wenchuan","avatar_url":"https://avatars-next.observableusercontent.com/d6c459682e45c7dbff5d1b38a93a39310c241e77061c4a5a82c41f64062a1111","tier":"starter_2024","bio":"student majoring in Finance. interested in front-end visuallization. working in PersLEARN, Peking University.","followed_by_you":false,"follows_you":false},"version":1735,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"205405e4dd57b9eb","login":"xiwenchuan","name":"Xi Wenchuan","avatar_url":"https://avatars-next.observableusercontent.com/d6c459682e45c7dbff5d1b38a93a39310c241e77061c4a5a82c41f64062a1111","tier":null,"bio":"student majoring in Finance. interested in front-end visuallization. working in PersLEARN, Peking University.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"205405e4dd57b9eb","login":"xiwenchuan","name":"Xi Wenchuan","avatar_url":"https://avatars-next.observableusercontent.com/d6c459682e45c7dbff5d1b38a93a39310c241e77061c4a5a82c41f64062a1111","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Standard Library","cells":[{"id":732,"value":"# Standard Library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"

\n\nMany capabilities that you will find useful are provided in the [Observable standard library](https://github.com/observablehq/stdlib/blob/master/README.md). This notebook describes those capabilities in brief, and provides links when there are notebooks that go into greater detail. (Older functionality is listed in [Deprecated / No Longer Recommended](#deprecatedSection).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"currentUserSection = md ` ## currentUser\nThe \\`currentUser\\` object is a special addition to the standard library, only available within private [Team](https://observablehq.com/pricing) notebooks. \\`currentUser\\` provides information about the team member currently viewing the page:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"currentUser // to demo, a fake value is shown here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"databaseClientSection = md `## DatabaseClient`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"Create a database client for a configured database:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"client = DatabaseClient(\"Baby Names\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"This returns a promise to the client for the database with the specified name. You then can use a `query` method that returns a promise to the array of results:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"names = client.query(\n `SELECT name, gender, year, SUM(number) AS number\n FROM names\n WHERE year > ?\n GROUP BY name, gender, year`,\n [1920]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"The database client has the following methods available:\n\n| Name | Description |\n|-|-|\n| databaseClient.query() | Run the specified SQL query, returning a promise to the array of results. |\n| databaseClient.queryRow() | Similar to databaseClient.query but returns a promise to a single row of results. |\n| databaseClient.explain() | Explains the query plan for the specified query, returning a promise to an HTML element. (PostgreSQL databases only.)|\n| databaseClient.describe() | Describes the schema for the table with the specified name, returning a promise to an HTML table. |\n\nSee [Connecting to databases](https://observablehq.com/@observablehq/databases) for more examples and explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"domSection = md `## DOM\n\nThe following [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) methods are supported.\n\n### DOM.context2d(_width_, _height_[, _dpi_]))\nReturns a new canvas context with the specified _width_ and _height_ and the specified device pixel ratio _dpi_. If _dpi_ is not specified, it defaults to [\\`_window_.devicePixelRatio\\`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). To access the context's canvas, use [\\`_context_.canvas\\`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/canvas). For example, to create a 960x500 canvas:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"```JavaScript\n{\n const context = DOM.context2d(960, 500);\n return context.canvas;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"To expand the DOM, click the black triangle next to \"Object\":","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"DOM // Click the black triangle next to \"Object\" to expand it!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"Another example: the following code creates a small canvas and adds text:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"{\n const context = DOM.context2d(width, 33);\n context.fillText(\"Hello, I am a canvas!\", 0, 20);\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":779,"value":"`DOM.context2d` is helpful if you are using [2D Canvas](https://www.w3.org/TR/2dcontext/) (rather than [WebGL](https://webglfundamentals.org/)), because of automatic pixel density scaling.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"### DOM.uid([_name_])\nReturns a new unique _identifier_. If _name_ is specified, the _identifier_.`id` will be derived from the specified _name_, which may be useful for debugging. If `DOM.uid` is called repeatedly with the same _name_, every returned _identifier_ is still unique (that is, different). \n\nIdentifiers are useful in SVG: \n- Use _identifier_.`href` for IRI references, such as the [xlink:href](https://www.w3.org/TR/SVG/animate.html#HrefAttribute) attribute.\n- Use _identifier_.`toString` for functional notation, such as the [clip-path](https://www.w3.org/TR/css-masking/#the-clip-path) presentation attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"For example, to clip the image of the Mona Lisa (attached to this notebook) to a circle of radius 320 px:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"{\n const clip = DOM.uid(\"clip\");\n return svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"Using `DOM.uid` is strongly recommended over hand-coding as it ensures that your identifiers are still unique if your code is imported into another notebook. Because _identifier_.`href` and _identifier_.`toString` return absolute rather than local IRIs, it also works well in conjunction with a notebook’s [base URL](https://developer.mozilla.org/docs/Web/HTML/Element/base).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"fileAttachmentSection = md ` ## FileAttachment\nTo read in local files, use one of the [FileAttachment](#fileAttachmentSection) methods or a [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader).\nSee [File Attachments](https://observablehq.com/@observablehq/file-attachments) for examples and more explanation. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"### fileAttachment.arrayBuffer()\nReturns a promise to the file's contents as an [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"```JavaScript\nconst city = shapefile.read(await FileAttachment(\"sf.shp\").arrayBuffer());\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"### fileAttachment.blob()\nReturns a promise to a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) containing the raw content of the file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"```JavaScript\nconst blob = await FileAttachment(\"binary-data.dat\").blob();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"### fileAttachment.csv({_array_ = false, _typed_ = false} = {})\nReturns a promise to the file’s contents, parsed as comma-separated values (CSV) into an array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"```JavaScript\nconst data = await FileAttachment(\"cars.csv\").csv();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"If _array_ is true, an array of arrays is returned; otherwise, the first row is assumed to be the header row and an array of objects is returned, and the returned array has a _data_.`columns` property that is an array of column names. (See [`d3.csvParseRows`](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parseRows).) If _typed_ is true, [automatic type inference](https://observablehq.com/@d3/d3-autotype) is applied; only use this feature if you know your data is compatible.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"### fileAttachment.image()\nReturns a promise to a file loaded as an [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image). The promise resolves when the image has finished loading, making this useful for reading the image pixels in Canvas, or for loading the image into a WebGL texture. Consider [`fileAttachment.url`](#fileAttachmentUrlSection) if you want to embed an image in HTML or Markdown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"```JavaScript\nconst image = await FileAttachment(\"sunset.jpg\").image();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"### fileAttachment.json()\nReturns a promise to the file's contents, parsed as JSON into JavaScript values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"```JavaScript\nconst logs = await FileAttachment(\"weekend-logs.json\").json();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"### fileAttachment.stream()\nReturns a promise to a [ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of the file's contents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"```JavaScript\nconst stream = await FileAttachment(\"metrics.csv\").stream();\nconst reader = stream.getReader();\nlet done, value;\nwhile (({done, value} = await reader.read()), !done) {\n yield value;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"### fileAttachment.text()\nReturns a promise to the file's contents as a JavaScript string.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"```JavaScript\nconst hello = await FileAttachment(\"hello.txt\").text();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"### fileAttachment.tsv({_array_ = false, _typed_ = false} = {})\nReturns a promise to the file’s contents, parsed as tab-separated values (CSV) into an array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"```JavaScript\nconst data = await FileAttachment(\"cars.tsv\").tsv();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"If _array_ is true, an array of arrays is returned; otherwise, the first row is assumed to be the header row and an array of objects is returned, and the returned array has a _data_.`columns` property that is an array of column names. (See [`d3.csvParseRows`](https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parseRows).) If _typed_ is true, [automatic type inference](https://observablehq.com/@d3/d3-autotype) is applied; only use this feature if you know your data is compatible.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"fileAttachmentUrlSection = md `### fileAttachment.url()\nReturns a promise to the URL at which the file may be retrieved.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"```JavaScript\nconst url = await FileAttachment(\"file.txt\").url();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"fileAttachmentXLSXSection = md `### fileAttachment.xlsx()\nReturns an array of sheetnames from a given XLSX file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1615,"value":"workbook = FileAttachment(\"Laser_Report_2020.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"See [FileAttachment.xlsx](https://observablehq.com/@observablehq/xlsx) for examples and more explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"fileAttachmentZipSection = md `### fileAttachment.zip()\nReturns an array of filenames from a given ZIP archive.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"dogZip = FileAttachment(\"Dog_Photos.zip\").zip()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"See [FileAttachment.zip](https://observablehq.com/@observablehq/zip) for examples and more explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"Note that the `Files.text()`, `Files.url()`, and `Files.buffer()` methods in [Reading Local Files](https://observablehq.com/@mbostock/reading-local-files) are deprecated now.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"generatorsSection = md `## Generators\nUse the methods in this section to create generators. (See [Introduction to Generators](https://observablehq.com/@observablehq/introduction-to-generators) for an explanation of what generators are used for.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"generatorsInputSection = md ` ### Generators.input(_input_)\nNote: Consider using the [\\`viewof\\`](https://observablehq.com/@observablehq/introduction-to-views) operator. \n\nReturns a new generator that yields promises to the current value of the specified _input_ element; each promise resolves when the _input_ element emits an event. (The promise resolves when the event is emitted, even if the value of the input is unchanged.) If the initial value of the _input_ is not undefined, the returned generator’s first yielded value is a resolved promise with the initial value of the _input_.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"```JavaScript\n{\n const values = [];\n for (const value of Generators.input(element)) {\n if (values.push(await value) >= 4) {\n return values;\n }\n }\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"`Generators.input` is lossy and may skip values: if more than one event is emitted before the next promise is pulled from the generator (more than once per animation frame), then the next promise returned by the generator will be resolved with the latest input value, potentially skipping intermediate values. See [`Generators.queue`](#generatorsQueueSection) for a non-debouncing generator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"generatorsObserveSection = md ` ### Generators.observe(_initialize_)\nReturns a generator that yields promises to an observable value, adapting a push-based data source (such as an [\\`Observable\\`](https://github.com/tc39/proposal-observable/blob/master/README.md), an [\\`EventEmitter\\`](https://nodejs.org/api/events.html#events_class_eventemitter) or an [\\`EventTarget\\`](https://developer.mozilla.org/docs/Web/API/EventTarget)) to a pull-based one.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"The specified _initialize_ function is invoked before `Generators.observe` returns, being passed a _change_ function; calling _change_ triggers the resolution of the current promise with the passed value. The _initialize_ function may also return a _dispose_ function; this function will be called when the generator is [disposed](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Generator/return). (See [invalidation](#invalidationSection).)\n\nFor example, to observe the current value of a text input element, you might say:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"```JavaScript\nGenerators.observe(change => {\n\n // An event listener to yield the element’s new value.\n const inputted = () => change(element.value);\n\n // Attach the event listener.\n element.addEventListener(\"input\", inputted);\n\n // Yield the element’s initial value.\n change(element.value);\n\n // Detach the event listener when the generator is disposed.\n return () => element.removeEventListener(\"input\", inputted);\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"(See also [`Generators.input`](#generatorsInputSection).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"`Generators.observe` is typically used to define a [generator cell](https://observablehq.com/@mbostock/generator-cells-functions-and-objects), but you can also read the yielded values by hand. For example, to accumulate the first four values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"```JavaScript\n{\n const generator = Generators.observe(…);\n const values = [];\n for (const value of generator) {\n if (values.push(await value) >= 4) {\n return values;\n }\n }\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"`Generators.observe` is lossy and may skip values: if _change_ is called more than once before the next promise is pulled from the generator (more than once per animation frame), then the next promise returned by the generator will be resolved with the latest value passed to _change_, potentially skipping intermediate values. See [`Generators.queue`](#generatorsQueueSection) for a non-debouncing generator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"generatorsQueueSection = md ` ### Generators.queue(_initialize_)\nReturns a generator that yields promises to an observable value, adapting a push-based data source (such as an [\\`Observable\\`](https://github.com/tc39/proposal-observable/blob/master/README.md), an [\\`EventEmitter\\`](https://nodejs.org/api/events.html#events_class_eventemitter) or an [\\`EventTarget\\`](https://developer.mozilla.org/docs/Web/API/EventTarget)) to a pull-based one.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"The specified _initialize_ function is invoked before `Generators.queue` returns, being passed a _change_ function; calling _change_ triggers the resolution of the current promise with the passed value. The _initialize_ function may also return a _dispose_ function; this function will be called when the generator is [disposed](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Generator/return). (See [invalidation](#invalidationSection).)\n\nFor example, to observe the current value of a text input element, you might say:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"```JavaScript\nGenerators.queue(change => {\n\n // An event listener to yield the element’s new value.\n const inputted = () => change(element.value);\n\n // Attach the event listener.\n element.addEventListener(\"input\", inputted);\n\n // Yield the element’s initial value.\n change(element.value);\n\n // Detach the event listener when the generator is disposed.\n return () => element.removeEventListener(\"input\", inputted);\n})\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"(See also [`Generators.input`](#generatorsInputSection).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"`Generators.queue` is typically used to define a [generator cell](https://observablehq.com/@mbostock/generator-cells-functions-and-objects), but you can also read the yielded values by hand. For example, to accumulate the first four values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"```JavaScript\n{\n const generator = Generators.queue(…);\n const values = [];\n for (const value of generator) {\n if (values.push(await value) >= 4) {\n return values;\n }\n }\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"`Generators.queue` is non-lossy and, as a result, may yield “stale” values: if _change_ is called more than once before the next promise is pulled from the generator (more than once per animation frame), the passed values are queued in order and the generator will return resolved promises until the queue is empty again. See [`Generators.observe`](#generatorsObserveSection) for a debouncing generator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"See [Introduction to Generators](https://observablehq.com/@observablehq/introduction-to-generators) for examples and more explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"graphvizSection = md `## Graphviz and the \\`\\`\\`dot\\`\\`\\` template`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"Observable supports the `dot` template for convenient use of the [Graphviz](https://observablehq.com/@observablehq/dot) language to render graphs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1646,"value":"dot`digraph { event -> consequence; }`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"See [Graphviz](https://observablehq.com/@observablehq/dot) for more examples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":978,"value":"htmlSection = md `## html \\`\\`\\` \\`string\\` \\`\\`\\` (Create an HTML element)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"htmlNote = note(htl.html`Note: The html function is supported, but consider using the HTML cell mode available from the Add Cell menu, which allows you to type HTML code without the html keyword and without needing to enclose the text in backticks.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"Use `html` to create an HTML element. For example, to create an H3 element whose content is \"Hello, world!\":\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"html`

Hello, world!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"The `html` function returns the HTML element represented by the specified HTML [_string literal_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#string_literals). The function is intended to be used as a [tagged template literal](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals_and_escape_sequences). Leading and trailing whitespace is automatically trimmed. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"If the resulting HTML fragment is not a single HTML element or node, it is wrapped in a DIV element. For example, consider the following expression:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"html`Hello, world!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"This expression is equivalent to the next expression:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"html`
Hello, world!
`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"If an embedded expression is a DOM element, it is embedded in generated HTML. For example, to embed TeX within HTML:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"html`I like ${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":1015,"value":"If an embedded expression is an array, the elements of the array are embedded in the generated HTML. For example, to create a table from an array of values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"html`\n ${[\"zero\", \"one\", \"two\"].map((name, i) => html`\n \n `)}\n
${name} ${i}
`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"A few more examples:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"html`\n Use a <span> element to set the background color.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"## Inputs (see [Observable Inputs](https://observablehq.com/@observablehq/inputs?collection=@observablehq/getting-data-in-and-out))\nObservable has a wide variety of inputs, such as buttons, sliders, radio buttons, checkboxes, text entry inputs and more. These are part of the [Recommended Libraries](https://observablehq.com/@observablehq/recommended-libraries?collection=@observablehq/libraries), but there is a separate [notebook](https://observablehq.com/@observablehq/inputs?collection=@observablehq/getting-data-in-and-out) devoted solely to Observable Inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"inputsSection","database":"$undefined"},{"id":1045,"value":"invalidationSection = md ` ## invalidation\nTo free up resources when a cell is re-evaluated, such as cancelling timers or disposing WebGL contexts, use the \\`invalidation\\` promise. This promise resolves when the current cell is re-evaluated: when the cell’s code changes, when it is run using Shift-Enter, or when a referenced input changes. This promise is typically used to dispose of resources that were allocated by the cell. For example, to abort a fetch if the cell is invalidated:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"```JavaScript\n{\n const controller = new AbortController;\n invalidation.then(() => controller.abort());\n const response = await fetch(url, {signal: controller.signal});\n return response.json();\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"The invalidation promise is provided by the runtime rather than the standard library, because it resolves to a new promise each time a cell is evaluated.\n\nSee [Invalidation](https://observablehq.com/@observablehq/invalidation) for examples and more explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"mdSection = md `## md \\`\\`\\` \\`string\\` \\`\\`\\` (Write Markdown code) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"mdNote = note(htl.html`Note: The `md` function is supported, but consider using the Markdown cell mode available from the Add Cell menu, which allows you to type Markdown code without the `md` keyword and without needing to enclose the text in backticks.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"The `md` function returns the HTML element represented by the specified Markdown [_string literal_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#string_literals). For example, to create an H3 element whose content is “Hello, world!”:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"md`### Hello, world!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"The Markdown compiler used is [Marked](https://marked.js.org). Leading and trailing whitespace is automatically trimmed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"If an embedded expression is a DOM element, it is embedded in generated HTML. For example, to embed [LaTeX](#texSection) within Markdown:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"md`My favorite number is ${tex`\\tau`}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"If an embedded expression is an array, the elements of the array are embedded in the generated HTML. The elements may either be strings, which are interpreted as Markdown, or DOM elements. For example, given the following array of data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"elements = [\n {symbol: \"Co\", name: \"Cobalt\", number: 27},\n {symbol: \"Cu\", name: \"Copper\", number: 29},\n {symbol: \"Sn\", name: \"Tin\", number: 50},\n {symbol: \"Pb\", name: \"Lead\", number: 82}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"To create a table from the previous array of data, you would use the following Markdown code:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"md`\n| Name | Symbol | Atomic number |\n|-----------|-------------|---------------|${elements.map(e => `\n| ${e.name} | ${e.symbol} | ${e.number} |`)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"nowSection = md ` ## now`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"A reactive variable that returns the current value of `Date.now`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"now // Returns the current value of Date.now.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"To display the current time in a Markdown string:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"md`The current time is: ${new Date(now).toISOString()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"promisesSection = md ` ## Promises`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"promisesDelaySection = md `### Promises.delay(_duration_[, _value_])\nReturns a promise that resolves with the specified _value_ after the specified _duration_ in milliseconds. For example, to define a cell that increments approximately every second:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"```JavaScript\ni = {\n let i = 0;\n yield i;\n while (true) {\n yield Promises.delay(1000, ++i);\n }\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"If you desire precise synchronization, such as a timer that ticks exactly every second, use [`Promises.tick`](#promisesTickSection) instead of `Promises.delay`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"promisesTickSection = md `### Promises.tick()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"Returns a promise that resolves with the specified _value_ at the next integer multiple of _milliseconds_ since the UNIX epoch. This is much like [`Promises.delay`](#promisesDelaySection), except it allows promises to be synchronized. For example, to define a cell that increments every second, on the second:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"```JavaScript\ni = {\n let i = 0;\n yield i;\n while (true) {\n yield Promises.tick(1000, ++i);\n }\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"Or, to define a cell that is an async generator:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"```JavaScript\ni = {\n let i = 0;\n while (true) {\n yield i++;\n await Promises.tick(1000);\n }\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"### Promises.when(_date_[, _value_])\nReturns a promise that resolves with the specified value at the specified date. This method relies on [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), and thus the specified date must be no longer than 2,147,483,647 milliseconds (24.9 days) from now.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"requireSection = md `## require (Load third-party libraries)\n- \\`require.resolve()\\`\n- \\`require.alias()\\`\n\nThese are supported, but consider using [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"### require(_names...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"Returns a promise of the [asynchronous module definition](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) (AMD) with the specified names, loaded from [`jsDelivr`](https://jsdelivr.com/). Each module name can be a package (or scoped package) name optionally followed by the at sign (@) and a semver range. For example, to load [`d3-array`](https://github.com/d3/d3-array):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"```JavaScript\nd3 = require(\"d3-array\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"Or, to load [`d3-array`](https://github.com/d3/d3-array) and [`d3-color`](https://github.com/d3/d3-color) and merge them into a single object:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"```JavaScript\nd3 = require(\"d3-array\", \"d3-color\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"Or, to load [`d3-array`](https://github.com/d3/d3-array) 1.1x:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"```JavaScript\nd3 = require(\"d3-array@1.1\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"See [`d3-require`](https://github.com/d3/d3-require) for more information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"### require.resolve(_name_)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"Returns a promise to the resolved URL to require the module with the specified _name_. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"```JavaScript\nrequire.resolve(\"d3-array\") // \"https://cdn.jsdelivr.net/npm/d3-array@2.0.3/dist/d3-array.min.js\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"### require.alias(_aliases_)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"Returns a [require function](#requireSection) with the specified _aliases_. For each key in the specified _aliases_ object, any require of that key is substituted with the corresponding value. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"```JavaScript\nReact = require(\"react@16/umd/react.production.min.js\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"```JavaScript\nReactDOM = require(\"react-dom@16/umd/react-dom.production.min.js\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"```JavaScript\nSemiotic = require.alias({\"react\": React, \"react-dom\": ReactDOM})(\"semiotic@1\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"Equivalently:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"```JavaScript\nr = require.alias({\n \"react\": \"react@16/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\",\n \"semiotic\": \"semiotic@1\"\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"Then to require the libraries:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"```JavaScript\nReact = r(\"react\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"```JavaScript\nReactDOM = r(\"react-dom\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"```JavaScript\nSemiotic = r(\"semiotic\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"## Sample Datasets\n The standard library includes multiple sample datasets so that all notebooks have data available to work with. These include financial data, statistics, weather information, and scientific data. See [Sample Datasets](https://observablehq.com/@observablehq/sample-datasets?collection=@observablehq/getting-data-in-and-out) for the full list.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"sampleDataSection","database":"$undefined"},{"id":1299,"value":"secretsSection = md`## Secrets\nSecrets are name-value pairs that you can use in your private notebooks to access private data. By specifying secrets in your Settings, you can enable your notebooks to use API keys or other sensitive data without making the API keys or sensitive data public.\n\nSee [Introduction to Secrets](https://observablehq.com/@observablehq/secrets) for examples and more explanation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"svgSection = md `## SVG \\`\\`\\` \\`string\\` \\`\\`\\` (Create an SVG element)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"md `Returns the SVG element represented by the specified SVG [_string literal_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#string_literals). This function is intended to be used as a [tagged template literal](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals_and_escape_sequences). Leading and trailing whitespace is automatically trimmed. For example, to create an SVG element whose content is a circle:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"If the resulting SVG fragment is not a single SVG element, it is wrapped in a ``/`` element. For example, consider this expression:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"svg`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"The previous expression is equivalent to the next expression:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"svg`\n \n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"If an embedded expression is a DOM element, it is embedded in generated SVG. If an embedded expression is an array, the elements of the array are embedded in the generated SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"The following expression creates an SVG image with text:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"texSection = md ` ## tex \\`\\`\\` \\`string\\` \\`\\`\\` (Write LaTeX code)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"texNote = note(htl.html`Note: The `tex` function is supported, but consider using the Mathematical formula available from the Add Cell menu, which allows you to type TeX code without the `tex` keyword and without needing to enclose the text in backticks.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"Returns the HTML element represented by the specified LaTeX [_string literal_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#string_literals). Implemented by [KaTeX](https://github.com/Khan/KaTeX).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"tex`\nf(x) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"### tex.block \\`string\\`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"Equivalent to [`tex`](#texSection), but uses KaTeX’s display mode to produce a bigger block element rather than a smaller inline element.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"tex.block`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"tex.block`\nf(x) = \\int_{-\\infty}^\\infty\n \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\n \\,d\\xi\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"### tex.options(_options_)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"Returns a function equivalent to [`tex`](#texSection), but with the specified _options_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"tex.options({displayMode: true})`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"visibilitySection = md ` ## visibility\nVisibility is a special kind of promise that resolves when a cell becomes visible. If, for example, you want animation to run only after a cell has scrolled into view, you can do that using \\`visibility()\\`.\n\nThe visibility function is provided by the runtime rather than the standard library because it resolves to a different function for each cell.\nAn example of using \\`visibility\\` as part of a \\`fadeIn\\` function follows, along with an example of the effect:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"function fadeIn(element, visibility) {\n element.style.color = \"transparent\";\n element.style.willChange = \"color\";\n element.style.transition = \"color 2.5s linear\";\n visibility().then(() => (element.style.color = \"inherit\"));\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"The following paragraph (from [A Christmas Carol](https://www.gutenberg.org/files/46/46-h/46-h.htm#link1)) fades in when the page is first scrolled:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"fadeIn(md`The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world...`, visibility)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"See [Awaiting Visibility](https://observablehq.com/@observablehq/visibility) for more examples and explanation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"widthSection = md ` ## width`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"A reactive variable that returns the current page width.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"width //Resize the browser window to half-size to see the value change.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"To make a rounded rectangle in SVG that resizes to fit the page:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"```\nhtml``\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"additionalLibrariesSection = md ` ## Recommended Libraries\nObservable also includes and recommends the following additional libraries (some are third-party).\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1723,"value":"recLibsTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"See [Recommended Libraries](https://observablehq.com/@observablehq/recommended-libraries?collection=@observablehq/libraries) for details about each individual library.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":742,"value":"deprecatedSection = md`## Deprecated / No Longer Recommended\nThe following methods are deprecated and are no longer recommended. Consider using the suggested substitutions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"### Files methods that have been deprecated\n| Name | Suggested substitution |\n|-|-|\n| Files.buffer() | Deprecated; use FileAttachment or FileReader |\n| Files.text() | Deprecated; use FileAttachment or FileReader |\n| Files.url() | Deprecated; use FileAttachment or FileReader |\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"### Generators methods that have been deprecated\n| Name | Suggested substitution |\n|-|-|\n| Generators.disposable() | Deprecated; use invalidation |\n| Generators.filter() | Deprecated; use for and yield |\n| Generators.map() | Deprecated; use for and yield |\n| Generators.range() | Deprecated; use for and yield |\n| Generators.valueAt() | Deprecated; use for |\n| Generators.worker() | Deprecated; use Worker |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"currentUser = ({\n login: \"person\",\n name: \"Amaya Person\",\n bio: \"\",\n url: \"\",\n avatar: \"https://avatars.observableusercontent.com/avatar/9acd0c72595fd2c8faf4b3acbd0607c1522e453416b21347125a42d7b1ccbafc\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"import {MockDatabaseClient as DatabaseClient} from \"cc1c4f2583af6f34\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"import {recLibsTable} from \"@observablehq/recommended-libraries\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"note = ((contents) => htl.html`\n
\n ${contents}\n
\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null