30:T5db,{ tries; const sample = [candidate1,candidate2]; let selected = null; let el = null; const selectedItem = (nel,pos) => { selected = pos; addAnswer(sample[pos], sample[pos == 0 ? 1 : 0]) d3.select(el).selectAll("i") .classed("fa-check-circle", false) .classed("fa-circle", true) d3.select(el).select(`div.pos${pos}`) .selectAll("i") .classed("fa-check-circle", true) .classed("fa-circle", false) setTimeout(() => { mutable tries = mutable tries + 1; },500) } const item = (el, pos) => { const candidate = sample[pos] const el1 = el.select(`div.pos${pos}`); el1.select("img") .attr("src", hiresImage(candidate)) el1.select("div.name") .text(candidate.name) el1.select("div.description") .text(candidate.description) el1.on("click", function() { selectedItem(el,pos); }) } el = html`

` d3.select(el).call(item, 0); d3.select(el).call(item, 1); return el }31:Tf62,chart = { const imgSize = 40; debugger; const scoreExtent = d3.extent(nodes, d => d.score); const yScale = d3.scaleLinear().domain(scoreExtent).range([height/2-2*imgSize, -height/2+imgSize]) const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(imgSize).strength(0.01)) .force("charge", d3.forceManyBody().strength(-200)) .force("x", d3.forceX()) .force("y", d3.forceY().y(d => { return yScale(d.score) }).strength(1) ); const svg = d3.create("svg") .attr("height", height) .attr("width", width) .attr("viewBox", [-width / 2, -height / 2, width, height]); svg .append('clipPath') .attr('id','clipObj') .append('circle') .attr('cx',0) .attr('cy',0) .attr('r',imgSize/2); svg .append('clipPath') .attr('id','clipObjLg') .append('circle') .attr('cx',0) .attr('cy',0) .attr('r',imgSize); const link = svg.append("g") .attr("stroke", "#999") .attr("class", "link") .attr("stroke-width", 0.6) .attr("opacity", 0) .selectAll("line") .data(links) .join("line"); const node = svg.append("g") .attr("fill", "#fff") .attr("stroke", "#000") .attr("stroke-width", 1.5) .selectAll("g.leader") .data(nodes) .join("g") .attr("class", "leader") .call(drag(simulation)); node.selectAll("image") .data(d => [d]) .join("image") .attr("xlink:href", d => d.photoURL) .attr("x", function(d) { return -imgSize/2;}) .attr("y", function(d) { return -imgSize/2;}) .attr("height", imgSize) .attr("width", imgSize) .attr('clip-path','url(#clipObj)'); const labels = node.selectAll("g.label") .data(d => [d]) .join("g") .attr("class", "label"); labels.selectAll("text") .data(d => [d]) .join("text") .attr("text-anchor", "middle") .attr("fill", "darkgrey") .attr("opacity", 0) .attr("dy", imgSize * 1.5) .text(d => d.name) node .on( 'mouseenter', function() { this.parentNode.append(this); // select element in current context d3.select( this ).select("image") .transition() .attr("x", function(d) { return -imgSize;}) .attr("y", function(d) { return -imgSize;}) .attr("height", 2*imgSize) .attr("width", 2*imgSize) .attr('clip-path','url(#clipObjLg)'); d3.select( this ).select("text") .transition() .attr("opacity", 0.8) ; }) // set back .on( 'mouseleave', function() { d3.select( this ).select("image") .transition() .attr("x", function(d) { return -imgSize/2;}) .attr("y", function(d) { return -imgSize/2;}) .attr("height", imgSize) .attr("width", imgSize) .attr('clip-path','url(#clipObj)'); d3.select( this ).select("text") .transition() .attr("opacity", 0) ; }); node.append("title") .text(d => { return d.name; }); simulation.on("tick", () => { node .attr("transform", d => { d.y = Math.max(-height/2+imgSize, Math.min(height/2- imgSize, d.y)); d.x = Math.max(-width/2 +imgSize, Math.min(width/2 - imgSize, d.x)) return `translate(${d.x}, ${d.y})` }); link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:T682,html`

Lógica para seleccionar pares de personajes

Se cuenta con una colección de ${leaders.length} personas, entre las cuales se presentan pares para que el usuario eliga una con una valoración más positiva que el otro. A medida que se selecciona una opción, se construye un grafo con todas las relaciones entre personas y se asigna un puntaje a cada uno (mayor puntaje a mayor valoración)

La selección de pares se hace con los siguientes criterios:

La primera vez, se selecciona en forma aleatoria la primera y segunda persona
Una persona que haya sido seleccionada por sobre otra, se volverá a elegir como la primera opción de la siguiente pareja, mientras existan otras personas con mayor puntaje que ella
Si para la persona seleccionada previamente, no hay otras personas con mayor puntaje, entonces no será elegida para la proxima pregunta.
En este caso la primera persona se eligirá aleatoriamente entre todos los candidatos.
Para promover que se incluyan nuevos candidatos, esta selección tiene un "sesgo hacia nuevas personas" con el siguiente criterio:
- 50% chance: se elige aleatoriamente entre las personas que no han sido elegidas anteriormente
- 50% chance: se elige aleatoriamente entre todas las personas
La segunda opción en la pareja será elegida en forma aleatoria entre las personas que tengan un mayor puntaje que la primera persona.
Si no hay otras personas con mayor puntaje, se seleccionará aleatoriamente entre todas las otras personas (evitando que se dupliquen las parejas ya presentadas).

`33:T5e9,function updateScores() { /* We update the calculation of scores for each node For each of the "leave" base nodes (nodes with no children -> candidates that have never been selected above another candidate) we assign a score of 0. We traverse the graph asigning each ancestor a score that is at least 1 more than their children We avoid circular references, by ignoring ancestors that have already been in the same branch children. */ // 0 Points to base of the graph _.each(nodesDict, (d,key) => d.score = 0) // Recursive function // node: is the node to analyse, // score: is target score (+1) higher than a previous child, // ignore: is a set of nodes to be ignored to prevent circular references function updateScores(node, score, ignore) { // We update the score if the target is higher than curren score if (node && score > node.score) node.score = score; node && node.ancestors && node.ancestors.forEach(ancestor => { if (!ignore.has(ancestor)) { const newIgnoreSet = new Set(ignore) // We update scores for each of the ancestors (expect ignored ones) updateScores(ancestor, score +1, newIgnoreSet.add(node)); } }) } // We get each of the leaves (nodes with no children) const leaves = _.chain(nodesDict).map(d => d).filter(d => !d.children.size).value(); // For each leave node, we update the scores _.each(leaves,d => { const ignore = new Set(); updateScores(d, 0, ignore) }) }34:[] 2e:{"title":"Líderes positivos en Chile","cells":[{"id":0,"value":"md`# Líderes positivos en Chile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"md`Este es un ejercicio para identificar personas que consideras líderes positivos. Te presentamos pares de personas y debes elegir uno en cada par. Progresivamente iras priorizandolos y al final obtendrás una lista de tus TOP líderes positivos. Te invitamos a sacar una foto de pantalla y compartirla en twitter bajo el hashtag #lideres_positivos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`## Selecciona una de las siguientes 2 personas\nSelecciona la que sea más positiva entre ambas (aunque ninguno coincida con tu pensamiento). La selección sirve para establecer un orden relativo entre ellas.\n\nUtiliza como criterio de **líder más positivo** el que sea una persona con atributos valorados por la mayoría de los chilenos (aunque no compartas su pensamiento político). Por ejemplo, que sea una persona empática, con capacidad de diálogo, que busque el bien del país por sobre sus interéses, ...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"md`No hay un número fijo de preguntas, **puedes detenerte en cualquier momento**. Pero mientras más respuestas, mejor será el resultado.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"md`## Piramide de preferencias\nSe muestra la posición relativa de las personas que has elegido. Mientras mas alto esté la persona, más positiva es su valoración en relación al resto`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`## Tu ranking de líderes positivos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"{\n myAnswers\n tries;\n const lista= _.chain(leaders).filter(d => d.score).sortBy(d => -d.score).slice(0,10).value();\n return html`\n

\n ${lista.map(d => `\n \n

${d.name}

\n\n `)}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"md`## ¿Puedes guardar tus respuestas?\nAl guardarlas, tus respuestas podrán ser combinadas **en forma anónima** con las respuestas de otros usuarios para generar un reporte agregado e identificar distintos grupos (o clusters) de líderes positivos. \n\nTe agradecemos que compartas tus respuestas para poder analizar los datos y compartir - en forma gratuita - nuevas visualizaciones sobre líderes positivos.\n\n**Nunca se publicará tu identidad, no se compartiran tus datos personales con terceros, ni se comercializarán los resultados**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"viewof myProvider = {\n const storedProvider = localStorage.getItem(\"myProvider\") || \"twitter.com\"\n return radio({\n title: 'Para guardar los datos, necesitamos identificarte en forma única, por lo que te pedimos que te autentiques con alguno de los siguientes proveedores de servicio en los que ya tengas una cuenta de usuario',\n description: 'Nuetsro sitio nunca accederá a tus credenciales. Sólo serán solicitadas por el respectivo proveedor (ej. en un panel autenticación de Twitter)',\n options: [\n { label: 'Twitter', value: \"twitter.com\" },\n { label: 'Facebook', value: \"facebook.com\" },\n { label: 'Google', value: \"google.com\" },\n { label: 'Github', value: \"github.com\" },\n ],\n value: storedProvider\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"{\n let msg = html``\n if (authError) {\n msg = html`

${authError.message}

`\n } else {\n if (!user) {\n msg = html`

No estás autenticado

`\n } else {\n msg = html`

Estás autenticado como ${user.displayName} en ${user.providerData[0].providerId}

`\n }\n }\n \n return msg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof user = {\n const provider = providers[myProvider];\n const form = html`

`;\n form.value = null\n form.button.onclick = async event => {\n mutable authError = null\n firebase.auth().signInWithPopup(provider).then(function(result) {\n console.log(\"result\", result)\n form.value = result.user\n form.dispatchEvent(new CustomEvent(\"input\"));\n }).catch(function(error) {\n mutable authError = error\n console.error(error)\n })\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"viewof guardar = {\n const form = html``;\n form.value = null\n form.button.onclick = async event => {\n mutable saveResult = null\n if (user) {\n saveData()\n .then(() => {\n mutable saveResult = \"ok\"\n })\n .catch(err => {\n mutable saveResult = \"nok\"\n })\n } else {\n mutable saveResult = \"nouser\"\n }\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"{\n saveResult;\n let msg = html``\n if(mutable saveResult == \"ok\") { \n msg = html`

Guardado correctamente

`\n } else if (mutable saveResult == \"nok\") {\n msg = html`

Guardado correctamente

`\n } else if (mutable saveResult == \"nouser\") {\n msg = html`

No está autenticado

`\n }\n return msg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"md`## Usa el siguiente botón para BORRAR TODAS tus selecciones y empezar nuevamente`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1401,"value":"viewof borrar = {\n const form = html``;\n form.value = null\n form.button.onclick = async event => {\n resetAll();\n mutable tries = 0;\n };\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`### ¿Tienes sugerencias de nuevas personas para incluir en las opciones?\nLos potenciales líderes son seleccionadas entre usuarios de Twitter con relevancia pública (ej. Políticos, Periodostas, Líderes de opinion). Se usa la fotografía, nombre y descripción que las propias personas han definido en Twitter.\n\nSi tienes sugerencias de nuevas personas, envía un Tweet mencionando a @elaval (para que no se me escape) con los hashtag #lideres_positivos #sugerencias y tus sugerencias (incluye el usuario en Twitter de cada personaje sugerido).\n\nPor ejemplo: \n\n**\"@elaval #lideres_positivos #sugerencia @juan_perez @diputadoTapia @donPedro\"**\n\nEn futuras versiones se agregarán nuevas personas y trataremos de incluir tus sugerencias.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"md`## Gracias por sus sugerencias de nuevas personas a\n- @escobarvilaben\n- @rodrigodelvalle\n- @dvd_javier\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"md`#### Colección de personas que se utilizan en la selección:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"{\n return html`\n ${leaders.map(d => `\n $\"${d.name}\"$ \n `)\n }\n `\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"md`## Notas metodológicas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1532,"value":"html`

Lógica para asignar puntaje

\n\nCada vez que se agrega una nueva selección, se expande un grafo (una red de nodos) en que algunas personas han sido preferidas por sobre otras.
\n

\nTodas las personas que no fueron preferidas por sobre otro, tienen un puntaje base de 0 puntos. \n

\nLa red de relaciones se recorre, empezando por cada uno de los nodos a la base (con 0 puntos), siguiendo los nodos que fueron preferidos por sobre el nodo actual. Se procura que cada nodo tenga al menos un punto más que los otros nodos por sobre los cuales fue preferido.\n

\nPara evitar referencias circulares, al recorrer el grafo se evita repetir nodos que ya fueron recorridos.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"html`\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`## Confguracion y librerías`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"html`\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"candidate1 = {\n tries;\n return getNextCandidate();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"candidate2 = {\n \n const higherScoring = _.orderBy(higherScoreCandidates(candidate1), d => d.score);\n \n if (higherScoring.length) {\n return _.sample(higherScoring);\n } else {\n const restOfCandidates = leaders.filter(d => {\n // Avoid previous answers\n const pairKey = [d.id, candidate1.id].sort().join(\"-\"); \n return !myAnswers[pairKey] && (d != candidate1)\n })\n return _.sample(restOfCandidates);\n }\n}\n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"myAnswers = {\n const previousAnswers = JSON.parse(localStorage.getItem(\"myAnswers\")) || {};\n rebuildGraph(previousAnswers)\n\n //return {}\n return previousAnswers\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"localSave = {\n myAnswers;\n tries;\n localStorage.setItem(\"myAnswers\", JSON.stringify(myAnswers))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"mutable authError = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"mutable saveResult = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"graphUpdate = {\n myAnswers;\n rebuildGraph(myAnswers);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"function saveData() {\n return db.collection(\"answers\").doc(user.uid).set(\n {\"answers\": JSON.stringify(myAnswers)}\n , { merge: true });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"function resetAll() {\n _.each(myAnswers, (d,key)=> {\n delete myAnswers[key];\n })\n \n _.each(nodesDict, (d,key)=> {\n delete nodesDict[key];\n })\n \n leaders.forEach(d => {\n d.score = 0;\n d.ancestors = new Set();\n d.children = new Set();\n })\n\n mutable nodes = [];\n mutable links = [];\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"function rebuildGraph(answers) {\n _.each(answers, (d,key) => {\n const candidate1 = leadersDict[d.first];\n const candidate2 = leadersDict[d.second];\n \n candidate1.score = candidate1.score || 0\n candidate2.score = candidate2.score || 0\n\n candidate1.ancestors = candidate1.ancestors || new Set();\n candidate2.ancestors = candidate2.ancestors || new Set();\n candidate1.children = candidate1.children || new Set();\n candidate2.children = candidate2.children || new Set();\n\n\n candidate2.ancestors.add(candidate1);\n candidate1.children.add(candidate2);\n\n candidate1.count = candidate1.count \n ? candidate1.count +1 : 1;\n candidate2.count = candidate2.count \n ? candidate2.count + 1 : 1;\n\n nodesDict[candidate1.id] = candidate1;\n nodesDict[candidate2.id] = candidate2;\n //updateScores();\n\n //updateCandidateStack(candidate1, candidate2);\n })\n mutable nodes = leaders.filter(d => nodesDict[d.id])\n updateScores();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"addAnswer = (candidate1, candidate2) => {\n \n const ids = [candidate1.twitterId, candidate2.twitterId].sort();\n const pairId = `${ids[0]}-${ids[1]}`\n\n debugger;\n myAnswers[pairId] = {\n first: candidate1.twitterId,\n second: candidate2.twitterId\n }\n \n candidate1.score = candidate1.score || 0\n candidate2.score = candidate2.score || 0\n \n candidate1.ancestors = candidate1.ancestors || new Set();\n candidate2.ancestors = candidate2.ancestors || new Set();\n candidate1.children = candidate1.children || new Set();\n candidate2.children = candidate2.children || new Set();\n\n \n candidate2.ancestors.add(candidate1);\n candidate1.children.add(candidate2);\n \n candidate1.score = \n candidate2.score > candidate1.score \n ? candidate2.score + 1\n : candidate1.score + 1 \n ;\n \n candidate1.count = candidate1.count \n ? candidate1.count +1 : 1;\n candidate2.count = candidate2.count \n ? candidate2.count + 1 : 1;\n \n updateScores();\n \n updateCandidateStack(candidate1, candidate2);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"updateCandidateStack = (candidate1, candidate2) => {\n // We will keep selecting the selected node, while there are other nodes with a higher score\n \n // We add candidate1 (selected candidate) to the stack if there are other nodes with higher score\n if (!nextCandidateStack.includes(candidate1)) {\n if (higherScoreCandidates(candidate1).length) {\n nextCandidateStack.push(candidate1)\n } \n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"getNextCandidate = () => {\n // We will select a candidate from the stack (usually the node that was previously selected)\n \n // If the stack is empty, we will add a random node to the stack\n // - 50% chance: one of the candidates that have never been selected\n // - 50% chance: any of the candidates (randomly selected)\n if (!nextCandidateStack.length) {\n // 50% chance of selecting a new candidate or an existing candidate\n if (d3.randomNormal(0, 1)() > 0) {\n let newCandidates = leaders.filter(d => !nodesDict[d.id])\n newCandidates = newCandidates.length ? newCandidates : leaders;\n nextCandidateStack.push(_.sample(newCandidates));\n } else {\n nextCandidateStack.push(_.sample(leaders));\n }\n \n }\n\n return nextCandidateStack.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"persistProvider = {\n myProvider;\n localStorage.setItem(\"myProvider\", myProvider)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"canvasImage = { \n \n /*\n Used to generate a canvas image of the Candidate Pyramid\n Currently disabled\n *\n tries;\n const canvas = html`