31:Tcfc,32:T573,Want to get started in Observable? We’ve got you covered! Explore our learning resources and documentation below to get up-and-running: - [Learning Observable](https://observablehq.com/collection/@observablehq/intro-to-observable): Our introductory course that covers the basics of getting started in Observable - [Tutorials](https://observablehq.com/tutorials): Visit our tutorials page for examples using real-world datasets, workshop materials, and links to important documentation - [Observable Documentation](https://observablehq.com/@observablehq/documentation): Your go-to place for official documentation on how to use Observable - [Quick Guides](https://observablehq.com/@observablehq/observable-quick-guides): guided examples to take your first steps in Observable - [Learn how to write and run JavaScript on Observable](https://observablehq.com/guide/first-steps) - [Write a tip calculator to dive deeper into JavaScript](https://observablehq.com/guide/tip-calculator) - [Explore a datset using functional programming](https://observablehq.com/guide/functional-basics) - [Follow clues in a database to solve a murder mystery](https://observablehq.com/guide/murder-mystery) - [Create interactive charts from simple tabular data](https://observablehq.com/guide/athletes) - [Visualize time series data with smoothed line charts](https://observablehq.com/guide/electricity)33:[{"id":"a052dca96a4691cb44670d5622f10829f94e973fadc3a4ec7725b16e9c6574c5ccb4186e405e402e55f509cb0676e340e91c9f02096f72e3f284c23887107ea7","href":"https://static.observableusercontent.com/files/a052dca96a4691cb44670d5622f10829f94e973fadc3a4ec7725b16e9c6574c5ccb4186e405e402e55f509cb0676e340e91c9f02096f72e3f284c23887107ea7","name":"cellMenuExample.mov","type":"video/quicktime","lastModified":1675384202886.84,"size":2534645},{"id":"01d960459bdc930e1641fdbf0878af6dbde40edefbed4051fadd2f99f958bd93d2740a0a7b80601678255dfbdbea5539b1ac65cde961fe1a8312ade638f7f935","href":"https://static.observableusercontent.com/files/01d960459bdc930e1641fdbf0878af6dbde40edefbed4051fadd2f99f958bd93d2740a0a7b80601678255dfbdbea5539b1ac65cde961fe1a8312ade638f7f935","name":"ca_food.csv","type":"text/csv","lastModified":1675384202886.84,"size":56496},{"id":"4332704611968d9b91f133dfb6042745813785d822259fd254cd240d0569172194c129dc292e007896c8e4678d5ee9704cddef73201cde5d8c6bdde5efa44696","href":"https://static.observableusercontent.com/files/4332704611968d9b91f133dfb6042745813785d822259fd254cd240d0569172194c129dc292e007896c8e4678d5ee9704cddef73201cde5d8c6bdde5efa44696","name":"community-examples.mov","type":"video/quicktime","lastModified":1675384202886.84,"size":25900418},{"id":"ad63df82fb21088b53dbbf2afeffd62ab50e337ca30b9ccdef4bde286982a994f98bbc163c0ce8fbf73531724f69c0ae6220a5792de3ea5b80076f4c9002ce9e","href":"https://static.observableusercontent.com/files/ad63df82fb21088b53dbbf2afeffd62ab50e337ca30b9ccdef4bde286982a994f98bbc163c0ce8fbf73531724f69c0ae6220a5792de3ea5b80076f4c9002ce9e","name":"collaboration.mov","type":"video/quicktime","lastModified":1675384202886.84,"size":3673433},{"id":"64d09ac279eab64d058b47a6aaf19b18d2700e1751505efae7dd92e4a8341104cacd31fbce626fbd6b87bb3ff9e3f6bbe1789879185d7176b67b60365948a151","href":"https://static.observableusercontent.com/files/64d09ac279eab64d058b47a6aaf19b18d2700e1751505efae7dd92e4a8341104cacd31fbce626fbd6b87bb3ff9e3f6bbe1789879185d7176b67b60365948a151","name":"csv-to-datatable.mov","type":"video/quicktime","lastModified":1675384202886.84,"size":8683204},{"id":"8339e6ed7041fdc57db68e1d58a237d9dcd09045485d9390f7ec64b23079dd372a66f6bed32dbe11e926d5629fc21640dfbfade33f7c7b1b91403ca632849ebd","href":"https://static.observableusercontent.com/files/8339e6ed7041fdc57db68e1d58a237d9dcd09045485d9390f7ec64b23079dd372a66f6bed32dbe11e926d5629fc21640dfbfade33f7c7b1b91403ca632849ebd","name":"taste-of-observable-2.png","type":"image/png","lastModified":1675388365799.135,"size":356298},{"id":"57711c78d0d8e78831ba8633c6e00c4978599bd2d8ef8343737050d263ad3bfe8c1e3a7e46d789a8966013a948b435946cb59e208d396a72fd8b36ec43c3e619","href":"https://static.observableusercontent.com/files/57711c78d0d8e78831ba8633c6e00c4978599bd2d8ef8343737050d263ad3bfe8c1e3a7e46d789a8966013a948b435946cb59e208d396a72fd8b36ec43c3e619","name":"chart-cell-clip.mov","type":"video/quicktime","lastModified":1679960548275.031,"size":8098168}] 2f:{"title":"A taste of Observable","cells":[{"id":0,"value":"# A taste of Observable","pinned":false,"hidden":false,"mode":"md"},{"id":853,"value":"Working in Observable Notebooks puts you and your team on the fast track from raw data to clear insights. Here’s a taste of how Observable accelerates collaborative data work. ","pinned":false,"hidden":false,"mode":"md"},{"id":1360,"value":"## Notebooks: your web-based data canvas\n","pinned":false,"hidden":false,"mode":"md"},{"id":1359,"value":"The document you’re reading now is an Observable **Notebook**. Notebooks are web-based interactive canvases where you can combine data, code, and interaction in one place. There is no set-up or installation needed to get started. With an Observable account, you can add a new notebook with just one click, then immediately start creating. ","pinned":false,"hidden":false,"mode":"md"},{"id":1367,"value":"tasteOfObservable2 = FileAttachment(\"taste-of-observable-2.png\").image({width: 650})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"Notebooks are made up of [**cells**](https://observablehq.com/@observablehq/adding-cells) where you can add content in Markdown, JavaScript, SQL, or HTML. Notebooks are also _alive_, which means you can explore and tinker with cells as a viewer. In this very notebook, you’ll see blue text boxes prompting you to change text, update code, and interact with data visualizations!","pinned":false,"hidden":false,"mode":"md"},{"id":1356,"value":"try_it(htl.html`Try it! The code below (in a JavaScript cell) returns the number of days that Leslie Knope has been alive since she was born in Eagleton, Indiana on January 18, 1975. \n\n

1. In the code below, find the line that says \"const birthday = new Date( )\" \n
2. On that line, change the date to your birthday to see how many days you've been traveling around the sun (make sure to leave the quotes around the date)\n\n

Don't worry: as a viewer you can tinker with cells, but your changes won't be saved in the notebook, or visible to anyone else.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"days_old = {\n const today = new Date();\n const birthday = new Date('1975-01-18'); // Update to your birthday here, in YYYY-MM-DD format!\n const milliseconds = today - birthday;\n const days = milliseconds / 1000 / 60 / 60 / 24; // 1000 milliseconds in a second, 60 seconds in a minute, 60 minutes in an hour, 24 hours in a day\n return +days.toFixed(1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1354,"value":"We can include JavaScript code in Markdown cells so that context can be directly tied to data and analyses. (Goodbye, tedious and tenuous copy-pasting of values.)\n\nBelow, your age is compared to other (very important) measures. If you update the birth date above, the values in text below are automatically updated due to Observable’s [reactive dataflow](https://observablehq.com/@observablehq/learning-observable-reactive-dataflow).","pinned":false,"hidden":false,"mode":"md"},{"id":1353,"value":"- In your time on earth, Peter Jackson’s Extended Version _Lord of the Rings_ trilogy (11.37 hours total) could have been replayed **${d3.format(',.0f')(days_old / 0.47375)} times**.\n- [Jonathan the Tortoise](https://en.wikipedia.org/wiki/Jonathan_(tortoise), the oldest known land animal (born c. 1832) has been alive approximately **${(((new Date() - new Date('1832-01-01'))/8.64e+7) / days_old).toFixed(1)} times longer than you**.\n- If every day of your life was a single drop of water, your life would fill approximately **${(days_old / 4000).toFixed(1)} liters** (based on [USGS estimates for water droplet volume](https://water.usgs.gov/edu/activity-drip.html)).","pinned":false,"hidden":false,"mode":"md"},{"id":1352,"value":"## Fast, flexible, secure data access","pinned":false,"hidden":false,"mode":"md"},{"id":1351,"value":"All Observable users can quickly [access data from local files](https://observablehq.com/@observablehq/introduction-to-data) like comma- and tab-separated value files, text files, images, Excel spreadsheets, JSON files and more. The [files pane](https://observablehq.com/@observablehq/file-attachments) (accessed by clicking the ${getIcon('filePane')} icon in the upper right of the notebook) guides you through uploading then inserting data from local files. \n\nThe video below shows a comma-separated value (CSV) file being attached to a notebook, then used to create a tabular view of the data, out-of-the-box.","pinned":false,"hidden":false,"mode":"md"},{"id":1350,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1349,"value":"In under 30 seconds, data from a local file is in the notebook, presented in a nice table, and ready for your next wrangling, analysis and visualization steps.","pinned":false,"hidden":false,"mode":"md"},{"id":1348,"value":"[Pro and Enterprise](https://observablehq.com/pricing) users can additionally access data from cloud files, APIs, and databases, with the ability to create private notebooks. [Observable’s expanding list of database connectors](https://observablehq.com/@observablehq/databases) lets you quickly access databases including in PostgreSQL, MongoDB, MySQL, Google BigQuery, Snowflake, SQL Server, and Databricks. The [databases pane](https://observablehq.com/@observablehq/databases) (click on the ${getIcon('databasePane')} icon in the top right of this notebook) helps you to configure database connections and explore database contents, right in your notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":1347,"value":"## Instant data exploration","pinned":false,"hidden":false,"mode":"md"},{"id":1346,"value":"Observable makes it possible for everyone on your team to interact with data. No- and low-code options like the [data table cell](https://observablehq.com/@observablehq/data-table-cell) below let anyone explore data interactively and do some essential data wrangling steps (like filtering, sorting, and slicing) without writing a line of code. \n","pinned":false,"hidden":false,"mode":"md"},{"id":1345,"value":"try_it(htl.html`Try it! Update and explore the contents of the data table cell below, which contains California agricultural revenue data. Create subsets by clicking or dragging over levels in the interactive header cells, or using the no-code options for filtering, selecting columns, sorting, and slicing immediately below the table.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"For more involved data work and analyses, you can always write code in JavaScript or HTML. Observable also has a [SQL cell](https://observablehq.com/@observablehq/sql-cell) that allows you to write SQL in notebooks. If you have data in a non-SQL format, you can easily convert it with [DuckDB](https://observablehq.com/@observablehq/duckdb), making it possible for anyone to query, wrangle and analyze tabular data from files or in-memory data with SQL.","pinned":false,"hidden":false,"mode":"md"},{"id":1342,"value":"In the SQL cell below we access, wrangle, and calculate a summary statistic (2022 annual revenue by food category in California) from the attached ca_food.csv file.","pinned":false,"hidden":false,"mode":"md"},{"id":1341,"value":"SELECT Category\n , year(Date) as year\n , sum(Dollars) as YearlyRevenue \n FROM ca_food.csv\n WHERE year(Date) = 2021\n GROUP BY year(Date), Category","pinned":true,"hidden":false,"mode":"sql","output":"","database":"ca_food.csv"},{"id":1340,"value":"---\n## Getting from data to interactive visualization","pinned":false,"hidden":false,"mode":"md"},{"id":1382,"value":"Whether creating a basic scatterplot, an interactive time series chart, or a data-driven masterpiece handcrafted with [D3](https://d3js.org/), Observable has tools to help you quickly get from data to visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":1381,"value":"Observable’s [chart cell](https://observablehq.com/@observablehq/chart-cell) helps you start building visualizations with [Observable Plot](https://observablehq.com/@observablehq/plot) — a user-friendly library to quickly build and customize charts — without writing a line of code. Select the chart cell from our searchable [add cell menu](https://observablehq.com/@observablehq/adding-cells). Then, choose your data source, variables, and other options from drop-down menus to make a chart, with the option to switch to JavaScript for further customization. \n\nThe video below shows how we can use the chart cell to create a stacked bar chart: ","pinned":false,"hidden":false,"mode":"md"},{"id":1380,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1339,"value":"\nAlternatively, you can choose a specific chart type from the add cell menu to insert template Plot code in a new JavaScript cell. Update the starter code with your own data, variables and options to tailor it to your team’s needs. ","pinned":false,"hidden":false,"mode":"md"},{"id":1338,"value":"\nThe video below shows how we select a line chart template from the add cell menu, then update with new data and variables to create an interpretable chart in seconds. ","pinned":false,"hidden":false,"mode":"md"},{"id":1337,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1336,"value":"try_it(htl.html`Try it! Click on a gray plus sign (+) in the left margin to open the add cell menu. Start typing \"scatterplot,\" then select the Scatterplot chart snippet. A new JavaScript cell is added to the notebook containing working starter code. Run the cell (press the blue arrow at the top right of the cell, or use the Shift-Return keyboard shortcut) to execute the code and create an easy-to-update scatterplot!`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"Expand the ways you and your team can dig into your data by adding interactivity to charts. [Observable inputs](https://observablehq.com/@observablehq/inputs) help you to quickly create lightweight widgets (like value sliders, radio buttons, and text boxes) that can be connected to chart elements to add interactivity.","pinned":false,"hidden":false,"mode":"md"},{"id":1334,"value":"For example, the inputs below update the color gradient of circles (created in [D3](https://d3js.org/), available by default in all notebooks as part of [Observable's standard library](https://observablehq.com/@observablehq/recommended-libraries)) based on user selections. Try it out!","pinned":false,"hidden":false,"mode":"md"},{"id":1333,"value":"viewof color1 = Inputs.color({label: \"Start color:\", value: \"#00ffcc\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"viewof color2 = Inputs.color({label: \"End color:\", value: \"#333aff\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"viewof play = Inputs.button(\"Replay!\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"{\n play;\n \n const circles = Array(15).fill(20); \n const myColor = d3.scaleLinear().domain([0, 14]).range([color1, color2]);\n\n const svg = d3.select(DOM.svg(700, 100))\n\n svg.selectAll(\"circle\")\n .data(circles)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => i * 45 + d)\n .attr(\"cy\", (_, i) => i % 2 == 0 ? 150 : -150)\n .style(\"fill\", (d, i) => myColor(i))\n .attr(\"r\", d => d)\n .transition()\n .duration(2000)\n .ease(d3.easeElasticOut)\n .attr(\"cy\", 50)\n .delay((d, i, j) => i * 100)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"try_it(htl.html`Try it! The cell below shows an error because it is expecting a fill color that doesn't exist yet. It will appear once you've created a color input.

Open the add cell menu by clicking on a gray plus (+) button in the left margin just below this cell. Start typing \"color\", then choose the Color snippet, which creates a widget like the ones above. A new cell is added to your notebook. When you run it, you'll see your color-picking-widget appear, and the SVG below now has an interactive fill color.

Note: this works because the fill option for the SVG below asks for a value named color, which is the default name of the input you just created.`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":1327,"value":"You might not be making disco animals in your daily data work, but this does highlight how quickly you can make notebook content (including charts, tables and text) interactive by linking it to Observable inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":1326,"value":"---\n## Get everyone (literally) on the same page","pinned":false,"hidden":false,"mode":"md"},{"id":1325,"value":"Add team members [as viewers or editors](https://observablehq.com/@observablehq/permissions-for-teams-notebooks), then send them the notebook link in chat. No cloning or forking repos, no re-rendering to see updated versions, and no Git knowledge required for your team to all work together with data. (And Observable notebooks have built-in [version history](https://observablehq.com/@observablehq/history) that lets you see a record of changes, or even revert to previous versions.) \n\nWith live [multiplayer editing](https://observablehq.com/@observablehq/multiplayer-editing), different team members can work in the same notebook, at the same time. Avatars reveal who is working on what, when, so everyone knows where folks are editing. In the video below, a teammate is added as an editor, then starts updating the Plot code.","pinned":false,"hidden":false,"mode":"md"},{"id":1324,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1323,"value":"Reduce the distance between data and discussions with [in-notebook comments](https://observablehq.com/@observablehq/comments) like the one shown below. Anyone who can view the notebook — you, your teammates, and stakeholders with permission — can join the conversation. ","pinned":false,"hidden":false,"mode":"md"},{"id":1322,"value":"## Community examples at-your-fingertips","pinned":false,"hidden":false,"mode":"md"},{"id":1321,"value":"Whether motivated by efficiency, inspiration, or (we hope!) both, it’s straightforward to reuse content created and shared by you, your team, and other Observable community members so that you don’t have to start from scratch. ","pinned":false,"hidden":false,"mode":"md"},{"id":1320,"value":"

A small sampling of the thousands of notebooks you can explore and reuse content from, as seen on Observable's Explore page.

","pinned":false,"hidden":false,"mode":"html"},{"id":1319,"value":"[Observable imports](https://observablehq.com/@observablehq/import) let you instantly access and reuse content (functions, charts, text, and more) from shared notebooks. \n\nFor example, let’s say we want to iterate on the [D3 Zoomable Sunburst chart](https://observablehq.com/@d3/zoomable-sunburst), which exists in the `@d3/zoomable-sunburst` notebook on Observable, and is named _chart_. We can import it directly into this notebook (here, renaming it as `sunburst`) using:","pinned":false,"hidden":false,"mode":"md"},{"id":1318,"value":"import {chart as sunburst} from \"@d3/zoomable-sunburst\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1317,"value":"Then, we can access that chart (which brings along its own data!) by calling the chart in a new JavaScript cell. Play around with the sunburst graph below by clicking on different sections to zoom in, or clicking in the center circle to zoom out.","pinned":false,"hidden":false,"mode":"md"},{"id":1316,"value":"sunburst","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"Observable imports can also be a great tool for project organization because they give you and your team a way to modularize your work. Add themed chart templates, commonly used functions, or reusable text to source notebooks, then import from there for fast reuse and tidier notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":1314,"value":"try_it(htl.html`Try it! The code below returns an error because it wants to create a force directed graph with D3, but the chart hasn't been imported yet. Here, you'll import chart from the @d3/force-directed-graph notebook to make the graph appear below.

Click on the gray plus button (+) just below this cell in the left margin to open the add cell menu, then start typing \"imports.\" Select the \"Import notebook\" option, which adds a JavaScript cell containing useful starter code. Update the code to import chart, renaming it to forceGraph, from the @d3/force-directed-graph notebook. Once you do, the JavaScript cell below will be executed, and the graph will appear below.

Hint: import {chart as newName} from \"@account/notebook-slug\"`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"forceGraph","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"## Start learning, and join the Observable community","pinned":false,"hidden":false,"mode":"md"},{"id":1311,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1310,"value":"We hope you’ll join us on your journey to learn and use Observable in your data work. The vibrant Observable community of data practitioners and storytellers is here to help. Join us:\n\n- [Observable Community Forum](https://talk.observablehq.com/)\n- [Observable Community Slack Workspace](https://join.slack.com/t/observable-community/shared_invite/zt-1icwex7uf-ovIAS0PcuJ~ZgBToSyUs8w)","pinned":false,"hidden":false,"mode":"md"},{"id":1309,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1308,"value":"import {try_it} from \"@observablehq/notes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"async function icon2(file, {width = \"16px\"} = {}) {\n const src = await file.url();\n return () => htl.html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"// 2022.06: Fabian Iwand's suggested improvement for Note:\nnote = {\n const scope = DOM.uid(\"note\").id;\n const style = document.head.appendChild(htl.html`