3e:null 3f:["$","title",null,{"children":"DIY inputs | JR | Observable"}] 45:Tb7d,md` ~~~js function slider({ ~~~ ~~~js min: 0, max: 1, step: 0.1, value: 0.5, // initial value title: 'some title', desc: 'some description', ~~~ **[element]** For the next two arguments, replace [element] with one of the following: [title, slider, output, desc, div *(element that ties the others together)*]. ~~~js [element]Style: { width: '150px', color: 'white', ... // other CSS styles }, [element]Attrs: { id: 'slider1', class: 'cool-slider', ... // other attributes }, ~~~

**theme** ~~~js theme: 'white-round', ~~~ Choose one from [default, white]. You can change the slider's thumb appearance by adding -thin or -round to the theme, e.g. white-round.

**background** ~~~js background: { type: 'progress', colors: [yourColors] }, ~~~ type: one of [normal, double, interpolate, progress] ~~~js if (type === 'normal') use color: yourColor instead of colors: [yourColors] ~~~ ~~~js if (type === 'progress') use a list of three colors – starting one, final one and optional right-most solid color (see color-incrementing-slider) ~~~ ~~~js if (type === 'interpolate') use a list of two colors (left and right) or completely omit colors argument and use some d3 color interpolator (see gradient–fade background) ~~~

**highlight** ~~~js highlight: { lower: 60, upper: 90, colors: { normal: '#EDEDED', inactive: '#B7E5C6', active: '#7EE5A0' }, preventUpdate: false }, ~~~ If preventUpdate is set to true, then the slider won't be updated when inside of highlighted area *(see restricted slider)*.

~~~js initialize: true, // if false, oninput won't be triggered when slider is created ~~~

**oninput** ~~~js oninput: (objs) => { // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\ } ~~~ objs object holds title, slider, output, desc, and div elements. Additionally, you have an access to current value of the slider (objs.value), progress [0-1] (objs.progress) and settings (objs.settings), so you can access the min and max values for example (objs.settings.min, objs.settings.max). You can also change the behavior of slider by using div's update method *(which also updates the div's value and output text)*, for example by using objs.div.update(objs.settings.max - objs.slider.value) to create a *tricky slider.* ~~~js }) ~~~

**DOM interactions** div also holds the *min*, *max* and *step* attributes which can be accessed from outside of the slider. ~~~js const mySlider = slider({ min: 0, max: 1, step: 0.1 }); mySlider.min // 0 mySlider.max // 1 mySlider.step // 0.1 ~~~`46:T4e6,md` ~~~js function select({ ~~~ **options** ~~~js options: { option1: value1, option2: value2, ... }, ~~~ Either dict or list, e.g. ['a', 'b', 'c'] will become {'a': 'a', 'b': 'b', 'c': 'c'}.

~~~js selected: option1, // initially selected option title: 'some title', desc: 'some description', ~~~

**[element]** For the next two arguments, replace [element] with one of the following: [title, select, additionalElement (caret), desc, div *(element that ties the others together)*]. ~~~js [element]Style: { width: '150px', color: 'white', ... // other CSS styles }, [element]Attrs: { id: 'select1', cla‎ss: 'cool-select', ... // other attributes }, ~~~

~~~js theme: 'white', // one of [default, white], initialize: true, // if false, onchange won't be triggered when input is created ~~~

**onchange** ~~~js onchange: (objs) => { // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\ } ~~~ objs object holds title, button, desc, additionalElement (caret), div elements. You can also update the select's value by using objs.div.update method. ~~~js }) ~~~ `47:T54c,html` ${button({ title: "🐟", value: "JUST", divStyle: { display: "inline-block" }, buttonStyle: { background: "#CCE9FF" }, titleStyle: { "text-align": "center" }, onclick: ({ button }) => { mutable guessTheMovie = "FIN..."; d3.select(button) .style("background", "#B2DFFF") .interrupt() .transition() .duration(300) .style("background", "#CCE9FF"); } })} ${button({ title: "🐬🐬", value: "KEEP", divStyle: { display: "inline-block", "margin-left": "5px" }, buttonStyle: { background: "#B2DFFF" }, titleStyle: { "text-align": "center" }, onclick: ({ button }) => { mutable guessTheMovie = "FINDING..."; d3.select(button) .style("background", "#99D4FF") .interrupt() .transition() .duration(300) .style("background", "#B2DFFF"); } })} ${button({ title: "🐠🐠🐠", value: "SWIMMING", divStyle: { display: "inline-block", "margin-left": "5px" }, buttonStyle: { background: "#99D4FF" }, titleStyle: { "text-align": "center" }, onclick: ({ button }) => { mutable guessTheMovie = "FINDING NEMO"; d3.select(button) .style("background", "#7FC9FF") .interrupt() .transition() .duration(300) .style("background", "#99D4FF"); } })} `48:Ta0c,input = (settings = {}, type) => { if (typeof settings !== "object") { return "Please provide a value!"; } const theme = settings.theme ? settings.theme : "default", initialize = settings.initialize != undefined ? settings.initialize : type === "button" ? false : true, on = type == "button" ? "onclick" : type === "select" ? "onchange" : "oninput"; setGlobalStyles(theme); const objs = { title: createElement("title", settings.title, theme, settings), desc: createElement("desc", settings.desc, theme, settings), output: type === "slider" ? createElement("output", settings.value, theme, settings) : type == "checkbox" ? createElement("output", settings.label, theme, settings) : "", settings, value: settings.value }; objs.additionalElement = settings.additionalElement ? createElement( settings.additionalElement.name, settings.additionalElement.value, theme, settings ) : ""; (objs[type] = createElement(type, settings.value, theme, settings)), (objs.div = createElement( "div", [objs.title, objs[type], objs.output, objs.additionalElement, objs.desc], theme, settings )); if (type === "slider") { objs.div.min = settings.min; objs.div.max = settings.max; objs.div.step = settings.step; } objs[type][on] = () => { if (!settings.preventUpdate) { objs.div.update(); } if (type === "slider") objs.progress = (objs.value - settings.min) / (settings.max - settings.min); if (settings.utilities) { for (let [key, func] of Object.entries(settings.utilities)) { func(settings[key], objs); } } if (settings[on]) settings[on](objs); }; objs.div.update = (value = objs[type].value || settings.value) => { value = isNaN(value) ? value : +value; if (type === "checkbox" && objs.value != false) { value = false; } else if (type === "checkbox") { value = settings.value; } objs.value = value; if (type != "select") { objs[type].value = value; } objs.div.value = objs.value; if (type != "checkbox" && objs.output) { objs.output.textContent = objs.value; } objs.div.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (settings.preventUpdate) objs.div.update(); if (initialize) { objs[type][on](); } else if (!settings.preventUpdate) { objs.div.update(); } return objs.div; }49:T660,createElement = (type, text = "", theme = "", settings = "") => { if (text == undefined) return ""; text = type != "slider" && type != "checkbox" ? text : ""; let typesMapping = { title: { tag: "div", mandatoryAttrs: { class: "title" } }, button: { tag: "button", mandatoryAttrs: {} }, checkbox: { tag: "input", mandatoryAttrs: { type: "checkbox", value: settings.value } }, select: { tag: "select", mandatoryAttrs: {} }, slider: { tag: "input", mandatoryAttrs: { type: "range", min: settings.min, max: settings.max, step: settings.step, value: settings.value } }, output: { tag: "span", mandatoryAttrs: { class: "output" } }, desc: { tag: "div", mandatoryAttrs: { class: "desc" } }, div: { tag: "div", mandatoryAttrs: { class: `input-${theme}` } }, caret: { tag: "svg", mandatoryAttrs: { class: "caret" } } }; let el = html`<${typesMapping[type].tag}>${text}`; Object.entries(typesMapping[type].mandatoryAttrs).forEach((d) => el.setAttribute(d[0], d[1]) ); if (typeof settings[type + "Attrs"] == "object") Object.entries(settings[type + "Attrs"]).forEach((d) => { if (d[0] == "class") el.classList.add(d[1]); else el.setAttribute(d[0], d[1]); }); if (typeof settings[type + "Style"] == "object") Object.entries(settings[type + "Style"]).forEach( (d) => (el.style[d[0]] = d[1]) ); return el; }4a:T490,highlightSlider = (settings, objs) => { settings.lowerAdj = (100 * (settings.lower - objs.settings.min)) / (objs.settings.max - objs.settings.min); settings.upperAdj = (100 * (settings.upper - objs.settings.min)) / (objs.settings.max - objs.settings.min); if (settings.preventUpdate) objs.settings.preventUpdate = true; if ( +objs.slider.value == settings.lower || +objs.slider.value == settings.upper ) { objs.div.update(objs.slider.value); } if ( +objs.slider.value < settings.lower || +objs.slider.value > settings.upper ) { objs.div.update(objs.slider.value); objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } else { objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } }4b:T444,setSliderBackground = (settings, objs) => { let type = settings.type, color = settings.color, colors = settings.colors, progress = objs.progress, interpolation = settings.interpolation, custom = false; if (!interpolation) interpolation = d3.interpolate; else custom = true; type == "normal" ? (objs.slider.style.background = color) : type == "double" ? (objs.slider.style.background = `linear-gradient(90deg, ${colors[0]} ${ progress * 100 }%, ${colors[1]} 0%)`) : type == "interpolate" ? (objs.slider.style.background = custom ? interpolation(progress) : interpolation(colors[0], colors[1])(progress)) : type == "progress" ? custom ? (objs.slider.style.background = `linear-gradient(90deg, ${interpolation( progress )} ${progress * 100}%, ${color || interpolation(0)} 0%)`) : (objs.slider.style.background = `linear-gradient(90deg, ${interpolation( colors[0], colors[1] )(progress)} ${progress * 100}%, ${colors[2] || colors[0]} 0%)`) : 0; }4c:Tae2,themes = ` .input-default button, .input-white button, .input-default select, .input-white select { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0.9; height: 30px; margin-left: 0px; padding: 5px 10px 5px 10px; background: #EFEFEF; border: 0.5px solid white; border-radius: 5px; color: #262626; font-family: Avenir, Arial; font-size: 12px; font-weight: 600; cursor: pointer; } .input-white button, .input-white select { color: white; } .input-default select, .input-white select { padding-right: 29px; } .input-default .caret, .input-white .caret { width: 12px; height: 10px; margin-left: -24px; fill: black; pointer-events: none; opacity: 0.75; } .input-white .caret { fill: white; } .input-default input[type = 'range'], .input-default-thin input[type = 'range'], .input-default-round input[type = 'range'], .input-white input[type = 'range'], .input-white-thin input[type = 'range'], .input-white-round input[type = 'range'] { appearance: none; -webkit-appearance: none; width: 200px; height: 5px; border-radius: 1px; background: #E5E5E5; } .input-default input[type = 'range']::-webkit-slider-thumb, .input-white input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 5px; } .input-white input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-thin input[type = 'range']::-webkit-slider-thumb, .input-white-thin input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7.5px; height: 20px; background: #545454; cursor: pointer; border: none; border-radius: 2.5px; } .input-white-thin input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-round input[type = 'range']::-webkit-slider-thumb, .input-white-round input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 7.5px; } .input-white-round input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } input[type = 'range']:focus { outline: none; } .output { margin-left: 5px; color: #262626; font-family: Courier; font-size: 14px; } .title { margin-bottom: 3.5px; margin-left: 2.5px; color: black; font-family: Avenir, Arial; font-size: 14px; font-weight: 600; } .desc { margin-top: 6px; margin-left: 2.5px; color: #4C4C4C; font-family: Avenir, Arial; font-size: 12px; } `4d:[] 43:{"id":"d8cd9153685eddee","slug":null,"title":"DIY inputs","thumbnail":"4d84c16600b8d57efb6edd2d287b462217997ecb7e42d08ea19c4fa0ad261869","access_level":"public","create_time":"$D2023-02-08T23:00:15.050Z","update_time":"$D2023-02-08T23:00:15.050Z","view_time":null,"first_public_time":"$D2023-02-08T23:00:15.050Z","has_unpublished_edits":null,"fork":{"id":"6bc3c08c4545a7e2","slug":"diy-inputs","title":"DIY inputs","owner":{"id":"44f043b020beee3d","login":"bartok32","name":"Bartosz Prusinowski"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b756b2b38e16dec7","login":"jr15","name":"JR","avatar_url":"https://avatars-next.observableusercontent.com/fba3fbbfb4ccec850d4f464fe26ca1861b43dff64a0b0750427d258677281ee7","tier":"starter_2024","bio":"","following":false},"version":3827,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6f607e7d94e2337a","login":"jr15","name":"JR","avatar_url":"https://avatars-next.observableusercontent.com/fba3fbbfb4ccec850d4f464fe26ca1861b43dff64a0b0750427d258677281ee7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6f607e7d94e2337a","login":"jr15","name":"JR","avatar_url":"https://avatars-next.observableusercontent.com/fba3fbbfb4ccec850d4f464fe26ca1861b43dff64a0b0750427d258677281ee7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DIY inputs","cells":[{"id":0,"value":"md`# DIY inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`*Inspired by [jashkenas' inputs.]*\n[jashkenas' inputs.]: https://observablehq.com/@jashkenas/inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2296,"value":"md`---\nWelcome to the toolbo... notebook of easily customizable inputs! It serves as a list of examples, to showcase what's possible to achieve. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2402,"value":"md`I decided to create a tool – instead of a set of predefined functionalities – that can be used to create fantastic inputs with just a little doze of creativity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"md`Have fun! 🎢`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"md`---\n## Sliders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md`\n~~~js\nimport { slider } from \"@bartok32/diy-inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"slider({\n title: \"HOW-ARE-YOU-TODAY SLIDER\",\n desc: \"TOOLTIP.\",\n descStyle: {\n \"margin-top\": \"0px\",\n \"pointer-events\": \"none\"\n },\n min: 0,\n max: 100,\n step: 1,\n value: 75,\n theme: \"white-round\",\n background: {\n type: \"double\",\n colors: [\"#7EE5A0\", \"#FFA5A5\"]\n },\n oninput: ({ desc, output, value, progress }) => {\n output.textContent =\n value < 10\n ? \"😭\"\n : value < 30\n ? \"☹️\"\n : value < 50\n ? \"😐\"\n : value < 70\n ? \"🙂\"\n : value < 90\n ? \"😄\"\n : value < 99\n ? \"🥳\"\n : \"💯\";\n\n desc.textContent = `${value}%`;\n\n // tooltip's position: (200px - margins) + exceptions for one- and three-number percentages\n desc.style.marginLeft = `${\n progress * (200 - 15) + (value < 10 ? 5 : value > 99 ? -5 : 0)\n }px`;\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":"slider({\n title: \"LIGHTSABER SLIDER\",\n desc: \"MAY THE FORCE BE WITH YOU.\",\n min: 0,\n max: 100,\n step: 1,\n value: 15,\n theme: \"default-thin\",\n background: {\n type: \"double\",\n colors: [\"#7295FF\", \"#CCD8FF\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"slider({\n title: \"ONLY-LEFT-COLOR SLIDER\",\n desc: \"SO LEFT-SIDED.\",\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n theme: \"default-round\",\n background: {\n type: \"double\",\n colors: [\"#7295FF\", \"white\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"slider({\n title: \"ONLY-RIGHT-COLOR SLIDER\",\n desc: \"SO OPPOSITE-SIDED.\",\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n theme: \"white-round\",\n background: {\n type: \"double\",\n colors: [\"white\", \"#7295FF\"]\n },\n oninput: ({ output }) => (output.textContent = \"🤔\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"slider({\n title: \"COLOR-INCREMENTING SLIDER\",\n desc: \"SO MAJESTIC.\",\n min: 0,\n max: 100,\n step: 1,\n value: 20,\n theme: \"default\",\n background: {\n type: \"progress\",\n colors: [\"#CCD8FF\", \"#7295FF\", \"white\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"slider({\n title: \"GRADIENT-FADE BACKGROUND SLIDER\",\n desc: \"SO MANY COLORS.\",\n min: 0,\n max: 100,\n step: 1,\n value: 80,\n theme: \"default-round\",\n background: {\n type: \"interpolate\",\n colors: [\"#FFA5A5\", \"#7EE5A0\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"slider({\n title: \"HIGHLIGHTED SLIDER\",\n desc: \"👨 : - IS IT FINE TO CROSS THE GREEN LINE?\",\n min: 0,\n max: 100,\n step: 1,\n value: 40,\n theme: \"default\",\n highlight: {\n lower: 60,\n upper: 90,\n colors: {\n normal: \"#EDEDED\",\n inactive: \"#B7E5C6\",\n active: \"#7EE5A0\"\n },\n preventUpdate: false\n },\n oninput: ({ desc, value }) => {\n if (value >= 60 && value <= 90) {\n desc.textContent =\n \"🧝‍♀️ : YES, MY SON. THERE IS A LOT OF INTERESTING THINGS THERE!\";\n } else {\n desc.textContent = \"👨 : IS IT FINE TO CROSS THE GREEN LINE?\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"slider({\n title: \"RESTRICTED SLIDER\",\n desc: \"👨 : IS IT FINE TO CROSS THE RED LINE?\",\n min: 0,\n max: 100,\n step: 1,\n value: 40,\n theme: \"default\",\n highlight: {\n lower: 60,\n upper: 90,\n colors: {\n normal: \"#EDEDED\",\n inactive: \"#FFA5A5\",\n active: \"#FF6666\"\n },\n preventUpdate: true\n },\n oninput: ({ desc, value }) => {\n if (value >= 60 && value <= 90) {\n desc.textContent =\n \"🧝‍♀️ : NO, MY SON. YOU SHOULD ALWAYS KEEP AWAY FROM IT.\";\n } else {\n desc.textContent = \"👨 : IS IT FINE TO CROSS THE RED LINE?\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"slider({\n title: \"LOTR-RESTRICTED SLIDER\",\n desc: \"👨 : SHALL I PASS?\",\n min: 0,\n max: 100,\n step: 1,\n value: 40,\n theme: \"default\",\n highlight: {\n lower: 60,\n upper: 101,\n colors: {\n normal: \"#EDEDED\",\n inactive: \"#FFA5A5\",\n active: \"#FF6666\"\n },\n preventUpdate: true\n },\n oninput: ({ desc, value }) => {\n if (value >= 60 && value <= 101) {\n desc.textContent = \"🧙‍♂️ : YOU SHALL NOT PASS!\";\n } else {\n desc.textContent = \"👾 : SHALL I PASS?\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"slider({\n title: \"CUSTOM-DESCRIPTION-AND-OUTPUT SLIDER\",\n descStyle: {\n \"pointer-events\": \"none\"\n },\n min: 0,\n max: 10,\n step: 1,\n value: 0,\n background: {\n type: \"progress\",\n colors: [\"#F2F2F2\", \"#7EE5A0\", \"#F2F2F2\"]\n },\n oninput: ({ desc, output, value }) => {\n output.textContent =\n value === 10\n ? \"Congrats, you did it! 🎉\"\n : \"Only \" + (10 - value) + \" to go!\";\n\n desc.textContent =\n value === 0\n ? \"LET'S COUNT TO 10!\"\n : d3\n .range(value)\n .map((d) => (d == 9 ? d + 1 + \"!\" : d + 1 + \"...\"))\n .reduce((a, b) => a + \" \" + b, \"\");\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1956,"value":"slider({\n title: \"TRICKY SLIDER\",\n desc: \"❌ NEVER TRUST THESE ONES.\",\n min: 0,\n max: 100,\n step: 1,\n theme: \"default-thin\",\n oninput: ({ div: { update }, settings, value }) =>\n update(settings.max - value)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"slider({\n title: \"EXPANDING RAINBOW SLIDER\",\n desc: \"BECAUSE WHY NOT?\",\n min: 0,\n max: 100,\n step: 1,\n value: 20,\n background: {\n type: \"progress\",\n interpolation: d3.interpolateRainbow,\n color: \"#EDEDED\"\n },\n oninput: ({ desc, output, progress, slider, value }) => {\n slider.style.width = `${75 + 0.75 * value + 50 * progress}px`;\n\n if (progress < 1) {\n output.textContent = \"🌈 : Catch me if you can!\";\n desc.textContent = \"BECAUSE WHY NOT?\";\n } else {\n output.textContent = \"🧝‍♀️ : You caught the rainbow. Congratulations!\";\n desc.textContent = \"THE TRUE RAINBOW–CATCHER.\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"md`**Inline sliders.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"md`🧝‍♀️: - Have you seen the Inline-Robo-Candy-Slider 9000?\n
🤖: - D1$@BL1NG $T3@LTH M0D3... ${slider(\n {\n titleStyle: {\n \"font-size\": \"11px\"\n },\n min: 0,\n max: 15,\n step: 1,\n divStyle: {\n display: \"inline-block\",\n \"text-align\": \"center\",\n \"margin-left\": \"3.5px\"\n },\n sliderStyle: {\n width: \"130px\",\n background: \"#FFA5D0\"\n },\n theme: \"default-thin\",\n oninput: ({ value }) =>\n (mutable S0___MANY___CAND13S = Array(value + 1).join(\"🍬\"))\n }\n)}\n
🧝‍♀️: - Ah, there you are!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"mutable S0___MANY___CAND13S = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"md`**Bonus:** synchronized dance-sliders.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"slider({\n desc: \"'CAUSE PARTY IS NEVER OVER.\",\n min: 0,\n max: 100,\n step: 1,\n divAttrs: {\n id: \"slider1\"\n },\n divStyle: {\n display: \"inline-block\"\n },\n sliderStyle: {\n width: \"150px\"\n },\n theme: \"default-round\",\n oninput: ({ output, progress, slider, value }) => {\n const secondSlider = d3.select(\"#slider2\");\n\n if (!secondSlider.empty()) {\n secondSlider.node().update(100 - value);\n secondSlider.select(\"input\").node().style.background = d3.interpolateCool(\n 1 - progress\n );\n slider.style.background = d3.interpolateCool(progress);\n\n if (value >= 50) {\n output.textContent = \"💃\";\n secondSlider.select(\"span\").node().textContent = \"🕺\";\n } else {\n output.textContent = \"🕺\";\n secondSlider.select(\"span\").node().textContent = \"💃\";\n }\n } else {\n slider.style.background = d3.interpolateCool(progress);\n output.textContent = \"💃\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"slider({\n desc: \"CHEERS TO THAT!\",\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n divAttrs: {\n id: \"slider2\"\n },\n divStyle: {\n display: \"inline-block\"\n },\n sliderStyle: {\n width: \"150px\"\n },\n theme: \"default-round\",\n oninput: ({ output, progress, slider, value }) => {\n const secondSlider = d3.select(\"#slider1\");\n\n if (!secondSlider.empty()) {\n secondSlider.node().update(100 - value);\n secondSlider.select(\"input\").node().style.background = d3.interpolateCool(\n 1 - progress\n );\n slider.style.background = d3.interpolateCool(progress);\n\n if (value <= 50) {\n output.textContent = \"🕺\";\n secondSlider.select(\"span\").node().textContent = \"💃\";\n } else {\n output.textContent = \"💃\";\n secondSlider.select(\"span\").node().textContent = \"🕺\";\n }\n } else {\n slider.style.background = d3.interpolateCool(progress);\n output.textContent = \"🕺\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"md`---\n## API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2923,"value":"md`---\n## Selects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2926,"value":"md`~~~js\nimport { select } from \"@bartok32/diy-inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2936,"value":"select({\n title: \"JUMPING SELECT\",\n desc: \"AAAAND HOP!\",\n options: {\n GREEN: \"#A1E8CC\",\n APRICOT: \"#FAC9B8\",\n BLUE: \"#BFD4FF\"\n },\n selectStyle: {\n background: \"#A1E8CC\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"font-size\", \"0px\")\n .interrupt()\n .transition()\n .ease(d3.easePoly)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"35px\")\n .style(\"margin\", \"15px\")\n .transition()\n .ease(d3.easeBounce)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"30px\")\n .style(\"margin\", \"0px\")\n .style(\"background\", value)\n .style(\"font-size\", \"12px\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3187,"value":"select({\n title: \"SHRINKING SELECT\",\n desc: \"AAAAND SHRINK!\",\n options: {\n APRICOT: \"#FAC9B8\",\n GREEN: \"#A1E8CC\",\n BLUE: \"#BFD4FF\"\n },\n selectStyle: {\n background: \"#FAC9B8\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"font-size\", \"0px\")\n .interrupt()\n .transition()\n .ease(d3.easePoly)\n .duration(250)\n .style(\"width\", \"10px\")\n .style(\"height\", \"90px\")\n .transition()\n .ease(d3.easeBounce)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"30px\")\n .style(\"background\", value)\n .style(\"font-size\", \"12px\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3211,"value":"select({\n title: \"MY-FATHER-WAS-A-CIRCLE SELECT\",\n desc: \"NO JOKES.\",\n options: {\n BLUE: \"#BFD4FF\",\n GREEN: \"#A1E8CC\",\n APRICOT: \"#FAC9B8\"\n },\n selectStyle: {\n background: \"#BFD4FF\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"font-size\", \"0px\")\n .interrupt()\n .transition()\n .ease(d3.easePoly)\n .duration(350)\n .style(\"width\", \"100px\")\n .style(\"height\", \"100px\")\n .style(\"border-radius\", \"50px\")\n .transition()\n .ease(d3.easeBounce)\n .duration(250)\n .style(\"width\", \"100px\")\n .style(\"height\", \"30px\")\n .style(\"border-radius\", \"5px\")\n .style(\"background\", value)\n .style(\"font-size\", \"12px\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3251,"value":"select({\n title: \"SPINNING SELECT\",\n desc: \"LET'S ROLL!\",\n options: {\n I: \"SPIN\",\n LIKE: \"TO\",\n TOOOOO: \"LIKE\",\n SPIN: \"I\"\n },\n selectStyle: {\n background: \"#FF72AF\"\n },\n divStyle: {\n width: \"160px\",\n \"font-size\": \"1px\"\n },\n theme: \"white\",\n onchange: ({ div }) =>\n d3\n .select(div)\n .transition()\n .duration(250)\n .style(\"transform\", `rotate(300deg)`)\n .transition()\n .ease(d3.easeBounce)\n .duration(750)\n .style(\"transform\", `rotate(0deg)`)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3359,"value":"md`---\n## API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3363,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2108,"value":"md`---\n## Buttons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2805,"value":"md`~~~js\nimport { button } from \"@bartok32/diy-inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2135,"value":"button({\n value: \"REGULAR BUTTON\",\n desc: \"SO REGULAR.\",\n buttonStyle: {\n background: \"#7EE5A0\",\n color: \"#1A1A26\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2222,"value":"button({\n value: \"PRESS-VISIBLE BUTTON\",\n desc: \"SO CLICKY.\",\n buttonStyle: {\n background: \"#6B6B99\",\n color: \"white\"\n },\n onclick: ({ button }) =>\n d3\n .select(button)\n .style(\"background\", \"#505072\")\n .interrupt()\n .transition()\n .duration(300)\n .style(\"background\", \"#6B6B99\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"button({\n title: \"COUNTER-IMITATING BUTTON\",\n value: \"CLICK ME!\",\n desc: \"SO MANY CLICKS...\",\n buttonStyle: {\n background: \"#7295FF\",\n color: \"white\"\n },\n onclick: (objs) => {\n mutable count += 1;\n\n d3.select(objs.button)\n .style(\"background\", \"#6786E5\")\n .interrupt()\n .transition()\n .duration(300)\n .style(\"background\", \"#7295FF\");\n\n if (mutable count > 0 && objs.output === \"\") {\n objs.output = d3\n .select(objs.div)\n .insert(\"a\", \"div.desc\")\n .attr(\"class\", \"output\")\n .style(\"margin-left\", \"5px\")\n .style(\"font-size\", \"11px\")\n .style(\"cursor\", \"pointer\")\n .style(\"border\", \"0.5px solid black\")\n .style(\"border-radius\", \"5px\")\n .style(\"padding\", \"5px\")\n .on(\"click\", function () {\n this.remove();\n objs.output = \"\";\n mutable count = 0;\n })\n .html(\"RESET\");\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2203,"value":"mutable count = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2303,"value":"md`**Inline buttons.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2306,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"mutable guessTheMovie = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2470,"value":"md`**Bonus:** single-use button. Click only after a careful consideration!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"viewof singleUseButton = button({\n value: \"YOCO*!\",\n buttonStyle: {\n background: \"#F4ED47\",\n \"font-weight\": 600,\n width: \"70px\",\n height: \"70px\",\n border: \"1px solid black\",\n \"border-radius\": \"50%\"\n },\n divStyle: {\n width: \"125px\",\n \"text-align\": \"center\"\n },\n onclick: ({ button, div }) =>\n d3\n .select(button)\n .transition()\n .duration(400)\n .style(\"width\", \"0px\")\n .style(\"height\", \"0px\")\n .style(\"font-size\", \"0px\")\n .style(\"opacity\", 0)\n .on(\"end\", () => {\n div.update(\"it was nice to meet yooooou...\");\n div.remove();\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2495,"value":"md`Button says: **${singleUseButton}**\n\n*You Only Click Once.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2900,"value":"md`---\n## API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2903,"value":"md`\n~~~js\nfunction button({\n~~~\n~~~js\n value: \"button's label\",\n title: 'some title',\n desc: 'some description',\n~~~\n

\n**[element]**\n\nFor the next two arguments, replace [element] with one of the following: [title, button, desc, div *(element that ties the others together)*].\n~~~js\n [element]Style: {\n width: '150px',\n color: 'white',\n ... // other CSS styles\n },\n [element]Attrs: {\n id: 'button1',\n class: 'cool-button',\n ... // other attributes\n },\n~~~\n

\n~~~js\n theme: 'white', // one of [default, white]\n initialize: false, // if true, onclick will be triggered when input is created\n~~~\n

\n**onclick**\n\n~~~js\n onclick: (objs) => {\n // 🧙‍♀️ magic stuff happens here 🧙‍♂️ \\\\\\\\\n }\n~~~\nobjs object holds title, button, desc, div elements. You can also update the button's value by using objs.div.update method.\n\nCheck the code of the examples above, to see how you can use all of them!\n~~~js\n})\n~~~ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3408,"value":"md`If you have any thoughts or suggestions please leave a comment or fork this notebook!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"md`---\n### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"button = (settings = {}) => {\n if (typeof settings == \"string\") {\n return input({ value: settings }, \"button\");\n } else {\n return input(settings, \"button\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3469,"value":"checkbox = (settings = {}) => {\n if (typeof settings == \"string\") {\n return input({ value: settings }, \"checkbox\");\n } else {\n return input(settings, \"checkbox\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2931,"value":"select = (settings = {}) => {\n if (\n typeof settings.options != \"object\" ||\n Object.keys(settings.options).length == 0\n ) {\n return \"Please provide at least one option!\";\n }\n\n if (Array.isArray(settings.options)) {\n settings.options = settings.options.reduce(\n (obj, key) => Object.assign(obj, { [key]: key }),\n {}\n );\n }\n\n let options = \"\";\n for (let [key, value] of Object.entries(settings.options)) {\n options += ``;\n }\n\n settings.value = options;\n settings.additionalElement = {\n name: \"caret\",\n value: ``\n };\n\n return input(settings, \"select\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"slider = (settings = {}) => {\n settings.min =\n settings.min == undefined ? settings.max - 1 || 0 : settings.min;\n settings.max =\n settings.max == undefined ? settings.min + 1 || 1 : settings.max;\n settings.value =\n settings.value == undefined\n ? (settings.min + settings.max) / 2\n : settings.value;\n settings.step =\n settings.step ||\n (settings.max > settings.min\n ? (settings.max - settings.min) / 10\n : (settings.min - settings.max) / 10) ||\n 0.1;\n\n settings.utilities = {};\n\n if (settings.background) {\n settings.utilities.background = setSliderBackground;\n }\n\n if (settings.highlight) {\n settings.utilities.highlight = highlightSlider;\n }\n\n return input(settings, \"slider\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"setGlobalStyles = function (style) {\n d3.selectAll(\".inputStyles\")\n .data([style])\n .enter()\n .append(\"style\")\n .attr(\"class\", \"inputStyles\")\n .html(themes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"md`---\n### CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:"$43:body"