29:null 2a:["$","title",null,{"children":"HTML Selectors + SVGs in a Single Cell | Stephanie Tuerk | Observable"}] 2f:T716,namedColors = { var colors = "black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua orange aliceblue antiquewhite aquamarine azure beige bisque blanchedalmond blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen gainsboro ghostwhite gold goldenrod greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow limegreen linen magenta mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite oldlace olivedrab orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna skyblue slateblue slategray slategrey snow springgreen steelblue tan thistle tomato turquoise violet wheat whitesmoke yellowgreen rebeccapurple".split(' '); const sorted = colors.sort((a, b) => { a = d3.hsl(a); b = d3.hsl(b); if (!a.h) return -1; if (!b.h) return 1; var aSort = a.l > 0.85 ? a.l : -a.h; var bSort = b.l > 0.85 ? b.l : -b.h; return aSort < bSort ? -1 : aSort > bSort ? 1 : 0; }).reverse(); return sorted; }30:[] 2d:{"id":"9fb491c68c6756da","slug":"html-selectors-svgs-in-a-single-cell","title":"HTML Selectors + SVGs in a Single Cell","thumbnail":"eb72050814639aa3142c70dd6b6c6b8c316591f20292fab2ae375b280c6d5cf6","access_level":"public","create_time":"$D2020-04-08T22:57:10.024Z","update_time":"$D2020-05-30T04:16:06.336Z","view_time":null,"first_public_time":"$D2020-04-09T00:28:15.173Z","has_unpublished_edits":null,"fork":{"id":"cecc84a947c9aad6","slug":"mpr-data-helpers","title":"MPR Data Helpers","owner":{"id":"751d093900e99649","login":"mathematica","name":"Mathematica"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fb1662282f83cbbe","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":"starter_2024"},"version":238,"publish_version":238,"role":null,"authored":false,"authors":[{"type":"individual","id":"06c9c56537cc9419","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":null}],"members":[{"type":"individual","id":"06c9c56537cc9419","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"HTML Selectors + SVGs in a Single Cell","cells":[{"id":0,"value":"md`# HTML Selectors + SVGs in a Single Cell\n\nHTML Selectors and SVGs, styled by selections from the selectors, in a Single Cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"cell = {\n const div = document.createElement('div');\n div.setAttribute('id', 'main-div');\n const formHtml = makeSelectorGroup(sampleSelectionConfigObject);\n div.appendChild(formHtml)\n const selectionVals = formValue(formHtml);\n \n const updateSelectVals = () => {\n const selectVals = formValue(d3.select('#main-div').select('form').node())\n const svgs = d3.select('#main-div').selectAll('rect')\n .attr('fill', (d) => selectVals[d.name]);\n }\n\n d3.select(div).selectAll('select')\n .on('change', () => { updateSelectVals() });\n \n const svg = d3.select(div).append('svg')\n svg.selectAll('rect')\n .data(sampleSelectionConfigObject.dimensions)\n .join('rect')\n .attr('width', 100)\n .attr('height', 100)\n .attr('x', (d, i, nodes) => i * 120)\n .attr('y', 20)\n .attr('fill', d => selectionVals[d.name])\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`The selectors here were made with (some of) the helper functions below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`### Selector helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`The **makeSelectorGroup** function injests a configuration object and makes a group containing single or multi select dropdowns, or checkbox toggles from it. The result of the function should be passed to Mike Bostok's **form** function. The **sampleSelectionConfigObject** is a sample of the config object this function ingests.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function makeSelectorGroup(selection) {\n return html``\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function makeSingleDropdown(selectorObj, groupName) {\n return html`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function makeMultiDropdown(selectorObj, groupName) {\n return html`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function makeCheckboxToggle(selectorObj, groupName) {\n const isOn = selectorObj.selected\n return isOn ? \n html`` :\n html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"sampleSelectionConfigObject = ({\n group: 'colors',\n dimensions: [\n {\n name: 'colors-1',\n title: 'Select a color',\n instructions: 'Select your color',\n type: 'single',\n values: namedColors,\n selected: namedColors[24]\n },\n {\n name: 'colors-2',\n title: 'Select a color',\n instructions: 'Select your color',\n type: 'single',\n values: namedColors,\n selected: namedColors[21]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import {form, formValue} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"