28:null 29:["$","title",null,{"children":"Week 1 Tutorial 3: Data visualization with Chart cell | vis4sense | Observable"}] 2e:[{"id":"f017b15e05c17359f4d68133228cc3ad29e704c67cf40ac288eec6fb7bd44f97729e3a12e3790ed642b712952ff880aa0b326395f6f82e5f290c612ad8d2f42f","href":"https://static.observableusercontent.com/files/f017b15e05c17359f4d68133228cc3ad29e704c67cf40ac288eec6fb7bd44f97729e3a12e3790ed642b712952ff880aa0b326395f6f82e5f290c612ad8d2f42f","name":"powerByColorScatter.png","type":"image/png","lastModified":1696976470832.907,"size":375074},{"id":"a672840f09106084185ac3cacbdf939a8c38097e298584117b795732180e99f9c359cfc406f29b50ef01592973044c0429237ecb42c3dda6c026e6c1fdb85ac8","href":"https://static.observableusercontent.com/files/a672840f09106084185ac3cacbdf939a8c38097e298584117b795732180e99f9c359cfc406f29b50ef01592973044c0429237ecb42c3dda6c026e6c1fdb85ac8","name":"weightBySize.png","type":"image/png","lastModified":1696976470832.907,"size":409988},{"id":"206463c0bf15fb55e1dd67acc86e240c30c2dec73092f455ba458533e87d7341b4a513a9414e684b29aa78ec8d7172787f2e845c19364eae3e1cceaa156ed074","href":"https://static.observableusercontent.com/files/206463c0bf15fb55e1dd67acc86e240c30c2dec73092f455ba458533e87d7341b4a513a9414e684b29aa78ec8d7172787f2e845c19364eae3e1cceaa156ed074","name":"facetedByCyl@1.png","type":"image/png","lastModified":1696976470832.907,"size":152511},{"id":"f6def583f57cdeb08e2040f8b91e8027f990410e2612d401cba7808617ce058ca4a8601c0ff1312edc16b164ad68413f4d2c2a3012cc68dce35b48777211dd60","href":"https://static.observableusercontent.com/files/f6def583f57cdeb08e2040f8b91e8027f990410e2612d401cba7808617ce058ca4a8601c0ff1312edc16b164ad68413f4d2c2a3012cc68dce35b48777211dd60","name":"reducedByMean.png","type":"image/png","lastModified":1696976470832.907,"size":157079},{"id":"f64567bccc6cf0d5b84ada57ada3d41b1865f42cab9f79eac05db1123bed5c04b20ea821fb66845199754ed841b7808759f4b9713ba19213d9afbf8bbd38ef78","href":"https://static.observableusercontent.com/files/f64567bccc6cf0d5b84ada57ada3d41b1865f42cab9f79eac05db1123bed5c04b20ea821fb66845199754ed841b7808759f4b9713ba19213d9afbf8bbd38ef78","name":"chartNoData.png","type":"image/png","lastModified":1696976470832.907,"size":31124},{"id":"cdc2d494fd9a473f135679438695b7080534b6e9a5e76442c0dd778b1a9ce7707a43170a4f93c713547f75f4df496a378fe3f8cda0f65c0319481969201f1f72","href":"https://static.observableusercontent.com/files/cdc2d494fd9a473f135679438695b7080534b6e9a5e76442c0dd778b1a9ce7707a43170a4f93c713547f75f4df496a378fe3f8cda0f65c0319481969201f1f72","name":"chartNoSelection.png","type":"image/png","lastModified":1696976470832.907,"size":75874},{"id":"7748b6211d5eefa1426584e461e3bde9f9e13e5040a5f2e41ee8caa66d9099f7c4ce8389bf8aa21ef76df64c1122d48b2d86d868d080239d1f4b198d5283d80b","href":"https://static.observableusercontent.com/files/7748b6211d5eefa1426584e461e3bde9f9e13e5040a5f2e41ee8caa66d9099f7c4ce8389bf8aa21ef76df64c1122d48b2d86d868d080239d1f4b198d5283d80b","name":"convertToJs.png","type":"image/png","lastModified":1696976470832.907,"size":82917},{"id":"2d17ad0413a16cf4367deb0996a5a1d689802b9632382d64caa602be5b1937957097123db12b0038505f76ea24248ac55a86e482952c720d2d19d01ab8893ca8","href":"https://static.observableusercontent.com/files/2d17ad0413a16cf4367deb0996a5a1d689802b9632382d64caa602be5b1937957097123db12b0038505f76ea24248ac55a86e482952c720d2d19d01ab8893ca8","name":"convertedToJs.png","type":"image/png","lastModified":1696976470832.907,"size":89933},{"id":"f2b391e79810bc57fe7cad6a79795bc3e73f04b414a3e8459c4b00b1f6868939ddf0b838e0983a92f0e96c58800d65b36d306fe0a37b3ee895e1e8ae11908a72","href":"https://static.observableusercontent.com/files/f2b391e79810bc57fe7cad6a79795bc3e73f04b414a3e8459c4b00b1f6868939ddf0b838e0983a92f0e96c58800d65b36d306fe0a37b3ee895e1e8ae11908a72","name":"chartHighlighted.png","type":"image/png","lastModified":1696976470832.907,"size":43516},{"id":"6e267d16b39faa5cdabeafcae5cfc1a2e4458eff489b874c3843b467a369b17af9ed503fe95dfcd2bd683d2b0dc2ac364bf624fcc8e7340b720a13d16330a09a","href":"https://static.observableusercontent.com/files/6e267d16b39faa5cdabeafcae5cfc1a2e4458eff489b874c3843b467a369b17af9ed503fe95dfcd2bd683d2b0dc2ac364bf624fcc8e7340b720a13d16330a09a","name":"customizedBar.png","type":"image/png","lastModified":1696976470832.907,"size":190274},{"id":"f6c93a52b9a0d3755000554b5dea6775d9259d2281c6157fd01c2ee286049ce0ec65e7054294b57fa5b3c05c2b8c39fda9a0be574ab9a13918f77fa89b5e9888","href":"https://static.observableusercontent.com/files/f6c93a52b9a0d3755000554b5dea6775d9259d2281c6157fd01c2ee286049ce0ec65e7054294b57fa5b3c05c2b8c39fda9a0be574ab9a13918f77fa89b5e9888","name":"customChart.png","type":"image/png","lastModified":1696976470832.907,"size":208362},{"id":"29b72f65e948eec916208548fb003316ae1ea478191c081b59aa88d3b9cf4228e8dfcda594e595d4c0d020df2b0d55fea67e4f6a3436bac7fe4abf77f4ff1ee4","href":"https://static.observableusercontent.com/files/29b72f65e948eec916208548fb003316ae1ea478191c081b59aa88d3b9cf4228e8dfcda594e595d4c0d020df2b0d55fea67e4f6a3436bac7fe4abf77f4ff1ee4","name":"xFieldOptions2.png","type":"image/png","lastModified":1696976470832.907,"size":107213},{"id":"b29c7d52ca0df85c2a9f1c925e3f0ef9e9e60f4348450b900654d7fd5021368fafba50bb3392f5ba075c159b0dd41999ba4c8a014d56b04cefef02555868ad33","href":"https://static.observableusercontent.com/files/b29c7d52ca0df85c2a9f1c925e3f0ef9e9e60f4348450b900654d7fd5021368fafba50bb3392f5ba075c159b0dd41999ba4c8a014d56b04cefef02555868ad33","name":"histogramEco.png","type":"image/png","lastModified":1696976470832.907,"size":150077},{"id":"c6122f15dd979f2c87bb8bd84b0535af5f7fdf235f0aa977f84cadb13cad77feb83b42f5550666439d05198b586962b9eca8b4594ee15dd054db98d6c52a73bc","href":"https://static.observableusercontent.com/files/c6122f15dd979f2c87bb8bd84b0535af5f7fdf235f0aa977f84cadb13cad77feb83b42f5550666439d05198b586962b9eca8b4594ee15dd054db98d6c52a73bc","name":"EcoBySpeedScatter.png","type":"image/png","lastModified":1696976470832.907,"size":340973},{"id":"2241c016a9590a1e4dd9cfd5b25645960643f79ff34245dc17cfe9c52d128e4d20259c6d24d929290b1b21dcb43906a1161f9b1bba583721918d0037456787d7","href":"https://static.observableusercontent.com/files/2241c016a9590a1e4dd9cfd5b25645960643f79ff34245dc17cfe9c52d128e4d20259c6d24d929290b1b21dcb43906a1161f9b1bba583721918d0037456787d7","name":"ecoBySpeedLine@1.png","type":"image/png","lastModified":1696976470832.907,"size":569999}] 2c:{"id":"43ee8d8e7d586d68","slug":null,"title":"Week 1 Tutorial 3: Data visualization with Chart cell","thumbnail":"881aa332205edab61e74f42377e70f154831622a6038a7597fa1439a739a65b7","access_level":"public","create_time":"$D2023-10-10T22:21:10.832Z","update_time":"$D2026-03-02T12:37:56.528Z","view_time":null,"first_public_time":"$D2024-11-05T21:51:34.961Z","has_unpublished_edits":null,"fork":{"id":"0c7616d85380473b","slug":"learning-observable-data-visualization-with-chart-cell","title":"Learning Observable: Data visualization with Chart cell","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026"},"version":605,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea89374c7616fbb2","login":"viskai","name":"Kai Xu","avatar_url":"https://avatars-next.observableusercontent.com/f4fdffee0c29ae69192e0c36f3a10b3c92dc6714fd89b5464ceb9ec5e4289f47","tier":null}],"members":[{"type":"individual","id":"ea89374c7616fbb2","login":"viskai","name":"Kai Xu","avatar_url":"https://avatars-next.observableusercontent.com/f4fdffee0c29ae69192e0c36f3a10b3c92dc6714fd89b5464ceb9ec5e4289f47","tier":null,"role":"editor"},{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"45864fcd91db4694","slug":"observable-tutorials","title":"Observable tutorials","owner":{"id":"ee33646169618d88","login":"vis4sense","name":"vis4sense"}},"type":"notebook","body":{"titling":"auto","title":"Week 1 Tutorial 3: Data visualization with Chart cell","cells":[{"id":0,"value":"# Week 1 Tutorial 3: Data visualization with Chart cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"- In Observable, the easiest way to get going with data visualization is the **Chart cell**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"## Adding a Chart cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"There are two options. First, you should see a **Chart button** with icon ${getIcon('chartCell')} as the top option when you begin searching for \"chart\" in the **Add cell menu**:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"

The **Add cell menu** with **Chart cell** option highlighted as the top choice after being typed in the search bar.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"Selecting this button will create a Chart cell for you:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"\n \n

The Chart cell with no data source selected.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"Once you select a data source, the Chart cell options are revealed. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":" \n

The Chart cell with a data source selected.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"In this example, we will the [cars](https://observablehq.com/@observablehq/sample-datasets#-cars) dataset. It needs to be added to a notebook with something like: `carData = cars` (cannot use `cars` directly)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## X, Y and Mark fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"Let's first modify the X variable. Use the **X dropdown** to look at and select from existing fields in the data source:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":" \n

Viewing the dropdown options for the X field.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"- Suppose we pick _economy (mpg)_; the result is a histogram of observation counts, with _economy (mpg)_ as the X variable and a reducer on the Y axis counting the observations of vehicles in each of the X-axis bins.\n- Both the reducer on the Y axis (_Auto: count_) and the mark designating the type of chart (_Auto: bar_) are automatically selected to create the visualization:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":" \n

A histogram counting cars by economy.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"- If we add a field for the Y axis, it will automatically take away the count reducer on the Y axis and replace it with the field chosen.\n- At this point it may likely update the chart to a type it determines to be more useful.\n- In this case it chooses a scatter plot (**Mark field**: _Auto: dot_) for visualizing the relationship between fuel economy (X axis) and 0-60 mph times (Y axis):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":" \n

A scatter plot with fuel economy along the X axis with 0-60 speed along the Y axis.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"- We expect the **Chart cell** to pick a reasonable type of chart based on the type of data selected for each field.\n- We can also change the **Mark dropdown** to something other than what is automatically selected.\n- For example, we can override _Auto: dot_ here to a line chart by changing the value of the **Mark dropdown** to _line_, which quickly reveals that the _dot_ mark is the better choice for this data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":" \n

A line chart with fuel economy along the X axis with 0-60 speed along the Y axis.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"## Color, Size, and Facet channels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"### Color channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"Below, we choose the _power (hp)_ field, which will distribute colors in a continuous gradient across the dots according to how much power the car has:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":" \n

The scatter plot updated with dot color distributed by power (hp).

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"From this it is easy to see, albeit unsurprising, that, in general, the more power, the faster and the less economical the car. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"### Size channel\nIn this case, we choose _weight (lb)_ from our **Size dropdown**, which lets us additionally explore how weight relates to a car's velocity, power, and fuel economy:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":" \n

The scatter plot updated with dot size distributed by weight (lb).

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"Interestingly, maybe somewhat surprisingly, we can see that higher weight tends to correlate with faster speeds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"### Facet channel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"Sometimes it is helpful to facet a chart according to a variable on either the X or Y axis, for example to explore relationships or distributions by a certain category. Here, we have a histogram showing how power is distributed amongst the cars by count. \n\nWe use the **Facet Y** dropdown to choose _cylinders_ while choosing _power (hp)_ on the X axis and the reducer _Auto: count_ to to utilize the Y axis for counting the cars in each bin:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":" \n

A histogram of power (hp) faceted by number of cylinders .

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"In this view, you can see there is a general trend cars having higher power the greater the number of cylinders they have.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"## Using reducers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"- **Reducers** are for summary statistics (e.g. mean values or sums).\n- For X, Y, Color, and Size, you can pick a reducer from the menu above the field dropdown.\n- The following reducing functions can be applied: count, distinct, sum, min, max, mean, median and mode. \n- Below we apply the mean reducer to the **Y** axis field(_weight (lb)_) to visualize the average car weight for each of 3, 4, 5, 6, and 8 cylinders.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":" \n

A bar chart showing average weight per engine type - 3, 4, 5, 6, or 8 cylinders.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"From this, we can see that the 3 cylinder vehicles do not conform to the pattern the others are beholden. While the 4-8 cylinder vehicles follow a pattern of getting heavier the more cylinders are present, the 3 cylinders are heavier than the 4 cylinders on average.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"## Customization\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"- Open the customization pane by clicking the **Customize button** () in the top right of the cell header.\n- From there, you can customize chart height and width, margins, insets, add or remove a legend, update _X_ and _Y_ labels, adjust the color scheme, add a caption, and more:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":282,"value":" \n

Customization pane.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"These changes produce real-time results:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":" \n

Updated with changes from the Customization pane.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"## Convert to JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"- The Chart cell uses the JavaScript library [Plot](https://observablehq.com/plot/) under the hood.\n- It can easily convert your Chart cell to JavaScript Plot code.\n- To do this, select the gold **Convert to JavaScript button** in the following **Add cell menu** of the chart after the Chart cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":309,"value":" \n

Select the Convert to JavaScript button in the Add Cell menu.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"A duplicate cell will appear immediately below the one you just converted, exposing the entire Plot code used to create the chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":" \n

The converted Chart cell with JavaScript Plot code.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"- With the Plot code exposed, you can then make even further customizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"import {getIcon} from \"@observablehq/product-education-icon-helpers\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"