36:["$","title",null,{"children":"Observable: The User Manual ssss | Xing Li | Observable"}] 3e:T532,md`## Start Here * #### [Five-minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction)
An introduction that demonstrates what makes Observable a unique environment for creative code. * #### [Tutorial](/@observablehq/tutorial-1-lunch-calculator)
A hands-on introduction to the Observable user interface and the basics of editing code. * #### [Observable’s not JavaScript](/@observablehq/observables-not-javascript)
Explains the differences between the regular JavaScript you may already be accustomed to, and reactive JavaScript in Observable. * #### [Introduction to HTML](https://observablehq.com/@observablehq/introduction-to-html)
Shows how to render HTML — and Markdown, and SVG, and Canvas — and how to combine them. * #### [Introduction to Imports](https://observablehq.com/@observablehq/introduction-to-imports)
How to reuse any part of any notebook in any other notebook. * #### [The Standard Library](https://observablehq.com/@observablehq/standard-library)
Files, Generators, Promises, require, DOM, and more! Observable comes with a small, but well considered, standard library. * #### [How Observable Runs](https://observablehq.com/@mbostock/how-observable-runs)
Uses flow diagrams to explain Observable’s dataflow runtime and programming model.`3f:Td07,md`## Notebook Concepts * #### [Introduction to Data](https://observablehq.com/@observablehq/introduction-to-data)
An overview of various methods for getting your data into Observable in the first place. * #### [File Attachments](https://observablehq.com/@observablehq/file-attachments)
Painlessly upload and use files directly in Observable notebooks. Versioned, streamable, suggest-able, replace-able, they’re pretty convenient. * #### [Introduction to require](https://observablehq.com/@tmcw/introduction-to-require)
How to require JavaScript libraries from [npm](https://www.npmjs.com/), or anywhere on the web. * #### [Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views)
Views allow you to directly control values in your notebook with interactive UI widgets (or interactive charts, or visualizations, or any interface you can imagine). * #### [Introduction to Promises](https://observablehq.com/@observablehq/introduction-to-promises)
Observable notebooks wait for promises by default. This notebook explains what they are, and how to use them to manage asynchrony. * #### [Introduction to Generators](https://observablehq.com/@observablehq/introduction-to-generators)
Animations, simulations, transformations — generators represent values that change over time. * #### [Introduction to Asynchronous Iteration](https://observablehq.com/@observablehq/introduction-to-asynchronous-iteration)
Asynchronous iterators are a new JavaScript feature that are very useful in Observable notebooks, allowing you to easily create cells that produce new values when their data is ready. * #### [Introduction to Mutable State](https://observablehq.com/@observablehq/introduction-to-mutable-state)
Normally, your notebooks evaluate cleanly, in their logical dataflow order, from input to output. But some complex notebooks require more complicated tangles of effects. Observable supports mutable state, which gives you fine-grained control over the order of evaluation of your program. * #### [Introduction to Visual Dataflow](https://observablehq.com/@observablehq/introducing-visual-dataflow)
There’s an ambient mini map that floats in the top-right corner of your notebooks, highlighting which cells depend on which other cells. Learn how to use it to debug the reactive connections within notebooks. * #### [Introduction to Secrets](https://observablehq.com/@observablehq/secrets)
Sometimes your private notebooks need secret keys to connect to private data sources and APIs. Here’s a good place to keep them. * #### [API Keys](https://observablehq.com/@observablehq/api-keys)
Use Observable’s API keys to embed your private notebooks on internal intranets and private dashboards. * #### [The Notebook Visualizer](https://observablehq.com/@observablehq/notebook-visualizer)
(Which also comes in an [Elk Edition](https://observablehq.com/@tmcw/notebook-visualizer-elk-edition) flavor, for more orthogonal layouts...) can take any Observable notebook and draw a wiring schematic of how the cells depend on and react to one another. * #### [Keyboard Shortcuts](https://observablehq.com/@observablehq/keyboard-shortcuts)
The big list of keyboard shortcuts that work in Observable, both at the notebook level and within the text editor.`40:T945,md`## Workflow * #### [Fork, Share, Merge](https://observablehq.com/@observablehq/fork-share-merge)
Explains forking (making a copy of a notebook), and merging (combining two notebooks into one). * #### [Comments](https://observablehq.com/@observablehq/comments)
Introduces Observable’s commenting feature, where you can leave friendly tips and ideas on other peoples’ notebooks. * #### [Suggestions](https://observablehq.com/@observablehq/suggestions-and-comments)
A convenient workflow for collaborating with other authors on Observable, and sending and receiving patches, advice and encouragement. * #### [Licenses](https://observablehq.com/@observablehq/licenses)
How to add software licenses to your notebooks if you want to let everyone know that they’re free to reuse and remix your published work. * #### [History](https://observablehq.com/@observablehq/history)
Talks about how you can view your notebooks’ history by browsing old versions reactively, and can choose to revert to an earlier version (or fork from one in order to explore an alternative path). * #### [Connecting to Databases](https://observablehq.com/@observablehq/connecting-to-databases)
You can connect private Observable notebooks directly to PostgreSQL, MySQL and BigQuery databases. Use the \`DatabaseClient()\` to plug live data into reactive visualizations. * #### [Self-hosted Database Proxies](https://observablehq.com/@observablehq/self-hosted-database-proxies)
If you wish to connect a private notebook to a database on your local computer or on a private network, you can install and run a local database proxy. Your data and database credentials stay entirely on your system. * #### [How Saving Works](https://observablehq.com/@mbostock/how-saving-works)
Explains how your work is automatically saved — when editing your own notebooks, or trying out changes to someone else’s. * #### [Introduction to Embedding](https://observablehq.com/@observablehq/introduction-to-embedding?collection=@observablehq/embedding-notebooks)
How to embed cells from your notebooks in other web pages by various methods. * #### [Advanced Embedding and Downloading](https://observablehq.com/@jashkenas/downloading-and-embedding-notebooks)
How to download a standalone copy of your notebook or integrate with it using our open-source runtime. `41:T900,md`## Libraries * #### [Inputs](https://observablehq.com/@jashkenas/inputs)
A simplified, standardized API for a bunch of reactive native input elements (sliders, buttons, menus, color pickers, text inputs, file inputs, radio buttons, checkboxes...) including labels and descriptions. * #### [Form Input](https://observablehq.com/@mbostock/form-input)
Provides a \`form()\` function that makes it easy to use a basic HTML \`

\` as a reactive value. * #### [File Input](https://observablehq.com/@mbostock/file-input)
An input widget that allows files to be loaded either from disk or from a URL. Supports images, JSON, or just raw files. * #### [Tables](https://observablehq.com/@tmcw/tables)
Convenient data-driven HTML tables with good defaults: the headers are sortable, the numbers align, and you can paginate large datasets. * #### [Saving SVG](https://observablehq.com/@mbostock/saving-svg)
If your notebook renders an SVG, this library can help you download it, or rasterize it to a PNG. * #### [Comma-Separated Tree](https://observablehq.com/@mbostock/comma-separated-tree)
An importable, interactive textarea that lets you reactively edit a hierarchical data structure. Great for reactively sketching tree visualizations. * #### [Embedding Tweets](https://observablehq.com/@mbostock/tweet)
Provides a \`tweet(id)\` function to quickly embed tweets using the Twitter API. * #### [Color Picker (with alpha)](https://observablehq.com/@shaunlebron/color-picker)
Native color pickers got you down? Implements [Pickr](https://github.com/Simonwep/pickr), so that you can pick the very finest in semitransparent colors. * #### [Slide](https://observablehq.com/@mbostock/slide)
An expressive library for creating fullscreen presentations in an Observable notebook. Handles reactive Markdown, JavaScript, code, and image slides. * #### [Synchronized Views](https://observablehq.com/@mbostock/synchronized-views)
Discusses and defines a \`View\` class for implementing multiple views that all render and control the same shared value. * #### [Lorem Ipsum](https://observablehq.com/@jashkenas/lorem-ipsum)
If your notebook needs a little more ipsum, this library provides a lorem (or hipster, bro, vegan, elvish, crypto or gagnam) ipsum generator.`42:T1c79,md`## How To & Techniques * #### [Visualization](https://observablehq.com/collection/@observablehq/visualization)
Many examples of specific visualization techniques (many of them built with D3) can be found in the Visualization collection. * #### [Maps](https://observablehq.com/collection/@observablehq/maps)
Along similar lines, a whole trove of map projections and visualizations can be found in the Maps collection. * #### [The D3 Gallery](https://observablehq.com/@d3/gallery)
A convenient listing of hundreds of standard chart types, implemented in D3. Thumbnails galore. * #### [Animation Loops](https://observablehq.com/@mbostock/animation-loops)
A philosophical discussion of some of the pros and cons of the different ways to define animation loops in Observable. * #### [Parameterized Notebooks](https://observablehq.com/@mbostock/parameterized-notebooks)
Your notebooks can parse URL parameters, in order to render and provide personalized notebooks — with specific inputs pre-filled, or saved for later. For example, here’s [a link to the Package Dependencies notebook with the Observable runtime prefilled as a URL parameter](https://beta.observablehq.com/@mbostock/package-dependencies?name=@observablehq/notebook-runtime). * #### [URL querystrings and hash parameters](https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters)
Notebooks can read and react to \`location.search\` and \`location.hash\` directly, in order to link to particular configurations of a notebook, or allow readers to share URLs with small amounts of associated data. * #### [Responsive Notebook Design](https://observablehq.com/@tmcw/responsive-notebook-design-protips)
A set of tips to help create notebooks that re-render responsively (and reactively!) to the width of the page. This is one of those things that may very well be easier in Observable than anywhere else, as you can just use the reactive \`width\` variable. * #### [Module Require Debugger](https://observablehq.com/@tmcw/module-require-debugger)
A helpful tool that, given the name of an npm module, will attempt to deduce how to require it correctly in Observable. * #### [How To: Require Stubborn Modules](https://observablehq.com/@tmcw/requiring-modules-troubleshooting) A more in-depth discussion of requiring JavaScript modules in Observable, and how to successfully load modules that may appear hopeless at first attempt. * #### [Reading Local Files](https://observablehq.com/@mbostock/reading-local-files)
Demonstrates a few techniques and helper functions from the standard library for reading local files into a notebook. * #### [Fullscreen Canvas](https://observablehq.com/@mbostock/fullscreen-canvas)
How to add a button to your notebook that causes a \`