31:Te35,class LayoutComunas { constructor() { this._sourceData = null; this._data = []; this._width = 1; this.itemsPerColumn = 10; this.paddingFactor = 0.1; // fraction of r this.columnPadding = 5; this._types = [] this._nodes = [] this._numberOfItems = 100; this.xScale = d3.scaleBand() .domain(this._types) .range([0, this.width]) .padding(0.1); this._stats = {} this._nodes = _.range(0,this._numberOfItems).map(d => ({id:d})); } nodes(_args) { if (arguments.length) { this._nodes = _args; return this; } const allColumns = this.itemsPerColumn * this._types.length; const availableWidth = this.xScale.bandwidth()*this.xScale.domain().length; const columnWidth = this.xScale.bandwidth(); const _r = columnWidth/this.itemsPerColumn/2; this.padding = _r * this.paddingFactor; const r = _r - this.padding; const rows = Math.ceil(this._nodes.length / this.itemsPerColumn) const nodes = this._nodes.map((d,i) => ({ type: d.type, r : r, cx : (i % allColumns) * (r * 2 + this.padding), cy : Math.floor(i / allColumns) * (r * 2 + this.padding) })) _.chain(nodes).groupBy(d => d.type) .each((items,type) => { items.forEach((e,i) => { e.cx2 = this.xScale(type) + (i % this.itemsPerColumn) * (r * 2 + this.padding); e.cy2 = Math.floor(i / this.itemsPerColumn) * (r * 2 + this.padding); }) }).value() return nodes; } generateItems() { debugger; this._data = []; let total = _.reduce(this._types, (memo, type) => memo + +this._sourceData[type], 0); const countByType = {}; const buckets = {}; let totalCheck = 0; this._types.forEach(type => { const count = Math.round(this._numberOfItems * +this._sourceData[type] / total,0); countByType[type] = count; totalCheck += count; buckets[type] = _.filter(this._nodes, d => d.type == type); }) const diff = this._numberOfItems - totalCheck; const lastType = this._types[this._types.length-1]; // Adjust last type to macth the total countByType[lastType] = countByType[lastType] + diff; let freeNodes = _.filter(this._nodes, d => this._types.indexOf(d.type) == -1); // Collect freeNodes this._types.forEach(type => { const newTypeNodes = _.slice(buckets[type], 0, countByType[type]); const newFreeNodes = _.slice(buckets[type],countByType[type], buckets[type].length) buckets[type] = newTypeNodes; freeNodes = _.concat(freeNodes, newFreeNodes); }) // Fill buckets with freeNodes this._types.forEach(type => { const numNeededNodes = countByType[type] - buckets[type].length; const additionalNodes = _.slice(freeNodes, 0, numNeededNodes); freeNodes = _.slice(freeNodes, numNeededNodes, freeNodes.length); buckets[type] = _.concat(buckets[type], additionalNodes); //buckets[type] = _.sortBy(buckets[type], d => d.id); buckets[type].forEach(d => d.type = type); this._stats[type] = countByType[type]; }) } data(_) { this._sourceData = _; this.generateItems(); return this; } types(_) { this._types = _; this.xScale.domain(this._types) return this; } width(_) { this._width = _; this.xScale.range([0, this._width]) return this; } scale() { return this.xScale; } stats() { return this._stats; } }32:Tdab,class VisComunas { constructor(el) { this._data = []; this._margin = {left: 20, right:20, top:50, bottom: 20}; this._totalWidth = width; this._totalHeight = width * 0.4; this.svgContainer = d3.select(el); this.types = ["universidad", "ip", "cft", "none"] this.startup(); } startup() { 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})`) this.headlines = this.container.append("g") .attr("class", "headlines") .selectAll("text.headline") .data(this.types) .join("text") .attr("class", "headline") .attr("text-anchor", "start") .attr("y", -20) .attr("font-size", width/40) .attr("font-family", "sans-serif") .text(d => d) // text label for the x axis this.container.append("text") .attr("font-family", "sans-serif") .attr("font-size", width/60) .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"); this.color = d3.scaleOrdinal(["universidad", "ip", "cft", "none"], d3.schemeCategory10) this.layout = new LayoutComunas(); } render(options) { debugger; if (this._data) { if (this.nodes) { //layout.nodes(this.nodes); } this.nodes = this.layout .types(this.types) .width(this._width) .data(this._data) .nodes() const xScale = this.layout.scale(); const stats = this.layout.stats(); this.headlines .attr("x", d => { return xScale(d) }) .text(d => `${alias[d]} (${stats[d]})`) const self = this; const myNodes = this.container.selectAll("g.student") .data(this.nodes) .join("g") .attr("class", "student") myNodes .transition() .duration(4000) .attr("transform", d => { if (options.groups) { return `translate(${d.cx2}, ${d.cy2})` } else { return `translate(${d.cx}, ${d.cy})` } }) myNodes.selectAll("circle") .data(d => { return [d]; }) .join("circle") .attr("r", d => d.r) .transition() .duration(4000) .attr("fill", d => this.color(d.type)) } } data(_) { this._data = _; return this; } margin(_) { this._margin = _; 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; } }33:[] 2f:{"title":"","cells":[{"id":0,"value":"md`## Acceso a Educación Superior según Comuna`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"\n\n{\n const panel = html`\n\n

Comunas con bajo porcentaje de estudiantes que ingresan a educación superior

Comunas con alto porcentaje de estudiantes que ingresan a educación superior

\n\n

\n`;\n \n d3.select(panel).select(\".comunas.bajo\").selectAll(\"span.badge\")\n .data(_.slice(comunasExtremas.comunas25, 0, 10))\n .join(\"span\")\n .attr(\"class\", \"badge badge-warning lista comuna\")\n .text(d => d.comuna)\n .on(\"click\", (d,i) => {\n mutable comunaSeleccionada = d.comuna\n })\n \n d3.select(panel).select(\".comunas.alto\").selectAll(\"span.badge\")\n .data(_.slice(comunasExtremas.comunas75, 0, 10))\n .join(\"span\")\n .attr(\"class\", \"badge badge-primary lista comuna\")\n .text(d => d.comuna)\n .on(\"click\", (d,i) => {\n mutable comunaSeleccionada = d.comuna\n })\n \n return panel\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof comunaSelector = autoSelect({\n options: _.concat([\"CHILE\"],directorioComunas.map(d => d.comuna)),\n placeholder: \"Selecciona tu comuna aquí ...\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"html`\n

Si 100 estudiantes egresaran de IV Medio en ${comunaSeleccionada || \"CHILE\"}, así se distribuiría su matrícula en educación superior al año siguiente

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"chart0 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"html`

Datos de ${comunaSeleccionada}
\nEgresados de educación media en 2017: ${formatNumero(comuna.estudiantes)}
\nMatrículados en 2018 en \n

Universidad: ${formatNumero(comuna.universidad)}\n

IP : ${formatNumero(comuna.ip)} \n

CFT : ${formatNumero(comuna.cft)}\n

Ninguna : ${formatNumero(comuna.none)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"html`

La base de 100 estudiantes permite aproximar el porcentaje de distribución. Datos en base a registro de egreso en Enseñanza Media de liceos y colegios para jóvenes el año 2017 y registro de matrícula en educación superior el año 2018

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"{\n comunaSelector;\n mutable comunaSeleccionada = comunaSelector\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"mutable comunaSeleccionada=\"CHILE\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"comunasExtremas = {\n const p25 = d3.quantile(dataTasaES.map(d => d.tasaES).sort(), 0.25);\n const p75 = d3.quantile(dataTasaES.map(d => d.tasaES).sort(), 0.75);\n \n return {\n comunas25: _.chain(dataTasaES).filter(d => d.tasaES < p25 && d.estudiantes >= 100).sortBy(d => d.tasaES).value(),\n comunas75: _.chain(dataTasaES).filter(d => d.tasaES > p75 && d.estudiantes >= 100).sortBy(d => -d.tasaES).value(),\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"dataTasaES = {\n return _.chain(data).filter(d => d.comuna).map(d => ({comuna: d.comuna, tasaES : 1 - (+d.no_es/d.estudiantes), estudiantes: +d.estudiantes})).value()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"comuna = {\n if (comunaSeleccionada == \"CHILE\" || comunaSeleccionada ==\"\") {\n return nationalLevel\n } else {\n const item = _.find(data, d => d.comuna == comunaSeleccionada);\n item.none = item.no_es;\n return item\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"vis\n //.data(nationalLevel)\n .data(comuna)\n .render({groups : true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"vis = new VisComunas(chart0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"alias = ({\n \"none\" : \"Ninguna\",\n \"universidad\" : \"Universidad\",\n \"cft\" : \"CFT\",\n \"ip\" : \"IP\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"nationalLevel = {\n return _.reduce(data, (memo, d) => {\n memo.estudiantes += +d.estudiantes;\n memo.universidad += +d.universidad;\n memo.ip += +d.ip;\n memo.cft += +d.cft;\n memo.none += +d.no_es;\n return memo\n }, {estudiantes:0, universidad:0, ip:0, cft:0, none:0})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"formatNumero = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = d3.tsv(\"https://gist.githubusercontent.com/elaval/6fe1a566cf354149c39af04a3df03dd4/raw/6d82223275d8f025c19a7f909e1e7be9f7d07a49/comunas_es_20190724_1703.txt\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"directorioComunas = d3.tsv(\"https://gist.githubusercontent.com/elaval/6fe1a566cf354149c39af04a3df03dd4/raw/baaa71b2700952deb4ded973b41a605f273f6117/directorio_comunas.txt\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"style_bootstrap","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"ga = {\n const ga = await require(\"https://www.google-analytics.com/analytics.js\").catch(() => window.ga);\n ga(\"create\", \"UA-143020946-4\", \"auto\");\n ga(\"send\", \"pageview\", html``.pathname);\n return ga;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"{\n comunaSeleccionada;\n ga('send', 'event', 'Comuna Selector', `${comunaSeleccionada}`,'Selected' );\n return md`gaEvt`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"import { groupedSelect, style_bootstrap } from \"@elaval/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"import {autoSelect} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}