31:T6e5,md`## Começe Aqui * #### **[Traduzido/Revisado]**[Introdução em 5 minutos](https://observablehq.com/@pauloaug/introducao-em-5-minutos)
Uma introdução que demonstra o que faz Observable um ambiente único para programação creativa. * #### **[Traduzido]**[Tutorial](https://observablehq.com/@radames/tutorial-1-calculadora-de-almoco)
Uma introdução prática à interface do usuário e os fundamentos da edição de código no Observable * #### **[Traduzido]**[Observable não é JavaScript](https://observablehq.com/@radames/observable-nao-e-javascript)
Explica as diferenças entre o JavaScript regular que você deve estar acostumado e o JavaScript reativo no Observable. * #### **[Traduzido]**[Introdução ao HTML](https://observablehq.com/@radames/introducao-ao-html)
Mostra como renderizar HTML, Markdown, SVG e Canvas — e como combiná-los. * #### **[Traduzido]**[Introdução aos Imports](https://observablehq.com/@radames/introducao-os-imports)
Como reutilizar partes the qualquer notebook em outro notebook. * #### [A Biblioteca Padrão](https://observablehq.com/@observablehq/standard-library)
Files, Generators, Promises, require, DOM e mais! Observable vem acompanhado de uma pequena, mas consideravél, biblioteca padrão. * #### **[Traduzido]**[Como Observable Funciona](https://observablehq.com/@radames/como-o-observable-funciona)
Usando diagramas de fluxo para explicar como o runtime do Observable manipula dados e o modelo de progamação por trás do Observable.`32:Te85,md`## Notebook Concepts * #### **[Traduzido]**[Introdução aos Dados](https://observablehq.com/@radames/introducao-aos-dados)
Para começar, uma visão geral dos vários métodos para trazer seus dados para o Observable. * #### **[Traduzido]** [Arquivos Anexados](https://observablehq.com/@pauloaug/arquivos-anexados)
Com muita facilidade carregue e use arquivos diretamente nos notebooks Observable. Com a possibilidade de usar versões, streams, sugestões e substituições, eles são muito convenientes. * #### **[Progresso/Paulo]** [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. * #### **[Traduzido]** [Introdução aos Views](https://observablehq.com/@radames/introducao-aos-views)
Views permitem que você controle valores diretamente no seu notebook com widgets UI interativos (ou gráficos interativos, visualizações, ou quaisquer interfaces que você pssa imaginar ) * #### **[Traduzido]** [Introduction to Promises](https://observablehq.com/@dienert/introducao-a-promises)
Os notebooks Observable esperam promises por padrão. Esse notebook explica o que são promises e como usa-lás para gerenciar códigos assíncronos. * #### **[Traduzido]** [Introdução aos Generators](https://observablehq.com/@radames/introducao-aos-generators)
Animações, simulações, transformações — generators representam valores que mundam com o tempo. * #### [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.`33:T86a,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. * #### [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:T1d9f,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. * #### [Handy Embed Code Generator](https://observablehq.com//@jashkenas/handy-embed-code-generator)
A useful notebook that, given the name of a notebook that you want to embed, allows you to pick and choose an ordering for the cells you want to display, generating an embed code for you. * #### [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 \`