31: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 })`] })32: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(), ] })`] })33:T411,viewof q8 = Q({ title: "Question 8: Statistics", questions: [`On top of the previous plot, overlay a mark denoting the median of the body weights.`], guides: [ `Use the [Plot.**groupZ**](https://observablehq.com/@observablehq/plot-group) transform with a ‘median’ reducer on x.`, `[Plot.**tickX**](https://observablehq.com/@observablehq/plot-tick) can create a full-height tick at the computed value. Alternatively, try Plot.**dot**.` ], hints: [ `Plot.plot({ marks: [ Plot.rectY(…), Plot.tickX(data, Plot.groupZ({x: "median"}, {x: "body_mass", z: d => \`\${d.sex}-\`\d.species}\`})) ] })` ], solutions: [ `Plot.plot({ facet: { data, x: "sex", y: "species", marginRight: 80 }, marks: [ Plot.frame(), Plot.rectY(data, Plot.binX({y: "count"}, {x: "body_mass", thresholds: 20, fill: "species"})), Plot.tickX(data, Plot.groupZ({x: "median"}, { x: "body_mass", z: d => d.sex + d.species, stroke: "#333", strokeWidth: 2 })) ] })`] })34: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" }) ] })`] })35:[{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1621354905938.318,"size":13490},{"id":"3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","href":"https://static.observableusercontent.com/files/3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","name":"penguins.png","type":"image/png","lastModified":1621354905938.318,"size":358223},{"id":"9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","href":"https://static.observableusercontent.com/files/9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","name":"weather.png","type":"image/png","lastModified":1621354905938.318,"size":666971}] 2f:{"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"},{"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"},{"id":2,"value":"md`Good day! Here is a fine dataset of [penguins](https://allisonhorst.github.io/palmerpenguins/):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = FileAttachment(\"palmer-penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":16,"value":"import {Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"Table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":21,"value":"md`## Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"Plot // Plot is available in Observable by default","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":1271,"value":"// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, {x: \"body_mass\", fill: \"black\", fillOpacity: 0.2}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1270,"value":"A(q0)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":205,"value":"// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, {x: \"bill_length\", y: \"bill_depth\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1268,"value":"A(q1)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":300,"value":"// type your code here\nPlot.dot(data, {x: \"bill_length\", y: \"bill_depth\", fill: \"species\"}).plot()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1266,"value":"A(q2)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":324,"value":"// type your code here\nPlot.dot(data,\n {x: \"flipper_length\", y:\"body_mass\", fill:\"species\"}\n).plot({\n marginLeft:100,\n facet:{\n data,\n x: \"sex\",\n y: \"island\"\n },\n // grid:true\n marks: [\n Plot.frame(),\n ]\n}\n)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1264,"value":"A(q3)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":361,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"A(q4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1260,"value":"A(q5)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":437,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1258,"value":"A(q6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1256,"value":"A(q7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"A(q8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1251,"value":"A(q9)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":641,"value":"// type your question here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":406,"value":"md`\n\n

\n\n---------\n\n# Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":713,"value":"viewof showAll = Toggle({label: html`Show all`})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":210,"value":"styles = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1384,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"import {html} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1208,"value":"import {Copier} from \"@mbostock/pbcopy\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"import {Toggle, Button} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}