31:T4c2,The histogram lets us explore the distribution of fuel economy across all cars in the dataset. A bar chart (or histogram if the field is continuous) of counts is the default chart produced any time just the X or Y field is selected in the chart cell, as indicated by the reducer on the Y axis here showing "Auto: count". 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. At this point it may likely update the chart to a type it determines to be more useful. 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):32:T431,Instead of just visualizing the raw data values with **Chart cell**, you may want to visualize summary statistics (e.g. mean values or sums) for one or more variables. You can do this in the Chart cell with reducers. For X, Y, Color, and Size, you can pick a reducer from the menu above the field dropdown. The following reducing functions can be applied: count, distinct, sum, min, max, mean, median and mode. 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. 33:[{"id":"29b72f65e948eec916208548fb003316ae1ea478191c081b59aa88d3b9cf4228e8dfcda594e595d4c0d020df2b0d55fea67e4f6a3436bac7fe4abf77f4ff1ee4","href":"https://static.observableusercontent.com/files/29b72f65e948eec916208548fb003316ae1ea478191c081b59aa88d3b9cf4228e8dfcda594e595d4c0d020df2b0d55fea67e4f6a3436bac7fe4abf77f4ff1ee4","name":"xFieldOptions2.png","type":"image/png","lastModified":1689356994937.218,"size":107213},{"id":"f6c93a52b9a0d3755000554b5dea6775d9259d2281c6157fd01c2ee286049ce0ec65e7054294b57fa5b3c05c2b8c39fda9a0be574ab9a13918f77fa89b5e9888","href":"https://static.observableusercontent.com/files/f6c93a52b9a0d3755000554b5dea6775d9259d2281c6157fd01c2ee286049ce0ec65e7054294b57fa5b3c05c2b8c39fda9a0be574ab9a13918f77fa89b5e9888","name":"customChart.png","type":"image/png","lastModified":1689798566331.594,"size":208362},{"id":"6e267d16b39faa5cdabeafcae5cfc1a2e4458eff489b874c3843b467a369b17af9ed503fe95dfcd2bd683d2b0dc2ac364bf624fcc8e7340b720a13d16330a09a","href":"https://static.observableusercontent.com/files/6e267d16b39faa5cdabeafcae5cfc1a2e4458eff489b874c3843b467a369b17af9ed503fe95dfcd2bd683d2b0dc2ac364bf624fcc8e7340b720a13d16330a09a","name":"customizedBar.png","type":"image/png","lastModified":1690581064950.644,"size":190274},{"id":"f2b391e79810bc57fe7cad6a79795bc3e73f04b414a3e8459c4b00b1f6868939ddf0b838e0983a92f0e96c58800d65b36d306fe0a37b3ee895e1e8ae11908a72","href":"https://static.observableusercontent.com/files/f2b391e79810bc57fe7cad6a79795bc3e73f04b414a3e8459c4b00b1f6868939ddf0b838e0983a92f0e96c58800d65b36d306fe0a37b3ee895e1e8ae11908a72","name":"chartHighlighted.png","type":"image/png","lastModified":1690815480811.696,"size":43516},{"id":"2d17ad0413a16cf4367deb0996a5a1d689802b9632382d64caa602be5b1937957097123db12b0038505f76ea24248ac55a86e482952c720d2d19d01ab8893ca8","href":"https://static.observableusercontent.com/files/2d17ad0413a16cf4367deb0996a5a1d689802b9632382d64caa602be5b1937957097123db12b0038505f76ea24248ac55a86e482952c720d2d19d01ab8893ca8","name":"convertedToJs.png","type":"image/png","lastModified":1690815291077.726,"size":89933},{"id":"7748b6211d5eefa1426584e461e3bde9f9e13e5040a5f2e41ee8caa66d9099f7c4ce8389bf8aa21ef76df64c1122d48b2d86d868d080239d1f4b198d5283d80b","href":"https://static.observableusercontent.com/files/7748b6211d5eefa1426584e461e3bde9f9e13e5040a5f2e41ee8caa66d9099f7c4ce8389bf8aa21ef76df64c1122d48b2d86d868d080239d1f4b198d5283d80b","name":"convertToJs.png","type":"image/png","lastModified":1690815156546.795,"size":82917},{"id":"c538f8bd7d4ff4ada5ef07a94ede5abd5324e0603f5acd3f9b87b4414b201e6b5d267788f9a119d1eb1b25b5b9a020f09a7205fca219cd8947a9c0a56b79cd9c","href":"https://static.observableusercontent.com/files/c538f8bd7d4ff4ada5ef07a94ede5abd5324e0603f5acd3f9b87b4414b201e6b5d267788f9a119d1eb1b25b5b9a020f09a7205fca219cd8947a9c0a56b79cd9c","name":"chartAndData.png","type":"image/png","lastModified":1690816734741.936,"size":383947},{"id":"cdc2d494fd9a473f135679438695b7080534b6e9a5e76442c0dd778b1a9ce7707a43170a4f93c713547f75f4df496a378fe3f8cda0f65c0319481969201f1f72","href":"https://static.observableusercontent.com/files/cdc2d494fd9a473f135679438695b7080534b6e9a5e76442c0dd778b1a9ce7707a43170a4f93c713547f75f4df496a378fe3f8cda0f65c0319481969201f1f72","name":"chartNoSelection.png","type":"image/png","lastModified":1690816593508.632,"size":75874},{"id":"08d0705e8194a0a63a02a14183542ba96fe13e5b40aabd1d9af4fd38453cb427d9c8845435c734d5d1d1f1ebcf2e68a57feee18779b15746524df60d6b4f6416","href":"https://static.observableusercontent.com/files/08d0705e8194a0a63a02a14183542ba96fe13e5b40aabd1d9af4fd38453cb427d9c8845435c734d5d1d1f1ebcf2e68a57feee18779b15746524df60d6b4f6416","name":"chart-cell-new-colors.jpg","type":"image/jpeg","lastModified":1690987264053.231,"size":784797},{"id":"f64567bccc6cf0d5b84ada57ada3d41b1865f42cab9f79eac05db1123bed5c04b20ea821fb66845199754ed841b7808759f4b9713ba19213d9afbf8bbd38ef78","href":"https://static.observableusercontent.com/files/f64567bccc6cf0d5b84ada57ada3d41b1865f42cab9f79eac05db1123bed5c04b20ea821fb66845199754ed841b7808759f4b9713ba19213d9afbf8bbd38ef78","name":"chartNoData.png","type":"image/png","lastModified":1690816513851.076,"size":31124},{"id":"3b19cd520711b958c748e124a16624a45fa7aba89a905610b51179dc888cbe294c173fdbad3d5cda91791e71db78d0fe49ee4136483876c00762f0effacf6244","href":"https://static.observableusercontent.com/files/3b19cd520711b958c748e124a16624a45fa7aba89a905610b51179dc888cbe294c173fdbad3d5cda91791e71db78d0fe49ee4136483876c00762f0effacf6244","name":"createChartButton.png","type":"image/png","lastModified":1690815936590.622,"size":105957},{"id":"f6def583f57cdeb08e2040f8b91e8027f990410e2612d401cba7808617ce058ca4a8601c0ff1312edc16b164ad68413f4d2c2a3012cc68dce35b48777211dd60","href":"https://static.observableusercontent.com/files/f6def583f57cdeb08e2040f8b91e8027f990410e2612d401cba7808617ce058ca4a8601c0ff1312edc16b164ad68413f4d2c2a3012cc68dce35b48777211dd60","name":"reducedByMean.png","type":"image/png","lastModified":1690580303223.77,"size":157079},{"id":"206463c0bf15fb55e1dd67acc86e240c30c2dec73092f455ba458533e87d7341b4a513a9414e684b29aa78ec8d7172787f2e845c19364eae3e1cceaa156ed074","href":"https://static.observableusercontent.com/files/206463c0bf15fb55e1dd67acc86e240c30c2dec73092f455ba458533e87d7341b4a513a9414e684b29aa78ec8d7172787f2e845c19364eae3e1cceaa156ed074","name":"facetedByCyl@1.png","type":"image/png","lastModified":1690579791238.816,"size":152511},{"id":"a672840f09106084185ac3cacbdf939a8c38097e298584117b795732180e99f9c359cfc406f29b50ef01592973044c0429237ecb42c3dda6c026e6c1fdb85ac8","href":"https://static.observableusercontent.com/files/a672840f09106084185ac3cacbdf939a8c38097e298584117b795732180e99f9c359cfc406f29b50ef01592973044c0429237ecb42c3dda6c026e6c1fdb85ac8","name":"weightBySize.png","type":"image/png","lastModified":1690579368537.424,"size":409988},{"id":"f017b15e05c17359f4d68133228cc3ad29e704c67cf40ac288eec6fb7bd44f97729e3a12e3790ed642b712952ff880aa0b326395f6f82e5f290c612ad8d2f42f","href":"https://static.observableusercontent.com/files/f017b15e05c17359f4d68133228cc3ad29e704c67cf40ac288eec6fb7bd44f97729e3a12e3790ed642b712952ff880aa0b326395f6f82e5f290c612ad8d2f42f","name":"powerByColorScatter.png","type":"image/png","lastModified":1690579124602.14,"size":375074},{"id":"2241c016a9590a1e4dd9cfd5b25645960643f79ff34245dc17cfe9c52d128e4d20259c6d24d929290b1b21dcb43906a1161f9b1bba583721918d0037456787d7","href":"https://static.observableusercontent.com/files/2241c016a9590a1e4dd9cfd5b25645960643f79ff34245dc17cfe9c52d128e4d20259c6d24d929290b1b21dcb43906a1161f9b1bba583721918d0037456787d7","name":"ecoBySpeedLine@1.png","type":"image/png","lastModified":1690578940787.112,"size":569999},{"id":"c6122f15dd979f2c87bb8bd84b0535af5f7fdf235f0aa977f84cadb13cad77feb83b42f5550666439d05198b586962b9eca8b4594ee15dd054db98d6c52a73bc","href":"https://static.observableusercontent.com/files/c6122f15dd979f2c87bb8bd84b0535af5f7fdf235f0aa977f84cadb13cad77feb83b42f5550666439d05198b586962b9eca8b4594ee15dd054db98d6c52a73bc","name":"EcoBySpeedScatter.png","type":"image/png","lastModified":1690578643225.255,"size":340973},{"id":"b29c7d52ca0df85c2a9f1c925e3f0ef9e9e60f4348450b900654d7fd5021368fafba50bb3392f5ba075c159b0dd41999ba4c8a014d56b04cefef02555868ad33","href":"https://static.observableusercontent.com/files/b29c7d52ca0df85c2a9f1c925e3f0ef9e9e60f4348450b900654d7fd5021368fafba50bb3392f5ba075c159b0dd41999ba4c8a014d56b04cefef02555868ad33","name":"histogramEco.png","type":"image/png","lastModified":1690577533044.736,"size":150077},{"id":"21698ed465ae56000bf94f684121a9c2c14ed352c3d08840da141b2c8523dec35a472c6df31ff7f2b005c2c432ff9d894e71e207d815ccd088429452135c9ff3","href":"https://static.observableusercontent.com/files/21698ed465ae56000bf94f684121a9c2c14ed352c3d08840da141b2c8523dec35a472c6df31ff7f2b005c2c432ff9d894e71e207d815ccd088429452135c9ff3","name":"carsDTC.png","type":"image/png","lastModified":1689861234983.381,"size":353361}] 2f:{"title":"Learning Observable: Data visualization with Chart cell","cells":[{"id":0,"value":"# Learning Observable: Data visualization with Chart cell","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":7,"value":"In our last tutorial in this series, we looked at different ways of [getting data into Observable](https://observablehq.com/@observablehq/learning-observable-getting-data-into-observable?collection=@observablehq/intro-to-observable) and how we could start working with this data using the [Data table cell](https://observablehq.com/@observablehq/data-table-cell):","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":" \n

The Data table cell synced to a data source.

","pinned":false,"hidden":false,"mode":"html"},{"id":9,"value":"The Data table cell provides us with a tabular view of the data and functionality that enables some data wrangling. Our next step might be to visualize our data.","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"In Observable, the easiest way to get going with data visualization is the **Chart cell**. The **Chart cell** is a specialty cell type in Observable that allows users to build, update, and customize charts with no code required. It uses [Observable Plot](https://observablehq.github.io/plot/) under the hood, but abstracts away the code and replaces it with an intuitive UI to get moving fast. With point-and-click menus for variable selection, aggregation, aesthetics (e.g. color mapping, axis labels, margins) and more, the **Chart cell** lets anyone — regardless of programming experience — quickly create and iterate on data visualizations.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"## Adding a Chart cell","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"Here is how to add a **Chart cell**. 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"},{"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"},{"id":94,"value":"Selecting this button will create a Chart cell for you:","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"\n \n

The Chart cell with no data source selected.

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

The Chart cell with a data source selected.

","pinned":false,"hidden":false,"mode":"html"},{"id":40,"value":"The second way to open a **Chart cell** is only possible when the cell immediately before in your notebook contains data. For instance, if the previous cell is a **Data table cell** synced to data, then an available option is to create a **Chart cell** from the data in that **Data table cell**. In that scenario, you will see a **Create Chart button** highlighted in gold as a suggestion for what to do with the cell in the **Add cell menu**:","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":" \n

The cell after a Data table cell with an option to Create chart.

","pinned":false,"hidden":false,"mode":"html"},{"id":137,"value":"Select this button and a new **Chart cell** will be created in the next cell, already synced to the same data that was in the **Data table cell** above:","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":" \n

A Chart cell created and already synced to the data from the previous Data table cell.

","pinned":false,"hidden":false,"mode":"html"},{"id":46,"value":"## X, Y and Mark fields","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"Now that you know how to create a **Chart cell**, let's bring it to life with some visualization. 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"},{"id":161,"value":" \n

Viewing the dropdown options for the X field.

","pinned":false,"hidden":false,"mode":"html"},{"id":57,"value":"Suppose we pick one of the fields, let's say _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. 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"},{"id":170,"value":" \n

A histogram counting cars by economy.

","pinned":false,"hidden":false,"mode":"html"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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. We can also change the **Mark dropdown** to something other than what is automatically selected. 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"},{"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"},{"id":70,"value":"---\n","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"## Color, Size, and Facet channels","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"### Color channel","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"In addition to choosing X, Y and Mark variables from their respective dropdowns, you can further choose a color field from the **Color dropdown**. This will visualize the differences among the values of the chosen field as differences in color.\n\nBelow, we choose the _power (hp)_ field, which will distribute colors in a continuous gradient across the dots of our scatter plot according to how much power the car has:\n","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":" \n

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

","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":78,"value":"### Size channel\n\nThe size channel controls the size of dots based upon the value of a selected field. In 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"},{"id":222,"value":" \n

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

","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":236,"value":"### Facet channel","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":245,"value":" \n

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

","pinned":false,"hidden":false,"mode":"html"},{"id":462,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":80,"value":"## Using reducers","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":86,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"## Customization\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"There are several options to customize the chart dimensions and other chart features using the **Customization pane**. Open the customization pane by clicking the **Customize button** () in the top right of the cell header. 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"},{"id":282,"value":" \n

Customization pane.

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

Updated with changes from the Customization pane.

\n","pinned":false,"hidden":false,"mode":"html"},{"id":301,"value":"## Convert to JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"The **Chart cell** uses the JavaScript library [Plot](https://observablehq.com/plot/) under the hood. Because of this, it can easily convert your already made **Chart cell** to JavaScript Plot code. 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"},{"id":309,"value":" \n

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

","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":312,"value":" \n

The converted Chart cell with JavaScript Plot code.

","pinned":false,"hidden":false,"mode":"html"},{"id":325,"value":"With the Plot code exposed, you can then make even further customizations. Please refer to the [Plot docs](https://observablehq.github.io/plot/) for more information on how to customize this further using Plot code and/or check out our [next tutorial in this series on Observable Plot](https://observablehq.com/@observablehq/learning-observable-observable-plot?collection=@observablehq/intro-to-observable) to start getting a feel for the functionality. \n\nIf you want some hands-on guidance using the **Chart cell**, check out [this tutorial in an Observable notebook](https://observablehq.com/@observablehq/get-started-with-chart-cell), where you can actually create data visualizations using the Chart cell as shown here. Or, if you would like to see our official documentation on chart cell, please see [Introduction to the Chart cell](https://observablehq.com/@observablehq/chart-cell?collection=@observablehq/notebook-fundamentals).","pinned":false,"hidden":false,"mode":"md"},{"id":443,"value":"import {getIcon} from \"@observablehq/product-education-icon-helpers\"\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}