2c:null 2d:["$","title",null,{"children":"ods-color-gradient algorithm explained | Frédéric Passaniti | Observable"}] 32:[] 30:{"id":"ab78a58dfeb73cee","slug":"untitled","title":"ods-color-gradient algorithm explained","thumbnail":"f298b747119388ee8ce13d71ae953e7bed7673935697d768de9f2cc0c56dfb9f","access_level":"public","create_time":"$D2020-07-20T10:15:45.981Z","update_time":"$D2020-07-21T10:02:09.514Z","view_time":null,"first_public_time":"$D2020-07-20T10:43:48.765Z","has_unpublished_edits":null,"fork":{"id":"da5b85fbbee1c6d3","slug":"continuous-scales","title":"Continuous scales","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"190d062db242c561","login":"fpassaniti","name":"Frédéric Passaniti","avatar_url":"https://avatars-next.observableusercontent.com/54707367e49ff48f413a075bace8b2dc7605877cbe2acbf85fe7aecbcaef60a8","tier":"starter_2024"},"version":1527,"publish_version":1527,"role":null,"authored":false,"authors":[{"type":"individual","id":"a20140efc14d7638","login":"fpassaniti","name":"Frédéric Passaniti","avatar_url":"https://avatars-next.observableusercontent.com/54707367e49ff48f413a075bace8b2dc7605877cbe2acbf85fe7aecbcaef60a8","tier":null}],"members":[{"type":"individual","id":"a20140efc14d7638","login":"fpassaniti","name":"Frédéric Passaniti","avatar_url":"https://avatars-next.observableusercontent.com/54707367e49ff48f413a075bace8b2dc7605877cbe2acbf85fe7aecbcaef60a8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ods-color-gradient algorithm explained","cells":[{"id":214,"value":"scale_pow = md`# ods-color-gradient algorithm explained\n\n[d3.scalePow](https://github.com/d3/d3-scale#power-scales) creates a power based scale. The transform applied to values is of the type ${tex`y = x^k`} where *k*, the exponent, can be any real number.\n\nFor k=0.3, x within 0 and 1 : it approximates log scale.\n\nFor k=1 : it is a linear scale.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"visualizeScale(\n d3\n .scalePow()\n .exponent(k)\n .domain([0, 1])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"viewof k = slider({ min: 0, max: 10, value: 1, description: \"exponent k\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`And, of course, this applies as well to color scales:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"viewof rgbLow = colorPicker(\"rgb(180, 197, 241)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"viewof rgbHigh = colorPicker(\"rgb(20, 33, 96)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"paint = d3.scalePow()\n .exponent(k)\n .range([rgbLow, rgbHigh])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"html`

\n${d3.ticks(0, 1, 200)\n .map(paint)\n .map(t => ` `)}

\n${d3.ticks(0, 1, 200)\n .map(colorScale)\n .map(t => ` `)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"md`### Then, compute the steps regarding the number of classes\n\nIt's nothing more than creating an array of nbClasses + 1 elements, and defining threashold by divind 1 by (nbClasses + 1) and filling the array\n\nTry it by modifying the nbClasses param and observe tthe steps array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"viewof nbClasses = {\n const form = html``;\n form.i.oninput = () => (form.value = form.i.valueAsNumber);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"steps = new Array(nbClasses + 1).fill(undefined).map((x, i) => i * 1 / nbClasses)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"md`### The value scale if the power scale with the exponent selected earlier`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"valueScale = d3.scalePow().exponent(k).domain([0,1]).range([0,1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"visualizeTicksValues(valueScale, steps)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"md`### Explanation\n\nFor a small k exponent (k<1) :\n- The more x grows, the less the y values grows.\n- Smaller x values get more color variation than big x values, therefore it highlights small x values and mix y big values\n\nRegarding the steps of our gradients, we want the opposite, for small x values, we want a lot a different y colors. Therefore we will get the opposite curbes by using invert. \n\nThe steps are now the following :`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"steps.map(d3.scalePow().exponent(k).domain([0,1]).range([0,1]).invert)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1481,"value":"md`## Threshold scale with nbClasses`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"thresholdScale = d3.scaleThreshold()\n.domain(steps.slice(1, nbClasses).map(d3.scalePow().exponent(k).domain([0,1]).range([0,1]).invert))\n.range(steps.slice(0, nbClasses).map(colorScale))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"html`

\n${d3.ticks(0, 1, 200)\n .map(thresholdScale)\n .map(t => ` `)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"md`# nbClasses undefined\n\nWithout class, no more threashold scale, we simply and basicaly apply the pow scale.\n\nFor x values within 0 and 1 we apply x^k and get the corresponding color within rgbLow-rgbHigh range`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"valueScaleNoClass = d3.scalePow().exponent(k).domain([0,1]).range([rgbLow,rgbHigh])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"html`

\n${d3.ticks(0, 1, 200)\n .map(valueScaleNoClass)\n .map(t => ` `)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"md`# APPENDIX / TECH STUFF / DO NOT READ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"function visualizeScale(scale) {\n const w = Math.min(600, width),\n h = 300,\n m = width > 599 ? 30 : 10;\n const x = d3.scaleLinear()\n .domain(d3.extent(scale.domain()))\n .nice()\n .range([m, w - m]),\n y = d3.scaleLinear()\n .domain(d3.extent(scale.range()))\n .nice()\n .range([h - m, m]),\n svg = d3.create(\"svg\")\n .attr(\"width\", width + 20)\n .attr(\"height\", h + 20),\n g = svg.append(\"g\"),\n line = [];\n\n for (let i = m + 1e-6; i < w - m; i += 1) {\n const X = x.invert(i),\n Y = scale(X),\n j = y(Y);\n line.push([i, j]);\n }\n\n g.append(\"path\")\n .attr(\"d\", \"M\" + line.join(\"L\"))\n .style(\"stroke\", \"black\")\n .style(\"fill\", \"none\");\n\n g.append(\"g\")\n .attr(\"transform\", `translate(${m},0)`)\n .call(d3.axisLeft(y));\n g.append(\"g\")\n .attr(\"transform\", `translate(0,${y(0)})`)\n .call(d3.axisBottom(x));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"function visualizeTicks(scale, tickArguments) {\n const height = 20, m = width > 599 ? 90 : 10;\n\n if (tickArguments === undefined) tickArguments = [];\n\n scale.range([m, width - m]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\").call(d3.axisBottom(scale).ticks(...tickArguments));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"function visualizeTicksValues(scale, tickValues) {\n const height = 20, m = width > 599 ? 90 : 10;\n\n scale.range([m, width - m]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\").call(d3.axisBottom(scale).tickValues(tickValues).tickFormat(d3.format(\",.2f\")));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"