2e:null 2f:["$","title",null,{"children":"Colombia's Best Graduates | ancazugo | Observable"}] 34:Tf5a,boxplot2 = { const target = html`

Mejores graduados de ${Uni} según el ${selectedScore.toLocaleLowerCase()} del Saber Pro 2018 / Best Graduates from ${Uni} according to ${selectedScore.toLocaleLowerCase()} from Saber Pro 2018

`; const height = 700; const margin = {top: 20, right: 30, bottom: 30, left: 200}, iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(target).select("#chart") .append("svg") .attr("width", iwidth + margin.left + margin.right) .attr("height", iheight + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const y = d3.scaleBand() .range([iheight, 0]) .domain(carreras) .padding(.4) svg.append("g") .attr("class", "axis") .call(d3.axisLeft(y).tickSize(0)); const x = d3.scaleLinear() .domain([140, 300]) .range([0, iwidth]); svg.append("g") .attr("class", "axis") .call(d3.axisBottom(x).ticks(5)) .attr("transform", "translate(0," + iheight + ")"); var colorScale = d3.scaleOrdinal(d3.schemeSet3) .domain(Object.keys(carreras)); svg.selectAll("vertLines") .data(summary) .enter() .append("line") .attr("y1", function(d){return(y(d.key) + y.bandwidth() / 2)}) .attr("y2", function(d){return(y(d.key) + y.bandwidth() / 2)}) .attr("x1", function(d){return(x(d.value.min))}) .attr("x2", function(d){return(x(d.value.max))}) .attr("stroke", "black") .style("width", 40) svg.selectAll("boxes") .data(summary) .enter() .append("rect") .attr("class", "box") .attr("x", function(d){return(x(d.value.q1))}) .attr("width", function(d){ ; return(x(d.value.q3)-x(d.value.q1))}) .attr("y", function(d) { return y(d.key); }) .attr("height", y.bandwidth() ) .attr("stroke", "black") .style("fill", function(d){return colorScale(d.key)}) svg.selectAll("medianLines") .data(summary) .enter() .append("line") .attr("y1", function(d){return(y(d.key))}) .attr("y2", function(d){return(y(d.key) + y.bandwidth())}) .attr("x1", function(d){return(x(d.value.median))}) .attr("x2", function(d){return(x(d.value.median))}) .attr("stroke", "black") .style("width", 80); svg.selectAll("minLines") .data(summary) .enter() .append("line") .attr("y1", function(d){return(y(d.key))}) .attr("y2", function(d){return(y(d.key) + y.bandwidth())}) .attr("x1", function(d){return(x(d.value.min))}) .attr("x2", function(d){return(x(d.value.min))}) .attr("stroke", "black") .style("width", 80); svg.selectAll("minLines") .data(summary) .enter() .append("line") .attr("y1", function(d){return(y(d.key))}) .attr("y2", function(d){return(y(d.key) + y.bandwidth())}) .attr("x1", function(d){return(x(d.value.max))}) .attr("x2", function(d){return(x(d.value.max))}) .attr("stroke", "black") .style("width", 80); var jitterWidth = 30 svg .selectAll("indPoints") .data(selectedUni) .enter() .append("circle") .attr("cx", function(d){ return(x(d[selectedScore]))}) .attr("cy", function(d){ return( y(d["GRUPO REFERENCIA"]) + (y.bandwidth()/2) )}) .attr("r", 4) .style("fill", "black") return target; }35:T589,md`### Español Este boxplot comparar los puntajes de la prueba Saber Pro para los mejores estudiantes de Colombia, de acuerdo al ICFES (10.166). El objetivo de la gráfica es comparar a los estudiantes de la misma Universidad, que hicieron su pregrado en distintas áreas, definidas por ICFES, con respecto a los cinco componentes de la prueba, así como el promedio global. En este boxplot en particular, la Institución seleccionada es **${Uni}**, la cual tiene carreras en las áreas de **${carreras.join(", ").toLowerCase()}**, usando el **${selectedScore.toLowerCase()}** como medida para evaluar **${selectedUni.length}** estudiante(s) que hace(n) parte de los mejores en Educación Superior en Colombia para esta Institución en particular. ### English This boxplot shows Saber Pro 2018 Scores for the best students from Colombia, according to ICFES (10.166). The aim of the plot is to compare the students from the same University, who majored in the distinct areas defined by ICFES, in regard to any of the five components of the test, as well as their average. In this particular boxplot, the selected Institution is **${Uni}**, which has degrees in the areas of **${carreras.join(", ").toLowerCase()}**, using **${selectedScore.toLowerCase()}** as metric in order to assess **${selectedUni.length}** student(s) who are part of the Best of Colombian Higher Education from this particular Institution. `36:T6e4,md`## What + **Dataset:** The data is available at the [ICFES](https://www.icfes.gov.co/resultados-saber-pro) , and is presented as an excel file. + **Data:** The dataset consists of 5 categorical attributes and 5 ordered sequential attributes. The categorical ones refer to the institution name, location, degree and degree categorization. The ordered ones have a max limit of 300 and represent the scores for each component of the Test, namely Competencia Ciudadana, Comunicación Escrita, Inglés, Lectura Crítica, Razonamiento Cuantitativo. From these variables a *Promedio* attribute was calculated. ## Why ### Actions **1.** Compare test scores between degree areas of a desired university **(Query)**.\n **2.** Derive quantiles, max and min for each degree area and institution **(Analyze-Produce)**.\n **3.** Summarize the data for a chosen institution **(Query)**.\n **4.** Lookup the scores for a certain metric obtained by the students of a desired university, categorized according to their degree area **(Search)**.\n **5.** Present the distribution of student scores for every degree area **(Analyze-Consume)**.\n **6.** Discover which degrees had better/worse performance in a chosen score **(Analyze-Consume)**. ### Targets + **Attributes:** Distribution for each degree area. Trends per Institution in regard to degree behavior. ## How + **Marks:** In this case lines are used for the building of boxes, as well as for the Interquartile Range horizontal line and the median vertical line. + **Channels:** Three channels are used in this boxplot: length for the vertical line depicting interquartile range and the median vertical line; position on common scale for the boxes according to summary values; and color hue for each degree area.`37:Taf9,boxplot = { const target = html`

Colombia's Best Graduates (Vertical Boxplots)

A Tale of Higher Education Quality According to Saber Pro 2018 Scores Based on Institution and Degree Area

`; const height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 20, right: 30, bottom: 30, left: 40}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gBase = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3.scaleBand() .range([ 0, width ]) .domain(carreras) .paddingInner(1) .paddingOuter(0.9) gBase.append("g") .attr("class", "axis") .call(d3.axisBottom(x)) .attr("transform", `translate(0, ${iheight})`); const y = d3.scaleLinear() .domain([100, 300]) .range([iheight, 0]) .nice(); gBase.append("g"). call(d3.axisLeft(y)); var colorScale = d3.scaleOrdinal(d3.schemeCategory10) .domain(Object.keys(carreras)); svg.selectAll("vertLines") .data(summary) .enter() .append("line") .attr("x1", function(d){return(x(d.key))}) .attr("x2", function(d){return(x(d.key))}) .attr("y1", function(d){return(y(d.value.min))}) .attr("y2", function(d){return(y(d.value.max))}) .attr("stroke", "black") .style("width", 40) var boxWidth = 50 svg.selectAll("boxes") .data(summary) .enter() .append("rect") .attr("class", "box") .attr("x", function(d){return(x(d.key) - boxWidth / 2 )}) .attr("y", function(d){return(y(d.value.q3))}) .attr("height", function(d){return(y(d.value.q1) - y(d.value.q3))}) .attr("width", boxWidth ) .attr("stroke", "black") .style("fill", function(d){return colorScale(d.key)}) svg.selectAll("medianLines") .data(summary) .enter() .append("line") .attr("x1", function(d){return(x(d.key) - boxWidth / 2) }) .attr("x2", function(d){return(x(d.key) + boxWidth / 2) }) .attr("y1", function(d){return(y(d.value.median))}) .attr("y2", function(d){return(y(d.value.median))}) .attr("stroke", "black") .style("width", 80) return target; }38:[] 32:{"id":"b6e46898638bfeae","slug":"colombias-best-graduates-a-tale-of-higher-education-scores","title":"Colombia's Best Graduates","thumbnail":"49bc774fe801b39636dcfe376e641bd65e7c9210ad7d028a715241a4ea828daa","access_level":"public","create_time":"$D2019-09-02T17:17:19.606Z","update_time":"$D2021-10-07T02:08:39.126Z","view_time":null,"first_public_time":"$D2019-09-02T17:43:36.885Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"68cb2534e675efd2","login":"ancazugo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90fec258ad6cca57dc8f5020c01639dfbad769f7dadbe30e1fecc65ce342fc84","tier":"starter_2024"},"version":1006,"publish_version":1006,"role":null,"authored":false,"authors":[{"type":"individual","id":"08d5ede8cd3a2024","login":"ancazugo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90fec258ad6cca57dc8f5020c01639dfbad769f7dadbe30e1fecc65ce342fc84","tier":null}],"members":[{"type":"individual","id":"08d5ede8cd3a2024","login":"ancazugo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/90fec258ad6cca57dc8f5020c01639dfbad769f7dadbe30e1fecc65ce342fc84","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Colombia's Best Graduates","cells":[{"id":0,"value":"md`# Colombia's Best Graduates\n#### A Tale of Higher Education Quality According to Saber Pro 2018 Scores Based on Institution and Degree\n\n1. Escoja una institución de educación superior colombiana / Choose a Colombian Higher Education Institution.\n2. Escoja una medida entre los puntajes disponibles / Choose a metric among the available scores.\n3. **NOTA IMPORTANTE: La celda de abajo debe ser corrida al inicio y cada vez que se cambie de universidad / IMPORTANT NOTE: The cell below must be run when first using the notebook as well as every time the university is changed.**\n4. Lea la descricpición de la gráfica abajo para más información / Read the plot desription below for more information.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"Uni = opcionesUni.value //Hay que correr esta celda cada vez que se cambia de institución /Run this cell whenever a change of Instituion happens","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"opcionesUni = html`\n ` \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof selectedScore = html`\n ` \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"md`# The whole coding process\nRead from bottom to top`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"carreras = carreraArray()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"function carreraArray(){\n const arr = []\n for(var i = 0; i < summary.length; i++){\n arr.push(summary[i].key);\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"summary = d3.nest()\n .key(d => d[\"GRUPO REFERENCIA\"])\n .rollup(d => {\n var q1 = d3.quantile(d.map(g => \n g[selectedScore]).sort(d3.ascending),.25)\n var median = d3.quantile(d.map(g => \n g[selectedScore]).sort(d3.ascending),.5)\n var q3 = d3.quantile(d.map(g => \n g[selectedScore]).sort(d3.ascending),.75)\n var quantileRange = q3 -q1\n \n const min = d3.min(d.map(g => \n g[selectedScore]))\n const max = d3.max(d.map(g => \n g[selectedScore]))\n \n const n = d.length\n \n const mean = d3.mean(d.map(g => \n g[selectedScore]))\n \n return({q1: q1, median: median, q3: q3, quantileRange: quantileRange, min: min, max: max, n: n, mean: mean})\n })\n .entries(selectedUni)\n .sort((a, b) => d3.ascending(a.value.median, b.value.median));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"{\nconst seleccion = d3.select(opcionesUni);\n \n const addOption = (d, i) => \n seleccion.append(\"option\")\n .text(d.key);\n\n universidad.forEach(addOption);\n \n //return seleccion.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"selectedUni = filtrarUni(universidad)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"function filtrarUni(arr){\n for(var i = 0; i < universidad.length; i++){\n if(arr[i].key == Uni){\n return arr[i].values;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"universidad = d3.nest()\n .key(function(d) { return d[\"NOMBRE DE LA INSTITUCION\"]; })\n .entries(datos);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"datos = d3.csv(url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"url =\"https://gist.githubusercontent.com/ancazugo/96125b7acbedfe947c63c9c9ad90051b/raw/1e03c3602b8b04657991325b1fc9e5f5499f380e/saberPro2018.csv\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"navio = require(\"navio\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"{\n const target = html`

`;\n //const scale = d3.scaleLinear()\n // .domain([50, 300]);\n const nv = navio(target, 500);\n nv.data(selectedUni);\n nv.addAllAttribs();\n //nv.addSequentialAttrib(\"PROMEDIO\", scale)\n // nv.addSequentialAttrib(\"PUNTAJE COMPETENCIAS CIUDADAN\", scale)\n // nv.addSequentialAttrib(\"PUNTAJE COMUNICACIÓN ESCRITA\", scale)\n // nv.addSequentialAttrib(\"PUNTAJE INGLÉS\", scale)\n // nv.addSequentialAttrib(\"PUNTAJE LECTURA CRÍTICA\", scale)\n // nv.addSequentialAttrib(\"PUNTAJE RAZONAMIENTO CUANTITA\", scale);\n nv.update();\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"