2d:null 2e:["$","title",null,{"children":"Data Capture and Interactivity Exercise! | Jasmine | Observable"}] 33:T7de,{const margin = 40; const size = 75 + margin * 2; const svg = d3.create("svg").attr("width", size).attr("height", size); svg .append("line") .attr("x1", margin) .attr("y1", size - margin) .attr("x2", rectangleWidth + margin) .attr("y2", size - margin) .attr("stroke", "red"); svg .append("text") .text("width = " + rectangleWidth) .attr("x", rectangleWidth / 2 + margin) .attr("y", size - margin + 10) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 12); svg .append("line") .attr("x1", margin) .attr("y1", size-rectangleHeight- margin) .attr("x2", rectangleWidth + margin) .attr("y2", size-rectangleHeight - margin) .attr("stroke", "red"); svg .append("line") .attr("x1", rectangleWidth + margin) .attr("y1", size - margin) .attr("x2", rectangleWidth + margin) .attr("y2", size - margin - rectangleHeight) .attr("stroke", "blue"); svg .append("text") .text("height = " + rectangleHeight) .attr("dominant-baseline", "middle") .attr("x", rectangleWidth*1 + margin + 10) .attr("y", size - margin - rectangleHeight / 2) .attr("font-style", "italic") .attr("font-size", 12); svg .append("line") .attr("x1", margin) .attr("y1", size - margin) .attr("x2", rectangleWidth + margin) .attr("y2", size - margin - rectangleHeight) .attr("stroke", "green"); svg .append("text") .text("diagonal = " + Math.sqrt(rectangleWidth ** 2 + rectangleHeight ** 2).toFixed(2)) .attr("text-anchor", "end") .attr("x", rectangleWidth + 100 ) .attr("y", size - margin - rectangleHeight / 2 - 20) .attr("font-style", "italic") .attr("font-size", 12); svg .append("line") .attr("x1", margin) .attr("y1", size - margin) .attr("x2", margin) .attr("y2", size - margin - rectangleHeight) .attr("stroke", "blue"); return svg.node(); }34:T41b,{ const height = width; const svg = d3.create("svg").attr("width", width).attr("height", height/1.5); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#FFFFFF"); for (let i = 0; i < BuntingSlider; i++) { //this looks complicated, but it's just dividing the width of the SVG into evenly spaced parts let spacing = (width / (BuntingSlider - 1)) * i; let yPos = Math.sin(Math.PI * (i / (BuntingSlider - 1))) * (width / 2) let xPos = Math.cos(Math.PI * (i / (BuntingSlider - 1))) * (width / 2) + width/2.1 let theta = (i / (BuntingSlider -1 )) svg .append('image') .attr('xlink:href', 'https://static.vecteezy.com/system/resources/previews/001/895/835/original/cartoon-little-baby-girl-and-boy-free-vector.jpg') .attr("x", xPos) .attr("y", yPos) .attr("height", 50) .attr('transform',`rotate(${theta} ${xPos} ${yPos})`) .attr("fill", "hsl(" + (360 / BuntingSlider) * i + ",100%,50%)"); } return svg.node(); }35:T1348,{ const height = width; const margin = 50; const svg = d3.create("svg").attr("width", width).attr("height", height).attr("fill","#FFFFFF"); svg .append("rect") .attr("width", width) .attr("height", height); for (let i = 0, j=0, h = 0, k=0, g=0,l=0; i < markerY1; j < markerX1, i++, j++, h< markerY3,k< markerY3, h++, k++, g< markerY4, k< markerX4, g++, k++) { let yPos1 = markerY1; let xPos1 = markerX1; let Pin2Position = (xPos1, yPos1); let yPos2 = markerY2; let xPos2 = markerX2; let Pin3Position = (xPos2, yPos2); let yPos3 = markerY3; let xPos3 = markerX3; let Pin4Position = (xPos3, yPos3); let yPos4 = markerY4; let xPos4 = markerX4; let Pin5Position = (xPos4, yPos4); svg .append("rect") .attr("x", 100) .attr("y",100) .attr("width", width/2-100) .attr("height", height/2-100) .attr("fill", Color1) .attr("stroke-width", Stroke) .attr("stroke", "white"); svg .append("rect") .attr("x", (width/2)) .attr("y",100) .attr("width", (width/2)-100) .attr("height", (height/2)-100) .attr("fill", Color2) .attr("stroke-width", Stroke) .attr("stroke", "white"); svg .append("rect") .attr("x", 100) .attr("y",(height/2)) .attr("width", (width/2)-100) .attr("height", (height/2)-100) .attr("fill", Color3) .attr("stroke-width", Stroke) .attr("stroke", "white"); svg .append("rect") .attr("x", width/2) .attr("y",height/2) .attr("width", (width/2)-100) .attr("height", (height/2)-100) .attr("fill", Color4) .attr("stroke-width", Stroke) .attr("stroke", "white"); svg .append('circle') .attr("r", 25) .attr("cx", xPos1) .attr("cy", yPos1) .attr("fill", '#000000'); svg .append("text") .text("Aunty A") .attr("x", xPos1 ) .attr("y", yPos1) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 12); svg .append('circle') .attr("r", 25) .attr("cx", xPos2) .attr("cy", yPos2) .attr("fill", '#000000'); svg .append("text") .text("Aunty B") .attr("x", xPos2 ) .attr("y", yPos2) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 12); svg .append('circle') .attr("r", 25) .attr("cx", xPos3) .attr("cy", yPos3) .attr("fill", '#000000'); svg .append("text") .text("Uncle C") .attr("x", xPos3 ) .attr("y", yPos3) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 12); svg .append('circle') .attr("r", 25) .attr("cx", xPos4) .attr("cy", yPos4) .attr("fill", '#000000'); svg .append("text") .text("Uncle D") .attr("x", xPos4 ) .attr("y", yPos4) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 12); svg .append("text") .text("Baby1 Comfortable") .attr("x", width/2 ) .attr("y", 85) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 16) .attr("fill", "black"); svg .append("text") .text("Baby1 Uncomfortable") .attr("x", width/2 ) .attr("y", height-100) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 16) .attr("fill", "black"); svg .append("text") .text("Baby2") .attr("x", 75 ) .attr("y", height/2) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 16) .attr("fill", "black"); svg .append("text") .text("Uncomfortable") .attr("x", 50 ) .attr("y", height/2+25) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 16) .attr("fill", "black"); svg .append("text") .text("Baby2") .attr("x", width-75 ) .attr("y", height/2) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 16) .attr("fill", "black"); svg .append("text") .text("Comfortable") .attr("x", width-60 ) .attr("y", height/2 +25) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("font-style", "italic") .attr("font-size", 16) .attr("fill", "black"); } return svg.node(); }36:[] 31:{"id":"40019fa5e80d0318","slug":"data-capture-and-interactivity-exercise","title":"Data Capture and Interactivity Exercise!","thumbnail":"4837b412c28e9b5ea14eee288b6900553efca659a700a038676c5599fbbf0181","access_level":"public","create_time":"$D2024-09-16T10:02:06.169Z","update_time":"$D2024-09-18T09:45:40.975Z","view_time":null,"first_public_time":"$D2024-09-18T09:47:31.641Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"af40defff2230c39","login":"jasmm","name":"Jasmine","avatar_url":"https://avatars-next.observableusercontent.com/27258d7a85c2cc999473a194d19387153906382368d222e6f984c7481f25171a","tier":"starter_2024","bio":""},"version":810,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a02613fa888dcc55","login":"jasmine-sarin","name":"Jasmine Sarin","avatar_url":"https://avatars-next.observableusercontent.com/9c9df98ad0ba844ee49a9a4487eb88ee78982ae87cd151359cd5cc3ea2b81336","tier":null,"bio":""}],"members":[{"type":"individual","id":"a02613fa888dcc55","login":"jasmine-sarin","name":"Jasmine Sarin","avatar_url":"https://avatars-next.observableusercontent.com/9c9df98ad0ba844ee49a9a4487eb88ee78982ae87cd151359cd5cc3ea2b81336","tier":null,"role":"editor"},{"type":"team","id":"af40defff2230c39","login":"jasmm","name":"Jasmine","avatar_url":"https://avatars-next.observableusercontent.com/27258d7a85c2cc999473a194d19387153906382368d222e6f984c7481f25171a","tier":"starter_2024","role":"editor"}],"comments":[{"id":"8b09cf7e885261b4","reply_to_id":null,"content":"Why doesn't it show my assigned value here?","create_time":"$D2024-09-18T05:45:24.299Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a02613fa888dcc55","login":"jasmine-sarin","name":"Jasmine Sarin","avatar_url":"https://avatars-next.observableusercontent.com/9c9df98ad0ba844ee49a9a4487eb88ee78982ae87cd151359cd5cc3ea2b81336","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Capture and Interactivity Exercise!","cells":[{"id":0,"value":"# Data Capture and Interactivity Exercise!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"I'm going to use this space to explore temporary data capture with Observable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## Part 1: First Birthday Party Planning!!!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"viewof dateValue = Inputs.date({\n label: \"It's Your First Birthday, Babies!\",\n\n value: new Date(11/1/1989)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### How Many Guests Do We Invite To Our Party?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"viewof MinSlider = Inputs.range([0,10],{\n label: \"Minimum Invitees\",\n step: \"1\",\n value:\"1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof MaxSlider= Inputs.range([0,500],{\n label:\"Maximum Invitees\",\n step:\"1\",\n value:\"50\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof TotalGuests= Inputs.range([MinSlider,MaxSlider], {\n label:\"Total Invited\",\n step:\"1\",\n value:\"75\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"*We planned to invite a minimum of **${MinSlider}** guests and a maximum of **${MaxSlider}** guests. We landed on **${TotalGuests}**. Our total cost of the party turned out to be $ (**${TotalGuests*200}**)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"{const Sentence= \"We planned to invite a minimum of \" + MinSlider + \" guests and a maximum of \" + MaxSlider + \" guests. We landed on \" + TotalGuests + \". Our total cost of the party turned out to be $\" + 200*TotalGuests;\n\nreturn Sentence;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"### How Big Should Our Banner Be?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"viewof rectangleHeight= Inputs.range([0,25],{\n label:\"Height of the rectangle\", \n step:\"0.1\",\n value:\"10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof rectangleWidth= Inputs.range([0, 50],{\n label:\"Width of the rectangle\", \n step:\"0.1\",\n value:\"10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"*If the height of our rectangle is **${rectangleHeight}** inches and the width of our rectangle is **${width}** inches, then the diagonal of the banner is **${(rectangleWidth**2 + rectangleHeight**2)**0.5}** inches*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"Using Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"Comparisons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"## Welcome! Please Provide The Secret Key!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof InteractiveSlider= Inputs.range([0,75],{\n label:\"The Key to this Party is a Balloon, Pick a Balloon Color to Take!!\",\n step:\"0.1\",\n value:\"52.7\"\n})\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"InteractiveSlider","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"{\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n\n\n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"hsl(\" + (InteractiveSlider) + \",100%,50%)\");\nreturn svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":646,"value":"### How Many Happy People Showed Up?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"### Smiley Slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"viewof markdownSlider = Inputs.range([0, TotalGuests], {\n label: \"How Many Smiles Did We Notice At The Entry\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"The slider above reads **${markdownSlider}**. This value with zero decimal places, ${markdownSlider.toFixed(0)} is ${markdownSlider >= 18.5 ? \"**larger than or equal to**\" : \"**smaller than**\"} 25.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"markdownSlider > 25 ? \"🙂\" : \"😒\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"## Decorations!!!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"viewof BuntingSlider = Inputs.range([0, 28], {\n label: \"Baby Bunting Slider\",\n step: 1,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"## Activities!!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"Because What's A Party Without Cool Music Visualizations!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"viewof svgSlider = Inputs.range([0, 50], {\n label: \"SVG Slider\",\n step: 0.1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":" We Invited A Tarot Reader Too!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"{\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#E2F6FF\");\n\n for (let i = 0; i < jsSlider1; i++) {\n //this looks complicated, but it's just dividing the width of the SVG into evenly spaced parts\n let spacing = (width / (jsSlider1 - 1)) * i;\n\n let size = (50 / jsSlider1) * i;\n\n svg\n .append('image')\n .attr('xlink:href', 'https://i.redd.it/08x6zpkkbbk81.png')\n .attr(\"x\", spacing)\n .attr(\"y\", height / 2)\n .attr(\"height\", size + 1)\n .attr(\"width\", size + 1)\n .attr(\"fill\", \"hsl(\" + (360 / jsSlider1) * i + \",100%,50%)\");\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof jsSlider1 = Inputs.range([0, 100], {\n label: \"Slide To Shuffle\",\n step: 1,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"{\n const height = width;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#E2F6FF\");\n \n for (let i = 0; i < jsSlider; i++) {\n //this looks complicated, but it's just dividing the width of the SVG into evenly spaced parts\n let spacing = (width / (jsSlider - 1)) * i;\n\n let yPos = height - Math.sin(Math.PI * (i / (jsSlider - 1))) * (width / 2)\n\n let xPos = Math.cos(Math.PI * (i / (jsSlider - 1))) * (width / 2) + width/2\n\n let theta = -180 * (i / (jsSlider -1 )) + 90\n \n svg\n .append('image')\n .attr('xlink:href', 'https://i.redd.it/08x6zpkkbbk81.png')\n .attr(\"x\", xPos)\n .attr(\"y\", yPos)\n .attr(\"height\", 50)\n .attr('transform',`rotate(${theta} ${xPos} ${yPos})`)\n .attr(\"fill\", \"hsl(\" + (360 / jsSlider) * i + \",100%,50%)\");\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof jsSlider = Inputs.range([0, 100], {\n label: \"Slide To Shuffle Again\",\n step: 1,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"### Dubious Party Chit Chat And Gossips! Two Truths & A Lie!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"viewof toggleValue = Inputs.toggle({ label: \"Karen's Daughter Graduated This December\", value: true })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"toggleValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof toggleValue2 = Inputs.toggle({ label: \"I was invited to Ibiza for a vacation!\", value: false } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"toggleValue2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"viewof toggleValue3 = Inputs.toggle({ label: \"Ivan is dating Christina Now!\", value: true } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"toggleValue3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"## Games","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"### Pin The Bow On Hello Kitty!! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":599,"value":"Rules of the game: Close your eyes with mouse in your hands, The host will move your hands randomly around!, Then you have 30 seconds to slide the y slider to guess the height of the bow. Next, the host will help you select the x slider. You have 30 seconds to slide the slider to choose the x position of the bow. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"height=width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"\n\nviewof y = Inputs.range([1, width], {\n label: \"Pin Y as Pixels\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"viewof x = Inputs.range([1, width], {\n label: \"Pin X as Pixels\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"{\n const height = width;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height/1.5);\n\n\n svg\n .append(\"image\")\n .attr('xlink:href', 'https://i.etsystatic.com/14817276/r/il/901620/6193165058/il_1588xN.6193165058_drvh.jpg')\n .attr(\"width\", width)\n .attr(\"height\", height);\n \n for (let i = 0, j=0; i < y; j < x, i++, j++) {\n \n\n let yPos = y;\n\n let xPos = x;\n \n let PinPosition = (xPos, yPos);\n\n \n svg\n .append('image')\n .attr('xlink:href', 'https://www.pngall.com/wp-content/uploads/15/Hello-Kitty-Bow-PNG-Free-Image.png')\n .attr(\"x\", xPos)\n .attr(\"y\", yPos);\n }\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"### Vote To Dress The Babies!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"viewof colorValue = Inputs.color({ label: \"Favorite Color?\", value: \"#d0eea7\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"colorValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":616,"value":"## Baby Whisperers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"viewof Color1 = Inputs.color({\n label: \"Color1?\",\n value: \"#519D9E\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"viewof Color2 = Inputs.color({\n label: \"Color2?\",\n value: \"#bc37ce\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"viewof Color3 = Inputs.color({\n label: \"Color3?\",\n value: \"#f07525\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"viewof Color4 = Inputs.color({\n label: \"Color4?\",\n value: \"#2d3be7\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"viewof Stroke = Inputs.range([0, 20], {\n label: \"Stroke Width\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"viewof markerY1 = Inputs.range([125, height-125], {\n label: \"AuntyA Y\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"viewof markerX1 = Inputs.range([125, width-125], {\n label: \"AuntyA X\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":756,"value":"viewof markerY2 = Inputs.range([125, height-125], {\n label: \"AuntyB Y\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"viewof markerX2 = Inputs.range([125, height-125], {\n label: \"AuntyB X\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":767,"value":"viewof markerY3 = Inputs.range([125, height-125], {\n label: \"UncleC Y\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"viewof markerX3 = Inputs.range([125, height-125], {\n label: \"UncleC X\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"viewof markerY4 = Inputs.range([125, height-125], {\n label: \"UncleD Y\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"viewof markerX4 = Inputs.range([125, height-125], {\n label: \"UncleD X\",\n step: 0.01,\n value: Math.random() * 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":655,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"## Baby Gifts Received!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"viewof textValue = Inputs.text({\n label: \"Sweet Birthday Messages!\",\n placeholder: \"Happy Birthday Little Munchkins!\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"viewof dropdownValue = Inputs.select(\n [\"Baby Clothes\", \"Double Pram\", \"Walkers\", \"Baby CookBook For Toddlers\", \"Toys\", \"Diaper Subscription\", \"Baby Care Package\"],\n { label: \"Gifts For Him/Her/Them?\", value: \"Toys\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"dropdownValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":559,"value":"## Pheww! That Was Fun But Mommy & Daddy Need A Break! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"viewof checkboxValue = Inputs.checkbox(\n [\"Dinner\", \"Northern Lights\", \"Movie\", \"Stargazing\", \"Coffee\", \"Museum\", \"Trekking\"],\n {\n label: \"Lets go somewhere!\",\n value: [\"Trekking\", \"Stargazing\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"checkboxValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof radioValue = Inputs.radio(\n [\"LaBagh Woods\", \"Starved Rock State Park\", \"Indiana Dunes National Park\", \"Matthiessen State Park\"],\n {\n label: \"Choose a Spot!\",\n value: \"Starved Rock State Park\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"radioValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"Constellations To Watch Tonight","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"viewof tableValue = Inputs.table([\n {\n Constellation: \"URSA MINOR, URSA MAJOR, CASSIOPEIA, CEPHEUS, DRACO\",\n \"R.A.\": \"All RA\",\n \"Dec\": \"North of +65 \",\n },\n {\n Constellation: \"PERSEUS, ANDROMEDA, TRIANGULUM\",\n \"R.A.\": \"0h to 4h\",\n \"Dec\": \"+65 to +20\",\n },\n {\n Constellation: \"GEMINI, AURIGA, PERSEUS\",\n \"R.A.\": \"4h to 8h\",\n \"Dec\": \"+65 to +20\",\n },\n {\n Constellation: \"URSA MAJOR, LEO MINOR, LYNX\",\n \"R.A.\": \"8h to 12h\",\n \"Dec\": \"+65 to +20\",\n },\n {\n Constellation: \"URSA MAJOR, BOOTES, CANES VENATICI, CORONA BOREALIS\",\n \"R.A.\": \"12h to 16h\",\n \"Dec\": \"+65 to +20\",\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"More Here ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"