2e:null 2f:["$","title",null,{"children":"colour interpolation | Sundar Singh | Observable"}] 34:[] 32:{"id":"aa74c4c5b9b051fb","slug":"colour-interpolation","title":"colour interpolation","thumbnail":"674a4127b995cec8c83e3f20045b6901878dae36412a34dffeea528d0f6173f0","access_level":"public","create_time":"$D2018-05-21T17:03:03.179Z","update_time":"$D2018-05-29T12:40:33.253Z","view_time":null,"first_public_time":"$D2018-05-23T14:39:14.726Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"956970941b62fd35","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":"starter_2024"},"version":250,"publish_version":250,"role":null,"authored":false,"authors":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null}],"members":[{"type":"individual","id":"07656ab2121ed222","login":"eesur","name":"Sundar Singh","avatar_url":"https://avatars-next.observableusercontent.com/4c0ac1264472f5654ef5be9ac3d11d1d313563e2999527c3b515373567f637fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a6e42307587729dd","slug":"image-manipulation","title":"image/colour manipulation","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"type":"notebook","body":{"title":"colour interpolation","cells":[{"id":0,"value":"md`# colour interpolation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md `Change the colours, to see how they interpolate between each other, over ${max} steps:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"swatch(colorA)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"colorA = \"#f4f4f4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"swatch(colorB)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"colorB = '#f77e5e'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html`\n

Linear Color Interpolation

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"render(data, colorScale, '#color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"html `\n

Poly-Linear Color Interpolation

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"render(data, divergingScale(pivot), '#color-diverge')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"viewof pivot = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md `pivot point: ${pivot}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"data = d3.range(21)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"max = d3.max(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"colorScale = d3.scaleLinear()\n .domain([0, max])\n .range([colorA, colorB])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"divergingScale = function(pivot) {\n return d3.scaleLinear()\n .domain([0, pivot, max])\n .range([colorA, colorB, colorA])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"function render(data, scale, selector) {\n const cells = d3.select(selector).selectAll('div.cell')\n .data(data)\n cells.enter()\n .append('div').merge(cells)\n .classed('cell', true)\n .style('background-color', d => scale(d))\n .text(d => d)\n return `rendered to ${selector} with domain:[${scale.domain()}]`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"function swatch(color) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"html`\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"