2b:null 2c:["$","title",null,{"children":"230128_SSEN/Plot Exploration: Penguins | Ssen Kim | Observable"}] 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:T4cc,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?`], questions: [`체질량은 성별과 종에 따라 어떻게 다릅니 까? 각 성별 조합에 대한 체질량 분포가 비슷합니까?`], 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:T674,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" }) ] })`] })34:[{"id":"3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","href":"https://static.observableusercontent.com/files/3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","name":"penguins.png","type":"image/png","lastModified":1674833436907.716,"size":358223},{"id":"78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","href":"https://static.observableusercontent.com/files/78466fd621db89a8708d6af36834c45c977f3f95c44f91a380bf7c985f03db2d03849aef300f8caa2bce9605f5229fe9813ed4f168c75f9b0abb4e960400faf0","name":"palmer-penguins.csv","type":"text/csv","lastModified":1674833436907.716,"size":13490},{"id":"9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","href":"https://static.observableusercontent.com/files/9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","name":"weather.png","type":"image/png","lastModified":1674833436907.716,"size":666971},{"id":"5577c51eb32fb77c34bc7211f2d77bf4be832acfc0ec55172b40aa81f7d634b78a86029cfc9090d2cc9cc05837e147f2b9b460048ec615b189db1a07d1dbb7b7","href":"https://static.observableusercontent.com/files/5577c51eb32fb77c34bc7211f2d77bf4be832acfc0ec55172b40aa81f7d634b78a86029cfc9090d2cc9cc05837e147f2b9b460048ec615b189db1a07d1dbb7b7","name":"image.png","type":"image/png","lastModified":1674835221657.548,"size":98954},{"id":"5577c51eb32fb77c34bc7211f2d77bf4be832acfc0ec55172b40aa81f7d634b78a86029cfc9090d2cc9cc05837e147f2b9b460048ec615b189db1a07d1dbb7b7","href":"https://static.observableusercontent.com/files/5577c51eb32fb77c34bc7211f2d77bf4be832acfc0ec55172b40aa81f7d634b78a86029cfc9090d2cc9cc05837e147f2b9b460048ec615b189db1a07d1dbb7b7","name":"image@1.png","type":"image/png","lastModified":1674835362891.893,"size":98954},{"id":"5577c51eb32fb77c34bc7211f2d77bf4be832acfc0ec55172b40aa81f7d634b78a86029cfc9090d2cc9cc05837e147f2b9b460048ec615b189db1a07d1dbb7b7","href":"https://static.observableusercontent.com/files/5577c51eb32fb77c34bc7211f2d77bf4be832acfc0ec55172b40aa81f7d634b78a86029cfc9090d2cc9cc05837e147f2b9b460048ec615b189db1a07d1dbb7b7","name":"image@2.png","type":"image/png","lastModified":1674835368612.932,"size":98954}] 2f:{"id":"d2f4b9b75e87defe","slug":null,"title":"230128_SSEN/Plot Exploration: Penguins","thumbnail":"12113786b51ce4e119edccef0fc91a7dd4b370dc6ff821ae9efe2a170c3b64d1","access_level":"public","create_time":"$D2023-01-27T15:30:36.907Z","update_time":"$D2023-03-03T04:00:46.316Z","view_time":null,"first_public_time":"$D2023-01-27T15:30:36.907Z","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":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024"},"version":1993,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null}],"members":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"230128_SSEN/Plot Exploration: Penguins","cells":[{"id":0,"value":"md`# 230128_SSEN/Plot Exploration: Penguins\n\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","output":"$undefined","database":"$undefined"},{"id":1527,"value":"image1 = FileAttachment(\"image@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = FileAttachment(\"palmer-penguins.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":18,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"Inputs.table(data) ${textcolor('Inputs', d3.schemeTableau10[1])} 집어넣기.${textcolor('table', d3.schemeTableau10[2])}표 형식(${textcolor('data', d3.schemeTableau10[3])}미리 지정했던 데이터)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1717,"value":"[⬆️텍스트 배경에 박스 넣기](https://observablehq.com/@observablehq/text-color-annotations-in-markdown)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1719,"value":"color = \"#76B7B2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"fav = html`

텍스트에 ${color}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"function textcolor(content, style = {}) {\n function yiq(color) {\n const {r, g, b} = d3.rgb(color);\n return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1\n }\n const {\n background,\n color = yiq(background) >= 0.6 ? \"#111\" : \"white\", \n padding = \"0 5px\",\n borderRadius = \"4px\",\n fontWeight = 800,\n ...rest\n } = typeof style === \"string\" ? {background: style} : style;\n return htl.html`${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"Plot // 플롯은 기본적으로 Observable에서 사용할 수 있습니다.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":1484,"value":"viewof x = Inputs.select(data.columns)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"// change the code to replace … by the field’s name, e.g. body_mass\n// fill에는 컬러가 들어감. 컬러 코드나 이름 정도.\nPlot.dot(//what visual encoding (mark) do we want -- a dot!(어떤 형식으로 표시하길 원하는가--여기서는 점!)\n data,//what data we're plotting(어떤 데이터를 점으로 만들것인가?)\n {x: x, fill: \"#00DBff\", fillOpacity: 0.2}).plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"A(q0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"Plot.dot(data,{x:\"bill_length\", fill:\"green\", fillOpacity: 0.2}).plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"[youtube Link_9:44](https://www.youtube.com/watch?v=SnLBbbQzK1E&t=42s)\n
230128 여기까지.(다음줄엔 어떻게 쓰지?하다가 얼떨결에 썼는데 맞았어!!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","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: \"flipper_length\", y: \"body_mass\", //what do we call these? `x ` and `y` are data driven \"channels\"\n fill:\"blue\", fillOpacity: 0.2}).plot() //꼭 이런건 색을 바꿔봐야 한 느낌이 든단 말이지.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"$${textcolor('flipper_length', d3.schemeTableau10[1])}와${textcolor('body_mass', d3.schemeTableau10[2])}는 양의 상관관계가 있는 것으로 보인다.\n전체적으로 오른쪽 위로 올라가는 경향이 보임. 중간에 한줄로 나열되는 것들은 같은 ${textcolor('flipper_length', d3.schemeTableau10[1])}에 ${textcolor('body_mass', d3.schemeTableau10[2])}가 증가하거나 감소하는 것으로 보임. 그러므로 무조건 몸의 크기가 크면 지느러미 길이도 길다고 말할 수는 없다.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1268,"value":"A(q1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"Plot.dot(data, {x: \"body_mass\", y: \"flipper_length\", fill: \"red\", fillOpacity:0.2}).plot({width:width}) // replace … by the field names.\n//plot()는 놓인 상태나 부가적인 기능 느낌인데.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 ],\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","output":"$undefined","database":"$undefined"},{"id":300,"value":"// type your code here\n// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, \n {x: \"flipper_length\", y: \"body_mass\", fill:\"species\", fillOpacity: 0.8}).plot() //\"fill\"은 컬러 적용, 그리고 항목별 구분도 \n//어떤 컬러가 어떤 항목인지는 알려줘야지?!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"// type your code here\n// change the code to replace … by the field’s name, e.g. body_mass\nPlot.dot(data, {x: \"flipper_length\", y: \"body_mass\", fill:\"species\", fillOpacity: 0.8,},)\n .plot({\n grid: true,\n color: {legend: true} \n })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"[범례문제는 여기서 해결](https://observablehq.com/@observablehq/plot-legends)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1742,"value":"$${textcolor('Adelie', {background: '#4E79A7', color: 'white'})}와 ${textcolor('Chinstrap', {background: '#F28E2C', color: 'black'})} 종은 지느러미 길이와 몸무게 모두 작은 축에 속함. , 그 중 ${textcolor('Adelie', {background: '#4E79A7', color: 'white'})} 종에서 가장 짧은 지느러미 길이와 작은 체중에 속하는 개체가 있음. 체중과 지느러미 길이 모두 큰 종은 ${textcolor('Gentoo', {background: '#E15759', color: 'white'})}로 전반적으로 그래프 우측 상단에 위치","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1266,"value":"A(q2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"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:data,\n x:\"sex\",\n y:\"island\"\n },\n marks:[\n Plot.frame()\n ]\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"A(q3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"Plot.dot(data.filter(d=>d.sex !==\"NA\"),\n {x:\"flipper_length\", y:\"body_mass\", fill:\"species\"}\n).plot({\n marginLeft:100,\n facet:{\n data:data,\n x:\"sex\",\n y:\"island\",\n },\n marks:[\n Plot.frame()\n ],\n width: 1500,\n height:1000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"[youtube Link_24:11](https://youtu.be/SnLBbbQzK1E?t=1451)\n
230131 여기까지.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1597,"value":"char_data=data.filter(d=>d.sex !==\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"char_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":361,"value":"// type your code here\nPlot.barX(data,\n //Transform the options \n Plot.groupY(//group the data\n {x:\"count\"}, //calculation \n {y:\"species\"} //what I'm picking from the data\n )\n).plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1615,"value":"// type your code here\nPlot.barX(data,\n //Transform the options \n Plot.groupY(//group the data\n {x:\"mean\"}, //calculation: what is the output --the mean\n {y:\"species\", x:\"flipper_length\"} //what I'm picking from the data\n )\n).plot({marginLeft:100, y:{label:\"\"}})//y:label:\"\"은 y축에 있던 species를 없애라는 명령","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"// type your code here\nPlot.barX(data,\n //Transform the options \n Plot.groupY(//group the data\n {x:\"mean\"}, //calculation: what is the output --the mean\n {y:\"species\", x:\"flipper_length\"} //what I'm picking from the data\n )\n).plot({marginLeft:100, \n y:{\n label:\"\",\n domain:species_order}}) //내림차순으로 지정하는 방법-함수모음 아래의 정렬 species_order 지정되어 있음","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"[youtube Link_46:39](https://youtu.be/SnLBbbQzK1E?t=2799)\n
230201 여기까지.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1643,"value":"import {tidy, mean, arrange, desc, groupBy, summarize} from \"@pbeshai/tidyjs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"↑함수모음!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1649,"value":"species_order=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","output":"$undefined","database":"$undefined"},{"id":1262,"value":"A(q4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":" Plot.barY(data, \n Plot.groupX({\n y: \"count\"}, {\n x: \"species\", fill: \"species\"\n }))\n .plot() ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"// type your code here\nPlot.barY(data, Plot.groupX({y: \"count\"}, {x: \"species\", fill:\"species\"}, )).plot({\n facet: {\n data,\n x: \"island\"\n },\n marks: [\n Plot.frame(),\n ]\n})\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"Plot.dot(data, Plot.group({r: \"count\"}, {x: \"island\", y: \"species\", fill: \"species\",fillOpacity:0.8})).plot({\n r: {\n range: [0, 100] // adjusts the radius scale to make the marks more visible\n },\n marginLeft: 100,\n height: 580,\n marginBottom: 100, //marginBottom은 island(x축 제목)와 그래프 사이의 거리\n width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"function gentoobox(content, style ={}){\nreturn {background: '#E15759', color: 'white'};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"$${textcolor('island(지역)', {background: '#4F5B66', color: '#EBEFF2'})}별 살고 있는 ${textcolor('species(종)', {background: '#4F5B66', \ncolor: '#EBEFF2'})} 의 정도를 알 수 있는 그래프. 개별 점의 수가 아니라 그룹을 지은 거라서 단순하고 간결하다.\n

${textcolor('Gentoo', {background: '#E15759', color: 'white'})}는 Biscoe 지역 ${textcolor('Chinstrap', {background: '#F28E2C', color: 'black'})} 은 Dream 지역에 거주하고 있다. Adelie종은 세 지역에 골고루 분포한다. \n\n${textcolor('Adelie', {background: '#4E79A7', color: 'white'})}와 ${textcolor('Chinstrap', {background: '#F28E2C', color: 'black'})} 종은 지느러미 길이와 몸무게 모두 작은 축에 속함. , 그 중 ${textcolor('Adelie', {background: '#4E79A7', color: 'white'})} 종에서 가장 짧은 지느러미 길이와 작은 체중에 속하는 개체가 있음. 체중과 지느러미 길이 모두 큰 종은 로 전반적으로 그래프 우측 상단에 위치","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1260,"value":"A(q5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":437,"value":"// type your code here\nPlot.rectY(data, \n Plot.binX({\n y: \"count\"}, \n {x: \"body_mass\", fill: \"lightgrey\"\n })).plot() //나누는게 좀 어색한데","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"A(q6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"flipper_length\"})).plot() //flipper_length를 그룹별로 나눌 수는 없나?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1847,"value":"비교는 이렇게!! ⬇️⬇️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1828,"value":"Plot.rectY(\n data, Plot.binX({\n y: \"count\"\n }, {\n x: \"flipper_length\", fill:\"species\",thresholds: 40\n }))\n .plot(\n {\n color: {legend: true},\n width:width,\n height:150\n }\n ) //지느러미 길이는 Gentoo가 확실히 길구나.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"Plot.rectY(\n data, Plot.binX({\n y: \"count\"\n }, {\n x: \"body_mass\", fill:\"species\",thresholds: 40\n }))\n .plot(\n {\n //color: {legend: true} \n width:width,\n height:150\n \n }\n ) //지느러미 길이는 Gentoo가 확실히 길구나.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"// type your code here\nPlot.rectY(data, \n Plot.binX({y: \"count\"}, \n {x: \"body_mass\", fill: \"species\", thresholds: 20}))\n .plot({\n facet:{\n data,\n x: \"sex\",\n y: \"species\",\n marginRight: 80\n },\n marks: [\n Plot.frame(),\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"A(q7)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"body_mass\",fill:\"species\",thresholds: 20\n }))\n .plot({\n facet:{\n data,\n x:\"sex\",\n y:\"species\",\n marginRight:80\n },\n marks:[\n Plot.frame()\n ] \n \n }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":460,"value":"// type your code here\nPlot.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\",fill:\"species\",thresholds: 20})),\n Plot.tickX(data, Plot.groupZ({x: \"median\"}, {x: \"body_mass\"}))\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"A(q8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"md`# 230207_여기까지`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"// type your code here\n//수컷 중 가장 가벼운(body_mass가 가장 낮은)개체를 그림(점?막대?) - 다른 색으로 지정- 여기서는 선으로 지정\n//암컷 무게(body_mass)를 점으로 나열 비교하기\nPlot.plot({\n facet: {\n data,\n y: \"species\",\n marginLeft:80,\n },\n \n marks: [\n Plot.frame(),\n Plot.tickX(data, \n Plot.groupZ({\n x: \"median\"},\n {x:\"body_mass\",\n filter: d=>d.sex===\"FEMALE\",\n stroke:\"species\",\n strokeWidth:3\n })),\n Plot.tickX(data,Plot.selectMinX({\n x:\"body_mass\",\n filter:d=>d.sex===\"MALE\",\n fill: \"grey\",\n strokeWidth:3\n })),\n Plot.dot(data, {\n x: \"body_mass\",\n filter:d=>d.sex===\"FEMALE\",\n fill:\"species\",\n fillOpacity:0.5\n // …\n \n })\n ]\n \n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1971,"value":"# 230208. 내일은 여기 편집부터\n${textcolor('종(species)', {background: '#4F5B66',color: '#EBEFF2'})}별로 색이 다른 선은 암컷 펭귄 ${textcolor('무게(body_mass)', {background: '#4F5B66', color: '#EBEFF2'})}의 중앙값,검은색(grey로 잡았지만 실제로는 검정에 가까움)의 선은 수컷 펭귄 무게의 최소값. \n점도표는 수컷 펭귄 무게를 점으로 나열한 것. 암컷 펭귄의 무게의 중앙값이 수컷 펭귄의 무게 최소값과 가까운 순은 ${textcolor('Gentoo', {background: '#E15759', color: 'white'})}-${textcolor('Adelie', {background: '#4E79A7', color: 'white'})}-${textcolor('Chinstrap', {background: '#F28E2C', color: 'black'})} 순,${textcolor('Adelie', {background: '#4E79A7', color: 'white'})}와 ${textcolor('Chinstrap', {background: '#F28E2C', color: 'black'})}은 암컷 펭귄 무게의 중앙값이 수컷 펭귄의 무게 최소값보다 큼. \n\n근데 왜 이게 Reduction(감소)에 있지?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1952,"value":"\n# 1.그래프 기본 배경 그리기⬆️⬆️\n
facet:{\n
data에서 가져오기,\n
y축은 \"species\"기준으로 구분,\n
marginLeft는 80으로 [species]라는축제목과 거리두기}\n\n# 2.marks만들기\n__Plot.frame__으로 여러개 그래프 주위에 선 그려서 구분\n
__Plot.tickX__로 가로축 일정한 지점에 선 그리기\n
(data이용 ,\n
__Plot.groupZ__에서\n
{가로축 지점은\"중앙값\"으로},\n
{x축은 \"body_mass\"기준,\n
필터는 성별 중 \"FEMALE\"로,\n
stroke는 \"species\"별로 색 나누기\n
선 두께는 3으로}\n
__Plot.tickX__로 가로축 최소 지점에 선 그리기\n
{x축 기준은 \"body_mass\",\n
필터는 성별 중 \"MALE\"로,\n
채우기는 \"Grey\",\n
두께는 3}\n\n
__Plot.dot__으로 점도표 추가{\n
data에서 가져오기{\n
x축은 \"body_mass\"기준,\n
필터는 성별 중 \"FEMALE\"로\n
채우기는 \"species\"별로 색 나누기\n
채우기 투명도는 0.5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1251,"value":"A(q9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":641,"value":"// type your question here\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","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","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","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","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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":210,"value":"styles = html`