25:["$","title",null,{"children":"Plot Exploration: Penguins | 56fc95d9361213d8 | Observable"}] 49:T484,viewof q5 = Q({ title: "Question 5: Islands", questions: [`The penguins in this dataset have been identified on three islands. How are the species distributed geographically?`], guides: [ `Again, we can [facet](https://observablehq.com/@observablehq/plot-facet) our data on "island" to draw a bar chart for each of the islands.`, `Another technique would be to create circles with x="species" and y="island", and a radius that corresponds to the number of individuals.`, ], hints: [ `Plot.barY(data, Plot.groupX({y: "count"}, {x: "…"})).plot({ facet: { data, x: "island" }, marks: [ Plot.frame(), ] })`, `Plot.dot(data, Plot.group({r: "count"}, {x: "…", y: "…" })).plot()` ], solutions: [`Plot.barY(data, Plot.groupX({y: "count"}, {x: "species", fill: "species"})) .plot({ facet: { data, x: "island" }, marks: [ Plot.frame(), ] })`, `Plot.dot(data, Plot.group({r: "count"}, {x: "island", y: "species", stroke: "species" })).plot({ r: { range: [0, 50] // adjusts the radius scale to make the marks more visible }, marginLeft: 80, height: 300 })`] })4a:T43b,viewof q7 = Q({ title: "Question 7: Weight, sex and species", questions: [`How does body mass vary across both sex _and_ species? Is the distribution of body mass similar for each sex-species combination?`], guides: [ `You can use x and y [facets](https://observablehq.com/@observablehq/plot-facets) on the previous chart to show how this distribution varies.`, `Go wild: try with x: "sex", then y: "species", then both x and y.`, `An alternative approach is to [stack](https://observablehq.com/@observablehq/plot-stack) the results by *species*.` ], hints: [ `Plot.rectY(data, Plot.binX({y: "count"}, {x: "…"})).plot()` ], solutions: [ `Plot.rectY(data, Plot.binX({y: "count"}, {x: "body_mass", fill: "species", thresholds: 20})).plot({ facet: { data, x: "sex", y: "species", marginRight: 80 }, marks: [ Plot.frame(), ] })`, `Plot.rectY(data, Plot.stackY(Plot.binX({y: "count"}, {x: "body_mass", fill: "species", thresholds: 20}))).plot({ facet: { data, x: "sex" }, marks: [ Plot.frame(), ] })`] })4b:T66b,viewof q9 = Q({ title: "Question 9. Reduction", questions: [`How many females are heavier than the lightest male?`], guides: [ `Use the [Plot.**selectMinX**](https://observablehq.com/@observablehq/plot-select) transform to show the lightest male (as a tickX mark), and [Plot.**filter**](https://observablehq.com/@observablehq/plot-transforms) to select male or females as dots?`, `Additionally, use a [Plot.**groupZ**](https://observablehq.com/@observablehq/plot-group) median transform to give a hint of the females’ distribution of body mass.` ], hints: [ `Plot.plot({ facet: { data, y: "species" }, marks: [ Plot.tickX(data, Plot.selectMinX({ x: "body_mass", filter: … })), Plot.dot(data, { x: "body_mass", … }) ] })` ], solutions: [ `Plot.plot({ facet: { data, y: "species", marginLeft: 80 }, marks: [ Plot.frame(), Plot.tickX(data, Plot.groupZ({x: "median"}, { x: "body_mass", filter: d => d.sex === "FEMALE", stroke: "species", strokeWidth: 3 })), Plot.tickX(data, Plot.selectMinX({ x: "body_mass", filter: d => d.sex === "MALE", stroke: "grey", strokeWidth: 3 })), Plot.tickX(data, Plot.selectMaxX({ x: "body_mass", filter: d => d.sex === "MALE", stroke: "grey", strokeWidth: 3 })), Plot.dot(data, { x: "body_mass", filter: d => d.sex === "MALE", fill: "grey", r: 2 }), Plot.dot(data, { x: "body_mass", filter: d => d.sex === "FEMALE", fill: "species" }) ] })`] })4c:[{"id":"3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","href":"https://static.observableusercontent.com/files/3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","name":"penguins.png","type":"image/png","lastModified":1685701128297.259,"size":358223},{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1685701128297.259,"size":13490},{"id":"9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","href":"https://static.observableusercontent.com/files/9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","name":"weather.png","type":"image/png","lastModified":1685701128297.259,"size":666971}] 29:{"id":"a79f77bf62a7f879","slug":null,"title":"Plot Exploration: Penguins","thumbnail":"861f17189b5ebea7fb38ce894a6710686d6a21ca596500426b1657ba5d7ea386","access_level":"public","create_time":"$D2023-06-02T10:18:48.297Z","update_time":"$D2023-06-06T15:46:28.723Z","view_time":null,"first_public_time":"$D2023-06-02T10:18:48.297Z","has_unpublished_edits":null,"fork":{"id":"32eeadb67cb4cbcb","slug":"plot-exploration-penguins","title":"Plot Exploration: Penguins","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5a8c2152f835499f","login":"56fc95d9361213d8","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1656,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56fc95d9361213d8","login":"56fc95d9361213d8","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"56fc95d9361213d8","login":"56fc95d9361213d8","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot Exploration: Penguins","cells":[{"id":0,"value":"md`# Plot Exploration: Penguins\n\n

\n\nWelcome to this semi-guided tutorial for learning [Observable Plot](/@observablehq/plot). We have prepared a tidy dataset, along with a series of exercises that will guide you in coding your own data visualizations.\n\nAfter a brief presentation of the dataset, you will find a series of questions that can be answered with a chart. All the questions are open! Feel free to try your own approach, or to peek at the working examples that are given at the end of each question.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`*To begin the exploration, please fork this notebook. This way your work will be saved.*\n\n----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`Good day! Here is a fine dataset of [penguins](https://allisonhorst.github.io/palmerpenguins/):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = FileAttachment(\"palmer-penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`Data were collected and made available by [Dr. Kristen Gorman](https://www.uaf.edu/cfos/people/faculty/detail/kristen-gorman.php) and the [Palmer Station, Antarctica LTER](https://pal.lternet.edu/), a member of the Long Term Ecological Research Network. They are available by CC-0 license in accordance with the [Palmer Station LTER Data Policy](http://pal.lternet.edu/data/policies) and the [LTER Data Access Policy for Type I data](https://lternet.edu/data-access-policy/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`*If you want to know more about the actual penguins we’re talking about, don’t forget to check the explanations on [Allison Horst’s repo](https://allisonhorst.github.io/palmerpenguins/), with beautiful illustrations:*\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Table\n\nUsing Observable’s [Table](/@observablehq/input-table) component, we can have a look at the contents, structure, and dimensions of this dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`As we can see, the data is tabular, and one row corresponds to one observation: the data is tidy ([*read more about tidy data*](https://observablehq.com/@observablehq/plot-and-tidy-data)).\n\nWe have access, for each penguin (or data point), to its *${data.columns.join(\", \")}.*\n\nThe numerical values are given in millimeters (for the bill and flipper’s lengths) and grams (for the body mass). Thanks to the {typed: true} option in the [FileAttachment](#data) cell, they are JavaScript numbers. Categories (*species, island*, and *sex*) are represented as strings.\n\nWe are ready to use Plot 🚀`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"Plot // Plot is available in Observable by default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"md`*Here's a link to the Plot [documentation collection](/collection/@observablehq/plot) and the [GitHub repository](https://github.com/observablehq/plot), for reference.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"md`Now, here’s a few questions about this dataset that we can try to answer with Plot:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"viewof q0 = Q({\n title: `Question 0: Distribution`,\n questions: [\n `Plot a dot for each penguin, using *body_mass* on the *x* axis.`\n ],\n guides: [\n `Use [Plot.**dot**](https://observablehq.com/@observablehq/plot-dot)(data, {x: \"…\"}) to create a one-dimensional dot plot.`,\n `Use the {fill} and {fillOpacity} options to visualize overlapping dots.`,\n `Repeat with other dimensions.`\n ],\n hints: [\n `// change the code here\nPlot.dot(data, {x: \"...\", fill: \"black\", fillOpacity: 0.2}).plot() // replace … by the field’s name, e.g. body_mass`\n ],\n solutions: [\n ` Plot.dot(data, {x: \"body_mass\", fill: \"black\", fillOpacity: 0.2}).plot()`, \n `Plot.dot(data, {x: \"flipper_length\", fill: \"black\", fillOpacity: 0.2}).plot()`],\n // open: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"viewof x = Inputs.select(data.columns)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, \n {x: x, fill: \"black\", fillOpacity: 0.2}\n ).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"A(q0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof q1 = Q({\n title: \"Question 1: Correlation\",\n questions: [\n `How is _flipper length_ related to _body mass_? Do heavier penguins tend to have longer flippers?`,\n ],\n guides: [\n `There are many ways to answer this question. To create a scatterplot, use a [Plot.**dot**](https://observablehq.com/@observablehq/plot-dot)({x: \"dimension 1\", y: \"dimension 2\"}) mark.`,\n ],\n hints: [\n `Plot.dot(data, {x: \"…\", y: \"…\"}).plot() // replace … by the field names.`\n ],\n solutions: [\n `Plot.dot(data, {x: \"flipper_length\", y: \"body_mass\"}).plot()`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, \n {x: \"body_mass\", y: \"flipper_length\"}\n ).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"A(q1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"viewof q2 = Q({\n title: \"Question 2: Species\",\n questions: [\n `How are these measurements of (flipper) size and (body) weight distributed across the species?`,\n ],\n guides: [\n `Use a [color](https://github.com/observablehq/plot#color-options) to identify species. Also add a title to know which species each color represents!`,\n `Let's also add a small configuration to the plot to show grid lines.`\n ],\n hints: [\n `Plot.dot(data, {… fill: \"…\", stroke: \"…\", title: \"…\" }).plot({ grid: true }), // fill and stroke drive the color`\n ],\n solutions: [\n `Plot.dot(data, {x: \"flipper_length\", y: \"body_mass\", fill: \"species\", title: \"species\"}).plot({ grid: true })`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"// type your code here\nPlot.dot(data, \n {x: \"body_mass\", y: \"flipper_length\", fill: \"species\"}\n ).plot()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"A(q2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"Plot.dot(data, \n {x: \"flipper_length\", y: \"body_mass\", fill: \"species\", title: \"species\"})\n .plot(\n { \n grid: true ,\n color: {\n domain: [\"Adelie\", \"Gentoo\", \"Chinstrap\"].reverse(),\n //range: [\"red\", \"green\", \"blue\"]\n scheme: \"dark2\" \n }\n }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof q3 = Q({\n title: \"Question 3: Sex\",\n questions: [\n `How do these measurements vary with sex? (Bonus: use an alternative encoding for *sex* so that we don’t lose the *species* encoding.)`,\n ],\n guides: [\n `We could use a color to identify sex, like in the previous chart. But we can also reuse the previous code, and add a [facet](/@observablehq/plot-facets) on sex.`,\n ],\n hints: [\n `Plot.dot(data, { \"...\" }).plot({\n facet: {\n data: data,\n x: \"… facet dimension\"\n },\n grid: true\n})`\n ],\n solutions: [\n ` Plot.dot(data, {x: \"flipper_length\", y: \"body_mass\", fill: \"species\", title: \"species\"}).plot({\n facet: {\n data,\n x: \"sex\"\n },\n grid: true,\n marks: [\n // you can add more marks to the plot with the marks array\n Plot.frame(),\n ]\n})`,\n `Plot.plot({\n facet: {\n data,\n x: \"sex\"\n },\n grid: true,\n marks: [\n Plot.frame(),\n Plot.dot(data, {x: \"flipper_length\", y: \"body_mass\", fill: \"species\", title: \"species\"})\n ]\n})`\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"// type your code here\nPlot.dot(\n chart_data,\n {x: \"flipper_length\", y: \"body_mass\", fill: \"species\"}\n).plot({\n width,\n facet:{\n data: chart_data,\n x: \"sex\",\n y: \"island\",\n marginLeft: 10,\n marginRight: 100\n },\n marks:[Plot.frame()]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"chart_data = data.filter(d => !!d.sex) // filter na missing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"A(q3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof q4 = Q({\n title: \"Question 4: Counting\",\n questions: [`How many species of penguins are present in the dataset, and how many individuals belong to each species?`],\n guides: [\n `You can use the [Plot.**groupX**](https://observablehq.com/@observablehq/plot-group)({y: \"count\"}, {x: \"species\"}) transform, and create a bar chart with [Plot.**barY**](https://observablehq.com/@observablehq/plot-bar).`,\n `Don’t hesitate to use fill: \"species\" to reinforce the identification of species, as in the scatter plot above.`,\n ],\n hints: [\n ` Plot.barY(data, Plot.groupX({y: \"count\"}, {x: \"…\"})).plot()`\n ],\n solutions: [`Plot.barY(data, Plot.groupX({y: \"count\"}, {x: \"species\", fill: \"species\"}))\n .plot()`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"// type your code here\nPlot.barX(\n data,\n Plot.groupY({x: \"count\"},\n {y: \"species\"})\n).plot()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"// type your code here\nPlot.barX(\n data,\n Plot.groupY(\n {x: \"mean\"}, // calculation - what is the output\n {y: \"species\", x:\"flipper_length\"} // what I'm picking from the data\n )\n).plot({\n marginLeft:100,\n y:{label:\"\"}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"Plot.barX(\n data,\n Plot.groupY(\n {x: \"mean\"}, // calculation - what is the output\n {y: \"species\", x:\"flipper_length\"} // what I'm picking from the data\n )\n).plot({\n marginLeft:100,\n y:{\n label:\"\",\n domain: speciesList\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"import {tidy, mean, arrange, desc, groupBy, summarize} from \"@pbeshai/tidyjs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"speciesList = tidy(\n data,\n groupBy(\"species\",\n summarize({mean_length: mean(\"flipper_length\")})),\n arrange(desc(\"mean_length\"))\n).map(d => d.species)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"A(q4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"// type your code here\nPlot.plot({\n facet: {\n data,\n x: \"sex\"\n },\n marks: [\n Plot.barY(data, Plot.groupX(\n {y: \"count\"},\n {x: \"species\", fy: \"island\", fill: \"sex\", fx: \"sex\"}\n ))\n ],\n\n marginRight: 100\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"A(q5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"viewof q6 = Q({\n title: \"Question 6: Weights\",\n questions: [`What is the distribution of weights?`],\n guides: [\n `To draw a histogram of a continuous variable (*body_mass*), we can use the [Plot.**bin**](https://observablehq.com/@observablehq/plot-bin) transform and create [Plot.**rectY**](https://observablehq.com/@observablehq/plot-rect) marks.`,\n `Play with the thresholds option to create more rects.`\n ],\n hints: [\n `Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"…\"})).plot()`\n ],\n solutions: [\n `Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"body_mass\", thresholds: 20}))\n .plot()`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"// type your code here\nPlot.plot({\n marks:[\n Plot.rectY(data, Plot.binX({y2: \"count\"}, {x: \"body_mass\", fill: \"sex\", mixBlendMode: \"screen\"})),\n Plot.ruleY([0]),\n Plot.ruleX([0])\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"Plot.binX({y: \"count\"}, {x: \"body_mass\", fill: \"sex\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"Plot.plot({\n grid: true,\n color: {scheme: \"Purples\"},\n marks: [\n Plot.rectX(data, Plot.bin({fill: \"count\"}, {x: \"body_mass\", y: \"flipper_length\", thresholds: 30}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"Plot.plot({\n r: {range: [0, 6]},\n grid: true,\n marks: [\n Plot.dot(data, Plot.bin({r: \"count\"}, {x: \"body_mass\", y: \"flipper_length\", stroke: \"sex\", fill: \"sex\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"Plot.plot({\n marginLeft: 100,\n padding: 0,\n x: {grid: true},\n color: {scheme: \"Blues\"},\n marks: [\n Plot.rect(data, Plot.binX({fill: \"proportion-facet\"}, {x: \"body_mass\", fy: \"island\", inset: 0.5}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"A(q6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"// type your code here\nPlot.rectY(data, \n Plot.binX({y: \"count\"}, \n {x: \"body_mass\", \n thresholds: 20,\n fy: \"sex\", fx: \"species\"}))\n .plot()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"body_mass\", thresholds: 20, fill: \"species\"}))\n .plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"A(q7)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof q8 = Q({\n title: \"Question 8: Statistics\",\n questions: [`On top of the previous plot, overlay a mark denoting the median of the body weights.`],\n guides: [\n `Use the [Plot.**groupZ**](https://observablehq.com/@observablehq/plot-group) transform with a ‘median’ reducer on x.`,\n `[Plot.**tickX**](https://observablehq.com/@observablehq/plot-tick) can create a full-height tick at the computed value. Alternatively, try Plot.**dot**.`\n ],\n hints: [\n `Plot.plot({\n marks: [\n Plot.rectY(…),\n Plot.tickX(data, Plot.groupZ({x: \"median\"}, {x: \"body_mass\"}))\n ]\n})`\n ],\n solutions: [\n `Plot.plot({\n facet: {\n data,\n x: \"sex\",\n y: \"species\",\n marginRight: 80\n },\n marks: [\n Plot.frame(),\n Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"body_mass\", thresholds: 20, fill: \"species\"})),\n Plot.tickX(data, Plot.groupZ({x: \"median\"}, {\n x: \"body_mass\",\n stroke: \"#333\",\n strokeWidth: 2\n }))\n ]\n})`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"Plot.plot({\n facet: {\n data,\n x: \"species\",\n y: \"sex\"\n },\n marks: [\n Plot.frame(),\n Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"body_mass\", fill: \"species\", thresholds: 30})),\n Plot.tickX(data, Plot.groupZ({x: \"median\"}, {x: \"body_mass\", stroke: \"black\"}))\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"A(q8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"function selectorMedian(I, V) {\n const median = d3.median(I, (i) => V[i]);\n const i = d3.least(I, (i) => Math.abs(V[i] - median));\n return [i];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"// type your code here\nPlot.plot({\n height: 100,\n marks: [\n Plot.dotX(data, Plot.dodgeY({filter: d => d.sex === \"FEMALE\", x: \"body_mass\"})),\n Plot.tickX(data, Plot.select({x: \"min\"}, ({filter: d => d.sex === \"MALE\", x: \"body_mass\", stroke: \"red\"}))),\n Plot.tickX(data, Plot.select({x: selectorMedian}, {filter: d => d.sex === \"FEMALE\", x: \"body_mass\", stroke: \"green\"}))\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"A(q9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`---\n

Congratulations! You’ve made it! Now for the last item, please ask your own question to the data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"// type your question here\nPlot.plot({\n marks: [Plot.rectY({data,\n Plot.binX({y:\"count\"}, {x:\"species\"})})]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"md`*Don’t hesitate to share your notebook, and feel free to comment on the original notebook so we can make this tutorial better for the next person. Thank you!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"md`*Thanks to everyone who tried our first draft and sent suggestions, in particular: [John](/@john-guerra), [Maya](/@mayagans), [Claudio](/@esperanc), [Fabian](/@mootari).*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"md`\n

\n \nIf you enjoyed this, try out our other [Exploration Tutorials!](https://observablehq.com/collection/@observablehq/plot-explorations)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`\n\n

\n\n---------\n\n# Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"md`If you'd like to see all of the hints and solutions expanded as a sort of “answer sheet”, click this checkbox:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"viewof showAll = Inputs.toggle({label: html`Show all`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1354,"value":"md`\nThis notebook is part of the [Plot Explorations](https://observablehq.com/collection/@observablehq/plot-explorations) collection. The code below is used to generate the interactive questions:\n\n\nUsage:\n~~~js\nimport {Q, A, styles} from \"@observablehq/plot-exploration-penguins\";\n\n// separate Q & A\nviewof q = Q(question); // shows the question\nA(q); // shows the answer\nstyles;\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function answer({\n title,\n questions = [],\n guides = [],\n hints = [],\n solutions = [],\n open = !!showAll\n}) {\n\n const div = d3.create(\"div\").classed(\"answer\", true);\n\n if (title) {\n div.append(\"hr\");\n div.append(\"h2\").html(title);\n }\n\n div.call(renderGroup, questions, \"question\", true, d => md`${d}`);\n // div.call(renderGroup, guides, \"guide\", open, d => md`${d}`);\n div.call(renderGuide, guides, \"guide\", open, d => md`${d}`);\n div.call(renderGroup, hints, \"hint\", open, d => code(d, \"hint\"));\n div.call(renderGroup, solutions, \"solution\", open, d => code(d, \"solution\", renderSnippet));\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"function Q(q) {\n return Object.assign(answer({\n ...q,\n guides: null,\n hints: null,\n solutions: null\n }), {value: q})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"function A(q) {\n return answer({\n ...q,\n title: null,\n questions: null\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"function renderGroup(div, group, type, open, render) {\n if (group?.length) {\n const details = div.append(type===\"question\" ? \"div\" : \"details\");\n if (open) details.attr(\"open\", \"open\")\n if (type !== \"question\") details.append(\"summary\").append(\"strong\").text(`${type}${group.length > 1 ? \"s\" : \"\"}`);\n details.append(\"ul\").selectAll().data(group).join(\"li\").append(render);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"function renderGuide(div, group, type, open, render) {\n if (group?.length) {\n const details = div.append(\"div\");\n if (open) details.attr(\"open\", \"open\")\n // details.append(\"span\").append(\"strong\").text(`${type}${group.length > 1 ? \"s\" : \"\"}`);\n details.append(\"ul\").selectAll().data(group).join(\"li\").append(render);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"function renderSnippet(str) {\n try {\n const func = new Function(\"data\", \"Plot\", \"d3\", \"width\", `return ${str}`)\n return func(data, Plot, d3, width);\n }\n catch(e) {}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"function code(code, type, visual) {\n return html`\n
${Copier(\"Copy\", {value: code})}
\n${code}\n${visual ? visual(code) : \"\"}`;\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"function rows(code) {\n const lines = code.trim().split(\"\\n\").length;\n return Math.max(Math.min(lines, 15), 2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"styles = html`