2b:null 2c:["$","title",null,{"children":"Color Schemes And Interpolators Picker | Mario Delgado | Observable"}] 31:T643,function colorSchemePicker(config = {}) { let { value, title, description, height, w, schemes } = config; const form = html``; const dropdown = html`

${styles()} ${title ? title : ""}

`; value = value ? schemes.find(d => d.name === value) : schemes[0]; form.value = value.colors ? value.colors : value.k ? d3[`scheme${value.name}`][value.k] : d3[`scheme${value.name}`]; let valueCont = html`

`; let valueViewer = getColorViewer(value, form); valueCont.append(valueViewer); dropdown.append(valueCont); const dropdownContainer = html`

${schemes.map(scheme => { let colorViewer = getColorViewer(scheme, form); colorViewer.onclick = () => { valueCont.removeChild(valueCont.firstChild); valueViewer = getColorViewer(scheme, form); valueCont.append(valueViewer); form.value = valueViewer.value; form.dispatchEvent(new CustomEvent("input")); }; return html`

${colorViewer}

`; })}

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

${description}

` ); return form; }32:T532,viewof allD3Interpolator = colorInterpolatorPicker({ title: "All D3 Interpolator", height: 300, interpolators: [ { name: "BrBG" }, { name: "PRGn" }, { name: "PiYG" }, { name: "PuOr" }, { name: "RdBu" }, { name: "RdGy" }, { name: "RdYlBu" }, { name: "RdYlGn" }, { name: "Spectral" }, { name: "Blues" }, { name: "Greens" }, { name: "Greys" }, { name: "Oranges" }, { name: "Purples" }, { name: "Reds" }, { name: "Viridis" }, { name: "Inferno" }, { name: "Magma" }, { name: "Plasma" }, { name: "Cool" }, { name: "CubehelixDefault" }, { name: "BuGn" }, { name: "BuPu" }, { name: "GnBu" }, { name: "OrRd" }, { name: "PuBuGn" }, { name: "PuBu" }, { name: "PuRd" }, { name: "RdPu" }, { name: "YlGnBu" }, { name: "YlGn" }, { name: "YlOrBr" }, { name: "YlOrRd" }, { name: "Rainbow" }, { name: "Sinebow" }, { name: "Turbo" } ] })33:T649,function colorInterpolatorPicker(config = {}) { let { value, title, description, height, w, interpolators } = config; value = value ? interpolators.find(d => d.name === value) : interpolators[0]; const form = html``; form.value = value.value ? value.value : d3[`interpolate${value.name}`]; const dropdown = html`

${styles()} ${title ? title : ""}

`; let valueCont = html`

`; let valueViewer = getColorViewer(value, form, true); valueCont.append(valueViewer); dropdown.append(valueCont); const dropdownContainer = html`

${interpolators.map(interpolator => { let colorViewer = getColorViewer(interpolator, form, true); colorViewer.onclick = () => { valueCont.removeChild(valueCont.firstChild); valueViewer = getColorViewer(interpolator, form, true); valueCont.append(valueViewer); form.value = valueViewer.value; form.dispatchEvent(new CustomEvent("input")); }; return html`

${colorViewer}

`; })}

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

${description}

` ); return form; }34:T589,function ramp(name, n, form, interpolator, interpolate) { let canvas; let colors; let dark; if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) { colors = d3[`scheme${name}`][n]; dark = d3.lab(colors[0]).l < 50; } else { if (!interpolate) interpolate = d3[`interpolate${name}`]; colors = []; dark = d3.lab(interpolate(0)).l < 50; for (let i = 0; i < n; ++i) { colors.push(d3.rgb(interpolate(i / (n - 1))).hex()); } } if (n < 128) { canvas = svg`