element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title").text((d) => d.type); const edgepaths = svg .selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append("path") .attr("class", "edgepath") .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .attr("id", function (d, i) { return "edgepath" + i; }) .style("pointer-events", "none"); const edgelabels = svg .selectAll(".edgelabel") .data(dataset.links) .enter() .append("text") .style("pointer-events", "none") .attr("class", "edgelabel") .attr("id", function (d, i) { return "edgelabel" + i; }) .attr("font-size", 10) .attr("fill", "#aaa"); edgelabels .append("textPath") //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr("xlink:href", function (d, i) { return "#edgepath" + i; }) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text((d) => d.type); // Initialize the nodes const node = svg .selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .on("mouseover.tooltip", function (d) { if (d.id != 1 && d.id != 2 && d.id != 3) { tooltip.transition().duration(300).style("opacity", 0.8); tooltip .html(d.label) .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY + 10 + "px"); } }) .on("mouseout.tooltip", function (d) { if (d.id != 1 && d.id != 2 && d.id != 3) { tooltip.transition().duration(100).style("opacity", 0); } }) .on("mousemove", function () { tooltip .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY + 10 + "px"); }) .call( d3 .drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node .append("circle") .attr("r", (d) => { if (d.id == 1) { if (width < 400) { return 60; } else { return 80; } } if ((d.id == 2) | (d.id == 3)) { return 35; } else { return 20; } }) .style("stroke", (d) => { if (d.id == 1) { return "grey"; } else { return colorScale(d.group); } }) .style("stroke-opacity", (d) => { if (d.id == 1) { return 0.3; } else if (d.id == 2 || d.id == 3) { return 0; } else { return 0.5; } }) .style("stroke-width", (d) => { if (d.id == 1) { return 1; } else if (d.id == 2 || d.id == 3) { return 0; } else { return 2; } }) .style("fill", (d) => { if (d.id == 1) { return "white"; } else if (d.id == 2 || d.id == 3) { return colorScale(d.group); } else { return "white"; } }); // node.append("title").text((d) => d.id + ": " + d.label + " - " + d.group); node .append("text") .attr("class", "text_titulo") .attr("dy", (d) => { if (d.id == 1) { return 0; } else { return 5; } }) .attr("dx", (d) => { if (d.id == 1) { return 0; } else { return 0; } }) .text((d) => d.name); node .append("text") .attr("dy", (d) => { if (d.id == 1) { return 20; } else { return 5; } }) .attr("dx", (d) => { if (d.id == 1) { return 0; } else { return 0; } }) .text((d) => d.teilbereich); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation.nodes(dataset.nodes).on("tick", ticked); simulation.force("link").links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { 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); node.attr("transform", (d) => `translate(${d.x},${d.y})`); edgepaths.attr( "d", (d) => "M " + d.source.x + " " + d.source.y + " L " + d.target.x + " " + d.target.y ); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. tooltip.style("left", d.x + "px").style("top", d.y + 10 + "px"); } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; tooltip .style("left", d3.event.x + "px") .style("top", d3.event.y + 10 + "px"); } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } //drawing the legend /*const legend_g = svg .selectAll(".legend") .data(colorScale.domain()) .enter() .append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); legend_g .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g .append("text") .attr("x", 10) .attr("y", 5) .text((d) => d);*/ return div; }47:[{"id":"00461af558ef75327362004b905184374dce0f450f16867be532765023590d80b1a4d4ad631291e1272df0cc0ed35792a7b9c5a5bc8b4403813887ee06c8bb8f","href":"https://static.observableusercontent.com/files/00461af558ef75327362004b905184374dce0f450f16867be532765023590d80b1a4d4ad631291e1272df0cc0ed35792a7b9c5a5bc8b4403813887ee06c8bb8f","name":"icon.svg","type":"image/svg+xml","lastModified":1679587033584.123,"size":721}] 43:{"id":"566532e16dc2e017","slug":null,"title":"Modelo Primeras citas","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-03-23T13:09:13.608Z","update_time":"$D2023-03-23T16:00:37.677Z","view_time":null,"first_public_time":"$D2023-03-23T13:09:13.608Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","bio":"","following":false},"version":662,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"role":"editor"},{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Modelo Primeras citas","cells":[{"id":0,"value":"md`# Modelo Primeras citas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({ top: 0, right: 5, bottom: 10, left: 5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = window.innerWidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 820 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$45","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"style","database":"$undefined"},{"id":12,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3\n .scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"Salud\", \"Laboral\", \"titulo\"])\n .range([\"#A7C5D8\", \"#F1BF00\", \"#ffffff\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"strength_function = {\n if (width < 400) {\n return -110;\n } else {\n return -200;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = d3\n .forceSimulation()\n .force(\n \"link\",\n d3\n .forceLink() // This force provides links between nodes\n .id((d) => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance((d) => {\n if (width < 400) {\n return width / 3;\n } else {\n return width / 4.5;\n }\n })\n )\n .force(\"charge\", d3.forceManyBody().strength(strength_function)) // This adds repulsion (if it's negative) between nodes.\n .force(\"center\", d3.forceCenter(width / 2, height / 2 - 10)) // This force attracts nodes to the center of the svg area","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"<h1>Modelo 1 | Primeras citas</h1>\n<hr class=\"hr_style\">\n<h2>Analiza todos los expedientes de baja que todavía no han sido revisados por un médico inspector del Instituto Nacional de la Seguridad Social<br><br><b>Datos que tiene en cuenta el algoritmo:</b></h2>\n<h3><img src=\"https://static.observableusercontent.com/files/00461af558ef75327362004b905184374dce0f450f16867be532765023590d80b1a4d4ad631291e1272df0cc0ed35792a7b9c5a5bc8b4403813887ee06c8bb8f\"\n\" align=\"left\" style=\"width: 14px; padding-top: 1px;\"> Clique sobre los círculos para más información</h3>","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"titulo","database":"$undefined"},{"id":652,"value":"icon = FileAttachment(\"icon.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body" </article></body></html>

