2b:null 2c:["$","title",null,{"children":"Color Blending | Tim Garvin | Observable"}] 31:[] 2f:{"id":"41c85c23521cfb8f","slug":"color-blending","title":"Color Blending","thumbnail":"2eb2cd82ae94a4d2a94fc36e8063a75f1bfa23b91495170d2c62674b145c57c2","access_level":"public","create_time":"$D2018-08-21T19:29:10.537Z","update_time":"$D2021-05-19T15:19:11.642Z","view_time":null,"first_public_time":"$D2018-08-21T21:40:00.576Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"bd83fd4aa63f66d4","login":"tcgarvin","name":"Tim Garvin","avatar_url":"https://avatars-next.observableusercontent.com/0a401f190f78dde3ab907b150924a42cc24ef3250274037aab2c952c0495c664","tier":"starter_2024"},"version":85,"publish_version":85,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a9edae390009386","login":"tcgarvin","name":"Tim Garvin","avatar_url":"https://avatars-next.observableusercontent.com/0a401f190f78dde3ab907b150924a42cc24ef3250274037aab2c952c0495c664","tier":null}],"members":[{"type":"individual","id":"3a9edae390009386","login":"tcgarvin","name":"Tim Garvin","avatar_url":"https://avatars-next.observableusercontent.com/0a401f190f78dde3ab907b150924a42cc24ef3250274037aab2c952c0495c664","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Color Blending","cells":[{"id":0,"value":"md`# Color Blending\n\nExploring SVG opacity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`## Choose some colors and corresponding opacities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`### Piping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"css=html`(Basically for setting up blend-mode: ${blendMode})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"