2b:null 2c:["$","title",null,{"children":"Rects in a table | Philippe Rigovanov | Observable"}] 31:[] 2f:{"id":"3b47cee17bddd70f","slug":null,"title":"Rects in a table","thumbnail":"450c09f4809efed82bb195e6a691f6d67abb9a6812a1f1225fe0808588791cdb","access_level":"public","create_time":"$D2022-12-01T18:59:33.040Z","update_time":"$D2022-12-01T18:59:33.040Z","view_time":null,"first_public_time":"$D2022-12-01T18:59:33.040Z","has_unpublished_edits":null,"fork":{"id":"5e59e229ae9e516c","slug":"rects-in-a-table","title":"Rects in a table","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b5ee25cc13065361","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":"starter_2024"},"version":128,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"968f76daa2a26d11","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":null}],"members":[{"type":"individual","id":"968f76daa2a26d11","login":"a1ip","name":"Philippe Rigovanov","avatar_url":"https://avatars-next.observableusercontent.com/6359e02dc30dad37dc8aeff508f64823d0f57f42e9b940688bdd1af508bb839c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rects in a table","cells":[{"id":0,"value":"# Rects in a table\n\n[Oliver asks](https://talk.observablehq.com/t/can-i-fill-a-table-cell-with-a-rect/7301):\n\n>I have a table and I would like to have a rect inside, actually two, like a single stacked barchart.\nAnd I want it to fill the whole cell but not be bigger so that it would squish the rest.…\n>\n>My table is a data table, but there are some summary sparklines here and there and I found that I can probably add a lot by showing a ratio as a horizontal barchart, where one can directly compare the rows one after another without gaps.\n\nLet’s make an example with the _penguins_ sample dataset (auto-loaded in notebooks):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"And let’s make a single stacked bar showing the ratio of culmen (i.e. beak) length to depth. I don’t know if this is how I’d choose to visualize that, but it’ll work as a demo:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"penguin = penguins[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"length = penguin.culmen_length_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"depth = penguin.culmen_depth_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"Now we can make a function that draws that for any penguin, or at least for any penguin in the data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"makeBar = (penguin) => {\n const length = penguin.culmen_length_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm);\n const depth = penguin.culmen_depth_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm);\n return htl.html``\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Now we can pass in any penguin and get a bar:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"makeBar(penguins[100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"makeBar(penguins[300])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"[Inputs.table](https://observablehq.com/@observablehq/input-table) lets you pass in a custom formatter for any column, which can return any DOM node, including an SVG. First I’ll add a column to the data with a numeric version of the ratio, so we can sort by it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"penguins1 = penguins.map((d) => ({...d, ratio: d.culmen_length_mm / d.culmen_depth_mm}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"And then format that column as a bar in the table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"Inputs.table(\n penguins1,\n { format: { ratio: (_, i, data) => makeBar(data[i]) } }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"Or you can use a plain HTML table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"\n \n \n \n \n \n \n \n \n ${penguins.slice(0, 30).map(penguin => htl.html`\n \n \n \n `)}\n \n

Length	Depth	Ratio
${penguin.culmen_length_mm}	${penguin.culmen_depth_mm}	${makeBar(penguin)}

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"