3e:null 3f:["$","title",null,{"children":"Modelo Primeras citas | ec-coberturas | Observable"}] 45:T616,46:T3c9f,myChart = { const div = html`

`; var tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const svg = d3 .select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg .append("defs") .append("marker") .attr("id", "arrowhead") .attr("viewBox", "-0 -5 10 10") //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr("refX", 50) // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr("refY", 0) .attr("orient", "center") .attr("markerWidth", 10) .attr("markerHeight", 10) .attr("xoverflow", "visible"); //create some data const dataset = { nodes: [ { id: 1, name: "MODELO 1", teilbereich: "PRIMERAS CITAS", label: "MODELO 1", group: "titulo", runtime: 700 }, { id: 2, name: "SALUD", teilbereich: "", label: "SALUD", group: "Salud", runtime: 0 }, { id: 3, name: "LABORAL", teilbereich: "", label: "LABORAL", group: "Laboral", runtime: 0 }, { id: 4, name: "", teilbereich: "Edad", label: "Edad trabajador a fecha de la baja", group: "Salud", runtime: 0 }, { id: 5, name: "", teilbereich: "Sexo", label: "Indicador del sexo del paciente", group: "Salud", runtime: 0 }, { id: 6, name: "", teilbereich: "Agrav.Sexo", label: "Indicador que especifica la influencia del sexo del paciente en la duración normal del diagnóstico", group: "Salud", runtime: 0 }, { id: 7, name: "", teilbereich: "Recaída", label: "Indica si es una recaída (Si, No)", group: "Salud", runtime: 0 }, { id: 8, name: "", teilbereich: "Agrav.Recaída", label: "Indicador que especifica la influencia de la recaída/no recaída del expediente en la duración normal del diagnóstico", group: "Salud", runtime: 0 }, { id: 9, name: "", teilbereich: "Mutua", label: "Código de la Mutua", group: "Salud", runtime: 0 }, { id: 10, name: "", teilbereich: "Contingencia", label: "Tipo de baja/enfermedad (Código del 0 al 5)", group: "Salud", runtime: 0 }, { id: 11, name: "", teilbereich: "Altabilidad", label: "Probabilidad de alta en el INSS para el diagnóstico del expediente en el rango de los 10 días anteriores y posteriores a la fecha de la cita. En el caso de que no haya suficientes ejemplos se introduce la altabilidad media del INSS", group: "Salud", runtime: 0 }, { id: 12, name: "", teilbereich: "Frec.", label: "Número de veces que se ha dado el diagnóstico en el SPS", group: "Salud", runtime: 0 }, { id: 13, name: "", teilbereich: "Diagnóstico", label: "Agrupación de categorías diagnósticas. Ej: Tumores [neoplasias] (C00 a D49)", group: "Salud", runtime: 0 }, { id: 14, name: "", teilbereich: "Categoría", label: "Selección de los tres primeros dígitos del código CIE10", group: "Salud", runtime: 0 }, { id: 15, name: "", teilbereich: "Última incap.", label: "Número de días que han pasado desde el alta de su última baja hasta la baja de la baja actual.", group: "Salud", runtime: 0 }, { id: 16, name: "", teilbereich: "Base cot.", label: "Base de cotización total", group: "Laboral", runtime: 0 }, { id: 17, name: "", teilbereich: "CCAA", label: "Comunidad Autónoma desde donde se emite el parte de baja", group: "Laboral", runtime: 0 }, { id: 18, name: "", teilbereich: "Prov.", label: "Provincia desde donde se emite el parte de baja", group: "Laboral", runtime: 0 }, { id: 19, name: "", teilbereich: "Pago", label: "Procedencia del pago de la prestación (Pago, directo, delegado, mutua)", group: "Laboral", runtime: 0 }, { id: 20, name: "", teilbereich: "CNAE", label: "Código de Clasificación Nacional de Actividades económicas", group: "Laboral", runtime: 0 }, { id: 21, name: "", teilbereich: "Autónomo", label: "Identificador binario que indica si el expediente hace referencia a un autónomo", group: "Laboral", runtime: 0 }, { id: 22, name: "", teilbereich: "Tamaño.Nac.", label: "Número de trabajadores que tiene una cuenta de cotización del expediente", group: "Laboral", runtime: 0 }, { id: 23, name: "", teilbereich: "Tamaño.Prov.", label: "Número de trabajadores que tiene una cuenta de cotización en la provincia del expediente", group: "Laboral", runtime: 0 }, { id: 24, name: "", teilbereich: "Dur.Bajas", label: "Duración mediana de las baja pasadas de la persona", group: "Laboral", runtime: 0 }, { id: 25, name: "", teilbereich: "Dur.Bajas media", label: "Duración media de las baja pasadas de la persona", group: "Laboral", runtime: 0 }, { id: 26, name: "", teilbereich: "Dur.Bajas desv.", label: "Desviación típica de las baja pasadas de la persona", group: "Laboral", runtime: 0 }, { id: 27, name: "", teilbereich: "Citas", label: "Porcentaje de días hasta cita “días hasta cita” sobre tiempo óptimo estimado “Duración mediana bajas", group: "Laboral", runtime: 0 }, { id: 28, name: "", teilbereich: "Bajas largas", label: "Total de bajas que ha tenido el paciente con una duración mayor a 7 días", group: "Laboral", runtime: 0 }, { id: 29, name: "", teilbereich: "Últ.Bajas", label: "Contador de bajas en el último año", group: "Laboral", runtime: 0 } ], links: [ { source: 1, target: 2 }, { source: 1, target: 3 }, { source: 2, target: 4 }, { source: 2, target: 5 }, { source: 2, target: 6 }, { source: 2, target: 7 }, { source: 2, target: 8 }, { source: 2, target: 9 }, { source: 2, target: 10 }, { source: 2, target: 11 }, { source: 2, target: 12 }, { source: 2, target: 13 }, { source: 2, target: 14 }, { source: 2, target: 15 }, { source: 3, target: 16 }, { source: 3, target: 17 }, { source: 3, target: 18 }, { source: 3, target: 19 }, { source: 3, target: 20 }, { source: 3, target: 21 }, { source: 3, target: 22 }, { source: 3, target: 23 }, { source: 3, target: 24 }, { source: 3, target: 25 }, { source: 3, target: 26 }, { source: 3, target: 27 }, { source: 3, target: 28 }, { source: 3, target: 29 } ] }; console.log("dataset is ...", dataset); // Initialize the links const link = svg .selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr("marker-end", "url(#arrowhead)"); //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. //The element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title").text((d) => d.type); const edgepaths = svg .selectAll(".edgepath") //make path go along with the link provide position for link labels .data(dataset.links) .enter() .append("path") .attr("class", "edgepath") .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .attr("id", function (d, i) { return "edgepath" + i; }) .style("pointer-events", "none"); const edgelabels = svg .selectAll(".edgelabel") .data(dataset.links) .enter() .append("text") .style("pointer-events", "none") .attr("class", "edgelabel") .attr("id", function (d, i) { return "edgelabel" + i; }) .attr("font-size", 10) .attr("fill", "#aaa"); edgelabels .append("textPath") //To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. .attr("xlink:href", function (d, i) { return "#edgepath" + i; }) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text((d) => d.type); // Initialize the nodes const node = svg .selectAll(".nodes") .data(dataset.nodes) .enter() .append("g") .attr("class", "nodes") .on("mouseover.tooltip", function (d) { if (d.id != 1 && d.id != 2 && d.id != 3) { tooltip.transition().duration(300).style("opacity", 0.8); tooltip .html(d.label) .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY + 10 + "px"); } }) .on("mouseout.tooltip", function (d) { if (d.id != 1 && d.id != 2 && d.id != 3) { tooltip.transition().duration(100).style("opacity", 0); } }) .on("mousemove", function () { tooltip .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY + 10 + "px"); }) .call( d3 .drag() //sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node .append("circle") .attr("r", (d) => { if (d.id == 1) { if (width < 400) { return 60; } else { return 80; } } if ((d.id == 2) | (d.id == 3)) { return 35; } else { return 20; } }) .style("stroke", (d) => { if (d.id == 1) { return "grey"; } else { return colorScale(d.group); } }) .style("stroke-opacity", (d) => { if (d.id == 1) { return 0.3; } else if (d.id == 2 || d.id == 3) { return 0; } else { return 0.5; } }) .style("stroke-width", (d) => { if (d.id == 1) { return 1; } else if (d.id == 2 || d.id == 3) { return 0; } else { return 2; } }) .style("fill", (d) => { if (d.id == 1) { return "white"; } else if (d.id == 2 || d.id == 3) { return colorScale(d.group); } else { return "white"; } }); // node.append("title").text((d) => d.id + ": " + d.label + " - " + d.group); node .append("text") .attr("class", "text_titulo") .attr("dy", (d) => { if (d.id == 1) { return 0; } else { return 5; } }) .attr("dx", (d) => { if (d.id == 1) { return 0; } else { return 0; } }) .text((d) => d.name); node .append("text") .attr("dy", (d) => { if (d.id == 1) { return 20; } else { return 5; } }) .attr("dx", (d) => { if (d.id == 1) { return 0; } else { return 0; } }) .text((d) => d.teilbereich); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation.nodes(dataset.nodes).on("tick", ticked); simulation.force("link").links(dataset.links); // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { 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); node.attr("transform", (d) => `translate(${d.x},${d.y})`); edgepaths.attr( "d", (d) => "M " + d.source.x + " " + d.source.y + " L " + d.target.x + " " + d.target.y ); } //When the drag gesture starts, the targeted node is fixed to the pointer //The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1]. d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. tooltip.style("left", d.x + "px").style("top", d.y + 10 + "px"); } //When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; tooltip .style("left", d3.event.x + "px") .style("top", d3.event.y + 10 + "px"); } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } //drawing the legend /*const legend_g = svg .selectAll(".legend") .data(colorScale.domain()) .enter() .append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); legend_g .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g .append("text") .attr("x", 10) .attr("y", 5) .text((d) => d);*/ return div; }47:[{"id":"00461af558ef75327362004b905184374dce0f450f16867be532765023590d80b1a4d4ad631291e1272df0cc0ed35792a7b9c5a5bc8b4403813887ee06c8bb8f","href":"https://static.observableusercontent.com/files/00461af558ef75327362004b905184374dce0f450f16867be532765023590d80b1a4d4ad631291e1272df0cc0ed35792a7b9c5a5bc8b4403813887ee06c8bb8f","name":"icon.svg","type":"image/svg+xml","lastModified":1679587033584.123,"size":721}] 43:{"id":"566532e16dc2e017","slug":null,"title":"Modelo Primeras citas","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-03-23T13:09:13.608Z","update_time":"$D2023-03-23T16:00:37.677Z","view_time":null,"first_public_time":"$D2023-03-23T13:09:13.608Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","bio":"","following":false},"version":662,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9a057000973b118a","login":"arixha","name":"Rocío Márquez","avatar_url":"https://avatars-next.observableusercontent.com/d5c80d2ed28514f93ba14600cb8b62bd234283ce761cf492534ac0502430a13d","tier":null,"role":"editor"},{"type":"team","id":"4ea7c7630133d6c7","login":"ec-coberturas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9761a919f44e5646890db7a64538f438eb7f8b7fdd8bc84853a4e107aecbb7d1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Modelo Primeras citas","cells":[{"id":0,"value":"md`# Modelo Primeras citas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({ top: 0, right: 5, bottom: 10, left: 5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = window.innerWidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 820 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$45","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"style","database":"$undefined"},{"id":12,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3\n .scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"Salud\", \"Laboral\", \"titulo\"])\n .range([\"#A7C5D8\", \"#F1BF00\", \"#ffffff\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"strength_function = {\n if (width < 400) {\n return -110;\n } else {\n return -200;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = d3\n .forceSimulation()\n .force(\n \"link\",\n d3\n .forceLink() // This force provides links between nodes\n .id((d) => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance((d) => {\n if (width < 400) {\n return width / 3;\n } else {\n return width / 4.5;\n }\n })\n )\n .force(\"charge\", d3.forceManyBody().strength(strength_function)) // This adds repulsion (if it's negative) between nodes.\n .force(\"center\", d3.forceCenter(width / 2, height / 2 - 10)) // This force attracts nodes to the center of the svg area","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"<h1>Modelo 1 | Primeras citas</h1>\n<hr class=\"hr_style\">\n<h2>Analiza todos los expedientes de baja que todavía no han sido revisados por un médico inspector del Instituto Nacional de la Seguridad Social<br><br><b>Datos que tiene en cuenta el algoritmo:</b></h2>\n<h3><img src=\"https://static.observableusercontent.com/files/00461af558ef75327362004b905184374dce0f450f16867be532765023590d80b1a4d4ad631291e1272df0cc0ed35792a7b9c5a5bc8b4403813887ee06c8bb8f\"\n\" align=\"left\" style=\"width: 14px; padding-top: 1px;\"> Clique sobre los círculos para más información</h3>","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"titulo","database":"$undefined"},{"id":652,"value":"icon = FileAttachment(\"icon.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body" </article></body></html>