45:["$","title",null,{"children":"Introduction to Observable | Mandy Keck | Observable"}] 4d:T8c9,Observable helps you explore and visualize data. It’s a platform to discover, to be inspired, and to accelerate your learning. You can share and publish your insights with the world. Above all, it’s a community of people helping each other learn and create together. Observable offers **[thousands of visualizations](https://observablehq.com/explore) to start from**: charts with [D3](https://observablehq.com/@d3/gallery) and [Observable Plot](https://observablehq.com/@observablehq/plot), [maps](https://observablehq.com/collection/@observablehq/maps), [art](https://observablehq.com/collection/@observablehq/generative-art), and [other components](https://observablehq.com/collection/@observablehq/libraries). You can fork any notebook, or import from other notebooks, to reuse code without duplicating. You don’t have to start with a blank slate. There are no limits to what you can do. You can **[share and collaborate](https://observablehq.com/@observablehq/observable-teams-video?collection=@observablehq/observable-demos) with others**, within a team, and across the platform. You can share what you create and learn from others. Observable helps break down walls between people and tools (e.g. developers and data scientists can work together). Creators from different domains can collaborate, sharing what they know with each other and the world. ## Reactive Notebook What are reactive notebooks, and how they are different from Jupyter notebooks. We'll also cover interactive notebooks using standard HTML inputs - Everything executes in the client - Variables execute in topological order - One expression per cell. Use `{}` for complex statements - Each cell can have a name. Think of [declarations, not assignments](https://observablehq.com/@observablehq/observables-not-javascript#cell-194) - Order doesn't matter - [Observable uses a superset of JavaScript](https://observablehq.com/@observablehq/observables-not-javascript) - [html, md literals](https://observablehq.com/@observablehq/introduction-to-html?collection=@observablehq/notebook-fundamentals) - [Use Views and `viewof` for interactive elements](https://observablehq.com/@observablehq/introduction-to-views?collection=@observablehq/notebook-fundamentals) 4e:T915,## Useful Links ### Observable Tutorials - [Getting Started](https://observablehq.com/collection/@observablehq/overview) - [Video series: Learning Observable](https://observablehq.com/collection/@observablehq/learning-observable) - [Observable Documentation](https://observablehq.com/@observablehq/documentation) - [Observable Inputs](https://observablehq.com/collection/@observablehq/inputs) ### Observable Plot - [Observable Plot](https://observablehq.com/collection/@observablehq/plot) ### Vega-Lite - [Vega-Lite Introduction](https://observablehq.com/collection/@mandykeck/vega-lite) ### D3 Tutorials - [Build your first Bar Chart](https://observablehq.com/collection/@thinkh/build-your-first-d3-bar-chart) from [Holger Stitz](https://observablehq.com/@thinkh) - [Official Observable Tutorials](https://observablehq.com/tutorials) with [D3](https://observablehq.com/collection/@d3/learn-d3) - [Observable *IEEEVIS* Tutorial](https://observablehq.com/collection/@john-guerra/observable-ieeevis-tutorial) from [John A. Guerra-Gomez](https://observablehq.com/@john-guerra/) - [D${7-4} Tutorial with *Shirley Wu*](https://observablehq.com/collection/@sxywu/introduction-to-d3-js) - [Observable Collection](https://observablehq.com/collection/@d3/learn-d3) - [Information Visualization Course, Master in Data Science, UC Berkeley](https://github.com/john-guerra/MIDS_W209_Information_Visualization_Slides) with [Videos](https://www.youtube.com/playlist?list=PLmRfPZr9-VoGodduNBkPKoNNXeOBMmQGz) ### D3 Documentation - [Interactive Observable Version](https://observablehq.com/collection/@d3/documentation) - [GitHub](https://github.com/d3/d3/blob/main/API.md) ### Further Useful Resources - [Observable’s not JavaScript](https://observablehq.com/@observablehq/observables-not-javascript) - [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/overview) - [Observable for Jupyter Users](/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users) - [Observable Templates](https://observablehq.com/collection/@observablehq/templates) - [Templates: Boilerplates](https://observablehq.com/collection/@observablehq/templates-boilerplates) - [Time Series Data](https://observablehq.com/@observablehq/analyzing-time-series-data)4f:[{"id":"13859b2cc5cfb3ccbb1c43547d4997a66ff30042465d5c13239960e939134c659722a12e17c34a263af977a9b1ca8ea9cb30caab465c78816fa557b9ea8e3feb","href":"https://static.observableusercontent.com/files/13859b2cc5cfb3ccbb1c43547d4997a66ff30042465d5c13239960e939134c659722a12e17c34a263af977a9b1ca8ea9cb30caab465c78816fa557b9ea8e3feb","name":"Bildschirmfoto 2021-08-08 um 10.35.42.png","type":"image/png","lastModified":1648837157371.402,"size":3124399},{"id":"811845efbff79125ddce20f99cb66d259bd55ad6d8b7e4fe5d588421e05684fc32cbf2c351f75f725d64a4bba46115affe89688f7639f570f1adece7ca614f14","href":"https://static.observableusercontent.com/files/811845efbff79125ddce20f99cb66d259bd55ad6d8b7e4fe5d588421e05684fc32cbf2c351f75f725d64a4bba46115affe89688f7639f570f1adece7ca614f14","name":"gapminder.csv","type":"text/csv","lastModified":1648837157371.402,"size":109827}] 49:{"id":"dd669e9d2358d620","slug":"introduction-to-observable","title":"Introduction to Observable","thumbnail":"33ceb103417446f54136369717f9df0951348182d6c7c9b2e6a2cdc34d31c373","access_level":"public","create_time":"$D2022-04-01T18:19:17.371Z","update_time":"$D2022-04-02T11:43:44.214Z","view_time":null,"first_public_time":"$D2022-04-01T18:48:21.100Z","has_unpublished_edits":null,"fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"5e89ed388ad11abe","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":746,"publish_version":746,"role":null,"authored":false,"authors":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to Observable","cells":[{"id":0,"value":"# Introduction to Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"FileAttachment(\"Bildschirmfoto 2021-08-08 um 10.35.42.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"## Getting started\n\n**What you are reading now — this page or document — is an Observable notebook.**\n\nA notebook is both a final product for presentation, and a large blank canvas for trying out ideas and calculations. How do you start? By creating cells. Cells are where you place content—text, JavaScript code, or other instructions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":654,"value":"javascript_calculation = 15*3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"height * 2 + sum","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"sum = {\n let sum = 0;\n for (let i = 0; i <= 50; ++i) {\n sum += i;\n }\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"height = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"**Notebooks are made of cells.** Another sample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"\"Hello, I am a *Markdown* cell; I contain *formatted* **text**. My edit area (the shaded part) is pinned open so you can see it.\"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"When you created that cell, you saw all of the available cell types:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"- JavaScript cells (the default), for logic, calculations, and calls to JavaScript libraries.\n- [Markdown](https://observablehq.com/@observablehq/markdown-quick-reference) cells\n- HTML cells, for HTML\n- TeX cells, for math formulas\n- SQL cells, for SQL queries and other SQL code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":674,"value":"html`

HTML in JS Cells

This color is ${mycolor}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"mycolor = \"red\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"## Observable Inputs\n\nSee [Observable Inputs](https://observablehq.com/@observablehq/inputs) for inputs that are more convenient and more usable than the native HTML inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":703,"value":"viewof r = Inputs.range([1, 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"## Getting data into Observable\n\n- Useful tutorial to load and manipulate data: [Learn JS Data](https://observablehq.com/@berkeleyvis/learn-js-data)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"data = FileAttachment(\"gapminder.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"tennis = d3.csv(\"https://raw.githubusercontent.com/JeffSackmann/tennis_atp/master/atp_matches_2020.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"Inputs.table(tennis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Use *SummaryTable* to see a quick visual overview of a dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"import {SummaryTable} from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof summary_data = SummaryTable(data, {label: \"Gapminder\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"## Import and remixing cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"import {chart} with {myData as data} from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"chart is not unique in this notebook anymore, use the alias in this case:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":735,"value":"import {chart as pc} with {data as gapminder} from \"@d3/parallel-coordinates\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"pc","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null