2c:null 2d:["$","title",null,{"children":"Set background color of table cell with D3 | Oliver | Observable"}] 32:[] 30:{"id":"38b8c6f795d8dc44","slug":"set-background-color-of-table-cell-with-d3","title":"Set background color of table cell with D3","thumbnail":"d411ff9c58f4b570639ec06115cee55827b038fa89f579b07710cde4bc3ec13a","access_level":"public","create_time":"$D2022-09-17T10:51:39.832Z","update_time":"$D2022-09-17T10:59:40.831Z","view_time":null,"first_public_time":"$D2022-09-17T10:52:27.803Z","fork":{"id":"bab4c8e5c62932ff","slug":"set-background-color-of-table-cell-with-d3","title":"Set background color of table cell with D3","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e5023be1d3b7b2f5","login":"8e75de8976307912","name":"Oliver","avatar_url":"https://avatars-next.observableusercontent.com/c948d7719e98f915ce50846737b56e900287f90f671e6bc0fd5887cbba229fa3","tier":"starter_2024"},"version":92,"publish_version":92,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e75de8976307912","login":"8e75de8976307912","name":"Oliver","avatar_url":"https://avatars-next.observableusercontent.com/c948d7719e98f915ce50846737b56e900287f90f671e6bc0fd5887cbba229fa3","tier":null}],"members":[{"type":"individual","id":"8e75de8976307912","login":"8e75de8976307912","name":"Oliver","avatar_url":"https://avatars-next.observableusercontent.com/c948d7719e98f915ce50846737b56e900287f90f671e6bc0fd5887cbba229fa3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":48,"value":"domain = [0, 106]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"scale = d3.scaleSequential(domain, d3.interpolateReds);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"viewof i = Inputs.range(domain, {label: \"Change color\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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(\".table\").select(\".you\").style(\"background-color\", scale(1));\n d3.selectAll(\".you\").style(\"background-color\", scale(1));\n \n // Set background color for my name to change with the slider\n d3.select(\".table\").select(\".me\").style(\"background-color\", scale(i));\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"