31:Tb5f,function chart_rectangle_data(rectangles_as_arrays, number_columns = 5, text_to_print = "df %>% select(x,z)") { // Calculate the width and height based on cell size and spacing const numColumns = number_columns; // Number of columns const numRows = 3; // Number of rows const cellWidth = width_cell ; // Width of each cell const cellHeight = height_cell ; // Height of each cell const spaceBetweenCells = space_between_cells; // Space between cells const tot_width = 50 + numColumns * cellWidth + numColumns*(numColumns - 1) * spaceBetweenCells; const tot_height = numRows * cellHeight + numRows*(numRows ) * spaceBetweenCells; const zoom = d3.zoom() .scaleExtent([1, 30]) .on("zoom", zoomed); // create our outer SVG element with a size of 500x100 and select it const svg = d3.create("svg") .attr("width", tot_width+140) .attr("height", tot_height+100) .attr("viewBox", `0 0 ${tot_width+140} ${tot_height+100}`) // Draw the rectangles svg.selectAll("rect") .data(rectangles_as_arrays) .join("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .attr("fill", d => d.color) .attr("opacity", d => d.opacity); // Add the text if it's not null svg.selectAll("text") .data(rectangles_as_arrays) .join("text") .attr("x", d => d.x + d.width / 2) // Center text horizontally .attr("y", d => d.y + d.height / 2) // Center text vertically .attr("font-size", 12) // Adjust the font size as needed .attr("fill", "#000000") .attr("text-anchor", "middle") // Center align text horizontally .attr("dominant-baseline", "middle") // Center align text vertically .text(d => (d.text !== undefined && d.text !== null) ? d.text : ""); // Add text only if not null if (text_to_print == null){ return svg.node(); } // Add the text const text = text_to_print ; const textX = (tot_width / 2) - (text.length * 5); // Calculate X position dynamically const textY = 30; // Adjust the vertical position as needed svg.append("text") .attr("x", 20) .attr("y", 30) //.attr("font-family", "Book Antiqua") .attr("font-size", 20) // Adjust the font size as needed .attr("fill", "#000000") .text(text); return svg.node() ; // For future me: create an animation function zoomed({transform}) { svg.attr("transform", transform); } function zooming() { const [x, y] = [0,100]; svg.transition().duration(2500).call( zoom.transform, d3.zoomIdentity.translate(tot_width / 2, tot_height / 2).scale(2)//.translate(-x, -y) ); } function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()) ); } //return Object.assign(svg.node(), { // zoomRandom: zooming, // zoomReset: reset //}); }32:T5d6,function create_data_as_rectangles( { anchor_left = [20,50], numColumns = 3, numRows = 3, number_data = 1, space_between_dataset = 50, operation = "select", values = null } ){ //const anchor_left = [20, 50]; //const numColumns = 3 ; //const numRows = 3 ; // Define colors for each column const initial_colors = ["#00a500", "#db951b", "#1b7fdb"]; const initial_data = create_initial_dataset( { anchor_left : anchor_left, numColumns : numColumns, numRows : numRows, width_cell : width_cell, height_cell : height_cell, space_between_cells : space_between_cells, colors : initial_colors, colnames : ['x','y','z'] } ) ; if (number_data == 1){ return initial_data } const tot_width = numColumns * width_cell + numColumns*(numColumns - 1) * space_between_cells ; const secondRectanglesData = create_dataset_after_mutate( { anchor_left: [tot_width + space_between_dataset, 50], number_columns: operation == "select" ? numColumns-1 : numColumns, numRows: 3, width_cell: width_cell, height_cell: height_cell, space_between_cells: space_between_cells, colors: operation == "select" ? [initial_colors[0], initial_colors[1]] : initial_colors, colnames: operation == "select" ? ["x", "z"] : ["x", "a", "b"] }); // Append the second series to the initial series const combinedRectanglesData = initial_data.concat(secondRectanglesData); return combinedRectanglesData; } 33:[] 2f:{"title":"Illustrating tidy operations in different languages","cells":[{"id":0,"value":"# Illustrating tidy operations in different languages\n\n__Work in progress__. Right now, I illustrate concepts based on `dplyr` verbs but in a few weeks I am going to do that also on `Pandas` or `SQL` concepts.","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"viewof langage = Inputs.radio(\n ['dplyr','data.table','Pandas','SQL'],\n {\n value: \"dplyr\", disabled: ['data.table'],\n format: x => html`${x}`\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"In most cases, I am assuming we start with the following dataset","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"html`

Initial dataset

${chart_one_sided}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"chart_one_sided = chart_rectangle_data(one_data_initial, 3, null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"## `select`\n\nSelecting a subset of columns","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"code_select = {\n if (langage == \"dplyr\") return \"df %>% select(x, z)\"\n if (langage == \"Pandas\") return `df.loc[:, [\"x\", \"z\"]]`\n if (langage == \"SQL\") return `SELECT x,z FROM df`\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"chart_two_sided_select = chart_rectangle_data(rectangles_select, 3, code_select)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"## `rename`","pinned":false,"hidden":false,"mode":"md"},{"id":787,"value":"code_rename = {\n if (langage == \"dplyr\") return \"df %>% rename(a = y, b = z)\"\n if (langage == \"Pandas\") return `df.rename({\"a\" : \"y\", \"b\": \"z\"})`\n if (langage == \"SQL\") return `SELECT x, y AS a, z AS b FROM df`\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"chart_two_sided_rename = chart_rectangle_data(rectangles_rename, 6, code_rename)","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"## `mutate`","pinned":true,"hidden":false,"mode":"md"},{"id":794,"value":"code_mutate = {\n if (langage == \"dplyr\") return \"df %>% mutate(a = x+y)\"\n if (langage == \"Pandas\") return `df['a'] = df['x'] + df['y']`\n if (langage == \"SQL\") return `SELECT x, y, z, x+y AS a FROM df`\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"chart_rectangle_data(\n one_data_initial.concat(mutate_data),\n 7,\n \"df %>% mutate(a = x+y)\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"one_data_initial","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"space_between_dataframes = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"anchor_left_second = d3.max(one_data_initial.map(d => d.x + width_cell)) + space_between_dataframes","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"mutate_data = create_dataset_after_mutate(\n {\n anchor_left: [anchor_left_second, 50],\n number_columns: 4,\n numRows: 3,\n width_cell: width_cell, height_cell: height_cell, space_between_cells: space_between_cells,\n colors: [\"#00a500\", \"#db951b\", \"#1b7fdb\", \"#ee6cc6ff\"],\n colnames: [\"x\", \"y\", \"z\", \"a\"],\n values: null\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"## Utilitaires","pinned":true,"hidden":false,"mode":"md"},{"id":284,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"height_cell = 25","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"width_cell = 55","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"space_between_cells = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"one_data_initial = create_data_as_rectangles([20,50], 3, 3, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"rectangles_select = create_data_as_rectangles(\n {\n anchor_left: [20,50],\n numColumns: 3, numRows: 3,\n number_data: 2,\n values: null\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"rectangles_rename = create_data_as_rectangles(\n {\n anchor_left: [20,50],\n numColumns: 3, numRows: 3,\n number_data: 2,\n operation: \"rename\",\n values: null\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"function create_initial_dataset(\n {\n anchor_left = [20, 50],\n numColumns = 3, numRows = 3,\n width_cell, height_cell, space_between_cells,\n colors = [\"#00a500\", \"#db951b\", \"#1b7fdb\"]\n }\n){\n return generateRectanglesData(\n anchor_left, numColumns, numRows, width_cell, height_cell, space_between_cells, colors\n ) ;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"function create_dataset_after_mutate(\n {\n anchor_left = [20, 50],\n number_columns, numRows,\n width_cell, height_cell, space_between_cells,\n colors = [\"#00a500\", \"#1b7fdb\"],\n colnames = [\"x\",\"z\"],\n values = null\n }){\n return generateRectanglesData(\n anchor_left,\n number_columns, numRows, width_cell,\n height_cell, space_between_cells, colors,\n colnames,\n values) ;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"generateRectanglesData(\n [0,120], 3, 3, 200, 100, 100, [\"red\",\"red\",\"red\"],\n [\"x\",\"y\",\"z\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"generateRectanglesData(\n [0,120], 3, 3, 200, 100, 100, [\"red\",\"red\",\"red\"],\n [\"x\",\"y\",\"z\"],\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"function generateRectanglesData(\n anchorLeft, numColumns, numRows, widthCell, heightCell, spaceBetweenCells, colors,\n columns = [\"x\",\"y\",\"z\"],\n values = [[\"a\", \"b\", \"c\"], [\"3\", \"2\", \"1\"], []]\n) {\n \n const rectanglesData = [];\n\n for (let col = 0; col < numColumns; col++) {\n const x = anchorLeft[0] + col * (widthCell + spaceBetweenCells);\n\n // Header cell\n rectanglesData.push(\n createCell(\n x, anchorLeft[1], widthCell, heightCell, colors[col], 1,\n columns[col]\n ));\n\n // Data cells with opacity\n for (let row = 0; row < numRows; row++) {\n const anchorTopCalc = anchorLeft[1] + (row + 1) * (heightCell + spaceBetweenCells);\n rectanglesData.push(\n createRow(x, anchorTopCalc, widthCell, heightCell, colors[col], 0.5, null)\n );\n }\n }\n\n return rectanglesData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"function createCell(x, y, width, height, color, opacity, text) {\n return { x, y, width, height, color, opacity, text };\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"function createRow(x, anchor_top, width_cell, height_cell, color, opacity, text){\n return createCell(x, anchor_top, width_cell, height_cell, color, opacity, text); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"// funny animation : https://observablehq.com/@d3/programmatic-zoom\n//{\n// const form = html``;\n// form.random.onclick = () => chart_two_sided.zoomRandom();\n// form.reset.onclick = () => chart_two_sided.zoomReset();\n// return form;\n// }","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}