31:T26fd,class VisDistribucion { constructor(el) { this._data = []; this._margin = {left: 50, right:50, top:20, bottom: 20}; this._refX = 0.5; this._refY = 0.5; this.totalWidth = width; this.totalHeight = width || 800; this.svgContainer = d3.select(el).select("svg"); this.startup(); this.circleColorNormal = "blue"; this.circleColorHighlighted = "orange"; } startup() { this.totalHeight = this.totalWidth; this._width = this.totalWidth - this._margin.left - this._margin.right; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.svgContainer.selectAll("g.container").remove() this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) // text label for the x axis /* this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()*0.70}`) .attr("y", 10) .attr("class", "title x") .attr("transform",`translate(${this._width/2},${this._height})`) .style("text-anchor", "middle") .text("Autor: Ernesto Laval - @elaval (TIDE), Fuente de datos: Datos abiertos MINEDUC"); */ // tittle /* this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()}`) .attr("y", -13) .attr("class", "header title") .attr("transform",`translate(${this._width/2},0)`) .style("text-anchor", "middle") .text("${}"); this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()/2}px`) .attr("y", this.responsiveFontSize()/2-9) .attr("class", "header subtitle") .attr("transform",`translate(${this._width/2},0)`) .style("text-anchor", "middle") .text("${}"); */ this.container.append("g") .attr("class", "nodes") this.tooltip = this.container.append("g") .attr("class", "myTooltip") this.tooltip.append("rect") .attr("height", this.responsiveFontSize()/4+4) .attr("fill", "grey") .attr("opacity", d => 0.9) .attr("y", 10 - this.responsiveFontSize()/4) this.tooltip.append("text") .attr("font-family", "sans-serif") .attr("font-size", this.responsiveFontSize()/4) .attr("fill", "#fff") .attr("y", 10) .style("text-anchor", "middle") this.pack = (data) => d3.pack() .size([this._width - 2, this._height - 2]) .padding(3) (d3.hierarchy({children: data}) .sum(d => +d.total)) } renderCarreras() { debugger; let data = this._data; data = _.sortBy(data, d => d.total) const top50 = {}; const sortedCarreras = data; this.render(data) } render(data) { console.log(this.genero, data) if (data) { debugger; const self = this; data.forEach(d => d.name = `${d.nomb_carrera} ${d.nomb_inst}`) const root = this.pack(data); const dataNodes = root.leaves().filter(d => d.depth > 0) this.container .attr("viewBox", [0, 0, this._width, this._height]) .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); const t = d3.transition() .duration(750); let nodes = this.container.select("g.nodes").selectAll("g.node") .data(dataNodes, d => d.data.name); nodes.interrupt(); // Interrupt current transitions nodes.exit().select("circle") .transition(t) .attr("r",0) .remove() nodes.exit() .transition(t) .remove() const newNodes = nodes.enter().append("g") .attr("class", "node") .style("cursos", "pointer") newNodes.append("circle").attr("r",0); newNodes.append("clipPath"); newNodes.append("text"); newNodes .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); nodes = newNodes.merge(nodes) nodes .transition(t) .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); nodes.data(dataNodes, d => d.data.name).select("circle") nodes.data(dataNodes, d => d.data.name).select("text") nodes.data(dataNodes, d => d.data.name).select("clipPath") nodes .on("mouseover", function (d) { this.parentNode.appendChild(this); const myNode = d3.select(this); myNode.select("circle").attr("r", d => d.r) myNode.select("circle") .attr("stroke", "yellow") .attr("stroke-width", 2); self.showLabel(myNode); }) .on("mouseout", function (d) { const myNode = d3.select(this); myNode.select("circle") .attr("stroke", "none") .attr("stroke-width", 2); self.hideLabel(myNode); }) nodes.selectAll("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .transition(t) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill", "grey"); nodes.selectAll("clipPath") .attr("id", d => (d.clipUid = DOM.uid("leaf")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); /* nodes.selectAll("text") .attr("font-size", d => { return this.bubbleFontSize(d) }) .attr("clip-path", d => d.clipUid) .selectAll("tspan") //.data(d => d.data.inst.split(/(?=[A-Z][^A-Z])/g)) .data(d => (this.alias[d.data.name] ? this.alias[d.data.name] : d.data.name).split(/\s/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => { return d }); */ this.container.select("text.header.title") .transition() .text(`${"a"} `); this.container.select("text.header.subtitle") .transition() .text(`${"b"} ${this._genero ? ` [${this.valuesGenero[(+this._genero-1)]} ] ` : "" } (n=${this.totalAlumnos})`); } } showLabel(node) { debugger; const nodeData = node.datum(); this.tooltip .attr("transform", `translate(${nodeData.x},${nodeData.y+nodeData.r+15})`) this.tooltip.style("display", null) //this.tooltip.select("text").text(`${nodeData.data.name} (n=${nodeData.data.total})`) this.tooltip.select("text") .selectAll("tspan") .data([nodeData.data.nomb_carrera,nodeData.data.nomb_inst, `n=${form.n(nodeData.data.total)}`]) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => { return d }); const textWidth = this.tooltip.select("text").node().getBBox().width const textHeight = this.tooltip.select("text").node().getBBox().height this.tooltip.select("rect") .attr("x", function(d) {return -textWidth/2;}) .attr("y", -textHeight+14) .attr("width", function(d) {return textWidth}) .attr("height", function(d) {return textHeight+1}) } hideLabel(node) { this.tooltip.style("display", "none") } getCount(d) { if (this._genero) { return +this._genero == 1 ? d.hombres : d.mujeres; } else { return d.count } } getTotal(data) { return _.reduce(data, (memo,d) => memo + +this.getCount(d),0) } defaultDisplay(d) { return this._defaultItems[d.label]; } foundSearch(d) { return this.textMatch(d.label, this.searchText) } textMatch(text, searchText) { const strRegExPattern = `${searchText}`; return text.match(new RegExp(strRegExPattern,'gi')); } schoolDict(_) { this._schoolDict = _; return this; } genero(_) { this._genero = _; return this; } data(_) { this._data = _; this.startup(); return this; } margin(_) { this._margin = _; this.startup(); return this; } refX(_) { this._refX = _; this.startup(); return this; } refY(_) { this._refY = _; this.startup(); return this; } width(_) { this.totalWidth = _; this._width = this.totalWidth - this._margin.left - this._margin.right; this.startup(); return this; } height(_) { this.totalHeight = _; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.startup(); return this; } search(_) { this.searchText = _; this.render(); return this; } defaultItems(_) { this._defaultItems = _; this.render(); return this; } responsiveFontSize() { const maxSize = 36; const minSize = 12; let size = d3.scaleLinear([300,1024], [minSize, maxSize])(width); size = size > maxSize ? maxSize : size; size = size < minSize ? minSize : size; return size; } bubbleFontSize(d) { const maxRadious = 50; const minRadious = 1; const maxFactor = 0.5; const minFactor = 0.1 const sizeFactor = d3.scaleLinear([minRadious,maxRadious], [minFactor, maxFactor])(d.r); let size = d.r > maxRadious ? this.responsiveFontSize()*maxFactor : d.r < minRadious ? this.responsiveFontSize()*minFactor : this.responsiveFontSize()*sizeFactor return size; } }32:T2865,class VisDistribucionCarreraGenericaInstitucion { constructor(el) { this._data = []; this._margin = {left: 50, right:50, top:20, bottom: 20}; this._refX = 0.5; this._refY = 0.5; this.totalWidth = width; this.totalHeight = width || 800; this.svgContainer = d3.select(el).select("svg"); this.svgContainer.selectAll("g.container").remove() this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) this.startup(); this.circleColorNormal = "blue"; this.circleColorHighlighted = "orange"; } startup() { this.totalHeight = this.totalWidth; this._width = this.totalWidth - this._margin.left - this._margin.right; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) // text label for the x axis /* this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()*0.70}`) .attr("y", 10) .attr("class", "title x") .attr("transform",`translate(${this._width/2},${this._height})`) .style("text-anchor", "middle") .text("Autor: Ernesto Laval - @elaval (TIDE), Fuente de datos: Datos abiertos MINEDUC"); */ // tittle /* this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()}`) .attr("y", -13) .attr("class", "header title") .attr("transform",`translate(${this._width/2},0)`) .style("text-anchor", "middle") .text("${}"); this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()/2}px`) .attr("y", this.responsiveFontSize()/2-9) .attr("class", "header subtitle") .attr("transform",`translate(${this._width/2},0)`) .style("text-anchor", "middle") .text("${}"); */ this.container.append("g") .attr("class", "nodes") this.tooltip = this.container.append("g") .attr("class", "myTooltip") this.tooltip.append("rect") .attr("height", this.responsiveFontSize()/4+4) .attr("fill", "grey") .attr("opacity", d => 0.9) .attr("y", 10 - this.responsiveFontSize()/4) this.tooltip.append("text") .attr("font-family", "sans-serif") .attr("font-size", this.responsiveFontSize()/4) .attr("fill", "#fff") .attr("y", 10) .style("text-anchor", "middle") this.color = d3.scaleOrdinal(d3.schemeCategory10).domain( _.chain(data).map(d => d.nomb_inst).uniq().value() ); this.pack = (data) => d3.pack() .size([this._width - 2, this._height - 2]) .padding(3) (d3.hierarchy({children: data}) .sum(d => +d.total)) } renderCarreras() { debugger; let data = this._data; data = _.sortBy(data, d => d.total) const top50 = {}; const sortedCarreras = data; this.render(data) } render(data) { if (data) { debugger; const self = this; data.forEach(d => d.name = `${d.carrera} ${d.nomb_inst}`) const root = this.pack(data); const dataNodes = root.leaves().filter(d => d.depth > 0) this.container .attr("viewBox", [0, 0, this._width, this._height]) .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); const t = d3.transition() .duration(750); let nodes = this.container.select("g.nodes").selectAll("g.node") .data(dataNodes, d => d.data.name); nodes.interrupt(); // Interrupt current transitions nodes.exit().select("circle") .transition(t) .attr("r",0) .remove() nodes.exit() .transition(t) .remove() const newNodes = nodes.enter().append("g") .attr("class", "node") .style("cursos", "pointer") newNodes.append("circle").attr("r",0); newNodes.append("clipPath"); newNodes.append("text"); newNodes .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); nodes = newNodes.merge(nodes) nodes .transition(t) .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); nodes.data(dataNodes, d => d.data.name).select("circle") nodes.data(dataNodes, d => d.data.name).select("text") nodes.data(dataNodes, d => d.data.name).select("clipPath") nodes .on("mouseover", function (d) { this.parentNode.appendChild(this); const myNode = d3.select(this); myNode.select("circle").attr("r", d => d.r) myNode.select("circle") .attr("stroke", "yellow") .attr("stroke-width", 2); self.showLabel(myNode); }) .on("mouseout", function (d) { const myNode = d3.select(this); myNode.select("circle") .attr("stroke", "none") .attr("stroke-width", 2); self.hideLabel(myNode); }) nodes.selectAll("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .transition(t) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill",d => this.color(d.data.nomb_inst)); nodes.selectAll("clipPath") .attr("id", d => (d.clipUid = DOM.uid("leaf")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); /* nodes.selectAll("text") .attr("font-size", d => { return this.bubbleFontSize(d) }) .attr("clip-path", d => d.clipUid) .selectAll("tspan") //.data(d => d.data.inst.split(/(?=[A-Z][^A-Z])/g)) .data(d => (this.alias[d.data.name] ? this.alias[d.data.name] : d.data.name).split(/\s/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => { return d }); */ this.container.select("text.header.title") .transition() .text(`${"a"} `); this.container.select("text.header.subtitle") .transition() .text(`${"b"} ${this._genero ? ` [${this.valuesGenero[(+this._genero-1)]} ] ` : "" } (n=${this.totalAlumnos})`); } } showLabel(node) { debugger; const nodeData = node.datum(); this.tooltip .attr("transform", `translate(${nodeData.x},${nodeData.y+nodeData.r+15})`) this.tooltip.style("display", null) //this.tooltip.select("text").text(`${nodeData.data.name} (n=${nodeData.data.total})`) this.tooltip.select("text") .selectAll("tspan") .data([nodeData.data.carrera,nodeData.data.nomb_inst, `n=${form.n(nodeData.data.total)}`]) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => { return d }); const textWidth = this.tooltip.select("text").node().getBBox().width const textHeight = this.tooltip.select("text").node().getBBox().height this.tooltip.select("rect") .attr("x", function(d) {return -textWidth/2;}) .attr("y", -textHeight+14) .attr("width", function(d) {return textWidth}) .attr("height", function(d) {return textHeight+1}) } hideLabel(node) { this.tooltip.style("display", "none") } getCount(d) { if (this._genero) { return +this._genero == 1 ? d.hombres : d.mujeres; } else { return d.count } } getTotal(data) { return _.reduce(data, (memo,d) => memo + +this.getCount(d),0) } defaultDisplay(d) { return this._defaultItems[d.label]; } foundSearch(d) { return this.textMatch(d.label, this.searchText) } textMatch(text, searchText) { const strRegExPattern = `${searchText}`; return text.match(new RegExp(strRegExPattern,'gi')); } schoolDict(_) { this._schoolDict = _; return this; } genero(_) { this._genero = _; return this; } data(_) { this._data = _; this.startup(); return this; } margin(_) { this._margin = _; this.startup(); return this; } refX(_) { this._refX = _; this.startup(); return this; } refY(_) { this._refY = _; this.startup(); return this; } width(_) { this.totalWidth = _; this._width = this.totalWidth - this._margin.left - this._margin.right; this.startup(); return this; } height(_) { this.totalHeight = _; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.startup(); return this; } search(_) { this.searchText = _; this.render(); return this; } defaultItems(_) { this._defaultItems = _; this.render(); return this; } responsiveFontSize() { const maxSize = 36; const minSize = 12; let size = d3.scaleLinear([300,1024], [minSize, maxSize])(width); size = size > maxSize ? maxSize : size; size = size < minSize ? minSize : size; return size; } bubbleFontSize(d) { const maxRadious = 50; const minRadious = 1; const maxFactor = 0.5; const minFactor = 0.1 const sizeFactor = d3.scaleLinear([minRadious,maxRadious], [minFactor, maxFactor])(d.r); let size = d.r > maxRadious ? this.responsiveFontSize()*maxFactor : d.r < minRadious ? this.responsiveFontSize()*minFactor : this.responsiveFontSize()*sizeFactor return size; } }33:T27b2,class VisDistribucionCarreraGenerica { constructor(el) { this._data = []; this._margin = {left: 50, right:20, top:40, bottom: 20}; this._refX = 0.5; this._refY = 0.5; this.totalWidth = width; this.totalHeight = width || 800; this.svgContainer = d3.select(el).select("svg"); this.svgContainer.selectAll("g.container").remove() this.startup(); this.circleColorNormal = "blue"; this.circleColorHighlighted = "orange"; } startup() { this.totalHeight = this.totalWidth; this._width = this.totalWidth - this._margin.left - this._margin.right; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) // text label for the x axis /* this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()*0.70}`) .attr("y", 10) .attr("class", "title x") .attr("transform",`translate(${this._width/2},${this._height})`) .style("text-anchor", "middle") .text("Autor: Ernesto Laval - @elaval (TIDE), Fuente de datos: Datos abiertos MINEDUC"); */ // tittle /* this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()}`) .attr("y", -13) .attr("class", "header title") .attr("transform",`translate(${this._width/2},0)`) .style("text-anchor", "middle") .text("${}"); this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", `${this.responsiveFontSize()/2}px`) .attr("y", this.responsiveFontSize()/2-9) .attr("class", "header subtitle") .attr("transform",`translate(${this._width/2},0)`) .style("text-anchor", "middle") .text("${}"); */ this.container.append("g") .attr("class", "nodes") this.tooltip = this.container.append("g") .attr("class", "myTooltip") this.tooltip.append("rect") .attr("height", this.responsiveFontSize()/4+4) .attr("fill", "grey") .attr("opacity", d => 0.9) .attr("y", 10 - this.responsiveFontSize()/4) this.tooltip.append("text") .attr("font-family", "sans-serif") .attr("font-size", this.responsiveFontSize()/4) .attr("fill", "#fff") .attr("y", 10) .style("text-anchor", "middle") this.color = d3.scaleOrdinal(d3.schemeCategory10).domain([ "Universidades", "Institutos Profesionales", "Centros de Formación Técnica" ]); this.pack = (data) => d3.pack() .size([this._width - 2, this._height - 2]) .padding(3) (d3.hierarchy({children: data}) .sum(d => +d.total)) } renderCarreras() { debugger; let data = this._data; data = _.sortBy(data, d => d.total) const top50 = {}; const sortedCarreras = data; this.render(data) } render(data) { if (data) { debugger; const self = this; data.forEach(d => d.name = `${d.carrera} ${d.tipo_inst}`) const root = this.pack(data); const dataNodes = root.leaves().filter(d => d.depth > 0) this.container .attr("viewBox", [0, 0, this._width, this._height]) .attr("font-size", 10) .attr("font-family", "sans-serif") .attr("text-anchor", "middle"); const t = d3.transition() .duration(750); let nodes = this.container.select("g.nodes").selectAll("g.node") .data(dataNodes, d => d.data.name); nodes.interrupt(); // Interrupt current transitions nodes.exit().select("circle") .transition(t) .attr("r",0) .remove() nodes.exit() .transition(t) .remove() const newNodes = nodes.enter().append("g") .attr("class", "node") .style("cursos", "pointer") newNodes.append("circle").attr("r",0); newNodes.append("clipPath"); newNodes.append("text"); newNodes .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); nodes = newNodes.merge(nodes) nodes .transition(t) .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); nodes.data(dataNodes, d => d.data.name).select("circle") nodes.data(dataNodes, d => d.data.name).select("text") nodes.data(dataNodes, d => d.data.name).select("clipPath") nodes .on("mouseover", function (d) { this.parentNode.appendChild(this); const myNode = d3.select(this); myNode.select("circle").attr("r", d => d.r) myNode.select("circle") .attr("stroke", "yellow") .attr("stroke-width", 2); self.showLabel(myNode); }) .on("mouseout", function (d) { const myNode = d3.select(this); myNode.select("circle") .attr("stroke", "none") .attr("stroke-width", 2); self.hideLabel(myNode); }) nodes.selectAll("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .transition(t) .attr("r", d => d.r) .attr("fill-opacity", 0.7) .attr("fill",d => this.color(d.data.tipo_inst)); nodes.selectAll("clipPath") .attr("id", d => (d.clipUid = DOM.uid("leaf")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); /* nodes.selectAll("text") .attr("font-size", d => { return this.bubbleFontSize(d) }) .attr("clip-path", d => d.clipUid) .selectAll("tspan") //.data(d => d.data.inst.split(/(?=[A-Z][^A-Z])/g)) .data(d => (this.alias[d.data.name] ? this.alias[d.data.name] : d.data.name).split(/\s/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => { return d }); */ this.container.select("text.header.title") .transition() .text(`${"a"} `); this.container.select("text.header.subtitle") .transition() .text(`${"b"} ${this._genero ? ` [${this.valuesGenero[(+this._genero-1)]} ] ` : "" } (n=${this.totalAlumnos})`); } } showLabel(node) { debugger; const nodeData = node.datum(); this.tooltip .attr("transform", `translate(${nodeData.x},${nodeData.y+nodeData.r+15})`) this.tooltip.style("display", null) //this.tooltip.select("text").text(`${nodeData.data.name} (n=${nodeData.data.total})`) this.tooltip.select("text") .selectAll("tspan") .data([nodeData.data.carrera,nodeData.data.tipo_inst, `n=${form.n(nodeData.data.total)}`]) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => { return d }); const textWidth = this.tooltip.select("text").node().getBBox().width const textHeight = this.tooltip.select("text").node().getBBox().height this.tooltip.select("rect") .attr("x", function(d) {return -textWidth/2;}) .attr("y", -textHeight+14) .attr("width", function(d) {return textWidth}) .attr("height", function(d) {return textHeight+1}) } hideLabel(node) { this.tooltip.style("display", "none") } getCount(d) { if (this._genero) { return +this._genero == 1 ? d.hombres : d.mujeres; } else { return d.count } } getTotal(data) { return _.reduce(data, (memo,d) => memo + +this.getCount(d),0) } defaultDisplay(d) { return this._defaultItems[d.label]; } foundSearch(d) { return this.textMatch(d.label, this.searchText) } textMatch(text, searchText) { const strRegExPattern = `${searchText}`; return text.match(new RegExp(strRegExPattern,'gi')); } schoolDict(_) { this._schoolDict = _; return this; } genero(_) { this._genero = _; return this; } data(_) { this._data = _; this.startup(); return this; } margin(_) { this._margin = _; this.startup(); return this; } refX(_) { this._refX = _; this.startup(); return this; } refY(_) { this._refY = _; this.startup(); return this; } width(_) { this.totalWidth = _; this._width = this.totalWidth - this._margin.left - this._margin.right; this.startup(); return this; } height(_) { this.totalHeight = _; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.startup(); return this; } search(_) { this.searchText = _; this.render(); return this; } defaultItems(_) { this._defaultItems = _; this.render(); return this; } responsiveFontSize() { const maxSize = 36; const minSize = 12; let size = d3.scaleLinear([300,1024], [minSize, maxSize])(width); size = size > maxSize ? maxSize : size; size = size < minSize ? minSize : size; return size; } bubbleFontSize(d) { const maxRadious = 50; const minRadious = 1; const maxFactor = 0.5; const minFactor = 0.1 const sizeFactor = d3.scaleLinear([minRadious,maxRadious], [minFactor, maxFactor])(d.r); let size = d.r > maxRadious ? this.responsiveFontSize()*maxFactor : d.r < minRadious ? this.responsiveFontSize()*minFactor : this.responsiveFontSize()*sizeFactor return size; } }34:T1e52,class VisStudents2 { constructor(el) { this._data = []; this._margin = {left: 50, right:20, top:20, bottom: 60}; this._refX = 0.5; this._refY = 0.5; this._totalWidth = width; this._totalHeight = width / 2 this.svgContainer = d3.select(el); this.startup(); this.circleColorNormal = "blue"; this.circleColorHighlighted = "orange"; } startup() { this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scaleLinear().domain([0,1]).range([0,this._width]) this.yScale = d3.scaleLinear().domain([0,d3.max(this._data, d => d.y)]).range([this._height,0]) this.yAxis = d3.axisLeft(this.yScale); this.xAxis = d3.axisBottom(this.xScale); this.sizeScale = d3.scaleLinear().domain(d3.extent(this._data, d => +d.size)).range([2,10]) this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.svgContainer.selectAll("g.container").remove() this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) this.container .append("g") .attr("class", "y axis") this.container .append("g") .attr("transform", `translate(0,${this._height})`) .attr("class", "x axis") this.container .append("line") .attr("class", "reference x") this.container .append("line") .attr("class", "reference y") // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", this._margin.bottom - 30) .attr("class", "title x") .attr("transform",`translate(${this._width},${this._height})`) .style("text-anchor", "end") .text("Ranking escolar (proporción de estudiantes en 30% superior)"); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("class", "title y") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Vulnerabilidad (proporción de estudiantes prioritarios)"); // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", this._margin.bottom - 10) .attr("class", "title x") .attr("transform",`translate(${0},${this._height})`) .style("text-anchor", "start") .text("Autor: Ernesto Laval (TIDE), Fuente de datos: Datos abiertos MINEDUC"); } render(searchText) { if (this._data && this._data.length) { const self = this; //debugger; this.searchText = searchText; this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .call(this.xAxis) let nodes = this.container.selectAll("nodes.item") .data(this._data) .join("g") .attr("class", "item") .attr("transform", d => `translate(${this.xScale(d.x)}, ${this.yScale(d.y)})`) nodes.call(this.setLabels.bind(this)) nodes .style("cursor", "pointer") nodes .on("mouseover", function (d) { this.parentNode.appendChild(this); const myNode = d3.select(this); myNode.select("circle") .attr("fill", self.circleColorHighlighted); self.showLabel(myNode); }) .on("mouseout", function (d) { const myNode = d3.select(this); myNode.select("circle") .attr("fill", self.circleColorNormal); if (!self.defaultDisplay(d)) { self.hideLabel(myNode); } }) nodes.append("circle") .attr("r", d => this.sizeScale(d.size)) .attr("fill", d => this.circleColorNormal) .attr("opacity", d => { let opacity = 0.6; if (this.searchText) { opacity = (this.textMatch(d.label, this.searchText || null)) ? 0.6 : 0.1; } return opacity }) nodes.each(function(d,i) { //startupLabel[d.label] ? this.parentNode.appendChild(this) : null; }) this.container.select("line.reference.x") .attr("x1", this.xScale(this._refX)) .attr("x2", this.xScale(this._refX)) .attr("y1", 0) .attr("y2", this._height) .attr("stroke", "grey") .attr("stroke-width", 1) this.container.select("line.reference.y") .attr("y1", this.yScale(this._refY)) .attr("y2", this.yScale(this._refY)) .attr("x1", 0) .attr("x2", width) .attr("stroke", "grey") .attr("stroke-width", 1) } } setLabels(node) { node.selectAll("g.label") .data(d => [d]) .join( enter => { const newLabel = enter.append("g") .attr("class", "label"); newLabel.append("rect"); newLabel.append("text"); } ) const labels = node.selectAll("g.label") labels.style("display", "none"); // Show only defauklt or searched items labels .style("display", d => { if (this.searchText) { const found = this.foundSearch(d); if (found) { return null; } else { return "none"; } } else { const defShow = this.defaultDisplay(d); if (defShow) { return null } else { return "none" } } }) labels.select("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", d => this.sizeScale(d.size) + 10) .text(d => { return d.label }) labels.select("rect") .attr("fill", "lightgrey") .attr("opacity", d => 0.8) .attr("x", function(d) {return -this.parentNode.getBBox().width/2;}) .attr("y", d => this.sizeScale(d.size) + 2) .attr("height", 10) .attr("width", function(d) {return this.parentNode.getBBox().width;}) } showLabel(node) { node.select("g.label").style("display", null) } hideLabel(node) { node.select("g.label").style("display", "none") } defaultDisplay(d) { return this._defaultItems[d.label]; } foundSearch(d) { return this.textMatch(d.label, this.searchText) } textMatch(text, searchText) { const strRegExPattern = `${searchText}`; return text.match(new RegExp(strRegExPattern,'gi')); } data(_) { this._data = _; this.startup(); return this; } margin(_) { this._margin = _; this.startup(); return this; } refX(_) { this._refX = _; this.startup(); return this; } refY(_) { this._refY = _; this.startup(); return this; } width(_) { this.totalWidth = _; this._width = this.totalWidth - this._margin.left - this._margin.right; this.startup(); return this; } height(_) { this._totalHeight = _; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.startup(); return this; } search(_) { this.searchText = _; this.render(); return this; } defaultItems(_) { this._defaultItems = _; this.render(); return this; } }35:T1d3d,class VisStudents { constructor(el) { this._data = []; this._margin = {left: 20, right:20, top:20, bottom: 20}; this._refX = 0.5; this._refY = 0.5; this._totalWidth = width / 2; this._totalHeight = this._totalWidth / 2 debugger; this.svgContainer = d3.select(el); this.startup(); this.circleColorNormal = "blue"; this.circleColorHighlighted = "orange"; } startup() { debugger; this._totalHeight = this._totalWidth / 2 this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scalePoint().range([0,this._width]) this.yScale = d3.scalePoint().range([this._height,0]) this.yAxis = d3.axisLeft(this.yScale); this.xAxis = d3.axisBottom(this.xScale); this.sizeScale = d3.scaleLinear().domain(d3.extent(this._data, d => +d.size)).range([2,10]) this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.svgContainer.selectAll("g.container").remove() this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) this.container .append("g") .attr("class", "y axis") this.container .append("g") .attr("transform", `translate(0,${this._height})`) .attr("class", "x axis") this.container .append("line") .attr("class", "reference x") this.container .append("line") .attr("class", "reference y") // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", this._margin.bottom - 30) .attr("class", "title x") .attr("transform",`translate(${this._width},${this._height})`) .style("text-anchor", "end") .text("Ranking escolar (proporción de estudiantes en 30% superior)"); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("class", "title y") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Vulnerabilidad (proporción de estudiantes prioritarios)"); // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", this._margin.bottom - 10) .attr("class", "title x") .attr("transform",`translate(${0},${this._height})`) .style("text-anchor", "start") .text("Autor: Ernesto Laval (TIDE), Fuente de datos: Datos abiertos MINEDUC"); } render(data) { if (data) { debugger; const numNodes = data.n / studentsPerNode; const nodes = _.range(numNodes).map(d => ({})); const whFactor = this._width / this._height; const cols = Math.ceil(Math.sqrt(numNodes * whFactor)); const rows = Math.ceil(numNodes / cols); nodes.forEach((d,i) => { d.col = i % cols; d.row = Math.floor(i / cols); if (i < data.top30.n / studentsPerNode) { d.top30 = true; if (i < data.top30.prioritarios.n / studentsPerNode) { d.prioritario = true; } else { d.prioritario = false } } else { d.top30 = false; if ((i - data.top30.n / studentsPerNode) < (data.noTop30.prioritarios.n / studentsPerNode)) { d.prioritario = true; } else { d.prioritario = false } } }) this.xScale.domain(_.range(cols)) this.yScale.domain(_.range(rows)) const radius = _.min([this.xScale.step(), this.yScale.step()]) / 2; this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .call(this.xAxis) let students = this.container.selectAll("d.student") .data(nodes) .join("g") .attr("class", "student") .attr("transform", d => `translate(${this.xScale(d.col)}, ${this.yScale(d.row)})`) students.selectAll("circle") .data(d => [d]) .join("circle") .attr("r", radius) .classed("top30", d => d.top30) .classed("noTop30", d => !d.top30) .classed("prioritario", d => d.prioritario) .classed("noPrioritario", d => !d.prioritario); } } setLabels(node) { node.selectAll("g.label") .data(d => [d]) .join( enter => { const newLabel = enter.append("g") .attr("class", "label"); newLabel.append("rect"); newLabel.append("text"); } ) const labels = node.selectAll("g.label") labels.style("display", "none"); // Show only defauklt or searched items labels .style("display", d => { if (this.searchText) { const found = this.foundSearch(d); if (found) { return null; } else { return "none"; } } else { const defShow = this.defaultDisplay(d); if (defShow) { return null } else { return "none" } } }) labels.select("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", d => this.sizeScale(d.size) + 10) .text(d => { return d.label }) labels.select("rect") .attr("fill", "lightgrey") .attr("opacity", d => 0.8) .attr("x", function(d) {return -this.parentNode.getBBox().width/2;}) .attr("y", d => this.sizeScale(d.size) + 2) .attr("height", 10) .attr("width", function(d) {return this.parentNode.getBBox().width;}) } showLabel(node) { node.select("g.label").style("display", null) } hideLabel(node) { node.select("g.label").style("display", "none") } defaultDisplay(d) { return this._defaultItems[d.label]; } foundSearch(d) { return this.textMatch(d.label, this.searchText) } textMatch(text, searchText) { const strRegExPattern = `${searchText}`; return text.match(new RegExp(strRegExPattern,'gi')); } data(_) { this._data = _; this.startup(); return this; } margin(_) { this._margin = _; this.startup(); return this; } refX(_) { this._refX = _; this.startup(); return this; } refY(_) { this._refY = _; this.startup(); return this; } width(_) { this._totalWidth = _; this._width = this._totalWidth - this._margin.left - this._margin.right; this.startup(); return this; } height(_) { this._totalHeight = _; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.startup(); return this; } search(_) { this.searchText = _; this.render(); return this; } defaultItems(_) { this._defaultItems = _; this.render(); return this; } }36:T1cdd,class VisCarreras { constructor(el) { this._data = []; this._margin = {left: 50, right:20, top:20, bottom: 60}; this._refX = 0.5; this._refY = 0.5; this._totalWidth = width; this._totalHeight = width / 2 this.svgContainer = d3.select(el); this.startup(); this.circleColorNormal = "blue"; this.circleColorHighlighted = "orange"; } startup() { this._width = this._totalWidth - this._margin.left - this._margin.right; this._height = this._totalHeight - this._margin.top - this._margin.bottom; this.xScale = d3.scalePoint().range([0,this._width]) this.yScale = d3.scalePoint().range([this._height,0]) this.yAxis = d3.axisLeft(this.yScale); this.xAxis = d3.axisBottom(this.xScale); this.sizeScale = d3.scaleLinear().domain(d3.extent(this._data, d => +d.size)).range([2,10]) this.svgContainer .attr("width",this._width+this._margin.left+this._margin.right) .attr("height",this._height+this._margin.top+this._margin.bottom) this.svgContainer.selectAll("g.container").remove() this.container = this.svgContainer.selectAll("g.container") .data([1]) .join("g") .attr("class", "container") .attr("transform", `translate(${this._margin.left},${this._margin.top})`) this.container .append("g") .attr("class", "y axis") this.container .append("g") .attr("transform", `translate(0,${this._height})`) .attr("class", "x axis") this.container .append("line") .attr("class", "reference x") this.container .append("line") .attr("class", "reference y") // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", this._margin.bottom - 30) .attr("class", "title x") .attr("transform",`translate(${this._width},${this._height})`) .style("text-anchor", "end") .text("Ranking escolar (proporción de estudiantes en 30% superior)"); // text label for the y axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("class", "title y") .attr("transform",`rotate(-90)`) .attr("y", 0 - this._margin.left) .attr("x",0 - (this._height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Vulnerabilidad (proporción de estudiantes prioritarios)"); // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", this._margin.bottom - 10) .attr("class", "title x") .attr("transform",`translate(${0},${this._height})`) .style("text-anchor", "start") .text("Autor: Ernesto Laval (TIDE), Fuente de datos: Datos abiertos MINEDUC"); } render(data) { if (data) { debugger; const numNodes = data.n / studentsPerNode; const nodes = _.range(numNodes).map(d => ({})); const whFactor = this._width / this._height; const cols = Math.ceil(Math.sqrt(numNodes * whFactor)); const rows = Math.ceil(numNodes / cols); nodes.forEach((d,i) => { d.col = i % cols; d.row = Math.floor(i / cols); if (i < data.top30.n / studentsPerNode) { d.top30 = true; if (i < data.top30.prioritarios.n / studentsPerNode) { d.prioritario = true; } else { d.prioritario = false } } else { d.top30 = false; if ((i - data.top30.n / studentsPerNode) < (data.noTop30.prioritarios.n / studentsPerNode)) { d.prioritario = true; } else { d.prioritario = false } } }) this.xScale.domain(_.range(cols)) this.yScale.domain(_.range(rows)) const radius = _.min([this.xScale.step(), this.yScale.step()]) / 2; this.container.select("g.y.axis") .call(this.yAxis) this.container.select("g.x.axis") .call(this.xAxis) let students = this.container.selectAll("d.student") .data(nodes) .join("g") .attr("class", "student") .attr("transform", d => `translate(${this.xScale(d.col)}, ${this.yScale(d.row)})`) students.selectAll("circle") .data(d => [d]) .join("circle") .attr("r", radius) .classed("top30", d => d.top30) .classed("noTop30", d => !d.top30) .classed("prioritario", d => d.prioritario) .classed("noPrioritario", d => !d.prioritario); } } setLabels(node) { node.selectAll("g.label") .data(d => [d]) .join( enter => { const newLabel = enter.append("g") .attr("class", "label"); newLabel.append("rect"); newLabel.append("text"); } ) const labels = node.selectAll("g.label") labels.style("display", "none"); // Show only defauklt or searched items labels .style("display", d => { if (this.searchText) { const found = this.foundSearch(d); if (found) { return null; } else { return "none"; } } else { const defShow = this.defaultDisplay(d); if (defShow) { return null } else { return "none" } } }) labels.select("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", d => this.sizeScale(d.size) + 10) .text(d => { return d.label }) labels.select("rect") .attr("fill", "lightgrey") .attr("opacity", d => 0.8) .attr("x", function(d) {return -this.parentNode.getBBox().width/2;}) .attr("y", d => this.sizeScale(d.size) + 2) .attr("height", 10) .attr("width", function(d) {return this.parentNode.getBBox().width;}) } showLabel(node) { node.select("g.label").style("display", null) } hideLabel(node) { node.select("g.label").style("display", "none") } defaultDisplay(d) { return this._defaultItems[d.label]; } foundSearch(d) { return this.textMatch(d.label, this.searchText) } textMatch(text, searchText) { const strRegExPattern = `${searchText}`; return text.match(new RegExp(strRegExPattern,'gi')); } data(_) { this._data = _; this.startup(); return this; } margin(_) { this._margin = _; this.startup(); return this; } refX(_) { this._refX = _; this.startup(); return this; } refY(_) { this._refY = _; this.startup(); return this; } width(_) { this.totalWidth = _; this._width = this.totalWidth - this._margin.left - this._margin.right; this.startup(); return this; } height(_) { this._totalHeight = _; this._height = this.totalHeight - this._margin.top - this._margin.bottom; this.startup(); return this; } search(_) { this.searchText = _; this.render(); return this; } defaultItems(_) { this._defaultItems = _; this.render(); return this; } }37:T779,statistics = { const stats = { n: _.chain(data).reduce((memo,d) => memo + +d.total,0).value(), // prioritarios | no prioritarios prioritarios: { n : _.chain(data).filter(d => +d.prioritario > 0 ).reduce((memo,d) => memo + +d.total,0).value(), top30: { n : _.chain(data).filter(d => +d.prioritario > 0 && +d.top30 > 0).reduce((memo,d) => memo + +d.total,0).value(), }, noTop30: { n : _.chain(data).filter(d => +d.prioritario > 0 && +d.top30 == 0).reduce((memo,d) => memo + +d.total,0).value(), }, }, noPrioritarios: { n : _.chain(data).filter(d => +d.prioritario == 0 ).reduce((memo,d) => memo + +d.total,0).value(), top30: { n : _.chain(data).filter(d => +d.prioritario == 0 && +d.top30 > 0).reduce((memo,d) => memo + +d.total,0).value(), }, noTop30: { n : _.chain(data).filter(d => +d.prioritario == 0 && +d.top30 == 0).reduce((memo,d) => memo + +d.total,0).value(), }, }, // top30 || no top30 top30: { n : _.chain(data).filter(d => +d.top30 > 0 ).reduce((memo,d) => memo + +d.total,0).value(), prioritarios: { n : _.chain(data).filter(d => +d.prioritario > 0 && +d.top30 > 0).reduce((memo,d) => memo + +d.total,0).value(), }, noPrioritarios: { n : _.chain(data).filter(d => +d.prioritario == 0 && +d.top30 >0).reduce((memo,d) => memo + +d.total,0).value(), }, }, noTop30: { n : _.chain(data).filter(d => +d.prioritario == 0 ).reduce((memo,d) => memo + +d.total,0).value(), prioritarios: { n : _.chain(data).filter(d => +d.prioritario > 0 && +d.top30 == 0).reduce((memo,d) => memo + +d.total,0).value(), }, noPrioritarios: { n : _.chain(data).filter(d => +d.prioritario == 0 && +d.top30 == 0).reduce((memo,d) => memo + +d.total,0).value(), }, } } return stats }38:[] 2f:{"title":"Educación superior en Chile","cells":[{"id":0,"value":"md`# Educación superior en Chile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`En Chile el año 2018 había ${form.n(statistics.n)} estudiantes matriculados en Educación superior, que se distribuyen en casi 15.000 carreras (o programas de estudios)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`El siguiente gráfico representa cada una de las carerras que hay en Chile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"el1 = html`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`Cada carrera específica representa un programa de estudios de una institución específica en una sede específica y la granularidad es muy grande. Para facilitar la visualizacion de los \"tipos de carrea\", en adelante utilizaremos el concepto de carrera genérica que es definido por el MINEDUC para agrupar carreras con un perfil similar.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`## Carreras genéricas por tipo de institución` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof tipos = checkbox({\n title: \"Tipo de institución\",\n description: \"Seleccione tipo\",\n options: [\n { label: 'Universidades', value: 'Universidades' },\n { label: 'Institutos Profesionales', value: 'Institutos Profesionales' },\n { label: 'Centros de Formación Técnica', value: 'Centros de Formación Técnica' },\n ],\n value: [\"Universidades\"],\n submit: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof niveles = checkbox({\n title: 'Nivel',\n description: 'Seleccione nivel',\n options: [\n { label: 'Pregrado', value: 'Pregrado' },\n { label: 'Postgrado', value: 'Postgrado' },\n { label: 'Postítulo', value: 'Postítulo' },\n ],\n value: [\"Pregrado\"]\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"el2 = html`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`Total de estudiantes en la selección: ${form.n(dataSel.reduce((memo, d) => memo + +d.total,0))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`Datos de matrícula en Educación Superior 2018
Fuente: Ministerio de Educación de Chile
\nAutor: Ernesto Laval (@elaval)
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`## Carreras genéricas por institución`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof tipos2 = checkbox({\n title: \"Tipo de institución\",\n description: \"Seleccione tipo\",\n options: [\n { label: 'Universidades', value: 'Universidades' },\n { label: 'Institutos Profesionales', value: 'Institutos Profesionales' },\n { label: 'Centros de Formación Técnica', value: 'Centros de Formación Técnica' },\n ],\n value: [\"Universidades\"],\n submit: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"viewof niveles2 = checkbox({\n title: 'Nivel',\n description: 'Seleccione nivel',\n options: [\n { label: 'Pregrado', value: 'Pregrado' },\n { label: 'Postgrado', value: 'Postgrado' },\n { label: 'Postítulo', value: 'Postítulo' },\n ],\n value: [\"Pregrado\"]\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"viewof carrera = select({\n title: \"Carrera\",\n options: _.concat(\"Todas\", _.chain(dataSel3).map(d => d.carrera).uniq().sort().value()),\n value: \"Todas\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"viewof institucion = select({\n title: \"Institución\",\n options: _.concat(\"Todos\", _.chain(dataSel3).map(d => d.nomb_inst).uniq().sort().value()),\n value: \"Todos\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"el3 = html`\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`Total de estudiantes: ${form.n(dataSel2.reduce((memo, d) => memo + +d.total,0))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`Datos de matrícula en Educación Superior 2018
Fuente: Ministerio de Educación de Chile
\nAutor: Ernesto Laval (@elaval)
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"html`