2b:null 2c:["$","title",null,{"children":"Formas encoding a palabras con peso en un texto | Hernan VALDIVIESO LOPEZ | Observable"}] 31:T4bd,text = `¿Qué hay detrás de los asesinatos de los excombatientes de las Farc? SEMANA tuvo acceso a un dramático informe de la Comisión de la Verdad que pone en evidencia la violencia contra los desmovilizados y entrega datos inéditos de la arremetida contra la Farc que deja 194 muertos. Desde 1990 han asesinado a 4.234 excombatientes. La crisis del coronavirus ha eclipsado la tragedia del exterminio violento de los excombatientes. Pero el fenómeno, un tanto invisible, sigue. La lógica de quién lleva las riendas en los lugares más remotos del país es la misma en estos días de pandemia que hace décadas. Allá donde el Estado no hace presencia, hay que acatar las órdenes de los grupos armados ilegales o exponerse a morir. A Carlos Alberto Castaño lo sacaron de la finca y lo acribillaron en un lugar boscoso. Juan Carlos Castillo murió asesinado cerca del proyecto productivo en el que trabajaba. José Isidoro Cuesta desafío al destino y regresó al territorio colectivo de donde lo habían sacado. E Irnel Flórez Forero y Belle Esther Carrillo fueron baleados en la región de El Pato (Caquetá), 15 días después de que la Comisión de la Verdad denunció la existencia de un panfleto`32:T9d1,weightsSize = (text, weights, width, colorText, colorHover, scale) => { const letterWidth = {}; const w = width; const div = document.createElement("div"); div.style.float = "left"; document.body.appendChild(div); let i = text.length; while (i--) { let letter = text.charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } let maxLength = 0 text.split(" ").forEach(d => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } if (length > maxLength){ maxLength = length; } }) let xFont = 0; let yFont = 0; let sizeFont if (scale == "exp"){ sizeFont = d3.scalePow().exponent(2); } else if (scale == "log"){ sizeFont = d3.scaleLog(); } else{ sizeFont = d3.scaleLinear(); } sizeFont .domain(d3.extent(weights)) .range([8, 20]); const words = text.split(" ").map((d, index) => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } let newWidthFont = xFont + 10 + (length * sizeFont(weights[index])) / 17; if (newWidthFont > w - 50) { xFont = 0; yFont += 30; newWidthFont = 10 + (length * sizeFont(weights[index])) / 17; } let value = { word: d, weight: weights[index], width: length + 6, xFont: xFont, yFont: yFont }; xFont = newWidthFont; return value; }); // Font property - Size const translate = 55; const h = translate + (yFont + 25); const svgHTML = html``; const svg = d3 .select(svgHTML) .append("svg") .attr("width", width) .attr("height", h); ////////////////////////////////////////////////////////////////////////////// // Font property - Size svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`fontSize ${d.word}`) .attr("x", d => d.xFont) .attr("y", d => d.yFont) .attr("font-size", d => sizeFont(d. weight)) .attr("fill", "black") .text(d => d.word) .on('mouseover', d => svg.selectAll(`.fontSize.${d.word}`).attr('fill', colorHover)) .on('mouseout', d => svg.selectAll(`.fontSize.${d.word}`).attr('fill', colorText)) .style('cursor', 'pointer'); return svgHTML }33:Ta2e,weightsLuminance = (text, weights, width, colorText, colorBorder) => { const letterWidth = {}; const w = width; const div = document.createElement("div"); div.style.float = "left"; document.body.appendChild(div); let i = text.length; while (i--) { let letter = text.charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } let maxLength = 0 text.split(" ").forEach(d => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } if (length > maxLength){ maxLength = length; } }) let xText = 0; let yText = 0; const words = text.split(" ").map((d, index) => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } let newWidthText = xText + 10 + length; if (newWidthText > w - 50) { xText = 0; yText += 20; newWidthText = 10 + length; } let value = { xText: xText, yText: yText, word: d, weight: weights[index], width: length + 6, }; xText = newWidthText; return value; }); const translate = 55; const h = translate + (yText + 25); const svgHTML = html``; const svg = d3 .select(svgHTML) .append("svg") .attr("width", width) .attr("height", h); ////////////////////////////////////////////////////////////////////////////// // Font property - Color Intensity const color2 = d3 .scaleLinear() .domain([0, d3.max(weights)]) .range(["#ededed", "black"]); svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("rect") .data(words) .enter() .append("rect") .attr("class", d =>`V2 ${d.word}`) .attr("x", d => d.xText - 2) .attr("y", d => d.yText - 15) .attr('height', 20) .attr('width', d => d.width) .attr("fill", 'white') .attr("stroke", "magenta") .style("display", "none"); svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("text") .data(words) .enter() .append("text") .attr("x", d => d.xText) .attr("y", d => d.yText) .attr("fill", d => color2(d. weight)) .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V2.${d.word}`).style('display', 'block')) .on('mouseout', d => svg.selectAll(`.V2.${d.word}`).style('display', 'none')) .style('cursor', 'pointer'); return svgHTML }34:Ta3e,weightsHorizontalBar = (text, weights, width, colorText, colorBorder) => { const letterWidth = {}; const w = width; const div = document.createElement("div"); div.style.float = "left"; document.body.appendChild(div); let i = text.length; while (i--) { let letter = text.charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } let maxLength = 0 text.split(" ").forEach(d => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } if (length > maxLength){ maxLength = length; } }) let xBar = 0; let yBar = 0; const lengthBar = d3 .scaleLinear() .domain([0, d3.max(weights)]) .range([0, maxLength]); const words = text.split(" ").map((d, index) => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } let newWidthBar = xBar + 12 + length; if (lengthBar(weights[index]) > 8 + length) { newWidthBar = xBar + 10 + lengthBar(weights[index]); } if (newWidthBar > w - 50) { xBar = 0; yBar += 20; newWidthBar = 12 + length; if (lengthBar(weights[index]) > 10 + length) { newWidthBar = 12 + lengthBar(weights[index]); } } let value = { word: d, weight: weights[index], width: length + 6, xBar: xBar, yBar: yBar, }; xBar = newWidthBar; return value; }); const translate = 55; const h = translate + (yBar + 25); const svgHTML = html``; const svg = d3 .select(svgHTML) .append("svg") .attr("width", width) .attr("height", h); svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("rect") .data(words) .enter() .append("rect") .attr("x", d => d.xBar) .attr("y", d => d.yBar - 15) .attr("width", d => lengthBar(d. weight)) .attr("height", 18) .attr("fill", "#dbdbdb") svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V3 ${d.word}`) .attr("x", d => d.xBar) .attr("y", d => d.yBar) .attr("fill", "black") .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V3.${d.word}`).attr('fill', 'magenta')) .on('mouseout', d => svg.selectAll(`.V3.${d.word}`).attr('fill', 'black')) .style('cursor', 'pointer'); return svgHTML }35:Tad6,weightsCircle = (text, weights, width, colorText, colorHover) => { const letterWidth = {}; const w = width; const div = document.createElement("div"); div.style.float = "left"; document.body.appendChild(div); let i = text.length; while (i--) { let letter = text.charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } let maxLength = 0 text.split(" ").forEach(d => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } if (length > maxLength){ maxLength = length; } }) let xCircle = 0; let yCircle = 0; const color = d3 .scaleLinear() .domain([0, d3.max(weights)]) .range(["#f7f7f7", "red"]); const lengthCircle = d3 .scaleLinear() .domain([0, d3.max(weights)]) .range([0, 20]); const words = text.split(" ").map((d, index) => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } let newWidthCircle = xCircle + 12 + 2 * lengthCircle(weights[index]) + length; if (newWidthCircle > w - 50) { xCircle = 0; yCircle += 40; newWidthCircle = 12 + 2 * lengthCircle(weights[index]) + length; } let value = { word: d, weight: weights[index], width: length + 6, xCircle: xCircle, yCircle: yCircle, }; xCircle = newWidthCircle; return value; }); const translate = 55; const h = translate + (yCircle + 25); const svgHTML = html``; const svg = d3 .select(svgHTML) .append("svg") .attr("width", width) .attr("height", h); ////////////////////////////////////////////////////////////////////////////// // Font property - Color Intensity svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("circle") .data(words) .enter() .append("circle") .attr("cx", d => d.xCircle + lengthCircle(d. weight)) .attr("cy", d => d.yCircle - 5) .attr("r", d => lengthCircle(d. weight)) .attr("fill", "#dbdbdb"); svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V4 ${d.word}`) .attr("x", d => d.xCircle + 2 * lengthCircle(d. weight)) .attr("y", d => d.yCircle) .attr("fill", "black") .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V4.${d.word}`).attr('fill', colorHover)) .on('mouseout', d => svg.selectAll(`.V4.${d.word}`).attr('fill', colorText)) .style('cursor', 'pointer'); return svgHTML }36:T9e0,weightsBackgroundColor = (text, weights, width, colorText, colorHover) => { const letterWidth = {}; const w = width; const div = document.createElement("div"); div.style.float = "left"; document.body.appendChild(div); let i = text.length; while (i--) { let letter = text.charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } let maxLength = 0 text.split(" ").forEach(d => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } if (length > maxLength){ maxLength = length; } }) let xText = 0; let yText = 0; const color = d3 .scaleLinear() .domain([0, d3.max(weights)]) .range(["#f7f7f7", "#ff5e5e"]); const words = text.split(" ").map((d, index) => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } let newWidthText = xText + 10 + length; if (newWidthText > w - 50) { xText = 0; yText += 20; newWidthText = 10 + length; } let value = { xText: xText, yText: yText, word: d, weight: weights[index], width: length + 6, }; xText = newWidthText; return value; }); const translate = 55; const h = translate + (yText + 25); const svgHTML = html``; const svg = d3 .select(svgHTML) .append("svg") .attr("width", width) .attr("height", h); ////////////////////////////////////////////////////////////////////////////// svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("rect") .data(words) .enter() .append("rect") .attr("x", d => d.xText - 2) .attr("y", d => d.yText - 15) .attr("width", d => d.width) .attr("height", 18) .attr("fill", d => color(d. weight)); //.attr("rx", 8) //.attr("ry", 8); svg .append("g") .attr("transform", `translate(50, ${translate})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V5 ${d.word}`) .attr("x", d => d.xText) .attr("y", d => d.yText) .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V5.${d.word}`).attr('fill', colorHover)) .on('mouseout', d => svg.selectAll(`.V5.${d.word}`).attr('fill', colorText)) .style('cursor', 'pointer'); return svgHTML }37:T43e,attentionVisualization = (text, weight, mode, options) => { const defaultOptions = { width: width, fontColor: "black", focusColor: "magenta", scale: "lineal" }; options = Object.assign(defaultOptions, options); if (mode.toLowerCase() == "circle"){ return weightsCircle(text, weight, options.width, options.fontColor, options.focusColor) } else if (mode.toLowerCase() == "size"){ return weightsSize(text, weight, options.width, options.fontColor, options.focusColor, options.scale) } else if (mode.toLowerCase() == "luminance"){ return weightsLuminance(text, weight, options.width, options.fontColor, options.focusColor) } else if (mode.toLowerCase() == "horizontalbar"){ return weightsHorizontalBar(text, weight, options.width, options.fontColor, options.focusColor) } else if (mode.toLowerCase() == "backgroundcolor"){ return weightsBackgroundColor(text, weight, options.width, options.fontColor, options.focusColor) } return 'Mode must be "circle", "size", "luminance", "horizontalbar" or "backgroundcolor"' }38:[] 2f:{"id":"e9ffe9183114fcb0","slug":"formas-encoding-a-palabras-con-peso-en-un-texto","title":"Formas encoding a palabras con peso en un texto","thumbnail":"ceb22fa3501bffd40fbe9fdcafa9691cd3d299b514ea4bc1d75a158f60547bfc","access_level":"public","create_time":"$D2019-09-19T02:53:59.031Z","update_time":"$D2021-01-13T00:33:19.933Z","view_time":null,"first_public_time":"$D2019-09-26T22:35:47.922Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"f0b7dd8a6790ef7f","login":"hernan4444","name":"Hernan VALDIVIESO LOPEZ","avatar_url":"https://avatars-next.observableusercontent.com/aec9960f7351b8b733a359a5b17daa65117ca13efe33aed1130913e5fc6b7685","tier":"starter_2024"},"version":230,"publish_version":230,"role":null,"authored":false,"authors":[{"type":"individual","id":"baf872010e930bf9","login":"hernan4444","name":"Hernan VALDIVIESO LOPEZ","avatar_url":"https://avatars-next.observableusercontent.com/aec9960f7351b8b733a359a5b17daa65117ca13efe33aed1130913e5fc6b7685","tier":null}],"members":[{"type":"individual","id":"baf872010e930bf9","login":"hernan4444","name":"Hernan VALDIVIESO LOPEZ","avatar_url":"https://avatars-next.observableusercontent.com/aec9960f7351b8b733a359a5b17daa65117ca13efe33aed1130913e5fc6b7685","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"9b340f05d943fc43","slug":"text-visualization","title":"Text Visualization","owner":{"id":"f0b7dd8a6790ef7f","login":"hernan4444","name":"Hernan VALDIVIESO LOPEZ"}},"type":"notebook","body":{"titling":"auto","title":"Formas encoding a palabras con peso en un texto","cells":[{"id":0,"value":"md`# Formas encoding a palabras con peso en un texto\n\nA continuación se implementa funciones para codificar de diferentes formas el peso de las palabras en un texto. Para estas funciones solo se requiere de una lista de palabras, una lista de pesos y algunos parámetros de estilo (color, ancho, color de hover, etc). La cantidad de palabras y de pesos debe ser iguales, es decir, \\`palabras.length == pesos.length \\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"weights = text.split(\" \").map(d => Math.random())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof sizeOptions = form(html`

