2b:null 2c:["$","title",null,{"children":"Introduction to the Chart cell | laurent smeets | Observable"}] 31:T1d78,

Area

Bar

Scatterplot

Heatmap

Histogram

Line

Tick

32:T872,

Fields
X	Select the x-axis variable and an optional reducing function to apply (e.g. sum, mean, count). If only one variable is selected, a histogram or bar chart is created by default.
Y	Select the y-axis variable and an optional reducing function to apply (e.g. sum, mean, count). If only one variable is selected, a histogram or bar chart is created by default.
Color	Select either a single color to apply to all marks or a variable that is mapped to a color channel, and an optional reducing function to apply (e.g. sum, mean, count). Color updates the stroke color for line and scatterplot charts, and the fill color for area, bar, and heatmap charts.
Size	Select a variable that is mapped to dot size (r), and an optional reducing function to apply (e.g. sum, mean, count).
Facet X	Select a faceting variable to split the chart into separate panels side-by-size horizontally (one for each distinct value in the faceting variable).
Facet Y	Select a faceting variable to split the chart into separate panels vertically (one for each distinct value in the faceting variable).
Mark	Select a different Plot mark (auto, bar, dot, line, area, or rule).

33:Ta37,

Buttons
	Clear selection for the given field
Clear all	Clear selections for all fields
Swap X/Y	Swap selected X and Y variables in chart
Customize	Open customization pane (to update chart dimensions, margins, labels, gridlines, color scheme, scale types, reverse a scale, add or remove a legend, and add a caption)

34:Tbbb,

Data type icons
	Numeric
	String
	Date or datetime
	Boolean (true / false)

