2b:null 2c:["$","title",null,{"children":"Genuary 24 / 18 - Shapes with Pattern | Bairui Su | Observable"}] 31:Ta93,// From https://observablehq.com/@tomshanley/cheysson-color-palettes viewof selectPalette = { const defaultPalette = "sequential12516026"; function radioLegend(p) { const backgroundcolor = "#f9ece3"; const palette = palettes[p]; const padding = 4; const rectWH = 18 + padding; let svg = d3 .create("svg") .attr("height", rectWH) .attr("width", rectWH * palette.range.length); const defs = svg.append("defs").html(palette.patterns); let rects = svg .selectAll(".rect") .data(palette.rangeURLs) .enter() .append("rect") .attr("x", (d, i) => i * rectWH + padding) .attr("y", padding) .attr("width", rectWH - padding) .attr("height", rectWH - padding) .style("fill", (d) => d) .style("stroke", "black"); return svg.node(); } function createInput(typeP) { let inputs = []; typeP.forEach(function (p) { let isChecked = p == defaultPalette ? "checked" : ""; inputs.push(html`

${p}
${radioLegend(p)}

`); }); return inputs; } const mobileMenu = width < 700 ? true : false; if (mobileMenu) { let formSelect = 1; let keys = Object.keys(palettes).sort(); let options = keys.map((k) => html`