2e:null 2f:["$","title",null,{"children":"radialGradient color playground | mengy | Observable"}] 34:[] 32:{"id":"4e0e701c8783704c","slug":"radialgradient-color-playground","title":"radialGradient color playground","thumbnail":"9c8ba3639dbed045d6d148240cf5b128b820741a892abb5735b2b754300729d3","access_level":"public","create_time":"$D2021-04-08T18:49:44.059Z","update_time":"$D2021-04-09T13:29:12.964Z","view_time":null,"first_public_time":"$D2021-04-09T13:29:18.660Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"0d65eae2adbeb952","login":"mydu","name":"mengy","avatar_url":"https://avatars-next.observableusercontent.com/3188b4d63eff88030fd3762c8fa7582e67891245915509e293cc10700720c775","tier":"starter_2024"},"version":275,"publish_version":275,"role":null,"authored":false,"authors":[{"type":"individual","id":"a2a30a0af3e07395","login":"mydu","name":"mengy","avatar_url":"https://avatars-next.observableusercontent.com/3188b4d63eff88030fd3762c8fa7582e67891245915509e293cc10700720c775","tier":null}],"members":[{"type":"individual","id":"a2a30a0af3e07395","login":"mydu","name":"mengy","avatar_url":"https://avatars-next.observableusercontent.com/3188b4d63eff88030fd3762c8fa7582e67891245915509e293cc10700720c775","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"c53f76661e1bc2c6","slug":"utils","title":"Utils","owner":{"id":"0d65eae2adbeb952","login":"mydu","name":"mengy"}},"type":"notebook","body":{"title":"radialGradient color playground","cells":[{"id":0,"value":"md`# radialGradient color playground`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof fromColor = color({\n value: \"#fe938c\",\n title: \"From Color\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof midColor = color({\n value: \"#ead2ac\",\n title: \"Middle Color\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof toColor = color({\n value: \"#4281a4\",\n title: \"To Color\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof fromRadius = slider({\n title: 'from radius',\n value: 0,\n step: 10,\n min: 0,\n max: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof toRadius = slider({\n title: 'to radius',\n value: 50,\n step: 10,\n min: 0,\n max: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"colorDiscrete_a = ['#fe938c', '#e6b89c', '#ead2ac', '#9cafb7', '#4281a4']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"colorDiscrete_b = ['#9c89b8', '#f0a6ca', '#efc3e6', '#f0e6ef', '#b8bedd']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"colorDiscrete2 = [\"#F8CDD6\", \"#1C83A9\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"// colorScale = d3.scaleLinear()\n// .domain([0,0.5, 1])\n// .range([fromColor, midColor,toColor])\n// .interpolate(d3.interpolateRgb.gamma(2.2))\n// colorScale = d3.scaleLinear()\n// .domain(d3.ticks(0,1,5))\n// .range(colorDiscrete)\n// .interpolate(d3.interpolateRgb.gamma(2.2))\n// colorScale = d3.scaleSequential([0,1], d3.interpolateRgb.gamma(2.2)(fromColor, toColor))\n// colorScale = d3.scaleSequential([0,1], d3.interpolateRgbBasis([fromColor, midColor,toColor]))\ncolorScale = d3.scaleSequential([0,1], d3.interpolateRgbBasis(colorDiscrete_a))\n// colorScale = d3.scaleSequential([0,1], d3.interpolateHcl(fromColor, toColor))\n// colorScale = d3.scaleSequential([0,1], d3.interpolateHsl(fromColor, toColor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viz = {\n const svg = d3\n .create(\"svg\")\n .attr('viewBox', [0, 0, width, width])\n\n const gradient = DOM.uid();\n\n \n // const gradient = d3.selectAll('.radial').append(\"defs\").append(\"radialGradient\")\n svg.append(\"radialGradient\")\n .attr(\"id\", gradient.id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"cx\", \"0%\")\n .attr(\"cy\", \"0%\")\n .attr(\"fr\", fromRadius+\"%\")\n .attr(\"r\", toRadius+\"%\")\n .selectAll(\"stop\")\n .data(d3.ticks(0, 1, 10))\n .join(\"stop\")\n .attr(\"offset\", d=>d)\n .attr(\"stop-color\", colorScale);\n const group = svg.append('g')\n .attr('transform', `translate(${width/2}, ${width/2})`)\n\n group.append('circle')\n .attr('r', width/2)\n .attr('fill', `url(#${gradient.id})`)\n\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"lengend = {\n const svg = d3\n .create(\"svg\")\n .attr('viewBox', [0, 0, width, width])\n\n const gradient = DOM.uid();\n\n \n // const gradient = d3.selectAll('.radial').append(\"defs\").append(\"radialGradient\")\n svg.append(\"radialGradient\")\n .attr(\"id\", gradient.id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"cx\", \"0%\")\n .attr(\"cy\", \"0%\")\n .attr(\"fr\", fromRadius+\"%\")\n .attr(\"r\", toRadius+\"%\")\n .selectAll(\"stop\")\n .data(d3.ticks(0, 1, 10))\n .join(\"stop\")\n .attr(\"offset\", d=>d)\n .attr(\"stop-color\", colorScale);\n const group = svg.append('g')\n .attr('transform', `translate(${width/2}, ${width/2})`)\n\n group.append('rect')\n .attr('x', width/100 * fromRadius)\n .attr('width', (toRadius-fromRadius) * width/100)\n .attr('height', 20)\n .attr('fill', `url(#${gradient.id})`)\n\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {slider, radio, text, select, color} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"