35:[{"id":"c9243870a6df6425c3d1517ff44884dbf22aa0105522ce5ed87bb4e42c998a0d5ab61481e59594a9368f4890c629dbab3197252bf80e294a2b9d73b8d02ce309","href":"https://static.observableusercontent.com/files/c9243870a6df6425c3d1517ff44884dbf22aa0105522ce5ed87bb4e42c998a0d5ab61481e59594a9368f4890c629dbab3197252bf80e294a2b9d73b8d02ce309","name":"Screen Shot 2023-04-17 at 12.26.53 PM.png","type":"image/png","lastModified":1688997410799.204,"size":96948},{"id":"842272fefafd767c5a0badaeaa585e6bd7855dc4e25256333fd402c0ecf8277c97d58ad17862139aab8f6d6e1c3646ed142ce32dcd46970aeb3c41605a090f6b","href":"https://static.observableusercontent.com/files/842272fefafd767c5a0badaeaa585e6bd7855dc4e25256333fd402c0ecf8277c97d58ad17862139aab8f6d6e1c3646ed142ce32dcd46970aeb3c41605a090f6b","name":"demo v4.mov","type":"video/quicktime","lastModified":1688997410799.204,"size":3280629},{"id":"4fb6cfcbcff8bae31fce53bbb10f4becab74e2e554f54060fa8f463b9066a796429112dad8d1c606ad132f3cf7edf43ef0dff4083c479781acfad60d0cab0a0a","href":"https://static.observableusercontent.com/files/4fb6cfcbcff8bae31fce53bbb10f4becab74e2e554f54060fa8f463b9066a796429112dad8d1c606ad132f3cf7edf43ef0dff4083c479781acfad60d0cab0a0a","name":"penguins.csv","type":"text/csv","lastModified":1688997410799.204,"size":15241},{"id":"218976ad50e0dc63c89b4e2c8559be42e2f7859c4deb1758bc93ecf8342507e5551ead2eb9c750e033ba13c38fdfeabe3f03608ea1dc170aa4a9e01f959585d4","href":"https://static.observableusercontent.com/files/218976ad50e0dc63c89b4e2c8559be42e2f7859c4deb1758bc93ecf8342507e5551ead2eb9c750e033ba13c38fdfeabe3f03608ea1dc170aa4a9e01f959585d4","name":"weather_data.csv","type":"text/csv","lastModified":1688997410799.204,"size":109570},{"id":"ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","href":"https://static.observableusercontent.com/files/ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","name":"world_bank_data.csv","type":"text/csv","lastModified":1688997410799.204,"size":606010},{"id":"20720d80187efd3f48b9cd30d16d80928edc0a4655dea5d2af6e03e2e8f3a92bdf0853c8986f07737a64f53923a741bfcf9ce0a781e56146b45b8c15a9c6070e","href":"https://static.observableusercontent.com/files/20720d80187efd3f48b9cd30d16d80928edc0a4655dea5d2af6e03e2e8f3a92bdf0853c8986f07737a64f53923a741bfcf9ce0a781e56146b45b8c15a9c6070e","name":"chart-cell-add-cell-menu-point.png","type":"image/png","lastModified":1688997410799.204,"size":523758}] 2f:{"id":"be30beea8484a1b8","slug":null,"title":"Introduction to the Chart cell","thumbnail":"41aadf65ded3552956db884e8228d449038146ba6421396a6871e2a105d52d48","access_level":"public","create_time":"$D2023-07-10T13:56:50.799Z","update_time":"$D2023-07-10T13:56:50.799Z","view_time":null,"first_public_time":"$D2023-07-10T13:56:50.799Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7768f36d98059510","login":"smeets-lsm","name":"laurent smeets","avatar_url":"https://avatars-next.observableusercontent.com/a3f0dbd791504e18f274f131a590e41ca4b750ed3cbe712d2612ed7832faea2a","tier":"starter_2024"},"version":2480,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"99aa938c47f23050","login":"smeets-lsm","name":"laurent smeets","avatar_url":"https://avatars-next.observableusercontent.com/a3f0dbd791504e18f274f131a590e41ca4b750ed3cbe712d2612ed7832faea2a","tier":null}],"members":[{"type":"individual","id":"99aa938c47f23050","login":"smeets-lsm","name":"laurent smeets","avatar_url":"https://avatars-next.observableusercontent.com/a3f0dbd791504e18f274f131a590e41ca4b750ed3cbe712d2612ed7832faea2a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to the Chart cell","cells":[{"id":0,"value":"# Introduction to the Chart cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"The **Chart cell** provides a no-code option for building, exploring, and customizing charts with [Observable Plot](https://observablehq.com/@observablehq/plot). With point-and-click menus for variable selection, aggregation (e.g. mean, sum, or count), faceting, color mapping, and more, the Chart cell makes it possible for anyone — regardless of programming experience — to quickly create and iterate on data visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"Here’s a preview of the Chart cell in action:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"---\n## Adding a Chart cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"To add a Chart cell, open the add cell menu by clicking the gray plus sign (${getIcon('addCellPlus')}) in the left margin of a notebook. From there, two things can happen: \n\n1. If the previous cell in your notebook contains data (including in a JavaScript, data table, or SQL cell), you will see a suggestion to “Create chart” in gold in the add cell menu. Click to insert a new Chart cell using the previous cell’s data.\n \n3. If the previous cell in your notebook does _not_ contain data, search or navigate to “Chart” in the add cell menu. Click to insert an empty Chart cell, then choose an available data source (from a cell or attached file) using the drop down menu in the cell header.\n\nThe two add cell menu scenarios for inserting a Chart cell are shown below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"Once selected, a Chart cell is inserted into the notebook. A new (blank) Chart cell is shown below, which uses the imported data named _orders_ (a subset of the [Pizza Paradise](https://observablehq.com/@observablehq/pizza-paradise-data?collection=@observablehq/datasets) dataset with records of orders and revenue for a pizza franchise). Choosing variables for _x_ and/or _y_ will reveal a chart above the cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"Plot.plot({\n marks: [\n Plot.auto(orders, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"To change the data source in the Chart cell, open the dropdown menu alongside the current data source (${getIcon('dropDownArrow')}) and select an alternative source that exists in the notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"---\n## Chart types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"Under the hood, the Chart cell employs [Plot.auto](https://observablehq.com/@observablehq/plot-auto) — a special mark that automatically selects a mark type that best represents the given dimensions of the data according to some simple heuristics. Depending on selected variable types, the following chart types are currently possible in the Chart cell: \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1748,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"When you pick a column for _x_ or _y_, the Chart cell will show a histogram (or bar chart) of the frequencies of different values in that column. The Chart cell will automatically bin values if the data is numbers or dates, or group them by unique categories if they’re strings. The dropdowns will show the automatic selections that made the chart (like “Auto: count” and “Auto: bar”), which you can always override.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"## Examples\nThe charts below are created entirely using the Chart cell. You can update the fields, reducers, and customization options in the Chart cells below to see how the outputs change (your edits won’t be stored in this notebook).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2015,"value":"Setting either _x_ or _y_ to a column of your data renders a **histogram**. Note that, below, the _y_ reducer says “Auto: count” and the mark says “Auto: bar”, each of which you can override.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2019,"value":"Plot.plot({\n marks: [\n Plot.auto(weather, {x: \"temp_max\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1514,"value":"Selecting numeric columns of your data for _x_ and _y_, then selecting a category for _Facet X_, renders a **faceted scatterplot**. Here we’ve also set _color_ to species.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":845,"value":"Plot.plot({\n caption: \"Penguin body mass and flipper length for three species (Adélie, chinstrap and gentoo) at three islands (Biscoe, Dream and Torgersen) near Palmer Archipelago, Antarctica. Data: Gorman et al. 2014.\",\n insetTop: 20,\n insetLeft: 20,\n insetRight: 20,\n insetBottom: 20,\n width: 800,\n x: {\n label: \"Body mass (g)\"\n },\n y: {\n label: \"Flipper length (mm)\"\n },\n color: {\n legend: true\n },\n marks: [\n Plot.auto(await FileAttachment(\"penguins.csv\").csv({typed: true}), {x: \"body_mass_g\", y: \"flipper_length_mm\", fx: \"island\", color: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2350,"value":"Selecting an _x_ and _y_ where one of them (usually _x_) is continuous and sorted, e.g. by date, then updating the mark to _line_ will produce a **line chart**. Here, we additionally choose color to visualize different series by location.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2344,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(weather_data, {x: \"date\", y: \"temp_max\", color: \"location\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1516,"value":"A **stacked bar chart** is rendered by selecting one column for _x_; then, for _y_, we’ve selected both a column (_co2_) and the _sum_ reducer; we make it stacked by picking a categorical column for _color_, which segments the bars by that category.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1174,"value":"Plot.plot({\n caption: \"Total annual CO2 emissions by region. Data: World Bank Open Data.\\n \",\n marginLeft: 75,\n insetTop: 0,\n width: 900,\n x: {\n label: \"Year\"\n },\n y: {\n label: \"Total CO2 emissions (by region)\"\n },\n color: {\n legend: true\n },\n marks: [\n Plot.auto(await FileAttachment(\"world_bank_data.csv\").csv({typed: true}), {x: \"year\", y: {value: \"co2\", reduce: \"sum\"}, color: \"region\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2038,"value":"Selecting columns for _x_ and _y_, then choosing a “count” as the reducer for _color_, will produce a **heatmap**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2004,"value":"Plot.plot({\n marks: [\n Plot.auto(weather_data, {x: \"wind\", y: \"temp_max\", color: {reduce: \"count\"}})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":652,"value":"---\n## Reducers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"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. For example, the Chart cell below produces an area chart of pizzeria revenue (sum of the _revenue_ column on the _y_-axis) over time, with color indicating different days of the week.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"Plot.plot({\n marginLeft: 75,\n color: {\n legend: false\n },\n marks: [\n Plot.auto(orders, {x: \"order_date\", y: {value: \"revenue\", reduce: \"sum\"}, color: \"day_of_week\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1984,"value":"Setting a reducer on one channel (like setting “sum” on _y_ above) implies grouping (for categorical data) or binning (for numeric or temporal data) one or two other channels:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Setting a reducer on	Groups or bins on	To make a
x	y	Horizontal histogram
y	x	Vertical histogram
color	x and y	Heatmap
size	x and y	Dot plot

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"---\n## Fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"With the Chart cell added to a notebook and connected to a data source, you can update 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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"---\n## Buttons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"Iterate and explore charts further using other features of the Chart cell that let you clear selections (for one or all fields), swap _x_ and _y_ variable selections, and customize your chart. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"---\n## Data types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"The data type of a column (e.g. numeric, string, date, etc.) may determine what kinds of charts are possible. Icons to the left of the column names in the dropdowns show the data type for each.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":691,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2214,"value":"The _Size_ field updates the radius for a dot mark, and can only be updated using quantitative data (i.e. continuous or discrete numeric values). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2404,"value":"---\n\n## Convert to JavaScript\n\nYou can convert a Chart cell to JavaScript to create a new cell with the underlying, equivalent, Plot.auto code. It’s a regular Plot mark, so you can combine it with other marks or pass in any of the standard Plot options. For more information, see the [Plot.auto documentation](https://observablehq.com/@observablehq/plot-auto).\n\nClick the add cell button below a Chart cell and you’ll see this suggestion:\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"import {getIcon} from '@observablehq/product-education-icon-helpers'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import {ordersByProductDay as orders, pizzeriaDB } from '@observablehq/pizza-paradise-data'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"SELECT * FROM products","pinned":false,"hidden":true,"mode":"sql","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"products","database":"var:pizzeriaDB"},{"id":1746,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2358,"value":"weather = FileAttachment(\"weather_data.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2356,"value":"parser = d3.utcParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2361,"value":"weather_data = weather.map(d => ({...d, date: parser(d.date)}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"