30:T428,# DCC Requisitos Visualización que permite identificar la secuencia de cursos que se deben aprobar para poder inscribir un curso del Departamento de Ciencia de la Computación (DCC). **Recomendación**: Lea todo antes de empezar a utilizar la visualización. Así entenderá las decisiones tomadas, qué significan los colores y qué interacción presenta la visualización cuando se utiliza el _mouse_. --- **Importante**: Se han **eliminado** ciertas restricciones **redundantes** para reducir la cantidad de líneas de la visualización. Por ejemplo: "_Minería de datos (IIC2433)_" tiene de requisitos "_Álgebra lineal (MAT1203)_" y "_Probabilidad y estadísticas (EYP1113)_". No obstante, _EYP1113_ tiene de requisitos "_Cálculo 3 (MAT1630)_" y este último curso tiene de requisito _MAT1203_. Por lo tanto, tener de requisitos _EYP1113_ implica (para nosotros) que si o si hay que aprobar _MAT1203_. En consecuencia, se eliminó el requisito de _MAT1203_ a _IIC2433_ por redundancia y así reducir un poco la cantidad de líneas de la visualización.31:T4ba,md` 1. El **color de los cursos** es solo para facilitar la distinción entre ellos. **No tiene ningún significado adicional**. Si lo desea, puede deshabilitar el color para dejar todos los cursos con el mismo. 2. Las **líneas de otro color** son aquellas **tan largas que conectan cursos de 2 columnas no adyacentes**. Esta decisión se tomó para facilitar el seguimiento de cada camino en la visualización. 3. Las **líneas punteadas** representa **co-requisito**, es decir, el curso anterior debe estar aprobado o se debe inscribir en conjunto al curso que presenta el co-requisito. 4. Puede **posicionar (hover)** el _mouse_ sobre un curso para (1) ver el nombre del curso, (2) enfatizar las rutas específicas para poder inscribir dicho curso y (3) enfatizar los cursos directos tienen como requisito el curso seleccionado. 5. Si un curso tiene una marca en la esquina derecha superior (por ejemplo, "1/6"). Puede hacer **click** sobre dicho curso para visualizar otra posible ruta. 6. Puede hacer **alt + click** sobre un curso para abrir una nueva pestaña con el detalle de sus requisitos. La nueva pestaña te enviará a la información provista por [Catalogo UC](https://catalogo.uc.cl/). `32:T18c8,chart = { const { nodes, links } = sankeyData; const colors = d3.scaleOrdinal(d3.schemeSet2.slice(0, 6)); let selectedOption = {}; nodes.forEach((d) => { selectedOption[d.id] = 0; }); const width = 954; const svg = d3 .select(DOM.svg(width + 30, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); svg .append("svg:defs") .selectAll("marker") .data(["end"]) // Different link/path types can be defined here .enter() .append("svg:marker") // This section adds in the arrows .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", 8) .attr("refY", 0.5) .attr("markerWidth", 3) .attr("markerHeight", 3) .attr("orient", "auto") .append("svg:path") .attr("stroke", "#424B54") .attr("fill", "#424B54") .attr("d", "M0,-5L10,0L0,5"); svg .append("svg:defs") .selectAll("marker") .data(["start"]) // Different link/path types can be defined here .enter() .append("svg:marker") // This section adds in the arrows .attr("id", String) .attr("viewBox", "0 0 10 10") .attr("refX", 5) .attr("refY", 5) .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto") .append("svg:circle") .attr("fill", "#424B54") .attr("r", "5") .attr("cx", "5") .attr("cy", "5"); const link = svg .append("g") .attr("fill", "none") .attr("transform", "translate(20, 0)") .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); function focusCourse(hoveredCourse) { let selected = { nodes: new Set(), links: new Set() }; let selectedTarget = { nodes: new Set(hoveredCourse.sourceLinks.map(d => d.target.id)), links: new Set(hoveredCourse.sourceLinks.map(d => d.id)) }; tooltip.style("visibility", "visible").text(hoveredCourse.name); let requisites = hoveredCourse.requisites; let viewed = new Set(); let toRevised = new Set([hoveredCourse]); while (toRevised.size) { let last = Array.from(toRevised).pop(); toRevised.delete(last); viewed.add(last.id); selected.nodes.add(last.id); last.targetLinks.forEach((link) => { link.selected = false; console.log(link); if ((!requisites.has(link.source.id))) return; if (!link.option.has(selectedOption[last.id])) return; selected.links.add(link.id); if (viewed.has(link.source.id)) return; toRevised.add(link.source); }); } svg.selectAll(".course").style("opacity", (course) => { return selected.nodes.has(course.id) ? 1 : (selectedTarget.nodes.has(course.id) ? 0.6 : 0.07); }); link.selectAll("path").style("opacity", (link) => { return selected.links.has(link.id) ? 1 : (selectedTarget.links.has(link.id) ? 0.6 : 0.07); }); } function updateWidthLink(d) { if (!d.option.has(selectedOption[d.target.id])) { return 0; } return useArrows ? 2 : Math.max(1, d.width); } const g = svg .append("g") .attr("transform", "translate(20, 0)") .selectAll(".course") .data(nodes) .enter() .append("g") .attr("class", "course") .attr("id", (d) => d.id) .on("mouseover", (_, hoveredCourse) => { focusCourse(hoveredCourse); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); svg.selectAll(".course").style("opacity", 1); link.selectAll("path").style("opacity", 1); }) .on("mousemove", (event) => { let positionX = event.pageX + 10; let positionY = event.pageY - 10; if (positionX > width - 150) { positionX -= 150; } if (positionY > 1530) { positionY -= tooltip.node().offsetHeight - 20; } tooltip.style("top", positionY + "px").style("left", positionX + "px"); }) .on("click", (event, d) => { if (event.altKey) { let url = MAIN_URL + d.id; window.open(url, "_blank"); return; } let newValue = (selectedOption[d.id] + 1) % d.total; if (newValue == selectedOption[d.id]) return; selectedOption[d.id] = newValue; svg .select(`#rute-${d.id}`) .text((d) => `${selectedOption[d.id] + 1}/${d.total}`); link.selectAll("path").attr("stroke-width", updateWidthLink); focusCourse(d); }); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .style("stroke-dasharray", (d) => (d.co ? "3, 3" : null)) // <== This line here!! .attr("stroke-width", updateWidthLink) .attr("stroke", (d) => d.target.x0 - d.source.x1 > 170 ? useColor ? colors(d.source.name.replace(/ .*/, "")) : "#424b54" : color ) .attr("marker-end", useArrows ? "url(#end)" : "") .attr("marker-start", useArrows ? "url(#start)" : ""); g.append("rect") .attr("x", (d) => d.x0) .attr("y", (d) => (d.y1 - d.y0 == 0 ? d.y0 - 7 : d.y0)) .attr("height", (d) => (d.y1 - d.y0 == 0 ? 14 : d.y1 - d.y0)) .attr("rx", 5) .attr("ry", 5) .attr("width", (d) => d.x1 - d.x0) .style("fill", (d) => { d.color = useColor ? colors(d.name.replace(/ .*/, "")) : color; return d.color; }) .style("stroke", (d) => d3.rgb(d.color).darker(2)) .style("stroke-width", 2) .style("cursor", "pointer"); g.append("g") .style("font", "11px sans-serif") .append("text") .attr("x", (d) => (d.x1 + d.x0) / 2) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("fill", "#424B54") .attr("text-anchor", "middle") .text((d) => d.id) .style("cursor", "pointer"); let possibleRutesG = g .filter((d) => d.total != 1) .append("g") .style("font", "12px sans-serif"); possibleRutesG .append("rect") .attr("x", (d) => d.x1 - 26 - 5) .attr("y", (d) => d.y0 + 5) .attr("width", 26) .attr("height", 14) .attr("fill", "#ff7373") .attr("rx", 5) .attr("ry", 5); possibleRutesG .append("text") .attr("id", (d) => `rute-${d.id}`) .attr("x", (d) => d.x1 - 5 - 5) .attr("y", (d) => d.y0 + 12 + 5) .attr("text-anchor", "end") .attr("fill", "#424B54") .text((d) => `${selectedOption[d.id] + 1}/${d.total}`); return svg.node(); }33:T40c,data = { let nodes = []; let links = {}; let linkId = 0; cursos.forEach((d) => { let length = 1; if ("Requisitos" in d) { length = d.Requisitos.split("o").length; d.Requisitos.split("o").forEach((e, i) => { e.trim() .split("y") .forEach((f) => { let corequisite = f.includes("(c)"); f = f.replace("(c)", "").replace("(", "").replace(")", ""); let key = `${f.trim()}-${d.Sigla}`; if (!(key in links)) { links[key] = { source: f.trim(), target: d.Sigla, option: new Set(), co: corequisite, total: length, value: 1, id: linkId }; } links[key].option.add(i); linkId++; }); }); } nodes.push({ id: d.Sigla, name: d.Nombre, total: length }); }); return { nodes: nodes, links: Object.values(links) }; }34:[{"id":"3d7772f5d528087250b7b02cee90ab0bfe4c4426d35d752448ee889d5312ace942d35047fe6638add28875ad6af9280c537e87442718112e9ef4ba3dd58a01cd","href":"https://static.observableusercontent.com/files/3d7772f5d528087250b7b02cee90ab0bfe4c4426d35d752448ee889d5312ace942d35047fe6638add28875ad6af9280c537e87442718112e9ef4ba3dd58a01cd","name":"Cursos@3.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1643734071842.637,"size":205077}] 2e:{"title":"DCC Requisitos","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"---\n\n## Visualización","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"### Configuración","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"viewof inputOrder = {\n const form = html`

