2f:T801,{ const container = html`

`; const table = d3.select(container).append("table"); const thead = table.append("thead"); const columns = data.columns; const th = thead.append("tr") .selectAll("th") .data(columns) .join("th") .text(d => d); const sampleData = data.slice(0, d3.min([data.length, 5])); let oldColor; const show = d3.select(container).select("#show"); // For debug const tr = table.append("tbody") .selectAll("tr") .data(sampleData) .join("tr") .style("background-color", (_, i) => i % 2 ? "lightgray" : null); const td = tr.selectAll("td") .data((d, i) => [...d3.map(Array.from(Array(columns.length).keys()), k => [i, k, d[columns[k]]])]) .join("td") .text(d => d[2]); td.on("mouseover", function(){ oldColor = d3.select(this).attr("background-color"); d3.select(this).style("font-weight", "bold"); // show.text(d3.select(this).data()); const rowSelected = d3.select(this).data()[0][0]; const colSelected = d3.select(this).data()[0][1]; d3.selectAll(th).filter((d, i) => i == colSelected).attr("class", "highlight"); d3.selectAll(td).filter(d => (d[0] !== rowSelected && d[1] !== colSelected)).style("opacity", 0.2); }) .on("mouseout", function(){ d3.select(this).style("background-color", oldColor); d3.select(this).style("font-weight", "normal"); d3.selectAll(td).style("opacity", 1); d3.selectAll(th).classed('highlight', false); }); return container; }30:[{"id":"2e05b22c91f96d47260f24d8c11ea82f30f14a4c5b27d249a90dd1f332f9c5a3f7e37c366a0b2e57f1e9b1939c84d67fe686568c63359fb48d9cc51bb6639c45","href":"https://static.observableusercontent.com/files/2e05b22c91f96d47260f24d8c11ea82f30f14a4c5b27d249a90dd1f332f9c5a3f7e37c366a0b2e57f1e9b1939c84d67fe686568c63359fb48d9cc51bb6639c45","name":"payment.csv","type":"text/csv","lastModified":1695649535154.95,"size":7635}] 2d:{"title":"D3 Custom Table Practice","cells":[{"id":0,"value":"# D3 Custom Table Practice","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"See below for observablehq built-in table support.\n\nSee also\n\n* https://codepen.io/blackjacques/pen/RYVpKZ\n* https://gist.github.com/jfreels/6733593","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"data = FileAttachment(\"payment.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"## Observable built-in data driven table","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"Click `+` and choose `Data-driven table` ","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"\n \n \n \n \n \n \n \n \n ${cars.slice(0, 5).map(car => htl.html`\n \n \n \n `)}\n \n

Name	Fuel economy	Year
${car[\"name\"]}	${car[\"economy (mpg)\"]} mpg	’${car[\"year\"]}

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}