30:[] 2e:{"title":"Color Blending","cells":[{"id":0,"value":"md`# Color Blending\n\nExploring SVG opacity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof blend = {\n let el = this;\n \n if (!el) {\n el = DOM.svg(width, height);\n }\n \n let svg = d3.select(el);\n \n let radius = height / 4;\n \n let circles = svg.selectAll(\"circle\").data(colorData);\n circles = circles.enter()\n .append(\"circle\")\n .attr(\"fill\", d => d.color)\n .attr(\"r\", radius)\n .attr(\"cx\", (d,i) => (width / 2) + Math.sin(Math.PI * 2 / colorData.length * i) * radius * 2 / 3)\n .attr(\"cy\", (d,i) => (height / 2) + Math.cos(Math.PI * 2 / colorData.length * i) * radius * 2 / 3)\n .attr(\"opacity\", 0)\n .merge(circles);\n \n circles\n .transition()\n .duration(800)\n .attr(\"fill\", d => d.color)\n .attr(\"opacity\", d => d.opacity);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Choose some colors and corresponding opacities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof colorData = {\n const form = html``;\n form.oninput = () => {\n let result = [];\n for (let i of [1,2,3]) {\n result.push({color: form[\"color\"+i].value, opacity:form[\"op\"+i].value});\n }\n form.value = result;\n }\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof blendMode = select({\n title: \"Also maybe a blend Mode\",\n options: [\"normal\", \"darken\", \"exclusion\"],\n value: \"normal\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`### Piping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"css=html`(Basically for setting up blend-mode: ${blendMode})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}