2f:T4ad,categorias_rollup = { const sexo = d3.flatRollup( data, (v) => v.length, (d) => (radios_language === "English" ? diccionario[d.Sexo] : d.Sexo) ); const titulos = d3.flatRollup( data, (v) => d3.sum(v, (d) => d.Meetup), (d) => (radios_language === "English" ? diccionario[d.Tema] : d.Tema), (d) => d.Titulo, (d) => (radios_language === "English" ? diccionario[d.Formato] : d.Formato) ); const org = d3.flatRollup( data, (v) => d3.sum(v, (d) => d.Meetup), (d) => radios_language === "English" ? diccionario[d["Tipo de Organización"]] : d["Tipo de Organización"], (d) => d.Titulo ); const tematicas = d3 .flatRollup( titulos, (v) => v.length, (d) => d[0] ) .sort((a, b) => b[1] - a[1]); const formatos = d3 .flatRollup( titulos, (v) => v.length, (d) => d[2] ) .sort((a, b) => b[1] - a[1]); const organizaciones = d3 .flatRollup( org, (v) => v.length, (d) => d[0] ) .sort((a, b) => b[1] - a[1]); return { Sexo: sexo, Tema: tematicas, "Tipo de Organización": organizaciones, Formato: formatos }; }30:T830,function crearResumen(datos, variable, tiempos) { const this_data = tiempos !== "Todos" && tiempos !== "All" ? datos.filter( (d) => new Date(d.Fecha) >= metadata_tiempos[tiempos][0] && new Date(d.Fecha) <= metadata_tiempos[tiempos][1] ) : datos; // opcion 1 - no filtra duplicados (participantes) // opcion 2 - filtra duplicados (cuando hay más de dos presentadores) let presentaciones = variable === "Sexo" || variable === "Tipo de Organización" ? this_data : quitarDuplicados(this_data); // presentaciones por fecha const array = d3.flatGroup(presentaciones, (d) => d.Fecha); const mapa = d3.flatGroup(presentaciones, (e) => e[variable]); const categorias = mapa .sort((a, b) => b[1].length - a[1].length) .map((d) => d[0]); const vacio = []; array.forEach((d) => { const anteriores = presentaciones.filter( (e) => new Date(e.Fecha) <= new Date(d[0]) ); const tipos = d3.flatGroup(anteriores, (e) => e[variable]); for (var i = 0; i < categorias.length; i++) { const este_tipo = tipos.filter((e) => categorias[i] === e[0]); const esteMeetup = d[1].filter((e) => categorias[i] === e[variable]); let categoria = categorias[i]; const numero = este_tipo.length > 0 ? este_tipo[0][1].length : 0; if (radios_language !== "Español") { categoria = diccionario[categoria]; } vacio.push({ Fecha: new Date(d[0]), [variable]: categoria, Acumulado: este_tipo.length > 0 ? este_tipo[0][1].length : 0, Total: este_tipo.length > 0 ? anteriores.length : 0, Meetup: esteMeetup.length, Indice: i + 1, Curso: d[1][0].Curso }); } }); let selection; if (tiempos !== "Todos" && tiempos !== "All") { selection = vacio.filter( (d) => d.Fecha >= metadata_tiempos[tiempos][0] && d.Fecha <= metadata_tiempos[tiempos][1] ); } else { selection = vacio; } return vacio.sort((a, b) => a.Fecha - b.Fecha || a.indice - b.indice); }31:T4d6,function graficoPorcentaje(data, variable, caption) { const categorias = obtenerCategorias(variable); return Plot.plot({ color: { legend: true, label: caption, domain: categorias, range: variable === "Sexo" ? color.sexo : color.categorias, unknown: color.otros }, y: { label: caption }, marks: [ Plot.areaY(data, { x: "Fecha", y: (d) => (100 * d.Acumulado) / d.Total, fill: variable, z: variable, curve: "bump-x", title: (d) => `${d[variable]}` }), Plot.areaY(data, { x: "Fecha", y: (d) => (100 * d.Acumulado) / d.Total, z: variable, fill: "none", stroke: "black", opacity: 0.4, curve: "bump-x" }), Plot.ruleX(data, { x: "Fecha", stroke: "White", strokeWidth: 1 }), Plot.ruleY([30, 70], { stroke: "#000", opacity: 0.5, strokeDasharray: [2, 2] }), Plot.ruleY([0, 50, 100], { strokeWidth: 2 }), Plot.dot(data, { x: "Fecha", y: 0, r: 5, fill: "black", stroke: "White", strokeWidth: 2, title: "Fecha" }) ] }); }32:T410,function graficoAcumulado(data, variable, caption) { const categorias = obtenerCategorias(variable); return Plot.plot({ color: { legend: true, label: caption, domain: categorias, range: variable === "Sexo" ? color.sexo : color.categorias, unknown: color.otros }, y: { label: caption }, marks: [ Plot.areaY(data, { x: "Fecha", y: "Acumulado", fill: variable, curve: "bump-x", title: (d) => `${d[variable]}` }), Plot.areaY(data, { x: "Fecha", y: "Acumulado", z: variable, fill: "none", stroke: "black", opacity: 0.4, curve: "bump-x" }), Plot.ruleX(data, { x: "Fecha", stroke: "White", strokeWidth: 1 }), Plot.ruleY([0], { strokeWidth: 2 }), Plot.dot(data, { x: "Fecha", y: 0, r: 5, fill: "black", stroke: "White", strokeWidth: 2, title: "Fecha" }) ] }); }33:[{"id":"d5bcbeed7eb53b42eaaef0a13e0352f0db6bb384aefcbff03f97d8611afc362420e61ba6d9c5cde383b55e329242a8ff90c6e093b7f5afa01f640b3b2b72bcc0","href":"https://static.observableusercontent.com/files/d5bcbeed7eb53b42eaaef0a13e0352f0db6bb384aefcbff03f97d8611afc362420e61ba6d9c5cde383b55e329242a8ff90c6e093b7f5afa01f640b3b2b72bcc0","name":"image.png","type":"image/png","lastModified":1727273104031.159,"size":245051}] 2d:{"title":"Data Visualization Madrid. List of presentations","cells":[{"id":4,"value":"# Data Visualization Madrid. List of presentations","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"viewof radios_language = Inputs.radio([\"Español\", \"English\"], {\n label: \"Idioma / Language\",\n value: \"Español\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"## ${radios_language === \"Español\" ? \"Presentadores por sexo\" : \"Presenters by sex\"}","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"viewof toggle_sexo = Inputs.toggle({\n label:\n radios_language === \"Español\"\n ? \"Mostrar como porcentaje\"\n : \"Show as percentage\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"viewof select_presentadores_curso = Inputs.select(\n [radios_language === \"Español\" ? \"Todos\" : \"All\", \"23-24\", \"24-25\", \"25-26\"],\n {\n label:\n radios_language === \"Español\"\n ? \"Selecciona un curso\"\n : \"Select time frame\",\n value: radios_language === \"Español\" ? \"Todos\" : \"All\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"div_plots_sexo = {\n const graf_left = toggle_sexo\n ? graficoPorcentaje(\n resumen_genero,\n \"Sexo\",\n radios_language === \"Español\" ? \"% del total\" : \"% of total\"\n )\n : graficoAcumulado(\n resumen_genero,\n \"Sexo\",\n radios_language === \"Español\" ? \"Acumulado\" : \"Cumulative\"\n );\n\n const graf_right = graficoPorCurso(\n crearResumenCurso(data, \"Sexo\"),\n \"Sexo\",\n radios_language === \"Español\"\n ? \"Participantes por curso\"\n : \"Participants by course\"\n );\n\n return wrap(graf_left, graf_right);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"#### ${radios_language === \"Español\" ? \"Por meetup\" : \"By meetup\"}","pinned":false,"hidden":false,"mode":"md"},{"id":1196,"value":"graficoPorMeetup(\n resumen_genero,\n \"Sexo\",\n radios_language === \"Español\"\n ? \"Participantes por meetup\"\n : \"Participants by meetup\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"---\n\n## ${radios_language === \"Español\" ? \"Temática de las presentaciones\" : \"Topics of presentations\"}","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"viewof toggle_tema = Inputs.toggle({\n label:\n radios_language === \"Español\"\n ? \"Mostrar como porcentaje\"\n : \"Show as percentage\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"viewof select_presentaciones_curso = Inputs.select(\n [radios_language === \"Español\" ? \"Todos\" : \"All\", \"23-24\", \"24-25\", \"25-26\"],\n {\n label:\n radios_language === \"Español\"\n ? \"Selecciona un curso\"\n : \"Select time frame\",\n value: radios_language === \"Español\" ? \"Todos\" : \"All\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"div_plots_presentaciones = {\n const graf_left = toggle_tema\n ? graficoPorcentaje(\n resumen_temas,\n \"Tema\",\n radios_language === \"Español\" ? \"% del total\" : \"% of total\"\n )\n : graficoAcumulado(\n resumen_temas,\n \"Tema\",\n radios_language === \"Español\" ? \"Acumulado\" : \"Cumulative\"\n );\n\n const graf_right = graficoPorCurso(\n crearResumenCurso(data, \"Tema\"),\n \"Tema\",\n radios_language === \"Español\" ? \"Temas por curso\" : \"Topics by course\"\n );\n\n return wrap(graf_left, graf_right);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"#### ${radios_language === \"Español\" ? \"Por meetup\" : \"By meetup\"}","pinned":false,"hidden":false,"mode":"md"},{"id":622,"value":"graficoPorMeetupGrid(\n resumen_temas,\n \"Tema\",\n radios_language === \"Español\" ? \"Temas por meetup\" : \"Topics by meetup\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"---\n## ${radios_language === \"Español\" ? \"Tipo de afiliación\" : \"Affiliation types\"}","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"viewof toggle_org = Inputs.toggle({\n label:\n radios_language === \"Español\"\n ? \"Mostrar como porcentaje\"\n : \"Show as percentage\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"viewof select_afiliacion_curso = Inputs.select(\n [radios_language === \"Español\" ? \"Todos\" : \"All\", \"23-24\", \"24-25\", \"25-26\"],\n {\n label:\n radios_language === \"Español\"\n ? \"Selecciona un curso\"\n : \"Select time frame\",\n value: radios_language === \"Español\" ? \"Todos\" : \"All\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"div_plots_afiliacion = {\n const graf_left = toggle_org\n ? graficoPorcentaje(\n resumen_org,\n \"Tipo de Organización\",\n radios_language === \"Español\" ? \"% del total\" : \"% of total\"\n )\n : graficoAcumulado(\n resumen_org,\n \"Tipo de Organización\",\n radios_language === \"Español\" ? \"Acumulado\" : \"Cumulative\"\n );\n\n const graf_right = graficoPorCurso(\n crearResumenCurso(data, \"Tipo de Organización\"),\n \"Tipo de Organización\",\n radios_language === \"Español\"\n ? \"Tipo de afiliación por curso\"\n : \"Affiliation type by course\"\n );\n\n return wrap(graf_left, graf_right);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"#### ${radios_language === \"Español\" ? \"Por meetup\" : \"By meetup\"}\n\n${radios_language === \"Español\" ? \"Una misma presentación puede ser llevada a cabo por personas con distintas afiliaciones\" : \"The same presentation can be done by people with different types of affiliation\"}\n","pinned":false,"hidden":false,"mode":"md"},{"id":709,"value":"graficoPorMeetupGrid(\n resumen_org,\n \"Tipo de Organización\",\n \"Tipo de Organización por meetup\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"---\n## ${radios_language === \"Español\" ? \"Formato de las presentaciones\" : \"Presentation format\"}","pinned":false,"hidden":false,"mode":"md"},{"id":1453,"value":"viewof toggle_formato = Inputs.toggle({\n label:\n radios_language === \"Español\"\n ? \"Mostrar como porcentaje\"\n : \"Show as percentage\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"viewof select_formato = Inputs.select(\n [radios_language === \"Español\" ? \"Todos\" : \"All\", \"23-24\", \"24-25\", \"25-26\"],\n {\n label:\n radios_language === \"Español\"\n ? \"Selecciona un curso\"\n : \"Select time frame\",\n value: radios_language === \"Español\" ? \"Todos\" : \"All\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"div_plots_formato = {\n const graf_left = toggle_formato\n ? graficoPorcentaje(\n resumen_formato,\n \"Formato\",\n radios_language === \"Español\" ? \"% del total\" : \"% of total\"\n )\n : graficoAcumulado(\n resumen_formato,\n \"Formato\",\n radios_language === \"Español\" ? \"Acumulado\" : \"Cumulative\"\n );\n\n const graf_right = graficoPorCurso(\n crearResumenCurso(data, \"Formato\"),\n \"Formato\",\n radios_language === \"Español\"\n ? \"Tipo de formato por curso\"\n : \"Type of format by course\"\n );\n\n return wrap(graf_left, graf_right);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"#### ${radios_language === \"Español\" ? \"Por meetup\" : \"By meetup\"}\n","pinned":false,"hidden":false,"mode":"md"},{"id":1449,"value":"graficoPorMeetupGrid(\n resumen_formato,\n \"Formato\",\n radios_language === \"Español\"\n ? \"Formatos por meetup\"\n : \"Types of formats by meetup\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"table_data = data","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"---\n\n## Anexo\n\n### Datos\n\nLa hoja de cálculo con todas las presentaciones está alojada en [Google Spreadsheets](https://docs.google.com/spreadsheets/d/1hPkvrszhubYai9_wbDN-MWowaqom54KLw7p8_GhwJ4s/edit?gid=993396898#gid=993396898).","pinned":false,"hidden":false,"mode":"md"},{"id":1284,"value":"google_spreadsheet = \"https://docs.google.com/spreadsheets/d/1hPkvrszhubYai9_wbDN-MWowaqom54KLw7p8_GhwJ4s/edit?gid=993396898#gid=993396898\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"import { getCsvUrl } from \"@observablehq/google-sheets-starter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1282,"value":"data = d3.csv(getCsvUrl(google_spreadsheet), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"#### Diccionarios y metadatos para controlar los gráficos","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"diccionario = ({\n Hombre: \"Men\",\n Mujer: \"Women\",\n DVS: \"DVS\",\n Diseño: \"Design\",\n GIS: \"GIS\",\n JavaScript: \"JavaScript\",\n ONG: \"NGO\",\n R: \"R\",\n Taller: \"Workshop\",\n Producto: \"Product\",\n Consultoría: \"Consulting\",\n \"Business Intelligence\": \"Business Intelligence\",\n ONG: \"NGO\",\n Programación: \"Programming\",\n \"Estudio de diseño\": \"Design studio\",\n \"Medio de comunicación\": \"News outlet\",\n Universidad: \"University\",\n Arte: \"Art\",\n Networking: \"Networking\",\n Industria: \"Industry\",\n Participativo: \"Participatory\",\n Investigación: \"Research\",\n Taller: \"Workshop\",\n Presentación: \"Keynote\",\n \"Mesa redonda\": \"Round table\",\n Rompehielos: \"Icebreaker\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"metadata_tiempos = ({\n \"23-24\": [new Date(\"1 January 2023\"), new Date(\"31 July 2024\")],\n \"24-25\": [new Date(\"1 August 2024\"), new Date(\"31 July 2025\")],\n \"25-26\": [new Date(\"1 August 2025\"), new Date(\"31 July 2026\")],\n Todos: [\n new Date(\"1 June 2023\"),\n new Date(d3.max(data, (d) => new Date(d.Fecha)).setDate(31))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"resumen_genero = crearResumen(data, \"Sexo\", select_presentadores_curso)","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"resumen_temas = crearResumen(data, \"Tema\", select_presentaciones_curso)","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"resumen_org = crearResumen(\n data,\n \"Tipo de Organización\",\n select_afiliacion_curso\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"resumen_formato = crearResumen(data, \"Formato\", select_formato)","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"### Funciones para crear los gráficos","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"function crearResumenCurso(datos, variable) {\n const presentaciones =\n variable === \"Sexo\" || variable === \"Tipo de Organización\"\n ? datos\n : quitarDuplicados(datos);\n\n const esteGrupo = d3.groups(\n presentaciones,\n (e) => e.Curso,\n (e) => e[variable]\n );\n\n let vacio = [];\n\n for (var i = 0; i < esteGrupo.length; i++) {\n const categorias = esteGrupo[i][1];\n\n const total = d3.sum(categorias, (d) => d[1].length);\n\n for (var j = 0; j < categorias.length; j++) {\n vacio.push({\n Curso: esteGrupo[i][0],\n [variable]: categorias[j][0],\n Numero: categorias[j][1].length,\n Total: total,\n Indice: j + 1\n });\n }\n }\n\n return vacio;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"quitarDuplicados = function (datos) {\n const NewArray = d3.groups(datos, (d) => d.Titulo);\n const array = [];\n\n NewArray.forEach((e, i) => {\n array.push(e[1][0]);\n });\n\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"function graficoPorMeetup(data, variable, caption) {\n const categorias = obtenerCategorias(variable);\n\n return Plot.plot({\n height: 200,\n marginBottom: 50,\n grid: true,\n x: { tickFormat: d3.timeFormat(\"%b %Y\") },\n y: { label: caption },\n color: {\n legend: true,\n label: caption,\n domain: categorias,\n range: variable === \"Sexo\" ? color.sexo : color.categorias,\n other: color.otros\n },\n marks: [\n Plot.barY(data, {\n x: \"Fecha\",\n y: \"Meetup\",\n fill: variable,\n stroke: \"white\",\n title: (d) => `${d[variable]}: ${d.Meetup}`\n }),\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"function graficoPorMeetupGrid(data, variable, caption) {\n const scaleOpacity = d3.scaleLinear().domain([0, 1, 3]).range([0, 0.5, 1]);\n\n console.log(data);\n\n const numberMeetups = d3.groups(\n data,\n (d) => d.Fecha,\n (d) => d.Fecha\n );\n\n return Plot.plot({\n marginLeft: 130,\n marginBottom: 50,\n width: 90 * numberMeetups.length,\n x: { tickFormat: d3.timeFormat(\"%b %Y\") },\n y: { label: \"\" },\n color: {\n legend: true,\n domain: [0, 1, 2, 3],\n range: [\"white\", \"#efb118\", \"#936300\", \"#461b00\"],\n label: caption\n },\n marks: [\n Plot.cell(data, {\n x: \"Fecha\",\n y: variable,\n fill: \"Meetup\",\n stroke: \"black\",\n fillOpacity: (d) => (d.Meetup === 0 ? 0 : 1),\n title: (d) => `${d[variable]}: ${d.Meetup}`\n }),\n Plot.ruleY([0])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"function graficoPorCurso(data, variable, caption) {\n const tickformat = d3.timeFormat(\"%b %Y\");\n\n const categorias = obtenerCategorias(variable);\n\n return Plot.plot({\n height: 200,\n width: 200,\n marginBottom: 50,\n grid: true,\n y: { label: caption },\n color: {\n legend: false,\n label: caption,\n domain: categorias,\n range: variable === \"Sexo\" ? color.sexo : color.categorias,\n unknown: color.otros\n },\n marks: [\n Plot.barY(data, {\n x: \"Curso\",\n y: \"Numero\",\n fill:\n radios_language === \"English\"\n ? (d) => diccionario[d[variable]]\n : variable,\n stroke: \"white\",\n title: (d) => `${d[variable]}: ${d.Numero}`,\n order: categorias\n }),\n Plot.tickY(data, {\n z: \"Curso\",\n x: \"Curso\",\n y: (d) => d.Total / 2,\n opacity: variable === \"Sexo\" ? 1 : 0,\n strokeWidth: 2\n }),\n Plot.ruleY([0], { strokeWidth: 2 })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"obtenerCategorias = function (variable) {\n let array = categorias_rollup[variable].filter((d) => d[1] > 1);\n array = array.length > 0 ? array : [\"\", \"\"];\n\n const categorias =\n variable === \"Sexo\" && radios_language === \"Español\"\n ? [\"Hombre\", \"Mujer\"]\n : variable === \"Sexo\" && radios_language === \"English\"\n ? [\"Men\", \"Women\"]\n : variable === \"Formato\"\n ? categorias_rollup[variable].map((d) => d[0])\n : array.map((d) => d[0]);\n\n return categorias;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"---\n\n## Estilos","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"color = ({\n sexo: [\"#52BF9E\", \"#8652EB\"], //[schemeObservable10[1], schemeObservable10[6]],\n categorias: schemeObservable10,\n otros: \"#b7b7b7\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"schemeObservable10 = [\n \"#4269d0\",\n \"#efb118\",\n \"#ff725c\",\n \"#6cc5b0\",\n \"#3ca951\",\n \"#ff8ab7\",\n \"#a463f2\",\n \"#97bbf5\",\n \"#9c6b4e\",\n \"#9498a0\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"wrap = (...elems) => {\n const div_master = document.createElement(\"div\");\n div_master.classList.add(\"div_row\");\n // const title = document.createElement(\"h2\"); // Create a new element\n // const legend = document.createElement(\"p\"); // Create a new element\n // title.innerHTML = \"\"; // Change the text of the element\n // legend.innerHTML = \"\"; // Change the text of the element\n // div_master.appendChild(title);\n // div_master.append(legend);\n const div = document.createElement(\"div\");\n div_master.appendChild(div);\n div.classList.add(\"plot_wrapper\");\n elems.forEach((el) => div.appendChild(el));\n\n return div_master;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}