\n Seleccione la escala\n \n

\n
\n

\n \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"weightsSize(text, weights, width, \"black\", \"magenta\", sizeOptions.scale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`## Uso de luminocidad`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"weightsLuminance(text, weights, width, \"black\", \"magenta\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`## Uso de barras horizontales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"weightsHorizontalBar(text, weights, width, \"black\", \"magenta\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`## Uso de áreas circulares`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"weightsCircle(text, weights, width, \"black\", \"magenta\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`## Uso de color de fondo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"weightsBackgroundColor(text, weights, width, \"black\", \"magenta\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n let letterWidth = {}\n let s = \"\";\n for( let i = 32; i <= 126; i++ )\n {\n s += String.fromCharCode( i );\n }\n for( let i = 191; i <= 320; i++ )\n {\n s += String.fromCharCode( i );\n }\n const div = document.createElement(\"div\");\n div.style.float = \"left\";\n document.body.appendChild(div);\n\n let i = s.length;\n while (i--) {\n let letter = s.toUpperCase().charAt(i);\n div.innerText = letter;\n let computedWidth = window\n .getComputedStyle(div, null)\n .getPropertyValue(\"height\")\n .match(/\\d+/)[0];\n letterWidth[letter] = parseInt(computedWidth);\n }\n i = s.length;\n while (i--) {\n let letter = s.toLowerCase().charAt(i);\n div.innerText = letter;\n let computedWidth = window\n .getComputedStyle(div, null)\n .getPropertyValue(\"width\")\n .match(/\\d+/)[0];\n letterWidth[letter] = parseInt(computedWidth);\n }\n return JSON.stringify(letterWidth)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 30:"$2f:body"