31:[] 2f:{"title":"Set background color of table cell with D3","cells":[{"id":0,"value":"# Set background color of table cell with D3\nOliver writes in the forum: \n\n> I am trying to set a background of a table cell via d3.scales like having \n>`const scale = d3.scaleSequential(domain, d3.interpolateReds);`\n\nHere’s an example of that scale with a domain `[0, 10]`. One table cell has its background color set to `scale(1)`, which comes out to ${scale(1)}. To show the whole range of colors, the other table cell uses the value of the slider, currently `scale(${i.toFixed(1)})`, which comes out to ${scale(i)}.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"domain = [0, 10]","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"scale = d3.scaleSequential(domain, d3.interpolateReds);","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof i = Inputs.range(domain, {label: \"Change color\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"myTable = {\n const node = htl.html`\n \n \n

Hello	Oliver
Love,	Toph

`;\n\n // Set background color for your name to constant color\n d3.select(node).select(\".you\").style(\"background-color\", scale(1));\n \n // Set background color for my name to change with the slider\n d3.select(node).select(\".me\").style(\"background-color\", scale(i));\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"See more: [Beware d3.select on Observable](https://observablehq.com/@tophtucker/beware-d3-select-on-observable).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}