2d:null 2e:["$","title",null,{"children":"Welcome to Observable! 👋 | Blaž Beuermann | Observable"}] 33:[{"id":"a033960c84e9ea9d99675223913e00af5ced5d2e833762a3cd2bdac843795ec672ac61b9f27e3a8a1719de6bdd5fa7363fc1cd05aa51c164b88a4aa170a650a0","href":"https://static.observableusercontent.com/files/a033960c84e9ea9d99675223913e00af5ced5d2e833762a3cd2bdac843795ec672ac61b9f27e3a8a1719de6bdd5fa7363fc1cd05aa51c164b88a4aa170a650a0","name":"canned-forecast.json","type":"application/json","lastModified":1606558177629.815,"size":7023},{"id":"46c8df99316e9926d90ff847b4aa5cc4755ec8a1699f2d81ee6daec11e397e0bf090556bb9488461ed942a251f0ca8b4eb9b2b0281065bd5b13cac54b548ae17","href":"https://static.observableusercontent.com/files/46c8df99316e9926d90ff847b4aa5cc4755ec8a1699f2d81ee6daec11e397e0bf090556bb9488461ed942a251f0ca8b4eb9b2b0281065bd5b13cac54b548ae17","name":"caret.png","type":"image/png","lastModified":1606558177629.815,"size":831},{"id":"390f850c679049adecd0b020ea8a2e4f9ce56565609fc06e1899cdcba56eb56c9a793787299fb3c1f0a474b9214d61a832c2b961269776eed3daed74a312baba","href":"https://static.observableusercontent.com/files/390f850c679049adecd0b020ea8a2e4f9ce56565609fc06e1899cdcba56eb56c9a793787299fb3c1f0a474b9214d61a832c2b961269776eed3daed74a312baba","name":"image@2.png","type":"image/png","lastModified":1606868645109.438,"size":195227},{"id":"5db619d0b40ac7b6c8cb95e84c541e65ddacdf7c6f6f505dac66eff778132fec5a973b175a8bd70a26b4642eaa4ed47b2bf3b32a6c3e7788c4f1448d0f7f6e4f","href":"https://static.observableusercontent.com/files/5db619d0b40ac7b6c8cb95e84c541e65ddacdf7c6f6f505dac66eff778132fec5a973b175a8bd70a26b4642eaa4ed47b2bf3b32a6c3e7788c4f1448d0f7f6e4f","name":"image@3.png","type":"image/png","lastModified":1606868880099.498,"size":1058922}] 31:{"id":"451f5f7a3871d5e0","slug":"welcome-to-observable","title":"Welcome to Observable! 👋","thumbnail":"9898ebfe5ad9acdc9c846f74160cc6c9d226672d82b2771fdee61d4803ac5b14","access_level":"public","create_time":"$D2020-11-28T10:09:37.629Z","update_time":"$D2020-12-02T00:29:08.712Z","view_time":null,"first_public_time":"$D2020-11-30T23:30:22.160Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fc8c696d7fb96b04","login":"blazbrmnn","name":"Blaž Beuermann","avatar_url":"https://avatars-next.observableusercontent.com/03603ed0bc6822f8f549555803d8a3499d819a58655366624cacd7a225496065","tier":"starter_2024"},"version":2085,"publish_version":2085,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c51d497c1901a1a","login":"blazbrmnn","name":"Blaž Beuermann","avatar_url":"https://avatars-next.observableusercontent.com/03603ed0bc6822f8f549555803d8a3499d819a58655366624cacd7a225496065","tier":null}],"members":[{"type":"individual","id":"6c51d497c1901a1a","login":"blazbrmnn","name":"Blaž Beuermann","avatar_url":"https://avatars-next.observableusercontent.com/03603ed0bc6822f8f549555803d8a3499d819a58655366624cacd7a225496065","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Welcome to Observable! 👋","cells":[{"id":0,"value":"md`# Welcome to Observable! 👋`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"md`This notebook will give you an experience of what Observable can do. If you’re already familiar with Observable, feel free to skip ahead and [dive deeper](#LearnMore).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"contents = toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"md`## Importing useful code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2012,"value":"import { serialize, rasterize } from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"imageDraft","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"viewof imageDraft = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"image@2.png\").url()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"FileAttachment(\"image@2.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2084,"value":"imageProposal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2079,"value":"viewof imageProposal = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"image@3.png\").url()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"FileAttachment(\"image@3.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2063,"value":"import { fileInput, imageInput } from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"md`## Notebooks & Cells`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`**Edit me!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"md`You can edit cells in any notebook you see! On notebooks that someone else wrote, your edits stay private to you, so you can always safely experiment with code you find on Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"md`#### Cell values & names`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"md`Each cell in an Observable notebook is powered by [JavaScript code](https://observablehq.com/@observablehq/introduction-to-code). \n\nA cell’s source code may contain a single JavaScript expression, like a simple calculation. The cell’s value is the result of running that code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1774,"value":"md`Longer, more complex pieces of code must be wrapped in curly braces (\\`{}\\`) and \\`return\\` the desired value:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1782,"value":"{ \n let diameter = 20;\n let radius = diameter/2;\n let area = Math.PI*(radius**2)\n return area;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"md`If you give a code cell a name, you can refer to it in other cells, which will recalculate their values whenever the named cell is updated. When you change the contents of a cell, click the Play button on the right-hand side, or press **shift-return** to re-evaluate the cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1615,"value":"exponent = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"2 ** exponent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"md`...and the [animated SVG graphic](https://observablehq.com/d/545101f91519f470) you will see above the ToC!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"import {chart} from '545101f91519f470'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"{\n const run = svg``;\n \n return md`## Reactive updates\n\n👆 ([The order of cells in a notebook doesn’t matter](https://observablehq.com/@observablehq/how-observable-runs), so we can use a value even above the cell where we define it!)\n\n👇 In the cell below, try changing variable values and then running the cell with the Play button (${run}) or \\`Shift-Enter\\`. What happens to the table above?\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"forecastType = 'detailedForecast' // 👈 try replacing 'detailedForecast' with 'shortForecast'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"\nmd`\nYou’ll notice that the table above reacts instantly, displaying the shorter forecast description instead of the more detailed one it contained previously.\n\nThis reactivity, _a.k.a._ reactive [dataflow](https://observablehq.com/@observablehq/introducing-visual-dataflow), is what makes Observable a special platform for exploration. The notebook is a live environment: whenever a cell’s value changes, the rest of the notebook [automatically updates](https://observablehq.com/@observablehq/how-observable-runs) to reflect the latest information, like a spreadsheet does. Reactivity gives you instant feedback as you explore data, tinker with code, and collaborate with others.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`## Visualizing Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"md`Let’s help our readers understand this forecast data by visualizing it on a chart.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"md`If we have the time, we could hand-code a custom chart with our data, perhaps using a lightweight visualization library like [Vega-Lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite) or a more complex & powerful one like [D3](https://observablehq.com/collection/@d3/learn-d3).\n\nOr, we could once again look to Observable’s [amazing creator community](https://observablehq.com/explore), find [a beautiful visualization of this type of weather data](https://observablehq.com/@kerryrodden/simple-custom-weather-chart-in-d3), and remix it to use our own data. Let’s do that and save ourselves some time.\n\nAs we import from that notebook, we can use the [\\`with\\` keyword](https://observablehq.com/@observablehq/introduction-to-imports) to inject our own data.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"md`Then, we can reference \\`weatherChart\\` in a new cell to display the chart — which now depicts our NYC data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"weatherChart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"md`## Adding Interactivity\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"md`The visualization we just added already contains a little interactivity: users can hover over a period to see details about the forecast, for example.\n\nBut that’s just the tip of the iceberg! We can make our notebook & its visualizations as interactive as we’d like, since Observable is powered by the web. \n\nTo create a cell that reacts to user input, we can use the [\\`viewof\\` keyword](https://observablehq.com/@observablehq/introduction-to-views) with an interactive element.\n\nFor example, we could use an HTML \\`select\\` input to add a dropdown menu for users to select the period they’re interested in:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"viewof period = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"md`Keep in mind that interactivity in notebooks isn’t limited just to HTML inputs. Using [\\`viewof\\`](https://observablehq.com/@observablehq/introduction-to-views) you can create anything from a [selectable scatterplot](https://observablehq.com/@d3/brushable-scatterplot) to a [drawable canvas](https://observablehq.com/@mbostock/draw-your-own-connected-scatterplot) to a [clickable map](https://observablehq.com/@jashkenas/inputs#usaMapCoordinatesDemo), and more! Check out the [Inputs](https://observablehq.com/@jashkenas/inputs) notebook for a wide array of ready-to-import widgets.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`## Publishing, sharing & collaborating\n\nAs we’ve already seen, part of what makes Observable special is the ability to build off of other people’s code; we can all go further together than we can individually!\n\nTo share your work with the community, you can [publish](https://observablehq.com/@observablehq/how-saving-works?collection=@observablehq/ordered-introduction) your notebook to make it visible to the world and discoverable to other Observable users on the [Explore page](https://observablehq.com/explore). You can also [embed](https://observablehq.com/@observablehq/introduction-to-embedding?collection=@observablehq/embedding-notebooks) your work on another website, or even [download](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) your notebook and run it locally.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"md`If you’d like to work on a notebook with someone else before publishing, you can enable [link sharing](https://observablehq.com/@observablehq/fork-share-merge), and send them the URL. Then, after [forking](https://observablehq.com/@observablehq/fork-share-merge) and tinkering with your notebook, they can click a button to [send you their code suggestions](https://observablehq.com/@observablehq/suggestions-and-comments). Or, you can work together on a notebook in real time, using [**Observable Teams**](https://observablehq.com/teams).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"LearnMore = md`## Learn more\n\n🌈 Congrats, you’ve now gotten a first taste of Observable!\n\nTo learn more about how Observable works, check out our [\"Learning Observable\" videos](https://www.youtube.com/playlist?list=PLOHIJAFwtkEfEsafMd9BY3KWsRrz7FV5e) on YouTube, and read through the notebooks in our [Introduction](https://observablehq.com/collection/@observablehq/introduction) collection. You may also want to bookmark the [User Manual](https://observablehq.com/@observablehq/user-manual) as a comprehensive reference, and don’t forget to browse the [Explore](https://observablehq.com/explore) page for inspiration!`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"md`And if you’d like to jump in to building data visualizations in Observable, check out these guided tutorials, which explain data viz libraries & Observable concepts for folks from different backgrounds & with different goals:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`\n- **[Tutorials](/@observablehq/tutorial)**
Work through these short hands-on tutorials to practice using the techniques introduced above.\n\n- **[Charting with Vega-Lite](/@observablehq/vega-lite)**
Vega-Lite is probably the best JavaScript library for extremely rapid visual exploration of data sets. You can iterate on your Vega visualizations even faster in Observable’s reactive environment.\n\n- **[Learn D3](/@d3/learn-d3)**
D3 is a powerful JavaScript library that helps you bring data to life using HTML, SVG, and CSS. If you already have some D3 under your belt, you’ll find using D3 in Observable is a little bit different. Whether you’re new to D3, Observable, or both, get your feet wet here.\n\n- **[Observable for Jupyter Users](/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users)**
If you have a Python data science background, or just feel more comfortable in Python than in JavaScript, these tutorials will help ease you in.\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`If you run into issues, have questions, or need a helping hand, hop over to our [forums](https://talk.observablehq.com/) or reach out to [support@observablehq.com](mailto:support@observablehq.com).\n\nThanks for trying Observable! Have fun! 👋`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"