30:[] 2e:{"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"},{"id":5,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"penguin = penguins[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"length = penguin.culmen_length_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"depth = penguin.culmen_depth_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":83,"value":"Now we can pass in any penguin and get a bar:","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"makeBar(penguins[100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"makeBar(penguins[300])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":99,"value":"penguins1 = penguins.map((d) => ({...d, ratio: d.culmen_length_mm / d.culmen_depth_mm}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"And then format that column as a bar in the table:","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"Inputs.table(\n penguins1,\n { format: { ratio: (_, i, data) => makeBar(data[i]) } }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"Or you can use a plain HTML table:","pinned":false,"hidden":false,"mode":"md"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}