2c:null 2d:["$","title",null,{"children":"Set background color of table cell with D3 | Toph Tucker | Observable"}] 32:[] 30:{"id":"bab4c8e5c62932ff","slug":"set-background-color-of-table-cell-with-d3","title":"Set background color of table cell with D3","thumbnail":"d6e078abf02e65bf66e8c61b76e46db461c0e36612db98fd450c6ac749040880","access_level":"public","create_time":"$D2022-09-16T17:28:33.260Z","update_time":"$D2022-09-20T08:55:15.592Z","view_time":null,"first_public_time":"$D2022-09-16T17:43:19.003Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":82,"publish_version":82,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"domain = [0, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"scale = d3.scaleSequential(domain, d3.interpolateReds);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof i = Inputs.range(domain, {label: \"Change color\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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(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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"