2f:Tcef,table1 = htl.html`

	Band	Date	Location	State	City	Ticket Price [EUR]	Act	Notes	Unnamed: 8	Unnamed: 9	...	Unnamed: 17	Unnamed: 18	Unnamed: 19	Unnamed: 20	Unnamed: 21	Unnamed: 22	Unnamed: 23	Unnamed: 24	Unnamed: 25	Unnamed: 26
0	Machine Head	19.04.2018	Gasometer	Austria	Vienna	39,99	Headliner	NaN	NaN	NaN	...	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN
1	Scorpions	02.08.2019	Burg Clam	Austria	Vienna	72,90	Headliner	NaN	NaN	NaN	...	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN
2	Battle Beast	22.02.2020	Gasometer	Austria	Vienna	NaN	Support	NaN	NaN	NaN	...	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN
3	Powerwolf	06.11.2018	Arena Wien	Austria	Vienna	34,50	Headliner	Wolfsnächte	NaN	NaN	...	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN
4	Slash	10.02.2019	Gasometer	Austria	Vienna	57,99	Headliner	NaN	NaN	NaN	...	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN	NaN

5 rows × 27 columns

`30:Tab8,table2 = htl.html`

	Band	Date	Location	State	City	Test Column	Ticket Price [EUR]	Act	Notes
488	Stoned Ponys	29.05.2013	röda	Austria	Steyr	NaN	NaN	Support	NaN
489	Eclipse	05.09.2023	Szene Wien	Austria	Vienna	NaN	NaN	Headliner	Double Headliner Tour
490	Heat	05.09.2023	Szene Wien	Austria	Vienna	NaN	37,00	Headliner	Double Headliner Tour
491	Blind Guardian	17.10.2023	Gasometer	Austria	Vienna	NaN	54,10	Headliner	The God Machine Tour 2023, support: Dawn of Extinction from Spain. missed the second half but they were not that good anyway
492	Carpenter Brut	06.11.2023	Gasometer	Austria	Vienna	NaN	49,90	Headliner	NaN
493	Saltatio Mortis	19.11.2023	Gasometer	Austria	Vienna	NaN	49,90	Headliner	NaN
494	Mr. Hurley und die Pulveraffen	25.11.2023	Szene Wien	Austria	Vienna	NaN	33,90	Headliner	NaN
495	Deathstars	26.11.2023	Szene Wien	Austria	Vienna	NaN	29,00	Headliner	NaN

`31:T6aa,tableToMini = function(data) { var columns = Object.keys(data[0]); // Set the dimensions and gaps var gapX = spacing; var gapY = spacing; var marginTop = 0; var marginLeft = 0; // Create an SVG element var svg = d3.create("svg"); // Create rectangles for each cell var rectangles = svg .selectAll("rect") .data(data, function (d, i) { return i; // Use index as the key function }) .enter() .append("g") .attr("transform", function (d, i) { var rowY = marginTop + i * (cellHeight + gapY); return "translate(0," + (rowY + (i > 0 ? marginTop : 0)) + ")"; }) .selectAll("rect") .data(function (d) { return columns.map(function (column) { return { column: column, value: d[column] }; }); }) .enter() .append("rect") .attr("width", cellWidth) .attr("height", cellHeight) .attr("x", function (d, i) { // Calculate the x position with gaps and margin var col = i % columns.length; //return marginLeft + col * (cellWidth + gapX); return col * (cellWidth + gapX) + (i > 0 ? marginLeft : 0); }) .attr("y", function (d, i) { // Calculate the y position with gaps and margin var row = Math.floor(i / columns.length); return marginTop + row * (cellHeight + gapY); }) .attr("fill", "grey"); // Add tooltips to show content rectangles.append("title").text(function (d) { return d.value; }); // Set the SVG width and height based on the number of columns and rows svg .attr("width", columns.length * (cellWidth + gapX) + marginLeft) .attr("height", data.length * (cellHeight + gapY) + marginTop); return svg.node(); }32:T13eb,createSummaryVisualization = function ( data, referenceData, showAdded = true, showRemoved = true, addColor = "#66C2A5", removeColor = "#F05268", showContent = true ) { var columns = Object.keys(data[0]); var referenceColumns = referenceData.length > 0 ? Object.keys(referenceData[0]) : []; // Determine added and removed columns var addedColumns = referenceColumns.filter( (column) => !columns.includes(column) ); var removedColumns = columns.filter( (column) => !referenceColumns.includes(column) ); // Determine added and removed rows var addedRows = showAdded ? referenceData.slice(data.length) : []; var removedRows = showRemoved ? data.slice(referenceData.length) : []; // Create an array of all columns var allColumns = Array.from(new Set([...columns, ...referenceColumns])); console.log("allcols", allColumns); console.log("columns", columns); if (!showAdded) { allColumns = allColumns.filter((column) => !addedColumns.includes(column)); } if (!showRemoved) { allColumns = allColumns.filter( (column) => !removedColumns.includes(column) ); } console.log("allcols", allColumns); // Set the dimensions and gaps var gapX = spacing; var gapY = spacing; var marginTop = 0; var marginLeft = 0; // Create an div element var div = d3.create("div"); div .style("display", "grid") .style( "grid-template-columns", `repeat(${allColumns.length}, ${showContent ? "min-content" : "1fr"})` ) .style( "grid-template-rows", `repeat(${data.concat(addedRows).length}, auto)` ) .style("gap", "1px") .style("width", "auto"); const scrollWrapper = d3.create("div"); scrollWrapper.style("overflow-x", "scroll"); scrollWrapper.node().appendChild(div.node()); // Append the div's DOM node to the scrollWrapper's DOM node // Create groups for each row var rows = div .selectAll("div.row") .data(data.concat(addedRows)) // Include added rows .enter() .append("div") .classed("row", true) .style("display", "grid") .style("grid-column", "1 / -1") .style("grid-template-columns", "subgrid") .style("grid-template-rows", "subgrid"); // .attr("transform", function (d, i) { // var rowY = i * (cellHeight + gapY); // return "translate(0," + (rowY + (i > 0 ? marginTop : 0)) + ")"; // }); // Create rectangles for each cell within the rows var rectangles = rows .selectAll("div.cell") .data(function (d, i) { return allColumns.map(function (column) { if (i < data.length) { // original rows return { column: column, value: d[column], rowIndex: i }; } else { // new rows return { column: column, value: referenceData[i][column], rowIndex: i }; } }); }) .enter() .append("div") .classed("cell", true) .style("aspect-ratio", showContent ? "" : "1 / 1") .style("min-width", "1px") .style("min-height", "1px") .style("text-overflow", "clip") .style("overflow", "hidden") .style("white-space", "nowrap") .style("font-size", "0.66em") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "start") .style("justify-content", "center") .attr("title", (d) => d.value) .html((d) => { if (!showContent) return; if (removedColumns.includes(d.column)) { // return ` // ~~${referenceData[d.rowIndex]?.[d.column]}~~ // ` } else if (addedColumns.includes(d.column)) { } else if (d.rowIndex >= data.length) { } else if (d.rowIndex >= referenceData.length) { // return ` // ~~${referenceData[d.rowIndex]?.[d.column]}~~ // ` } else if (d.value !== referenceData[d.rowIndex]?.[d.column]) { return ` ~~${referenceData[d.rowIndex]?.[d.column]}~~ ${d.value} `; } return d.value; }) // .style("height", cellHeight+"px") // .attr("x", function (d, i) { // var colIndex = allColumns.indexOf(d.column); // return colIndex * (cellWidth + gapX) + (i > 0 ? marginLeft : 0); // }) .style("background", function (d) { //TODO cells of added columns for removed rows white // TODO cells of removed columns for added rows white if (removedColumns.includes(d.column)) { return removeColor; // Removed column } else if (addedColumns.includes(d.column)) { return addColor; // Added column } else if (d.rowIndex >= data.length) { return addColor; // Added row } else if (d.rowIndex >= referenceData.length) { return removeColor; // removed row } else if (d.value !== referenceData[d.rowIndex]?.[d.column]) { return "#FBE156"; // changed cell } return "#F5F5F5"; // Unchanged cells }); // Add tooltips to show content rectangles.append("title").text(function (d) { return d.value; }); return scrollWrapper.node(); }33:T7d2,//Depracted tableDiff = function(data, referenceData, addOrRemoveColor) { var columns = Object.keys(data[0]); var referenceColumns = Object.keys(referenceData[0]); console.log('refColumns', referenceColumns) // Set the dimensions and gaps var cellWidth = 4; var cellHeight = 4; var gapX = 1; var gapY = 1; var marginTop = 0; var marginLeft = 0; // Create an SVG element var svg = d3.create("svg"); // Create groups for each row var rows = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function (d, i) { var rowY = i * (cellHeight + gapY); return "translate(0," + (rowY + (i > 0 ? marginTop : 0)) + ")"; }); // Create rectangles for each cell within the rows var rectangles = rows.selectAll("rect") .data(function (d, i) { return columns.map(function (column) { return { column: column, value: d[column], rowIndex: i }; }); }) .enter() .append("rect") .attr("width", cellWidth) .attr("height", cellHeight) .attr("x", function (d, i) { var col = columns.indexOf(d.column); return col * (cellWidth + gapX) + (i > 0 ? marginLeft : 0); }) .attr("fill", function (d, i) { var col = columns.indexOf(d.column); if (referenceColumns.indexOf(d.column) === -1 || referenceData.length <= d.rowIndex) { return addOrRemoveColor; // Column removed or added } else { var referenceValue = referenceData[i]?.[d.column]; return referenceValue && d.value === referenceValue ? '#F5F5F5' : "#FBE156"; } }); // Add tooltips to show content rectangles.append("title").text(function (d) { return d.value; }); // Set the SVG width and height based on the number of columns and rows svg .attr("width", columns.length * (cellWidth + gapX) + (columns.length - 1) * marginLeft) .attr("height", data.length * (cellHeight + gapY) + (data.length - 1) * marginTop); return svg.node(); } 34:[] 2d:{"title":"Responsive HTML TACOs with CSS Grid 🌮","cells":[{"id":0,"value":"# Responsive HTML TACOs with CSS Grid 🌮\n\nVisualizing HTML `` differences similar to TACO.\n\n> 📜TACO: Visualizing Changes in Tables Over Time\n> Christina Niederer, Holger Stitz, Reem Hourieh, Florian Grassinger, Wolfgang Aigner, Marc Streit\n> IEEE Transactions on Visualization and Computer Graphics (InfoVis '17), 24(1): 677-686, doi:[10.1109/TVCG.2017.2745298](https://doi.org/10.1109/TVCG.2017.2745298), 2018. ","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"## The Settings","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"viewof cellWidth = Inputs.range([1, 10], { label: \"Cell Width\", step: 1, value: 4 })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"viewof cellHeight = Inputs.range([1, 10], {label: \"Cell Height\", step: 1, value: 4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof spacing = Inputs.range([0, 10], {label: \"Cell Spacing\", step: 1, value: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"## The Tables\n### Version 1","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"table1json = tabletojson.convert(table1.outerHTML, { useFirstRowForHeadings: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"tab1vis = tableToMini(table1json[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"### Version 2\n* Removed a bunch of columns (Unnamed ...)\n* print tail of the table (491-495) instead of head (0-4)\n* Introduce new column \"Test Column\"\n* Insert additional rows","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"table2json = tabletojson.convert(table2.outerHTML, {\n useFirstRowForHeadings: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"tab2vis = tableToMini(table2json[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"## The Diff\n### Changes to Version 1\n* What was changed?\n* What has been *removed*?","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"createSummaryVisualization(table1json[0], table2json[0], false, true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"### Changes in Version 2\n* What was changed?\n* What has been *added*?","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"// pass table2 two first\ncreateSummaryVisualization(table2json[0], table1json[0], false, true, '#F05268', '#66C2A5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"### Unified Diff","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"createSummaryVisualization(table1json[0], table2json[0], true, true, '#66C2A5', '#F05268')","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"createSummaryVisualization(table2json[0], table1json[0], true, true, '#66C2A5', '#F05268', false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"### Behind the Scenes\n\nConversion of HTML To JSON using: https://www.npmjs.com/package/tabletojson","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"tabletojsonLib = import(\"https://cdn.skypack.dev/tabletojson@4.0.1?min\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"tabletojson = tabletojsonLib.tabletojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"createSummaryVisualization(\n table1json[0],\n [],\n true,\n true,\n \"#F05268\",\n \"#F5F5F5\",\n false\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}