2f:[{"id":"a033960c84e9ea9d99675223913e00af5ced5d2e833762a3cd2bdac843795ec672ac61b9f27e3a8a1719de6bdd5fa7363fc1cd05aa51c164b88a4aa170a650a0","href":"https://static.observableusercontent.com/files/a033960c84e9ea9d99675223913e00af5ced5d2e833762a3cd2bdac843795ec672ac61b9f27e3a8a1719de6bdd5fa7363fc1cd05aa51c164b88a4aa170a650a0","name":"canned-forecast.json","type":"application/json","lastModified":1635525572507.325,"size":7023},{"id":"46c8df99316e9926d90ff847b4aa5cc4755ec8a1699f2d81ee6daec11e397e0bf090556bb9488461ed942a251f0ca8b4eb9b2b0281065bd5b13cac54b548ae17","href":"https://static.observableusercontent.com/files/46c8df99316e9926d90ff847b4aa5cc4755ec8a1699f2d81ee6daec11e397e0bf090556bb9488461ed942a251f0ca8b4eb9b2b0281065bd5b13cac54b548ae17","name":"caret.png","type":"image/png","lastModified":1635525572507.325,"size":831},{"id":"1e1a4fe35e174af2045dbdf1c72966d1839f0a36d777e54022de2a4ef985e961ce08ab59da19c957222bf97fd8982dfc8b4bf96738f7a4fe1f30f3676a9ea0a5","href":"https://static.observableusercontent.com/files/1e1a4fe35e174af2045dbdf1c72966d1839f0a36d777e54022de2a4ef985e961ce08ab59da19c957222bf97fd8982dfc8b4bf96738f7a4fe1f30f3676a9ea0a5","name":"athletes.csv","type":"text/csv","lastModified":1688807543760.1,"size":841836}] 2d:{"title":"Welcome to Observable, Qi FANG! 👋","cells":[{"id":0,"value":"md`# Welcome to Observable, Qi FANG! 👋`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"md`We believe that everyone should have access to the skills, tools, and community needed to better understand and communicate about the world around them. We’re approaching this challenge by creating ways to think with data, collaborate, build on each other’s work, and share insights with your community.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`That’s [why](https://observablehq.com/@observablehq/why-observable/2) we built Observable — a place where you can sketch with live data, prototype visualizations, share and reuse code, and publish your work for the world to see.\n\nIt all happens right in your web browser, in a live, reactive environment that gives you immediate feedback to iterate and accelerate understanding. Observable offers features you expect when writing code — version control (like Git), collaborative editing (like Google Docs), suggestions (like GitHub pull requests) and commenting all built-in.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"md`#### We’re so glad you’re here!\n\nThis is your first Observable notebook! It’ll give you a crash course in how you can create and interact with data visualizations, and point you to some helpful resources. This is a safe place to play — you own this notebook and you can edit it as you wish. Make it yours!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1534,"value":"contents = toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"md`## Notebooks & Cells`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`The page you’re viewing right now is a **notebook**, an interactive, editable document defined by chunks of code called **cells**. Each cell has a displayed *value* defined by its JavaScript [*source code*](https://observablehq.com/@observablehq/introduction-to-code?collection=@observablehq/ordered-introduction).\n\n👈 You can view or hide the source code of a cell by clicking the left-hand margin. Try it now!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"\nmd`Once you’ve opened a cell, you’ll see its source code displayed in a grey area below, and the resulting value (in this case, nicely formatted text) displayed above. All source code on Observable is editable; try editing the text in the cell below 👇\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`**Edit me! woooo**`","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"{\n const run = svg``;\n \n return md`To see your changes appear, run the cell by clicking the blue Play button (${run}) on the right, or by using the [keyboard shortcut](https://observablehq.com/@observablehq/keyboard-shortcuts) \\`Shift-Enter\\`. Try it now to see the cell value update with your changes!`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1622,"value":"md`#### Cell values & names`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1605,"value":"Math.PI * 2","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1782,"value":"randomName = { \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"},{"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"},{"id":1615,"value":"exponent = 22","pinned":true,"hidden":false,"mode":"ojs"},{"id":1617,"value":"2 ** exponent","pinned":true,"hidden":false,"mode":"ojs"},{"id":1600,"value":"md`Observable also allows you to write paragraphs of text styled using the popular [Markdown syntax](https://www.markdownguide.org/basic-syntax/). You can create your own markdown cells with Observable’s builtin md\\`\\` tag - this cell is an example!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"md`You can also use the builtin html\\`\\` tag to add custom HTML elements and web components into your notebooks:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"html`

Expand me...

I’m made of HTML!

\n
\n

I am some other html

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1719,"value":"md`To reference a value from another cell _within_ a markdown or HTML cell, wrap the cell name in curly braces preceded by a dollar sign (e.g. \\`\\${cellName}\\`), like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"md`The exponent is: ** ${exponent} **`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1733,"value":"md`Try changing the value of the \\`exponent\\` cell, and watch the markdown cell above update reactively!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"md`## Working with data\n\nNotebooks are great for exploring & visualizing data, so let’s load up some data to work with.\n\nHere’s a cell containing data from a weather forecast in New York City:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"nycForecast = FileAttachment(\"canned-forecast.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"{\n const caretImage = Object.assign(await FileAttachment(\"caret.png\").image(), {width: 18});\n function caret() {\n const c = caretImage.cloneNode(true);\n c.style.verticalAlign = \"middle\";\n return c;\n }\n \n return md`👆 The data loaded here is a snapshot of raw, unprocessed data from the [US National Weather Service API](https://www.weather.gov/documentation/services-web-api). You can explore the data by clicking into the carets (${caret()}).\n\nIn this case, we had a local file with the data snapshot and uploaded it to this notebook as a [File Attachment](https://observablehq.com/@observablehq/file-attachments). But that’s just one of the many options for [getting data into Observable](https://observablehq.com/@observablehq/introduction-to-data). \n\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"md`Let’s take a closer look by drilling down into the \\`periods\\` property:`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"nycForecastPeriods = nycForecast.properties.periods","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"{\n const caretImage = Object.assign(await FileAttachment(\"caret.png\").image(), {width: 18});\n function caret() {\n const c = caretImage.cloneNode(true);\n c.style.verticalAlign = \"middle\";\n return c;\n }\n \n return md`\n👆 Try inspecting the data in \\`nycForecastPeriods\\` by clicking on ${caret()}\\`Array(14)\\`, and then toggle open some of the daily forecast \\`Object\\`s. You’ll see information about temperature, wind speed, etc. as well as detailed & short descriptions of the weather.`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"md`## Importing useful code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`Let’s make the forecast data easier to read by turning it into a nicely-formatted table. Luckily we don’t have to start with a blank slate; the community has created examples we can build upon. So instead of writing the table code ourselves, let's save time & effort by [importing](https://observablehq.com/@observablehq/introduction-to-imports) the \\`table()\\` utility function from [another notebook](https://observablehq.com/@tmcw/tables/2):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import {table} from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":977,"value":"md`Now, we can use the \\`table()\\` function in our own notebook, like we do in the [\\`forecastTable\\` cell](https://observablehq.com/d/a9cef4d2c48605e0#forecastTable) below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`#### New York City weather forecast`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"forecastTable = table( // Call the table() function we imported, and\n nycForecastPeriods.slice(0, 6).map( // pass it an array with the 1st 7 elements of the forecast data.\n (period) => ({ // For each element of period data, display:....\n Day: md`**${period.name}**`, // the day/night's name, ...\n Temp: md`**${period.temperature} °F**`, // the temperature in °F, ...\n Icon: html`

`, // the icon image, ...\n Forecast: period[forecastType] // and the forecast text.\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1535,"value":"md`We can import all kinds of useful code from other notebooks! For example, here we’re importing a [helper function to create the table of contents (ToC)](https://observablehq.com/@nebrius/indented-toc) at the [top](#contents) of this notebook...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1675,"value":"md`...and the [animated SVG graphic](https://observablehq.com/d/545101f91519f470) you see above the ToC!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1668,"value":"import {chart} from '545101f91519f470'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"{\n const run = svg``;\n \n return md`## Reactive updates\n\n👆 In the code of the \\`forecastTable\\` cell above, we’re using a value called \\`forecastType\\` to determine whether to display the short or detailed description of the forecast. That value is defined in the cell below. ([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 the \\`forecastType\\` from \\`'detailedForecast'\\` to \\`'shortForecast'\\` 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"},{"id":1008,"value":"forecastType = 'shortForecast' // 👈 try replacing 'detailedForecast' with 'shortForecast'","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":921,"value":"md`## Visualizing Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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 the \\`weatherChart\\` from that notebook, we can use the [\\`with\\` keyword](https://observablehq.com/@observablehq/introduction-to-imports) to inject our own \\`nycForecast\\` data as a *replacement* for the original \\`forecast\\` data:\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"import { weatherChart } with { nycForecast as forecast } from \"@kerryrodden/simple-custom-weather-chart-in-d3\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":455,"value":"weatherChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":1138,"value":"md`We now have a beautiful, animated, hover-able visualization of our data, having written only a teeny bit of code, thanks to the Observable ecosystem! And if we wanted to customize the chart further, we could [fork](https://observablehq.com/@observablehq/fork-share-merge) the original notebook and tweak the author’s code as we see fit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"md`## Adding Interactivity\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1230,"value":"viewof period = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md`When you change the selection above 👆, watch how your choice flows through to the text below 👇.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"forecastForPeriod = {\n let tempF = nycForecastPeriods.filter(p => p.name === period)[0].temperature;\n let preferredTemp = preferredUnit === 'F' ? tempF : f2c(tempF);\n\n return md`**${period}** it will be **${preferredTemp}°${preferredUnit}**`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1460,"value":"md`This cell 👆 references the \\`period\\` value from the dropdown above, so it updates each time that value changes. You’ll notice the left margin flash whenever the cell updates with new data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"md`Now that we have a basic sense of how cells can react to user input, we could even let the reader decide which scale they’d like to see the temperature in, and convert the message above accordingly:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"viewof preferredUnit","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"md`Our data visualizations can react to user input too! Here’s an interactive version of the chart we imported above, which takes the reader’s unit preference into account:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"interactiveChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":1291,"value":"md`We once again borrowed some code from the [original weather chart notebook](https://observablehq.com/@kerryrodden/simple-custom-weather-chart-in-d3) to create the preferred unit widget and convert °F to °C. Inspect the source code of the import statement below and the cells above to see how we did it, and read up on [views](https://observablehq.com/@observablehq/introduction-to-views) and [imports](https://observablehq.com/@observablehq/introduction-to-imports) to understand how it works:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"import {f2c, viewof preferredUnit, weatherChart as interactiveChart} with {nycForecast as forecast } from '@kerryrodden/simple-custom-weather-chart-in-d3'","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":1473,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"}],"files":"$W2f","stdlib":"1","titling":"auto"}