34:["$","title",null,{"children":"30DayChartChallenge Day 29 Black/White | Daniel Tan | Observable"}] 3c:T7fa,chart2 = { const palette = palettes[selectPalette]; const domain = palette.range.map((d, i) => i); const fill = d3 .scaleOrdinal() .domain(domain) .range(palette.rangeURLs); let svgWidth = 1200; const svg = d3 .create("svg") .attr("viewBox", [0, 0, svgWidth, 620]) .style("background-color", "FFFFFF"); const defs = svg.append("defs").html(palette.patterns); //https://observablehq.com/@mbostock/u-s-state-map const path = d3.geoPath(); const us = await FileAttachment("states-albers-10m.json").json(); let map = svg.append("g").attr("transform", "translate(230, 0)"); let states = map .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .enter() .append("g"); states .append("path") .attr("fill", function(d, i) { return fill(Math.floor(Math.random() * 5)); }) .attr("d", path) .attr("stroke", "black") .attr("stroke-width", "2") .attr("stroke-linejoin", "round"); let legendItemWH = 50; let legend = svg.append("g").attr("transform", "translate(10, 43)"); legend .append("text") .text("Cheysson Color Palettes") .attr("x", 0) .attr("y", -10) .style("font-size", 22) .style("font-weight", "bold"); legend .append("text") .text("#30DayChartChallenge \nDay 29 Black/White") .attr("x", 0) .attr("y", 10) .style("font-size", 14); let legendItems = legend .selectAll(".legend-item") .data(palette.rangeURLs.slice(0,5)) .enter() .append("g") .attr("transform", (d, i) => "translate(0," + i * (legendItemWH + 4) + ")"); legendItems .append("text") .text((d, i) => i + 1) .attr("x", legendItemWH + 5) .attr("y", legendItemWH / 2 + 5) .attr("dy", "0.35em"); //.style("text-anchor", "middle"); legendItems .append("rect") .attr("x", 0) .attr("y", 20) .attr("width", legendItemWH) .attr("height", legendItemWH) .style("fill", d => d) .style("stroke", "black"); return svg.node(); }3d:T49a,taster = { function createTaster(typeP) { let inputs = []; typeP.forEach(function(p) { inputs.push(html`

${radioLegend(p)}

`); }); return inputs; } const form = html` `; return form; }3e:T72e,viewof selectPalette = { const defaultPalette = "category12511021"; function createInput(typeP) { let inputs = []; typeP.forEach(function(p) { let isChecked = p == defaultPalette ? "checked" : ""; inputs.push(html`

${p}
${radioLegend(p)}

`); }); return inputs; } if (mobileMenu) { let formSelect = 1; let options = keys.map(k => html`

${palette.displayName}