2c:null 2d:["$","title",null,{"children":"Data Capture and Interactivity | Zach Pino | Observable"}] 32:T5a5,const margin = 50; const size = 100 + margin * 2; const pythagorasSVG = d3.create("svg").attr("width", size).attr("height", size); pythagorasSVG .append("line") .attr("x1", margin) .attr("y1", size - margin) .attr("x2", aLength + margin) .attr("y2", size - margin) .attr("stroke", "red"); pythagorasSVG .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); pythagorasSVG .append("line") .attr("x1", aLength + margin) .attr("y1", size - margin) .attr("x2", aLength + margin) .attr("y2", size - margin - bLength) .attr("stroke", "blue"); pythagorasSVG .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); pythagorasSVG .append("line") .attr("x1", margin) .attr("y1", size - margin) .attr("x2", aLength + margin) .attr("y2", size - margin - bLength) .attr("stroke", "green"); pythagorasSVG .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);33:T715,--- ### Coding Exercise Let's get some practice building with Inputs! - Create a new notebook and build a calculator with Inputs that would help you explore a decision you are currently thinking about. For example, how much money you spend in a month on subscription services, what means of transit you take to get to school depending on cost and time available and weather conditions, some design deck calculation where you're trying to figure out how big images in a grid should be depending on rows/columns and margins, etc... Be creative, and try to use at least a few different kinds of inputs to get practice! - Take a look at the GIF image below which shows the most ID of all things: a 2x2 diagram! In the same notebook, attempt to loosely recreate it with Observable inputs and the SVG code we wrote in our first procedural artist exercise, or the Javascript code we learned last week while creating the "Hello World" map. Either approach is fine, though the javascript approach would offer more future-looking learnings. Note how not only is the green circle placeable with Observable inputs like a standard 2x2, but many other aspects of the visualization are configurable such as font size, colors, stroke widths, etc. Make as many inputs as you like to control your visualization, feel free to make it more interesting looking aesthetically, and consider making it plot something relevant to you! Small tip: some attributes might be helpful for aligning text such as the `text-anchor` and `dominant-baseline` attributes, which change what the `x` and `y` attributes mean for text elements. Normally, the coordinates refer to the bottom-left of the text-box, but you can change that! You can see these in action in the Pythagoras calculator code above, but try to find some documentation online too!34:T415,const twoByTwoHeight = 200; const twoByTwoSVG = d3.create("svg").attr("width", width).attr("height", twoByTwoHeight); twoByTwoSVG .append("rect") .attr("width", width) .attr("height", twoByTwoHeight) .attr("fill", backgroundColor); twoByTwoSVG .append("line") .attr("x1", twoByTwoMargin) .attr("y1", twoByTwoMargin) .attr("x2", width - twoByTwoMargin) .attr("y2", twoByTwoHeight - twoByTwoMargin) .attr("stroke", "white") .attr("stroke-width", strokeWidth); twoByTwoSVG .append("text") .attr("x", width / 2) .attr("y", twoByTwoMargin) .attr("fill", "white") .text("Example Text") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .attr("font-family", fontFamily) .attr("font-size", 18); twoByTwoSVG .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);35:[{"id":"d6a0a34e0d7972166990b414adbfd84f46fb69f66051b5048160024065a800c239ccaef8bd9d630a03f2c870a957a4fab59b70463921fc58a1c46c0426dd97e3","href":"https://static.observableusercontent.com/files/d6a0a34e0d7972166990b414adbfd84f46fb69f66051b5048160024065a800c239ccaef8bd9d630a03f2c870a957a4fab59b70463921fc58a1c46c0426dd97e3","name":"Sep-15-2024 12-39-25.gif","type":"image/gif","lastModified":1757598132323.666,"size":821774}] 30:{"id":"10d17e5485cf2709","slug":"f26-data-capture-and-interactivity","title":"Data Capture and Interactivity","thumbnail":"2383bf285b7a70f210d4e74c195def25f12086f39a63189b9f4bf697a666529a","access_level":"public","create_time":"$D2026-09-20T18:16:19.188Z","update_time":"$D2026-09-20T18:35:18.099Z","view_time":null,"first_public_time":"$D2026-09-20T18:35:59.824Z","has_unpublished_edits":null,"fork":{"id":"0db9bdb15eea1a4a","slug":"f25-week-4-data-capture-and-interactivity","title":"Week 4: Data Capture and Interactivity","owner":{"id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","bio":""},"version":1396,"publish_version":1396,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"bio":""}],"members":[{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Capture and Interactivity","cells":[{"id":0,"value":"# Data Capture and Interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"We have discussed several opportunities so far in class for data visualizers to actively participate in producing better datasets, cultivating data literacy, and aligning personal data experiences with collective data narratives. So, let's take a look this week at how Observable can be used to ingest data from the viewers of our data visualization notebooks. Data collection!\n\nTo be clear, the data we are capturing this week is not *persistent*. With the techniques presented below, users will be able to input data into our visualizations, but we will not be able to hold on to that data. No data is stored permanently, the controls presented on this page do not report any data back to Observable, and run locally in every viewers' browsers. Alternatives for persistent storage will be addressed in future weeks, but remember that there are lots of opportunities for interactive, private, transient, purely *local* data capture in [interactive data experiences](https://explorabl.es)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"---\n### Reminder about Observable Variables\n\nObservable can save the output value of any cell for later re-use as a **global** variable, available to all other cells on the page. We will use this ability to break our data cleaning, manipulation, and visualization code up in to easier to understand chunks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"const greetings = \"Hello World\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"The code above associates the variable name `greetings` with \"Hello World\", a common [starting phrase](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program) for all beginning coders. \"Hello World\" is a **string**, the computer science term for text, since text is just a \"string\" of multiple characters. Strings are always enclosed in either single or double quotation marks. It does not matter which you use, but you need to be consistent. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"We can also associate Observable variables with **integers** and **floats** (numbers with decimal points), which do not need quotation marks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"const studentsInClass = 15","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"We can also group multiple data elements together in **arrays** as global variables.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1098,"value":"const alphabeticalStateArray = [\n \"Alabama\",\n \"Alaska\",\n \"Arizona\",\n \"Arkansas\",\n \"California\",\n \"Colorado\",\n \"Connecticut\"\n //...\n]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"And access individual items from the array based on their index.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"alphabeticalStateArray[2]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"We can use objects, which use properties of data entities called **keys** and **values** associated with each entity. Note that, because braces are already used to define an Observable block of code, we need to surround javascript objects with an extra set of parentheses to make a global object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1116,"value":"const illinois = ({\n joinedUnionOrder: 21,\n joinedUnionYear: 1818,\n fipsCode: 17,\n postalAbbreviation: \"IL\"\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"illinois.postalAbbreviation","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"---\n### Observable Inputs\nObservable offers lightly wrapped, easy to use, interactive HTML elements that are compatible with its reactive data processing model. With [Observable Inputs](https://observablehq.com/documentation/inputs/overview), we can build entire working web apps to support our visualizations. We create all of these in **typescript cells**.\n\nThere are dozens of options, and you can even build your own. But let's first look at one of the more commonly used examples, with all of its bells-and-whistles. Play with the slider to see the value change!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"const interactiveSlider = view(Inputs.range([0, 25], {\n label: \"Slide!\",\n step: 0.1,\n value: 10\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"interactiveSlider","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"There are a few new pieces of information to learn here. Note the important keyword `view(...)`, which tells Observable to keep track of the output value of the cell we are creating, rather than the interactive HTML representation. `Inputs` is the built-in library for Observable, which is structured as a Javascript object. If we call it on its own, we can see all the options for interactive input elements!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"Inputs","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"In the example above, we asked for the `range` key, which is a function that takes two arguments. The order matters here!\n\n- The first argument is an **array** of 2 values, a minimum and maximum (inclusive) for the slider.\n- The second argument is an **object** with several optional keys. Here we add `label`, `step`, and `value` to define a human readable **label** to the left of the input, how small a **step** the slider takes as it slides, and its default **value** at page load. This is the *configuration object* of the input, and many of the different inputs take the same configuration keys such as `label`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":642,"value":"---\n### Reactive Processing\nA cool thing about Inputs is that you can use their outputs as arguments for *other* Inputs. When you change any Observable Input, any cell that uses its value is *re-run* with the updated value. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"const minSlider = view(Inputs.range([0, 100], {\n label: \"Slider Minimum\",\n step: 1,\n value: 20\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"const maxSlider = view(Inputs.range([0, 100], {\n label: \"Slider Maximum\",\n step: 1,\n value: 80\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"*This slider has its minimum and maximum set by the two sliders above. Its minimum is **${minSlider}**, its maximum is **${maxSlider}**, and its current value is **${dynamicSlider}***.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":656,"value":"const dynamicSlider = view(Inputs.range([minSlider, maxSlider], {\n label: \"Dynamic Slider\",\n step: 1\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"-----\n### Building Calculators with Inputs\n\nBecause the output value of any Observable Inputs is a global variable, we can use it in an SVG illustration, Javascript code blocks and visualizations, and even Markdown cells. Note that global variables are shown in **bold** in most cells. When using Observable global variables in HTML or Markdown cells, you enclose the variable in braces, and add a dollar sign to the front like this: `\\${`**`variableName`**`}`\n\nOne of the original inspirations for Observable's reactive notebook model was [Tangle](https://worrydream.com/Tangle/), a really cool utility for creating interactive and reactive text on HTML webpages. Many of the [Explorable Explanations](https://explorabl.es) that you are reviewed this week were likely also inspired by Tangle. You can even use [Tangle in Observable](https://observablehq.com/@mbostock/tangle)!\n\nBut, we can build similar simple calculators with only Observable Inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":712,"value":"const aLength = view(Inputs.range([0, 100], {\n label: \"A Length\",\n step: 0.01,\n value: 80\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"const bLength = view(Inputs.range([0, 100], {\n label: \"B Length\",\n step: 0.01,\n value: 50\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"Pythagoras says that a triangle with one side measuring ${aLength} and another side measuring **${bLength}** has a hypotenuse measuring **${(Math.sqrt(aLength**2 + bLength**2)).toFixed(2)}**. This was calculated by first summing ${aLength}² and ${bLength}², which is ${(aLength**2 + bLength **2 ).toFixed()}, and then taking the square root.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1181,"value":"pythagorasSVG.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"---\n### Using Inputs\nTake a look at these examples to see how you can use the value of Observable Inputs in different ways in your notebooks.\n\n##### Markdown Usage Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"const markdownSlider = view(Inputs.range([0, 25], {\n label: \"Markdown Slider\",\n step: 0.001,\n value: 10\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"The slider above reads **${markdownSlider}**. This value with two decimal places, ${markdownSlider.toFixed(3)} is ${markdownSlider >= 12.5 ? \"**larger than or equal to**\" : \"**smaller than**\"} 12.500.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"Note the cool trick at the end there. You can use a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) to use if/else conditional logic in a more compact form.\n\nThe logic for this operator is...\n\n`someValue < anotherValue ? \"if true\" : \"if false\"`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":879,"value":"markdownSlider < 12.5 ? \"📉\" : \"📈\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"---\n##### SVG Usage Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"const svgSlider = view(Inputs.range([0, 25], {\n label: \"SVG Slider\",\n step: 0.1,\n value: 10\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"---\n##### JS Usage Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"const jsSlider = view(Inputs.range([0, 100], {\n label: \"JS Slider\",\n step: 1,\n value: 25\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"const height = 100;\n\nconst rainbowSVG = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\nrainbowSVG\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#6d819c\");\n\nfor (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 rainbowSVG\n .append(\"circle\")\n .attr(\"cx\", spacing)\n .attr(\"cy\", height / 2)\n .attr(\"r\", size + 1)\n //again, looks complicated, but it's just dividing 360 degrees (used for hue) for the index of each circle\n .attr(\"fill\", \"hsl(\" + (360 / jsSlider) * i + \",100%,50%)\");\n}\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"rainbowSVG.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"-----\n### Other Inputs\nThere are many other types of inputs, and we saw a hint at a few of them when we looked at the `Inputs` object earlier. Interact with all the rest of the items on this page to see how the output global variable changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"-----\n##### Toggle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"viewof toggleValue = Inputs.toggle({ label: \"True or False?\", value: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"toggleValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"-----\n##### Range Slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"rangeValue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"-----\n##### Color Picker\nClick on the colored rectangle!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"const colorValue = view(Inputs.color({ label: \"Favorite Color?\", value: \"#FF00FF\" }))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"colorValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"---\n##### Text Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"const textValue = view(Inputs.text({\n label: \"Type\",\n placeholder: \"write something!\"\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"textValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"-----\n##### Calendar Input\nClick on the date!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"const dateValue = view(Inputs.date({\n label: \"When is your Birthday?\",\n value:now\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":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"dateValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"---\n##### Dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"const dropdownValue = view(Inputs.select(\n [\"Cats\", \"Dogs\", \"Rabbits\", \"Ferrets\", \"Birds\", \"Lizards\", \"Frogs\"],\n { label: \"Favorite Pet?\", value: \"Rabbits\" }\n))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"dropdownValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"-----\n##### Checkboxes\nThis one is cool! Note that it outputs an array of all checkbox selections, even if there are zero selections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"const checkboxValue = view(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":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"checkboxValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"---\n##### Radio Buttons\nSimilar to checkboxes, but the output here is only one value (and importantly not an array of one item).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1138,"value":"const radioValue = view(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":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"radioValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"----\n##### Table Input\nThis one is a bit different than the rest. You hand it an array of objects as the first argument, and Observable creates an interactive, sortable table with the keys as columns. You can hover over one of the rows, and click on the checkbox to output that selected data to the global variable.\n\nWorld population data from [here](https://github.com/manya-gangoli/World-Population-2024-EDA-and-prediction/blob/main/World%20Population%20by%20country%202024.csv).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1177,"value":"const 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":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"const tableValue = view(Inputs.table(countries))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"tableValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"---\n### Important Citation\nObservable inputs was inspired by the independent work of an Observable community member [Jeremy Ashkenas](https://observablehq.com/@jashkenas). You can visit the original [\"The Grand Native Inputs Bazaar\"](https://observablehq.com/@jashkenas/inputs) and view all kinds of additional inputs which need to be explicitly imported and sometimes work a bit differently than the official inputs. You will often see these on older Observable pages. One of the coolest is the geographic input, click anywhere on the map to update the value!\n\nNote that this import cell needs to be Observable javascript, rather than typescript, since imports have not (as of the time of publishing) been updated to support the new Observable Notebooks 2.0.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":677,"value":"import { worldMapCoordinates } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"const geoValue = view(worldMapCoordinates([-87.62, 41.87]))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"geoValue","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"---\n### Building Complex Inputs\nYou can create more complex interfaces with [`Inputs.form()`](https://observablehq.com/@observablehq/input-form), which groups Inputs into less screen space and delivers their output data all together in one global variable. In this lightly adapted example from the documentation, three sliders are combined into a single output object, which could be used to create an HSL color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"const hsl = view(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":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"hsl","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":579,"value":"---\n### Going Further\nYou can [create your own interactive inputs](https://observablehq.com/@tophtucker/custom-input-example). This is likely beyond where we are in our Javascript learning since it requires processing javascript events, but soon you will be able to draw your own SVG elements which spit out values and update any downstream cells just like the Inputs on this page. But to see what will soon be possible, check out this cool [ternary range input](https://observablehq.com/@yurivish/ternary-slider) or this [brushable US county selector](https://observablehq.com/@awhitty/fips-county-code-brush)!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1008,"value":"FileAttachment(\"Sep-15-2024 12-39-25.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"Here is a bit of code to get you started on how you might structure some of this. Click on the \">\" when hovering over the inputs to open them up and see the code that creates them if desired.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1029,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background Color?\",\n value: \"#519D9E\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"viewof circleColor = Inputs.color({\n label: \"Circle Color?\",\n value: \"#D1B6E1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"viewof twoByTwoMargin = 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"twoByTwoSVG.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"$34","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"