28:null 29:["$","title",null,{"children":"Horarios de respuesta | Edgar Monserrat Romero Gómez | Observable"}] 2e:T63f,fechasForm = { function obtenerNombreMes(numero) { let miFecha = new Date(); if (0 < numero && numero <= 12) { miFecha.setMonth(numero - 1); return new Intl.DateTimeFormat("es-ES", { month: "long" }).format( miFecha ); } else { return null; } } let years = []; let months = []; let days = []; let tempData = new dataTransform(dataRaw); for (let index = 0; index < tempData.length; index++) { let date = new Date(tempData[index].fecha.date); if (!years.includes(date.getFullYear())) { years.push(date.getFullYear()); } if (!days.includes(date.getDate())) { days.push(date.getDate()); } if (!months.includes(date.getMonth() + 1)) { months.push(date.getMonth() + 1); } } let option = document.createElement("option"); for (let i = 0; i < years.length; i++) { let $tempSelect = document.getElementById("year"); let $option = document.createElement("option"); $option.value = years[i]; $option.text = years[i]; $tempSelect.appendChild($option); } for (let i = 0; i < months.length; i++) { let $tempSelect = document.getElementById("month"); let $option = document.createElement("option"); $option.value = months[i]; $option.text = obtenerNombreMes(months[i]); $tempSelect.appendChild($option); } for (let i = 0; i < days.length; i++) { let $tempSelect = document.getElementById("day"); let $option = document.createElement("option"); $option.value = days[i]; $option.text = days[i]; $tempSelect.appendChild($option); } }2f:T1ceb,// https://github.com/analyzer2004/weathersankey // Copyright 2020 Eric Lo class WeatherChart { constructor(parent) { this._parent = parent; this._width = 1024; this._height = 768; this._leftMargin = 0; this._margin = { sankeyTop: 0, sankeyBottom: 0, temp: 0 }; this._iconSize = 30; this._tempHeight = 0; this._nodes = null; this._links = null; this._data = null; this._sort = 0; this._conditions = null; this._column = { date: "hora", condition: "Tema" }; } size(width, height) { this._width = width; this._height = height; return this; } icon(icon) { this._conditions = [ { id: "otros", index: 0, color: "#d31121", icon: icon.otros }, { id: "servicio", index: 1, color: "#e7d8c9", icon: icon.servicio }, { id: "percepcion", color: "#fea648", index: 2, icon: icon.percepcion }, { id: "internet", color: "#97d7b9", index: 3, icon: icon.internet }, { id: "cobros", color: "#217fb7", index: 4, icon: icon.cobros }, { id: "senal", color: "#081d58", index: 5, icon: icon.senal } ]; return this; } column(column) { this._column = column; return this; } render(data) { this._init(); this._process(data); this._drawSankey(); return this; } _init() { this._margin.sankeyTop = (this._height / 650) * 60; this._iconSize = (this._width / 1024) * 30; } //De aquí _process(dataChart) { const converted = dataChart.map((d) => { const date = d.fecha[this._column.date]; var cond = d[this._column.condition]; cond = cond.startsWith("internet") ? "internet" : cond.startsWith("cobros") ? "cobros" : cond; return { date: date, day: new Date("1970-01-01T" + date).getHours(), condition: cond, color: this._lookup(cond).color, value: 1 }; }); const ls = converted.map((d) => ({ source: d.condition, target: d.date, value: 1 })); // Aquí se asignan los iconos a cada uno de los elementos. const conds = Array.from( new Set(converted.map((d) => this._lookup(d.condition))) ); if (this._sort === 1) // clear to rain conds.sort((a, b) => a.index - b.index); else if (this._sort === 2) // rain to clear conds.sort((a, b) => b.index - a.index); const ns = conds.concat( converted.map((d) => ({ id: d.date, color: d.color })) ); const { nodes, links } = this._sankey(ns, ls); this._nodes = nodes; this._links = links; this._data = converted; return this; } _drawSankey() { var that = this; const g = this._parent .append("g") .attr( "transform", `translate(${this._leftMargin},${this._margin.sankeyTop})` ); const nodes = g .append("g") .selectAll("g") .data(this._nodes) .join("g") .attr("opacity", 1) .attr("fill", (d) => d.color) .attr("transform", (d) => `translate(${d.y0},${d.x0})`) .call((g) => g .append("rect") .attr("width", (d) => d.y1 - d.y0) .attr("height", (d) => d.x1 - d.x0) ) .on("mouseover", (e, d) => highlight(e, d)) .on("mouseout", (e, d) => restore(e, d, true)); this._addCondition(nodes); this._addDate(nodes); const links = g .append("g") .attr("fill", "none") .selectAll("g") .data(this._links) .join("g") .append("path") .attr("stroke-opacity", 0.5) .attr("d", this._sankeyLinkVertical()) .attr("stroke", (d) => d.source.color) .attr("stroke-width", (d) => Math.max(1, d.width)); function highlight(e, d, restore) { links .filter((l) => l.source !== d && l.target !== d) .transition() .duration(500) .attr("stroke-opacity", restore ? 0.5 : 0.2); nodes .transition() .duration(500) .attr("opacity", (n) => restore || linkedNodes(d).some((ln) => n === ln) ? 1 : 0.2 ); } function restore(e, d) { highlight(e, d, true); } function linkedNodes(n) { return Array.from( new Set( that._links .flatMap((d) => d.source === n || d.target === n ? [d.source, d.target] : null ) .filter((d) => d !== null) ) ); } } _addCondition(nodes) { nodes .filter((d) => d.depth === 0) .call((g) => g .append("image") .attr("width", this._iconSize) .attr("height", this._iconSize) .attr("opacity", 0.4) .attr("href", (d) => this._lookup(d.id).icon) .attr("transform", `translate(5,-${this._margin.sankeyTop})`) ) .call((g) => g .append("line") .attr("stroke", "#999") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3") .attr("x1", 1) .attr("x2", 1) .attr("y1", 0) .attr("y2", -this._margin.sankeyTop) ) .call((g) => g .append("text") .attr("class", "days") .attr("fill", (d) => d3.color(d.color).darker(0.3)) .attr("text-anchor", "end") .attr("transform", (d) => `translate(${d.y1 - d.y0}, -2)`) .text((d) => d.value) ); } _addDate(nodes) { nodes .filter((d) => d.depth === 1) .append("text") .attr("class", "date") .attr("fill", "#999") .attr("text-anchor", "middle") .attr( "transform", (d) => `translate(${(d.y1 - d.y0) / 2},${this._margin.sankeyBottom})` ) .text((d) => new Date("1970-01-01T" + d.id).getHours()); } _sankey(nodes, links) { const sankeyHeight = this._height - this._tempHeight - this._margin.sankeyTop - this._margin.sankeyBottom - this._margin.temp; return d3 .sankey() .nodeId((d) => d.id) .nodeWidth(10) .nodePadding(10) .nodeSort(null) .size([sankeyHeight, this._width - this._leftMargin])({ nodes: nodes.map((d) => Object.assign({}, d)), links: links.map((d) => Object.assign({}, d)) }); } _getNodeColor(d) { if (d.depth === 0) return this._lookup(d.id).color; else if (d.depth === 1) { const day = this._data.find((_) => _.date === d.id); if (day) return this._lookup(day.condition).color; } } _lookup(condId) { return this._conditions.find((d) => d.id === condId); } _sankeyLinkVertical() { return d3.linkVertical().source(verticalSource).target(verticalTarget); function verticalSource(d) { return [d.y0, d.source.x1]; } function verticalTarget(d) { return [d.y1, d.target.x0]; } } // Utilities // _getSVG() { let curr = this._parent.node(); while (curr && curr.tagName !== "svg") curr = curr.parentElement; return curr; } _convertCoordinate(e, g) { const svg = this._getSVG(); if (svg) { // convert to SVG coordinates const p = svg.createSVGPoint(); p.x = e.clientX; p.y = e.clientY; return p.matrixTransform(g.node().getScreenCTM().inverse()); } else { throw "Unable to find SVG element"; } } }30:[{"id":"eef3ac59b1e9fc1c04686f6b6c6a9eee483e65922275b8a8bf387177367de29ccd47df2d6c88cafd5a380fd0bc1f854193611c0898a851172517c0f092f4c253","href":"https://static.observableusercontent.com/files/eef3ac59b1e9fc1c04686f6b6c6a9eee483e65922275b8a8bf387177367de29ccd47df2d6c88cafd5a380fd0bc1f854193611c0898a851172517c0f092f4c253","name":"seattle_19.csv","type":"text/csv","lastModified":1638848359670.733,"size":12677},{"id":"9b26ef29b73aa0e0d4a8fb2b52306dcda73f4800bf01f8d6a4d849eb961f16f6c0a3f689ace0b1cc050ba884246da4c155d47db05f9234e8bd29793645e45813","href":"https://static.observableusercontent.com/files/9b26ef29b73aa0e0d4a8fb2b52306dcda73f4800bf01f8d6a4d849eb961f16f6c0a3f689ace0b1cc050ba884246da4c155d47db05f9234e8bd29793645e45813","name":"data@8.csv","type":"text/csv","lastModified":1638919423413.777,"size":8935},{"id":"cbc2e546bcaffd15bbcd33ac4fa62ec7eb7cba7113272abf3cd65f373272aad81294cf15759e389c78c76bbe773fa049c03b7d2e85dab4e635773689ed47e359","href":"https://static.observableusercontent.com/files/cbc2e546bcaffd15bbcd33ac4fa62ec7eb7cba7113272abf3cd65f373272aad81294cf15759e389c78c76bbe773fa049c03b7d2e85dab4e635773689ed47e359","name":"archivoLimpio@1.json","type":"application/json","lastModified":1638926637248.797,"size":384583},{"id":"9c9f6397b4460e71706d333abc0e5a2b3f0da56386a1fa45db78278ff31612baef5c7cd51cb74aa4892d433f7deb9a5413d4c3ff6dfaefb46cfe9753ae98a9a7","href":"https://static.observableusercontent.com/files/9c9f6397b4460e71706d333abc0e5a2b3f0da56386a1fa45db78278ff31612baef5c7cd51cb74aa4892d433f7deb9a5413d4c3ff6dfaefb46cfe9753ae98a9a7","name":"internetIcon.png","type":"image/png","lastModified":1639068738435.439,"size":21351},{"id":"918795de763ee77b854ee8880d8bda4a771cf27ac2d8756d988618355b14ce1be24170ccf5a02b3525c07795237b824139a26325aeb40d4fa3a48cbd0f2578a4","href":"https://static.observableusercontent.com/files/918795de763ee77b854ee8880d8bda4a771cf27ac2d8756d988618355b14ce1be24170ccf5a02b3525c07795237b824139a26325aeb40d4fa3a48cbd0f2578a4","name":"otrosIcon.png","type":"image/png","lastModified":1639068631533.059,"size":7585},{"id":"fee747741eea21cbddc9a257ca2cc0d2934450a3f7d6aeea656f7ae9795db11a3a88600ef2b9f3a7066c0505dddd99079ad7028929af0f15e570da1b73b472d7","href":"https://static.observableusercontent.com/files/fee747741eea21cbddc9a257ca2cc0d2934450a3f7d6aeea656f7ae9795db11a3a88600ef2b9f3a7066c0505dddd99079ad7028929af0f15e570da1b73b472d7","name":"percepcionIcon.png","type":"image/png","lastModified":1639068541398.98,"size":29771},{"id":"e818c7788a293d3ec0fd60814701bfb90b607f0b7044da027ea97317ec31ec2357f6d186259079dd8252f2e1e1166641114a37e66aacef0c3d44a3ac3f9a3b11","href":"https://static.observableusercontent.com/files/e818c7788a293d3ec0fd60814701bfb90b607f0b7044da027ea97317ec31ec2357f6d186259079dd8252f2e1e1166641114a37e66aacef0c3d44a3ac3f9a3b11","name":"senalIcon.png","type":"image/png","lastModified":1639068394180.884,"size":4043},{"id":"69450e135b9c20f6acac6176d0c18f2ce97c48ecef5384f89ae901e2fb5a9198ddea1c7c0cb48a47d5efce2e67919c664660709a3939f63967d67d705d575a93","href":"https://static.observableusercontent.com/files/69450e135b9c20f6acac6176d0c18f2ce97c48ecef5384f89ae901e2fb5a9198ddea1c7c0cb48a47d5efce2e67919c664660709a3939f63967d67d705d575a93","name":"servicioIcon.png","type":"image/png","lastModified":1639069258540.354,"size":14635},{"id":"d24275b35ef402b5d1c6ba4566becb10bcfd5cd1a8c6fa67d014da532d5dc0837e32e08edacf5b50c8d98d11b3b8f523de68de276921a1ee203f0964279202a8","href":"https://static.observableusercontent.com/files/d24275b35ef402b5d1c6ba4566becb10bcfd5cd1a8c6fa67d014da532d5dc0837e32e08edacf5b50c8d98d11b3b8f523de68de276921a1ee203f0964279202a8","name":"cobrosIcon.png","type":"image/png","lastModified":1639069129138.44,"size":22293}] 2c:{"id":"e8561b382ab4fd1e","slug":"horarios","title":"Horarios de respuesta","thumbnail":"50f66374276fa8befc10da5c98e880839b5fd71f7a055a7cbd5b436708908603","access_level":"public","create_time":"$D2021-12-07T03:39:19.670Z","update_time":"$D2021-12-09T23:52:04.316Z","view_time":null,"first_public_time":"$D2021-12-07T03:45:23.480Z","has_unpublished_edits":null,"fork":{"id":"cdd7f4209106fe8b","slug":"sunny-day-rainy-day-in-seattle","title":"Sunny day, rainy day in Seattle","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"027fc113cbe0da59","login":"eromerog","name":"Edgar Monserrat Romero Gómez","avatar_url":"https://avatars-next.observableusercontent.com/9cb7d68aa08208cd5316e120f70f20e8dfe01754ccef2dbfed1b94e07d292eb3","tier":"starter_2024"},"version":1303,"publish_version":1303,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b0e43340a3317ff","login":"eromerog","name":"Edgar Monserrat Romero Gómez","avatar_url":"https://avatars-next.observableusercontent.com/9cb7d68aa08208cd5316e120f70f20e8dfe01754ccef2dbfed1b94e07d292eb3","tier":null}],"members":[{"type":"individual","id":"9b0e43340a3317ff","login":"eromerog","name":"Edgar Monserrat Romero Gómez","avatar_url":"https://avatars-next.observableusercontent.com/9cb7d68aa08208cd5316e120f70f20e8dfe01754ccef2dbfed1b94e07d292eb3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Horarios de respuesta","cells":[{"id":119,"value":"# Horarios de respuesta","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof options = form(html``);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"chart = {\n const w = 1024,\n h = 400;\n const svg = d3.create(\"svg\").attr(\"cursor\", \"\").attr(\"viewBox\", [0, 0, w, h]);\n if (options.day == \"\") {\n return \"Por favor, Seleccione una fecha.\";\n } else {\n new WeatherChart(svg).size(w, h).icon(weatherIcons).render(dataChart);\n return svg.node();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"weatherIcons = ({\n otros: await FileAttachment(\"otrosIcon.png\").url(),\n servicio: await FileAttachment(\"servicioIcon.png\").url(),\n percepcion: await FileAttachment(\"percepcionIcon.png\").url(),\n internet: await FileAttachment(\"internetIcon.png\").url(),\n cobros: await FileAttachment(\"cobrosIcon.png\").url(),\n senal: await FileAttachment(\"senalIcon.png\").url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"data = d3.csvParse(await FileAttachment(\"data@8.csv\").text(), d3.autoType)\n .filter(d => new Date(d[\"hora\"]).getMonth() + 1 === +2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"dataChart = new dataFilter(dataClean)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":" dataClean = new dataTransform(dataRaw)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"class dataFilter {\n constructor(data) {\n let a = data\n .filter(\n (element) =>\n new Date(element.fecha.date).getFullYear() === parseInt(options.year)\n )\n .filter(\n (element) =>\n new Date(element.fecha.date).getMonth() + 1 ===\n parseInt(options.month)\n )\n .filter(\n (element) =>\n new Date(element.fecha.date).getDate() === parseInt(options.day)\n );\n this.orderDates(a);\n return a\n }\n orderDates(dataC) {\n dataC.sort(\n (a, b) =>\n new Date(\"1970-01-01T\" + a.fecha.hora).getTime() -\n new Date(\"1970-01-01T\" + b.fecha.hora).getTime()\n );\n\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"class dataTransform {\n constructor(data) {\n let dataTemp = []\n for (let i = 0; i < data.length; i++) {\n let dateTemp = this.separar(data[i].creationData);\n dataTemp.push({\n fecha: dateTemp,\n Tema: data[i].NLP\n });\n }\n return dataTemp\n \n\n \n }\n \nseparar(fullDate) {\n let temp = fullDate.split(\" \");\n date = new Date(fullDate);\n var date = date.toLocaleDateString(\"en-US\");\n var hora = fullDate.split(\" \")[3];\n return {\n date,\n hora\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"md`Paso 1 al rato lo unifico`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"dataRaw = dataT[2].Data.Info","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"dataT = FileAttachment(\"archivoLimpio@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"{\n let auxxx = params.get(\"info\")\n console.log(auxxx)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"params = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"