Ordenar alfabeticamente cada columna`;\n form.i.onclick = () => (form.value = form.i.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n form.value = form.i.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof useArrows = {\n const form = html` Utilizar flechas`;\n form.i.onclick = () => (form.value = form.i.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n form.value = form.i.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof useColor = {\n const form = html` Utilizar colores`;\n form.i.onclick = () => (form.value = form.i.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n form.value = form.i.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"---\nToda sugerencia para mejorar la visualización es bien recibida😁(aunque no prometo desarrollar cada idea, depende 100% de mi disponbilidad de tiempo y de la factibilidad de la idea 😅).\n\nAgradecimientos al profesor Cristian Ruz por tirar la indirecta de que _\"sería ideal tener una herramienta visual para ver los requisitos de los cursos\"_ 😝, lo cual me inspiró a hacer esta visualización. ","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"---\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## Código adicional","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":18,"value":"sankey = d3\n .sankey()\n .nodeId((d) => d.id)\n .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n .nodeSort(\n inputOrder\n ? function (a, b) {\n if (a.id < b.id) {\n return -1;\n }\n if (a.id > b.id) {\n return 1;\n }\n return 0;\n }\n : undefined\n )\n .nodeWidth(56)\n .nodePadding(20)\n .extent([\n [0, 10],\n [954, height - 20]\n ])\n .iterations(100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"sankeyData = {\n let aux = sankey({\n nodes: data.nodes.map(d => Object.assign({}, d)),\n links: data.links.map(d => Object.assign({}, d))\n })\n\n let revised = {};\n function getSource(d) {\n if (d.id in revised){\n return revised[d.id];\n }\n if (d.targetLinks.length == 0){\n revised[d.id] = [];\n return new Set();\n }\n let total = new Set();\n d.targetLinks.forEach(e => {\n total.add(e.source.id);\n for (let item of getSource(e.source)){\n total.add(item);\n }\n });\n revised[d.id] = total;\n return total;\n }\n aux.nodes.forEach(d => {\n d.requisites = getSource(d)\n })\n return aux\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"tooltip = {\n const tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"\");\n return tooltip\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"workbook = FileAttachment(\"Cursos@3.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"cursos = workbook.sheet(3, {headers: true, range: \"A1:D59\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof color = {\n const form = html`color =

`;\n (form.oninput = () => form.value = form.i.value)();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"center\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"height = 900;","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"MAIN_URL = \"https://catalogo.uc.cl/index.php?tmpl=component&option=com_catalogo&view=requisitos&sigla=\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"d3 = require(\"d3-sankey@0.12\", \"d3@6\", \"d3-scale@3\", \"d3-scale-chromatic@2\", \"d3-shape@2\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}