31:T588,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. My fork is [here](https://observablehq.com/@embracelife/five-minute-introduction-1st) * #### [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.`32:T8ca,md`## Notebook Concepts * #### [Introduction to Data](https://observablehq.com/@observablehq/introduction-to-data)
How to get your data into Observable in the first place, whether pasted in or loaded remotely. * #### [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 vizualizations, 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 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. * #### [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.`33:T6e2,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). * #### [Suggestions and Comments](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. * #### [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. * #### [Downloading and Embedding Notebooks](https://observablehq.com/@jashkenas/downloading-and-embedding-notebooks)
How to download a standalone copy of your notebook, and embed it into a web page, using our open-source runtime.`34: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.`35:T1bd6,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. * #### [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 \`