43:["$","title",null,{"children":"Week 4: Data Capture and Interactivity | Woo-Mi Jeong | Observable"}] 4b:T5db,{ const margin = 50; const size = 100 + 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", aLength + margin) .attr("y2", size - margin) .attr("stroke", "red"); svg .append("text") .text("a = " + aLength) .attr("x", aLength / 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", aLength + margin) .attr("y1", size - margin) .attr("x2", aLength + margin) .attr("y2", size - margin - bLength) .attr("stroke", "blue"); svg .append("text") .text("b = " + bLength) .attr("dominant-baseline", "middle") .attr("x", aLength + margin + 10) .attr("y", size - margin - bLength / 2) .attr("font-style", "italic") .attr("font-size", 12); svg .append("line") .attr("x1", margin) .attr("y1", size - margin) .attr("x2", aLength + margin) .attr("y2", size - margin - bLength) .attr("stroke", "green"); svg .append("text") .text("c = " + Math.sqrt(aLength ** 2 + bLength ** 2).toFixed(2)) .attr("text-anchor", "end") .attr("x", aLength / 2 + margin - 10) .attr("y", size - margin - bLength / 2 - 10) .attr("font-style", "italic") .attr("font-size", 12); return svg.node(); }4c:T402,{ const height = 200; const svg = d3.create("svg").attr("width", width).attr("height", 200); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", backgroundColor); svg .append("line") .attr("x1", margin) .attr("y1", margin) .attr("x2", width - margin) .attr("y2", height - margin) .attr("stroke", "white") .attr("stroke-width", strokeWidth); svg .append("text") .attr("x", width / 2) .attr("y", margin) .attr("fill", "white") .text("Example Text") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .attr("font-family", fontFamily) .attr("font-size", 18); svg .append("circle") //remember that x is a percentage slider above .attr("cx", x * width) //and y is a pixel value, so no additional calculation needed .attr("cy", y) .attr("r", 15) .attr("stroke", "white") .attr("fill", circleColor) .attr("stroke-width", strokeWidth); return svg.node(); }4d:[] 47:{"id":"ee19f3a1b1a4ce44","slug":"week-4-data-capture-and-interactivity","title":"Week 4: Data Capture and Interactivity","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-11-24T04:03:20.244Z","update_time":"$D2024-11-24T04:27:57.949Z","view_time":null,"first_public_time":"$D2024-11-24T04:03:20.244Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"536e89b71dfea055","login":"woomi","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/31e0a5a063c4f7c40056ea87b83e7737edd99de7ce9467b98c4b12394d8c0561","tier":"starter_2024","bio":"","following":false},"version":169,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"106dcc0cf6497c8a","login":"woomijeong","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/1b631bfd87ceb9a9978eecf2c926160b7765e71f2b89cb9e83edd9366f41b23f","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"536e89b71dfea055","login":"woomi","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/31e0a5a063c4f7c40056ea87b83e7737edd99de7ce9467b98c4b12394d8c0561","tier":"starter_2024","role":"editor"},{"type":"individual","id":"106dcc0cf6497c8a","login":"woomijeong","name":"Woo-Mi Jeong","avatar_url":"https://avatars-next.observableusercontent.com/1b631bfd87ceb9a9978eecf2c926160b7765e71f2b89cb9e83edd9366f41b23f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 4: Data Capture and Interactivity","cells":[{"id":0,"value":"# Week 4: Data Capture and Interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"greetings = \"Hello World\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"studentsInClass = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"alphabeticalStateArray = [\n \"Alabama\",\n \"Alaska\",\n \"Arizona\",\n \"Arkansas\",\n \"California\",\n \"Colorado\",\n \"Connecticut\"\n //...\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"alphabeticalStateArray[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"illinois = ({\n joinedUnionOrder: 21,\n joinedUnionYear: 1818,\n fipsCode: 17,\n postalAbbreviation: \"IL\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"viewof interactiveSlider = Inputs.range([0, 25], {\n label: \"Slide!\",\n step: 0.1,\n value: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"interactiveSlider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Inputs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"### Reactive Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"viewof minSlider = Inputs.range([0, 100], {\n label: \"Slider Minimum\",\n step: 1,\n value: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof maxSlider = Inputs.range([0, 100], {\n label: \"Slider Maximum\",\n step: 1,\n value: 80\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof dynamicSlider = Inputs.range([minSlider, maxSlider], {\n label: \"Dynamic Slider\",\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"### Building Calculators with Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"viewof aLength = Inputs.range([0, 100], {\n label: \"A Length\",\n step: 0.01,\n value: 80\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof bLength = Inputs.range([0, 100], {\n label: \"B Length\",\n step: 0.01,\n value: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"### Using Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"viewof markdownSlider = Inputs.range([0, 25], {\n label: \"Markdown Slider\",\n step: 0.001,\n value: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"markdownSlider < 12.5 ? \"📉\" : \"📈\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof svgSlider = Inputs.range([0, 25], {\n label: \"SVG Slider\",\n step: 0.1,\n value: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"viewof jsSlider = Inputs.range([0, 100], {\n label: \"JS Slider\",\n step: 1,\n value: 25\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"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\", \"#6d819c\");\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 size = (50 / jsSlider) * i;\n\n svg\n .append(\"circle\")\n .attr(\"cx\", spacing)\n .attr(\"cy\", height / 2)\n .attr(\"r\", size + 1)\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":82,"value":"viewof toggleValue = Inputs.toggle({ label: \"True or False?\", value: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"toggleValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof rangeValue = Inputs.range([0, 100], {\n label: \"Slide!\",\n value: 1,\n step: 5\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"rangeValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof colorValue = Inputs.color({ label: \"Favorite Color?\", value: \"#FF00FF\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"colorValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"viewof textValue = Inputs.text({\n label: \"Type\",\n placeholder: \"write something!\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"textValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof dateValue = Inputs.date({\n label: \"When is your Birthday?\"\n //instead of \"now\", you could pass in strings like \"September 15, 2024\" and JS will try to create a date\n //be careful though, the format parsing will depend on browser and computer preferences!\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"dateValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof dropdownValue = Inputs.select(\n [\"Cats\", \"Dogs\", \"Rabbits\", \"Ferrets\", \"Birds\", \"Lizards\", \"Frogs\"],\n { label: \"Favorite Pet?\", value: \"Rabbits\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"dropdownValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof checkboxValue = Inputs.checkbox(\n [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"],\n {\n label: \"Choose some colors!\",\n value: [\"Green\", \"Indigo\"]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"checkboxValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof radioValue = Inputs.radio(\n [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"],\n {\n label: \"Choose a single color!\",\n value: \"Orange\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"radioValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"viewof tableValue = Inputs.table([\n {\n Country: \"India\",\n \"Population 2024\": \"1441719852\",\n \"Density (/km2)\": \"485.0\",\n \"Growth Rate\": \"0.0092\",\n \"World %\": \"0.1801\"\n },\n {\n Country: \"China\",\n \"Population 2024\": \"1425178782\",\n \"Density (/km2)\": \"151.0\",\n \"Growth Rate\": \"-0.0003\",\n \"World %\": \"0.178\"\n },\n {\n Country: \"United States\",\n \"Population 2024\": \"341814420\",\n \"Density (/km2)\": \"37.0\",\n \"Growth Rate\": \"0.0053\",\n \"World %\": \"0.0427\"\n },\n {\n Country: \"Indonesia\",\n \"Population 2024\": \"279798049\",\n \"Density (/km2)\": \"149.0\",\n \"Growth Rate\": \"0.0082\",\n \"World %\": \"0.035\"\n },\n {\n Country: \"Pakistan\",\n \"Population 2024\": \"245209815\",\n \"Density (/km2)\": \"318.0\",\n \"Growth Rate\": \"0.0196\",\n \"World %\": \"0.0306\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"countries = [\n {\n Country: \"India\",\n \"Population 2024\": \"1441719852\",\n \"Density (/km2)\": \"485.0\",\n \"Growth Rate\": \"0.0092\",\n \"World %\": \"0.1801\"\n },\n {\n Country: \"China\",\n \"Population 2024\": \"1425178782\",\n \"Density (/km2)\": \"151.0\",\n \"Growth Rate\": \"-0.0003\",\n \"World %\": \"0.178\"\n },\n {\n Country: \"United States\",\n \"Population 2024\": \"341814420\",\n \"Density (/km2)\": \"37.0\",\n \"Growth Rate\": \"0.0053\",\n \"World %\": \"0.0427\"\n },\n {\n Country: \"Indonesia\",\n \"Population 2024\": \"279798049\",\n \"Density (/km2)\": \"149.0\",\n \"Growth Rate\": \"0.0082\",\n \"World %\": \"0.035\"\n },\n {\n Country: \"Pakistan\",\n \"Population 2024\": \"245209815\",\n \"Density (/km2)\": \"318.0\",\n \"Growth Rate\": \"0.0196\",\n \"World %\": \"0.0306\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"## Next","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"import { worldMapCoordinates } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof geoValue = worldMapCoordinates([-87.62, 41.87])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"geoValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof hsl = Inputs.form({\n h: Inputs.range([0, 360], { step: 1, label: \"Hue\", value: 200 }),\n s: Inputs.range([0, 100], { step: 1, label: \"Saturation\", value: 100 }),\n l: Inputs.range([0, 100], { step: 1, label: \"Lightness\", value: 50 })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"hsl","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"## Exercise","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background Color?\",\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":147,"value":"viewof circleColor = Inputs.color({\n label: \"Circle Color?\",\n value: \"#D1B6E1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof strokeWidth = Inputs.range([0, 10], {\n label: \"Stroke Width\",\n step: 0.01,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof margin = Inputs.range([0, 100], {\n label: \"Margin\",\n step: 0.1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"viewof x = Inputs.range([0, 1], {\n label: \"Circle X as Percentage\",\n step: 0.01,\n value: Math.random()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof y = Inputs.range([0, 200], {\n label: \"Circle 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":165,"value":"viewof fontFamily = Inputs.select([\"Courier\", \"Helvetica\", \"Futura\"], {\n label: \"Font Choice?\",\n value: \"Courier\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null