3e:null 3f:["$","title",null,{"children":"Get started with the Chart cell | Dakota Sexton | Observable"}] 45:T41e,In some cases, rather than visualizing the raw data values you may want to visualize summary statistics for one or more groups. _Reducers_ are used to find aggregated values (e.g. sum, mean, median, or count) for groups within the data. 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. In this example, you’ll use a reducer to calculate and visualize an aggregated value for a variable.46:[{"id":"20720d80187efd3f48b9cd30d16d80928edc0a4655dea5d2af6e03e2e8f3a92bdf0853c8986f07737a64f53923a741bfcf9ce0a781e56146b45b8c15a9c6070e","href":"https://static.observableusercontent.com/files/20720d80187efd3f48b9cd30d16d80928edc0a4655dea5d2af6e03e2e8f3a92bdf0853c8986f07737a64f53923a741bfcf9ce0a781e56146b45b8c15a9c6070e","name":"chart-cell-add-cell-menu-point.png","type":"image/png","lastModified":1684345212569.09,"size":523758},{"id":"ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","href":"https://static.observableusercontent.com/files/ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","name":"world_bank_data.csv","type":"text/csv","lastModified":1684345212569.09,"size":606010}] 43:{"id":"a935445947d8ce40","slug":null,"title":"Get started with the Chart cell","thumbnail":"6991918e808e9464a3be3b71495f060926dae1950d5014dd4f87cc189ce6a764","access_level":"public","create_time":"$D2023-05-17T17:40:12.569Z","update_time":"$D2023-05-17T17:40:12.569Z","view_time":null,"first_public_time":"$D2023-05-17T17:40:12.569Z","has_unpublished_edits":null,"fork":{"id":"9b7da15412d3a2af","slug":"get-started-with-chart-cell","title":"Get started with the Chart cell","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"18d7081107b59c45","login":"tinykite","name":"Dakota Sexton","avatar_url":"https://avatars-next.observableusercontent.com/63c5a6fbb6adf7745e0911664c8d38575c0865e8bed0e1864cde5a185141e0c4","tier":"starter_2024","bio":"Designer, writer, and developer exploring how to tell more engaging stories with interactive, data-driven experiences.","following":false},"version":2461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"428f131441cafcf0","login":"tinykite","name":"Dakota Sexton","avatar_url":"https://avatars-next.observableusercontent.com/63c5a6fbb6adf7745e0911664c8d38575c0865e8bed0e1864cde5a185141e0c4","tier":null,"bio":"Designer, writer, and developer exploring how to tell more engaging stories with interactive, data-driven experiences.","following":false}],"members":[{"type":"individual","id":"428f131441cafcf0","login":"tinykite","name":"Dakota Sexton","avatar_url":"https://avatars-next.observableusercontent.com/63c5a6fbb6adf7745e0911664c8d38575c0865e8bed0e1864cde5a185141e0c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Get started with the Chart cell","cells":[{"id":0,"value":"# Get started with the Chart cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"The [Chart cell](https://observablehq.com/@observablehq/chart-cell) is a specialty cell type in Observable that provides a no-code option for building, updating, and customizing charts with [Observable Plot](https://observablehq.com/@observablehq/plot). With point-and-click menus for variable selection, aggregation, aesthetics (e.g. color mapping, axis labels, margins) and more, the chart lets anyone — regardless of programming experience — quickly create and iterate on exploratory visualizations. \n\nVisit the [Chart cell documentation](https://observablehq.com/@observablehq/chart-cell) to learn more about the different options and how it works.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"## Add a Chart cell to your notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"Open the [Add cell menu](https://observablehq.com/@observablehq/adding-cells) by clicking the gray plus icon in the left margin. If the preceding cell contains tabular data, the Add cell menu will reveal a **Create chart** suggestion in gold, which assumes you want to use that as your data source (you can always change it to another source). Or, to continue without a suggestion, you can simply start typing “chart” with the Add cell menu open, then select **Chart** to add a Chart cell to your notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"The two ways to create a new Chart cell are shown below: (1) using the suggested source data from the previous cell, or (2) creating a “blank slate” Chart cell, then choosing the data source.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2064,"value":"

Add cell menus for inserting a Chart cell into an Observable notebook. **Left:** Add cell menu with suggestion to create a Chart cell from data in the previous cell (in this case, the data is named *orders*). **Right:** Add cell menu without suggestion, with the Chart cell option highlighted.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"## Example 1: Choose X and/or Y variable(s)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"With a Chart cell created and connected to your data source, start selecting your data (columns) from the drop down menus. Throughout the cell, variable type (e.g. number, date, string) is indicated by an icon immediately to the left of the variable name. If a single variable is selected, the Chart cell will default to observation counts, as shown below with *flipper_length_mm* selected from the _penguin_ data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"Plot.plot({\n marks: [\n Plot.auto(penguin, {x: \"body_mass_g\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"try_it(htl.html`Try it! In the Chart cell above, use the drop down menu for X to instead view a histogram of values in the body_mass_g column in the penguin data.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"Once a second variable is selected, the Chart cell will make its best guess regarding an appropriate chart type, and other fields available to users. You can override automatically assigned fields to define your desired chart. Clear selections for any field by clicking the button at the top right of the field menus, or clear all selections using the Clear all button in the cell header.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":542,"value":"try_it(htl.html`Try it! In the Chart cell above, select the culmen_length_mm (penguin bill length) column as the y variable to create a scatterplot of body mass and bill length.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"## Example 2: Fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"With the Chart cell added to a notebook and connected to a data source, [Plot.auto](https://observablehq.com/@observablehq/plot-auto) (the mark used under-the-hood by the Chart cell) will auto-select a mark that “best represents the given dimensions of the data according to some simple heuristics.” \n\nYou can override the Plot.auto field selections using the dropdown menus to control the variables, chart type, color and size channels, and faceting. A long dash (—) in the dropdown menu of any field indicates that a variable has not been selected.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1409,"value":"The example faceted scatterplot below is rendered by selecting penguin flipper length and body mass as the _x_- and _y_-axis variables (since both are numeric, Plot.auto automatically chooses the dot mark), updating color to depend on penguin species, size (dot radius) on body mass, and faceting by island.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1394,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(penguin, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", fx: \"island\", color: \"sex\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1489,"value":"try_it(htl.html`Try it! In the Chart cell above, update the fields to create a scatterplot of bill (culmen) dimensions:

Select culmen_length_mm for X
Select culmen_depth_mm for Y
Facet by species (you can decide if Facet X or Facet Y is more useful here)
Update the Color field to change based on penguin sex

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"## Example 3: Reducers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":540,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"Below, _mean_ is selected as a reducer for penguin body mass (in grams), rendering a bar chart of mean body mass (also faceted by sex, with color based on species): ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(penguin, {x: \"species\", y: {value: \"body_mass_g\", reduce: \"max\"}, fx: \"sex\", color: \"sex\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":564,"value":"Your turn! The data below is from [World Bank Open Data](https://data.worldbank.org/), and contains values for several indicators (CO₂ production, GDP, life expectancy, population) by country over time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"world_bank_data = await FileAttachment(\"world_bank_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"world_bank_data","database":"$undefined"},{"id":628,"value":"Make a faceted area chart of total annual CO₂ over time, using the _sum_ reducer to calculate the total global CO₂ produced each year. The _year_ and _co2_ columns are pre-selected in the Chart cell below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"try_it(htl.html`Try it! Update the Chart cell below to render a faceted area chart of total global CO₂ emissions:

Choose \"sum\" as the reducer for co2 in the second dropdown menu for Y
Update the Color to depend on region
Update Facet X to facet by region
Update the mark to Area

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"Plot.plot({\n width: 1200,\n height: 500,\ncolor: {\n legend: true\n },\n marks: [\n Plot.auto(world_bank_data, {x: \"year\", y: {value: \"co2\", reduce: \"sum\"}, fx: \"region\", color: \"region\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"## Example 4: Customization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"The Chart cell provides options to customize a chart height and width, margins, insets, add or remove a legend, update _x_- and _y_- axis labels, adjust the color scheme, and add a caption. Open the customization pane by clicking the Customize button () in the top right of the cell header.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"Below is an example of a terribly customized chart created with the Chart cell, using the World Bank data introduced above. Open the Customization pane to see and tinker with customization options.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2050,"value":"try_it(htl.html`Try it! Make updates in the Customization pane to improve the bar chart below. Some things to consider:

Is the legend helpful or necessary?
Can you help make the y-axis tick labels entirely visible?
Can you remove excess whitespace at the top and bottom of the chart?
Update x and y axis labels?