25:["$","title",null,{"children":"Learning Observable: Observable Plot | Christian Miranda | Observable"}] 49:[{"id":"ed6dcea2e0d7d82dfdcc1f3afd6c0d7437646dc43940f392e98801f38e89718764c742a626c22f0cbc2cf596ea15c7da08763f2ae0f376b840d83443705f7a52","href":"https://static.observableusercontent.com/files/ed6dcea2e0d7d82dfdcc1f3afd6c0d7437646dc43940f392e98801f38e89718764c742a626c22f0cbc2cf596ea15c7da08763f2ae0f376b840d83443705f7a52","name":"new-users-course-header-plot.png","type":"image/png","lastModified":1687983399450.565,"size":1153245},{"id":"a439a3d91de974e47cf6b9e43c552e6bd3f215e1ee5576fa92e1e88fb5fb7fff3f9138cedfd2a22aa46ff1b3375132c60db9a85533987cc08d76ebb5e222a2ce","href":"https://static.observableusercontent.com/files/a439a3d91de974e47cf6b9e43c552e6bd3f215e1ee5576fa92e1e88fb5fb7fff3f9138cedfd2a22aa46ff1b3375132c60db9a85533987cc08d76ebb5e222a2ce","name":"plot-from-snippet-sales@1.mov","type":"video/quicktime","lastModified":1687983399450.565,"size":5479224},{"id":"30c2afbebc09ba2fc43ce94bdc8bdf61925e917d22c9e2b845f25b225bd10d1430c21f766e12168c25996335cd0ee7d2f33f824603cc663c58788850372cc9c2","href":"https://static.observableusercontent.com/files/30c2afbebc09ba2fc43ce94bdc8bdf61925e917d22c9e2b845f25b225bd10d1430c21f766e12168c25996335cd0ee7d2f33f824603cc663c58788850372cc9c2","name":"new-users-course-sm-plot.png","type":"image/png","lastModified":1687983399450.565,"size":251155}] 29:{"id":"38e9784a304b3f72","slug":null,"title":"Learning Observable: Observable Plot","thumbnail":"f38bc6d66929327ec7bf9fa5b180cb3125ccfa1f7f556aba5f995aa166eb26d3","access_level":"public","create_time":"$D2023-06-28T20:16:39.450Z","update_time":"$D2023-07-11T19:17:30.225Z","view_time":null,"first_public_time":"$D2023-06-28T20:16:39.450Z","has_unpublished_edits":null,"fork":{"id":"79f43da4b58ef64e","slug":"learning-observable-observable-plot","title":"Learning Observable: Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b073b8ee488ecb63","login":"c-miranda","name":"Christian Miranda","avatar_url":"https://avatars-next.observableusercontent.com/4619d1aba2dedd112f55ddac191761e0aeabfdb38ddd23aae4162ebfded5c721","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":342,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b2df6d767d150a9","login":"c-miranda","name":"Christian Miranda","avatar_url":"https://avatars-next.observableusercontent.com/4619d1aba2dedd112f55ddac191761e0aeabfdb38ddd23aae4162ebfded5c721","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1b2df6d767d150a9","login":"c-miranda","name":"Christian Miranda","avatar_url":"https://avatars-next.observableusercontent.com/4619d1aba2dedd112f55ddac191761e0aeabfdb38ddd23aae4162ebfded5c721","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learning Observable: Observable Plot","cells":[{"id":0,"value":"# Learning Observable: Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"

\n# Appendix\n## imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Here's an example of a scatterplot with linear regression, created with Observable Plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"plot1 = Plot.plot({\n marks: [\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", stroke: \"species\"}), // try changing \"stroke\" to \"fill\"\n Plot.linearRegressionY(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", stroke: \"species\"})\n ],\n ariaLabel: \"Penguin culmen dimensions\",\n ariaDescription: \"Scatterplot of culmen length by culmen depth for three penguin species. Linear trendlines are added to each, revealing similar positive linear trends between culmen length and depth for chinstrap, gentoo and Adelie penguins.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## Building charts with Plot from code snippets\n\nTo get started quickly with Observable Plot, search for then select an existing code snippet from the Add Cell menu. Snippets for many common chart types are included (e.g. scatterplots, line charts, ordered bar graphs, histograms, area charts and more). Once you've selected the right chart type, starter code will be added to a new cell. Replace the fields with your own to get a view of your own data, as shown below. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"## Analysis in Plot\n\nWhile you can use Plot to draw the result of analysis that you do in other cells (or elsewhere entirely), data transformation can be specified directly in Plot, with a variety of option transforms. For example, the `binX()` or `binY()` transform in Plot \"groups quantitative data—continuous measurements such as heights, weights, or temperatures—into discrete bins. You can then compute summary statistics for each bin...\"\n\nThe example code below shows how `binX()` is used to create a histogram, by finding counts of the \"weight\" variable value within discrete bins, then plotting those counts as bar heights (using `Plot.rectY`):\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"plot2 = Plot.plot({\n marks: [\n Plot.rectY(olympians, Plot.binX({y: \"count\"}, {x: \"weight\"})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"It's also possible to create and use your *own* functions to transform the data being visualized in your chart. Learn more about transforming and summarizing data in the[ Bin Transform](https://observablehq.com/@observablehq/plot-bin) documentation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"## Plot customization\n\nWith your base chart created you may want to customize it by adding a legend, transforming axis scales, updating a color scheme, changing labels, or any number of other necessary tweaks and additions. Observable Plot employs a layered grammar of graphics, so updates are achieved by adding and customizing an appropriate layer to your Plot code. \n\nThe scatterplot below has been customized in a number of different ways. Some elements are customized to constants values (e.g. `symbol: \"triangle\"`), some to variable values (e.g. `r: \"power (hp)\"`), and some new elements are added (e.g. grid lines and legend). It also combines multiple marks (`Plot.dot` and `Plot.ruleY`). \n\nTry updating the live Plot code below the chart to test your own customization, like changing \"triangle\" to \"square\" or \"magma\" to \"cool\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"plot3 = Plot.plot({\n marks: [\n Plot.dot(cars, {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n fill: \"economy (mpg)\",\n r: \"power (hp)\",\n symbol: \"triangle\"\n }),\n Plot.ruleY([0])\n ],\n x: { label: \"Horsepower\" },\n y: { label: \"Gas mileage (mpg)\" },\n color: { scheme: \"magma\", legend: true, label: \"mpg\" },\n grid: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"And, adding interactivity to charts made in Observable Plot is quick and painless using Observable Inputs. Learn more about it in the [User inputs and interactivity](https://observablehq.com/d/ec4297da21238b6b?collection=@observablehq/intro-to-observable) section of this course, and in our [Inputs documentation](https://observablehq.com/@observablehq/inputs). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"### Learn more about Observable Plot\n\nOur interactive documentation covers all of the core concepts and functions you'll need to become a Plot expert, and we have many examples of Plot visualizations that you can reuse for your own analyses. These links will help you get started:\n\n- [Observable Plot](https://observablehq.com/@observablehq/plot)\n- [Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets)\n- [Plot Examples](https://observablehq.com/collection/@observablehq/plot-examples)\n- Quick Guides: [Exploring Olympic athletes data](https://observablehq.com/guide/athletes) and \n[Electricity use vs. temperature](https://observablehq.com/guide/electricity)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"With Observable's Data Table cells, SQL cells, and Plot in your toolkit, you can quickly get up-and-running with interactive data exploration and visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"In our next tutorial, we'll go through [cell modes, reactive Markdown and HTML](https://observablehq.com/@observablehq/learning-observable-cell-modes-reactive-markdown-and-html?collection=@observablehq/intro-to-observable).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"newUsersCourseSmPlot = FileAttachment(\"new-users-course-sm-plot.png\").image({width: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"// Fonts and base style build based on Belo's\n// brand guidelines. Notice they have to be called\n// (already done, below).\nimport { base, fonts } from \"@belo/styles\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"base","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"fonts","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null