36:["$","title",null,{"children":"D3 Color Schemes | Audrey Roy Greenfeld | Observable"}] 3e:T8d7,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3f:T435,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options } = Array.isArray(config) ? {options: config} : config; options = options.map( o => (typeof o === "object" ? o : { value: o, label: o }) ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }40:[] 3a:{"id":"384cb406bd69fd6c","slug":"2d-array-of-d3-schemeoranges/3","title":"D3 Color Schemes","thumbnail":"220b83f01542ebaae8adf86ea5b77d83bf51fd2d69cd445e9287c16bf3535519","access_level":"public","create_time":"$D2019-10-12T04:42:12.103Z","update_time":"$D2019-10-12T05:39:15.012Z","view_time":null,"first_public_time":"$D2019-10-12T05:08:59.074Z","has_unpublished_edits":null,"fork":{"id":"e54c4abc24b17a73","slug":"2d-array-of-d3-schemeoranges/2","title":"2D Array of d3.schemeOranges","owner":{"id":"90e841cf88d04d69","login":"audreyfeldroy","name":"Audrey Roy Greenfeld"}},"stars":0,"starred":false,"owner":{"type":"team","id":"90e841cf88d04d69","login":"audreyfeldroy","name":"Audrey Roy Greenfeld","avatar_url":"https://avatars-next.observableusercontent.com/3d373a731c438f2d3c00430b66ede2708c86b1bcd00b1a4e789dfed0ada12a09","tier":"starter_2024","bio":"Developer, artist, writer, and mother. Core committer to @pydanny 💘My notebooks are for my own personal learning purposes. If you see anything I could be doing better, suggestions would be a huge help.","followed_by_you":false,"follows_you":false},"version":121,"publish_version":121,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d71ae4a4a021327","login":"audreyfeldroy","name":"Audrey Roy Greenfeld","avatar_url":"https://avatars-next.observableusercontent.com/3d373a731c438f2d3c00430b66ede2708c86b1bcd00b1a4e789dfed0ada12a09","tier":null,"bio":"Developer, artist, writer, and mother. Core committer to @pydanny 💘My notebooks are for my own personal learning purposes. If you see anything I could be doing better, suggestions would be a huge help.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5d71ae4a4a021327","login":"audreyfeldroy","name":"Audrey Roy Greenfeld","avatar_url":"https://avatars-next.observableusercontent.com/3d373a731c438f2d3c00430b66ede2708c86b1bcd00b1a4e789dfed0ada12a09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Color Schemes","cells":[{"id":0,"value":"md`# D3 Color Schemes\nHere, k is the size (number of colors). See the [d3-scale-chromatic docs](https://github.com/d3/d3-scale-chromatic/blob/master/README.md) for more info.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof dd = select([\"schemeOranges\", \"schemeBlues\", \"schemeGreens\", \"schemePurples\", \"schemeBuGn\", \"schemeBuPu\", \"schemeGnBu\", \"schemeOrRd\", \"schemePuBuGn\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"chart = {\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"d3[dd]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3[dd].forEach((arr, pos) => displayColorScheme(arr, pos))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"function displayColorScheme(arr, pos) {\n svg.append(\"text\")\n .text(pos)\n .attr('x', 10)\n .attr('y', 50 + pos * 50)\n .attr('alignment-baseline', 'middle')\n arr.map((c, i) => dotSwatch(c, i, pos))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function dotSwatch(color, i, j) {\n svg.append(\"circle\")\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .attr(\"cx\", 50 + i * 50)\n .attr(\"cy\", 50 + j * 50)\n .attr(\"r\", 10)\n .style(\"fill\", color)\n .append(\"svg:title\")\n .text(color)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"svg = d3.create(\"svg\")\n .attr(\"align\", \"center\")\n .attr(\"viewBox\", [0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 35:null