28:null 29:["$","title",null,{"children":"Week 1 Lab - Get started with the Chart cell | vis4sense | Observable"}] 2e: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.2f:[{"id":"ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","href":"https://static.observableusercontent.com/files/ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","name":"world_bank_data.csv","type":"text/csv","lastModified":1697582401834.391,"size":606010},{"id":"c8bc23691f80af81e72359632322560c999409f0e243c201fbd96f34e7368069262bbd9e0d0cdee4ba2d2f459dcee02dbd2364e831ef9ad866367ff79c26a597","href":"https://static.observableusercontent.com/files/c8bc23691f80af81e72359632322560c999409f0e243c201fbd96f34e7368069262bbd9e0d0cdee4ba2d2f459dcee02dbd2364e831ef9ad866367ff79c26a597","name":"observable-file-download.png","type":"image/png","lastModified":1770398639403.232,"size":43126}] 2c:{"id":"781e60e857583598","slug":null,"title":"Week 1 Lab - Get started with the Chart cell","thumbnail":"e0d321d7bc7c62cfb73393b83e2d693a93328d121b19ab686fc53a9340df79ad","access_level":"public","create_time":"$D2023-10-17T22:40:01.834Z","update_time":"$D2026-02-06T18:20:54.891Z","view_time":null,"first_public_time":"$D2023-12-01T12:26:49.816Z","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":6,"starred":false,"owner":{"type":"team","id":"ee33646169618d88","login":"vis4sense","name":"vis4sense","avatar_url":"https://avatars-next.observableusercontent.com/e9cf9f5cce9434795306b6057c7f1c94da01c8572f91bc9371b41f956b0d1be5","tier":"education_2026"},"version":2317,"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":42,"collection":{"id":"0d23fcfbcb6fe717","slug":"observable-lab-practice","title":"Observable lab practice","owner":{"id":"ee33646169618d88","login":"vis4sense","name":"vis4sense"}},"type":"notebook","body":{"titling":"auto","title":"Week 1 Lab - Get started with the Chart cell","cells":[{"id":0,"value":"# Week 1 Lab - Get started with the Chart cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2173,"value":"## Step 0: Create an Observable account and fork the notebook\n\nThe first step is to create an Observable account. To do this, go to [Observablehq.com](https://observablehq.com/) and create an account **with your university email address**. This account will be used to submit your coursework.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2179,"value":"## Exercise 1\n\n[First chart with no code](https://observablehq.com/guide/no-code-chart) (open a new notebook): create a chart showing revenue, and break it down by product category, using the built-in _Pizza Paradise_ sample dataset\n\nYou can create the visualisations following the instruction and save the final notebook to your account in the last step.\n\nMore information about the Chart cell see the [lecture notebook](https://observablehq.com/d/43ee8d8e7d586d68) and/or [its documentation](https://observablehq.com/@observablehq/chart-cell).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"## Exercise 2\n\nRecreate the visualisations below in your own notebook.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2212,"value":"### Dataset\nFor this exercise we will use the **penguin** dataset. It [comes with Observable](https://observablehq.com/@observablehq/sample-datasets#-penguins), so you don't need to attach it to the notebook. You can do something like this in a JavaScript cell:\n\n`data = penguins`\n\nAnd then use `data` as the data source in the chart cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"### Task 1: Choose X variable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"- Variable type (e.g. number, date, string) is indicated by an icon immediately to the left of the variable name.\n- If a single variable is selected, the Chart cell will default to observation counts, as shown below with *flipper_length_mm* selected: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"Plot.plot({\n marks: [\n Plot.auto(penguin, {x: \"flipper_length_mm\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":253,"value":"You can 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","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","output":"$undefined","database":"$undefined"},{"id":235,"value":"### Task 2: Fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"- You can override the auto selection by using the dropdown menus to control the variables, chart type, color and size channels, and faceting.\n- 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","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","output":"","database":"$undefined"},{"id":1394,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(penguin, {x: \"flipper_length_mm\", y: \"culmen_depth_mm\", fx: \"island\", color: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":519,"value":"### Task 3: Reducers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":540,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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: \"mean\"}, fx: \"sex\", color: \"species\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2240,"value":"## Exercise 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2301,"value":"Again, recreate the visualisations below in your own notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":564,"value":"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.\n\nThe dataset is attached to this notebook as a csv file, which can be downloaded from the 'Files' pane using the '...' next to the file name (see the screenshot below).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2278,"value":"observableFileDownload = FileAttachment(\"observable-file-download.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2314,"value":"A better way is to import the data using the `worldBankData` variable defined below. This is covered in the lecture [here](https://observablehq.com/d/aecad48e3b2c98f8?collection=@vis4sense/observable-tutorials#cell-29).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2310,"value":"worldBankData = FileAttachment(\"world_bank_data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2279,"value":"Make sure you add the data to your own notebook and add a data table first, as shown below. Check the [tutorial](https://observablehq.com/d/aecad48e3b2c98f8) if you don't remember how to do this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"world_bank_data","database":"$undefined"},{"id":628,"value":"### Task 4\n\nMake 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.\n\nCreate this chart in your notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":563,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(world_bank_data, {x: \"year\", y: \"co2\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"### Task 5: Customisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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.\n\nAgain, re-create the chart in your notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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?

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"Plot.plot({\n caption: \"Mean life expectancy (years) by region. Includes life expectancy values from all countries and years in the dataset. Source: World Bank Open Data.\",\n marginTop: 67,\n marginLeft: 88,\n marginRight: 0,\n marginBottom: 81,\n insetTop: 70,\n insetLeft: 20,\n insetRight: 20,\n insetBottom: 70,\n width: 505,\n height: 500,\nx: {\n grid: true,\n label: \"life years\"\n },\n y: {\n grid: true,\n label: \"rEgIoN\"\n },\n color: {\n legend: true\n },\n marks: [\n Plot.auto(world_bank_data, {x: {value: \"life\", reduce: \"mean\"}, y: \"region\", color: \"region\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2262,"value":"html``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1417,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"import {try_it} from \"@observablehq/notes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"penguin = penguins.filter(d => d.sex != null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"