25:["$","title",null,{"children":"Plot Exploration: Penguins | Yuichi Yazaki | 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":1722659124652.625,"size":358223},{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1722659124652.625,"size":13490},{"id":"9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","href":"https://static.observableusercontent.com/files/9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","name":"weather.png","type":"image/png","lastModified":1722659124652.625,"size":666971}] 29:{"id":"6a1f7d72a96502b5","slug":null,"title":"Plot Exploration: Penguins","thumbnail":"861f17189b5ebea7fb38ce894a6710686d6a21ca596500426b1657ba5d7ea386","access_level":"public","create_time":"$D2024-08-03T04:25:24.652Z","update_time":"$D2024-08-03T04:45:47.950Z","view_time":null,"first_public_time":"$D2024-08-03T04:25:24.652Z","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":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":1491,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"},{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","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\n[Observable Plot](/@observablehq/plot) を学習するためのセミ・ガイド付きチュートリアルへようこそ。整頓されたデータセットと、独自のデータ視覚化をコーディングするための一連の演習を用意しました。\n\nデータセットの簡単な説明の後、チャートで回答できる一連の質問があります。すべての質問はオープンです。自由に独自のアプローチを試したり、各質問の最後に示されている実用的な例を覗いてみてください。\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`*探索を開始するには、このノートブックをフォークしてください。こうすることで作業が保存されます。*\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`こんにちは！こちらは[ペンギン](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`データは、[Dr. Kristen Gorman](https://www.uaf.edu/cfos/people/faculty/detail/kristen-gorman.php) と Long Term Ecological Research Network のメンバーである [Palmer Station, Antarctica LTER](https://pal.lternet.edu/) によって収集され、公開されました。データは、[Palmer Station LTER データポリシー](http://pal.lternet.edu/data/policies) および [LTER データアクセスポリシー (タイプ I データ)](https://lternet.edu/data-access-policy/) に従って CC-0 ライセンスで公開されています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`*ここで取り上げている実際のペンギンについてもっと知りたい場合は、[Allison Horst のリポジトリ](https://allisonhorst.github.io/palmerpenguins/) の説明を美しいイラスト付きで忘れずにチェックしてください:*\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\nObservable の [Table](/@observablehq/input-table) コンポーネントを使用すると、このデータセットの内容、構造、ディメンションを確認できます。`","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`ご覧のとおり、データは表形式で、1 行が 1 つの観測値に対応しています。つまり、データは整然としています ([*整然としたデータの詳細については、こちらをご覧ください*](https://observablehq.com/@observablehq/plot-and-tidy-data))。\n\n各ペンギン (またはデータポイント) について、*${data.columns.join(\", \")}.* でアクセスできます。\n\n数値はミリメートル（くちばしとひれの長さ）とグラム（体重）で与えられます。\n[FileAttachment](#data) セルの {typed: true} オプションのおかげでわかりますが、これらは JavaScript 数値です。カテゴリ（*種、島*、*性別*）は文字列として表されます。\n\nこれでプロットを使用する準備ができました 🚀`","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`*参考までに、Plot [ドキュメントコレクション](/collection/@observablehq/plot)と[GitHub リポジトリ](https://github.com/observablehq/plot)へのリンクを示します。*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"md`さて、このデータセットについて、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":1271,"value":"// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, {x: \"...\", fill: \"black\", fillOpacity: 0.2}).plot()","pinned":false,"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, {x: \"…\", y: \"…\"}).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\n\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":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\n\n","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\n\n","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\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":437,"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":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\n\n","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":"// 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":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":1252,"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":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\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`*ノートブックをぜひ共有してください。また、元のノートブックにコメントを自由に残してください。次の人のためにこのチュートリアルをより良いものにすることができます。ありがとうございます!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"md`*最初のドラフトを試して提案を送ってくれた皆さん、特に [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`