31:T70e,table = (data) => { const node = htl.html`

`; const cols = Object.keys(data[0]); let sort = cols[0]; let reverse = false; function setSort(key) { if (sort === key) { reverse = !reverse; } else { reverse = false; } sort = key; render(); } function render() { const sorted = data.sort((_a, _b) => { let a, b; if (reverse) { a = _b; b = _a; } else { a = _a; b = _b; } return typeof a[sort] === "string" ? a[sort].localeCompare(b[sort]) : d3.ascending(a[sort] || 0, b[sort] || 0); }); const table = htl.html`${cols.map((col) => { return htl.html``; })} ${data.map( (row) => htl.html`${cols.map( (col) => htl.html`` )}` )}

setSort(col)} > ${miniplot( sorted.map((d) => typeof d[col] === "string" ? strToNumber(d[col]) : d[col] ) )} ${col}
${row[col]}

`; if (node.querySelector("table")) node.removeChild(node.querySelector("table")); node.appendChild(table); } render(); return node; }32:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1648602677537.396,"size":13506}] 2f:{"title":"Data-driven table sort icon","cells":[{"id":0,"value":"# Data-driven table sort icon\nWe were talking about how it’s hard to tell whether ▲ or ▼ (or ↑ or ↓) represents ascending sort order in a table header and I wanted to try making the icon actually match the values of the data.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"To-do:\n- Feedforward on hover?\n- Date type, maybe using dots instead of bars, mapping left-to-right time to vertical order\n- Analogous icons for other operations lol (see also: [A filter icon that shows filtering instead of funneling](https://observablehq.com/@tophtucker/a-better-filter-icon?collection=@tophtucker/sketches))","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"data = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"miniplot = (data) =>\n htl.html`

${Plot.areaX(data, { curve: \"step-after\" }).plot({\n width: 100,\n height: 100,\n x: { axis: false },\n y: { axis: false, padding: 0, domain: [data.length - 1, 0] },\n marginTop: 0,\n marginLeft: 0,\n marginBottom: 0,\n marginRight: 0\n })}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"import {strToNumber} from \"@tophtucker/scrapbook\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}