31:[] 2f:{"title":"radialGradient color playground","cells":[{"id":0,"value":"md`# radialGradient color playground`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof fromColor = color({\n value: \"#fe938c\",\n title: \"From Color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof midColor = color({\n value: \"#ead2ac\",\n title: \"Middle Color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof toColor = color({\n value: \"#4281a4\",\n title: \"To Color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":162,"value":"colorDiscrete_a = ['#fe938c', '#e6b89c', '#ead2ac', '#9cafb7', '#4281a4']","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"colorDiscrete_b = ['#9c89b8', '#f0a6ca', '#efc3e6', '#f0e6ef', '#b8bedd']","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"colorDiscrete2 = [\"#F8CDD6\", \"#1C83A9\"]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":20,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {slider, radio, text, select, color} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}