34:["$","title",null,{"children":"Force-Directed Graph - Turismo interno en España 2025 | María José de León Díaz | Observable"}] 3c:T1cb3,// Force-directed Graph chart_turismo = { // DIMENSIONES const width = 1100; const height = 800; // D3 modifica internamente los objetos durante la simulación // añadiendo propiedades como x, y, vx y vy. // Por eso se hace copia para no modificar los datasets // originales. const nodes = nodes_filtrados_ccaa.map( d => ({ ...d }) ); const links = links_filtrados_ccaa.map( d => ({ ...d }) ); // CONTENEDOR GENERAL DE LA VISUALIZACIÓN const wrapper = document.createElement("div"); wrapper.style.maxWidth = "1150px"; wrapper.style.margin = "0 auto"; wrapper.style.fontFamily = "Arial, sans-serif"; wrapper.style.color = "#222"; // TÍTULO const titulo = document.createElement("h2"); titulo.textContent = "Principales flujos de turismo interno entre provincias españolas — 2025"; titulo.style.marginBottom = "6px"; titulo.style.fontSize = "26px"; titulo.style.fontWeight = "700"; titulo.style.lineHeight = "1.2"; wrapper.appendChild(titulo); // SUBTÍTULO const subtitulo = document.createElement("p"); subtitulo.textContent = "El tamaño de los nodos representa el volumen de turistas recibidos por provincia. " + "El grosor de los enlaces representa la intensidad de los desplazamientos entre provincias " + "y el color identifica la comunidad autónoma."; subtitulo.style.marginTop = "0"; subtitulo.style.marginBottom = "20px"; subtitulo.style.fontSize = "15px"; subtitulo.style.lineHeight = "1.5"; subtitulo.style.color = "#555"; wrapper.appendChild(subtitulo); // El SVG será el lienzo donde se dibuja la red. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height",height) .style("max-width", "100%") .style("height", "auto") .style("background", "#f4f5f7"); // CONTENEDOR GENERAL // Todos los elementos del gráfico se incluyen dentro // de este grupo. Esto permitirá aplicar zoom y desplazamiento a toda // la visualización. const container = svg.append("g"); // Cada línea representa una conexión turística: // provincia origen -> provincia destino // El grosor representa el número de turistas. const link = container .append("g") .attr("stroke","#788291") .attr("stroke-opacity",0.03) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => linkScale_turismo(d.value) ); // NODOS // Cada círculo representa una provincia. // Tamaño: turistas recibidos. // Color: comunidad autónoma. const node = container .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => sizeScale_turismo(d.size) ) .attr( "fill", d => color_turismo(d.group) ) .attr("stroke", "#ffffff") .attr("stroke-width", 1.5); // TOOLTIP DE NODOS // Al pasar el ratón sobre una provincia se muestra: // - nombre de provincia // - comunidad autónoma // - turistas recibidos node.append("title") .text( d =>`${d.id}-${d.group} \nTuristas recibidos: ${d3.format(",")(d.size)}` ); // TOOLTIP DE ENLACES // Al pasar el ratón sobre una conexión se muestra: // - provincia origen // - provincia destino // - turistas // - pernoctaciones link.append("title") .text( d => `${d.source} → ${d.target} Turistas: ${d3.format(",")(d.value)} Pernoctaciones: ${d3.format(",")(d.pernoctaciones)}` ); // SIMULACIÓN DE FUERZAS // // Aquí se define el comportamiento físico del grafo. // // forceLink: // mantiene conectados los nodos relacionados. // // forceManyBody: // genera repulsión entre nodos. // // forceCenter: // mantiene el grafo centrado. // // forceCollide: // evita que los círculos se solapen. // const simulation = d3 .forceSimulation(nodes) // FUERZA DE LOS ENLACES .force("link", d3.forceLink(links) // Identificador único de cada nodo .id(d => d.id) // Distancia deseada entre nodos conectados .distance(180) // Intensidad del enlace .strength(0.15) ) // REPULSIÓN ENTRE NODOS .force("charge", d3.forceManyBody() .strength(-600) ) // CENTRADO DEL GRAFO .force("center", d3.forceCenter( width / 2, height / 2 ) ) // EVITAR SOLAPAMIENTO .force( "collision", d3.forceCollide() .radius( d => sizeScale_turismo( d.size) + 12) ); // ACTUALIZACIÓN DE POSICIONES // La simulación recalcula continuamente la posición // de nodos y enlaces hasta alcanzar un equilibrio. simulation.on("tick",() => { // POSICIÓN DE LOS ENLACES 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); // POSICIÓN DE LOS NODOS node .attr("cx", d => d.x) .attr("cy", d => d.y); }); // ZOOM Y DESPLAZAMIENTO // // Permite: // // - hacer zoom con la rueda del ratón // - desplazarse por la visualización // // Escala mínima: 0.5 // Escala máxima: 5 // svg.call( d3.zoom() .scaleExtent([0.5, 5]) .on("zoom", event => { container.attr( "transform", event.transform ); } ) ); // AÑADIR GRAFO AL CONTENEDOR GENERAL wrapper.appendChild(svg.node()); // NOTA METODOLÓGICA const nota = document.createElement("p"); nota.innerHTML = "Nota metodológica: " + "se muestran las 150 conexiones con mayor volumen de turistas en 2025. " + "Los datos mensuales se han agregado por provincia de origen y provincia de destino."; nota.style.fontSize = "12px"; nota.style.lineHeight = "1.5"; nota.style.marginTop = "12px"; nota.style.marginBottom = "4px"; nota.style.color = "#666"; wrapper.appendChild(nota); // FUENTE const fuente = document.createElement("p"); fuente.innerHTML = "Fuente: Dataestur / SEGITTUR — Turismo interno de residentes en España."; fuente.style.fontSize = "12px"; fuente.style.lineHeight = "1.5"; fuente.style.margin = "2px 0"; fuente.style.color = "#666"; wrapper.appendChild(fuente); // CRÉDITOS const creditos = document.createElement("p"); creditos.innerHTML = "Elaboración: María José de León Díaz. " + "Visualización realizada en Observable con D3.js."; creditos.style.fontSize = "12px"; creditos.style.lineHeight = "1.5"; creditos.style.margin = "2px 0"; creditos.style.color = "#666"; wrapper.appendChild(creditos); // REFERENCIA DE DISEÑO const referencia = document.createElement("p"); referencia.innerHTML = "Referencia de diseño: adaptación inspirada en " + "Final Project: Force Directed Graph of Ingredients, de Monahans, publicado en Observable."; referencia.style.fontSize = "12px"; referencia.style.lineHeight = "1.5"; referencia.style.marginTop = "2px"; referencia.style.color = "#666"; wrapper.appendChild(referencia); // DEVOLVER VISUALIZACIÓN COMPLETA return wrapper; }3d:[{"id":"0069530d542649151d2df4aa1c23d57ddc996b7a6bb577dc83199849691bcb01aaa1f578ca92be5b8896de287c7ab647ed7e2276688c808e2a24bd56ab36182d","href":"https://static.observableusercontent.com/files/0069530d542649151d2df4aa1c23d57ddc996b7a6bb577dc83199849691bcb01aaa1f578ca92be5b8896de287c7ab647ed7e2276688c808e2a24bd56ab36182d","name":"TurismoInterno_2025.csv","type":"text/csv","lastModified":1793478216437,"size":155910},{"id":"c977d923b7618a968d21565b9c1a7bf13dc67d423b3636ff491d91226783ff84bdb93f4ef13d9f1fcd37da4d317cf25e3deb70c33618979e82048d399c9e6c03","href":"https://static.observableusercontent.com/files/c977d923b7618a968d21565b9c1a7bf13dc67d423b3636ff491d91226783ff84bdb93f4ef13d9f1fcd37da4d317cf25e3deb70c33618979e82048d399c9e6c03","name":"TurismoInterno_2025_points.csv","type":"text/csv","lastModified":1793478220136,"size":1644}] 38:{"id":"e1e505775882907a","slug":"force-directed-graph-turismo-interno-en-espana-2025","title":"Force-Directed Graph - Turismo interno en España 2025","thumbnail":"e764adc2097bd586b8f81d1e9a7abacd87ff60ce874b2360f597f1f5321b015a","access_level":"public","create_time":"$D2026-11-01T09:23:13.015Z","update_time":"$D2026-11-01T09:54:38.942Z","view_time":null,"first_public_time":"$D2026-11-01T09:40:19.783Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"41ee483c98801ab6","login":"marijoledi","name":"María José de León Díaz","avatar_url":"https://avatars-next.observableusercontent.com/d6b532277e2f5b68cd642f81cc37c982db79b5bd241497d716b8b537feaf0d77","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":222,"publish_version":222,"role":null,"authored":false,"authors":[{"type":"individual","id":"1be5955997c7c518","login":"marijoledi","name":"María José de León Díaz","avatar_url":"https://avatars-next.observableusercontent.com/d6b532277e2f5b68cd642f81cc37c982db79b5bd241497d716b8b537feaf0d77","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"41ee483c98801ab6","login":"marijoledi","name":"María José de León Díaz","avatar_url":"https://avatars-next.observableusercontent.com/d6b532277e2f5b68cd642f81cc37c982db79b5bd241497d716b8b537feaf0d77","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force-Directed Graph - Turismo interno en España 2025","cells":[{"id":24,"value":"# Force-Directed Graph - Turismo interno en España 2025","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"// Se obtienen la lista de comunidades autónomas presentes en el fichero de nodos\n\nlinks_turismo = FileAttachment(\"TurismoInterno_2025.csv\")\n .csv({typed: true})\n .then(data =>\n data.map(d => ({\n source: d.PROVINCIA_ORIGEN,\n target: d.PROVINCIA_DESTINO,\n value: d.TURISTAS,\n pernoctaciones: d.PERNOCTACIONES,\n ccaa_origen: d.CCAA_ORIGEN,\n ccaa_destino: d.CCAA_DESTINO\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"links_turismo","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// ELIMINAR FILAS AGREGADAS \"TOTAL NACIONAL\"\n\nlinks_turismo_limpios = links_turismo.filter(\n d =>\n d.source !== \"Total Nacional\" &&\n d.target !== \"Total Nacional\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"points_turismo = FileAttachment(\"TurismoInterno_2025_points.csv\")\n .csv({typed: true})\n .then(data =>\n data.map(d => ({\n id: d.id,\n group: d.group,\n size: d.size\n }))\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"points_turismo","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// Se obtiene la lista de comunidades autónomas\n\ncategorias_turismo = Array.from(\n new Set(points_turismo.map(d => d.group))\n).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"categorias_turismo","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// Crear escala de color por comunidad autónoma\n// Se combinan dos paletas de D3 para disponer de suficientes colores\n\ncolor_turismo = d3.scaleOrdinal()\n .domain(categorias_turismo)\n .range(d3.schemeTableau10.concat(d3.schemeSet3))\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"// El tamaño de cada nodo depende del número de turistas recibidos por la provincia\n// Se utiliza scaleSqutr() porque el área visual de un círculo crece con el cuadrado del radio\n// Con esta escala se evita que las provincias con más turistas dominen demasiado el gráfico.\n// rradio mínimo 4px y máximo 24 px\n\nsizeScale_turismo = d3.scaleSqrt()\n .domain(d3.extent(points_turismo, d => d.size))\n .range([4, 24])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// El grosor de cada línea representa el volumen de turistas que se desplazan entre la provincia de origen\n// y destino. Las conexiones con mayor número de tuuristas se mostrarán con líneas más gruesas.\n\nlinkScale_turismo = d3.scaleSqrt()\n .domain(d3.extent(links_turismo, d => d.value)\n )\n .range([0.3, 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"// Se muestran 150 conexiones con mayor número de turistas con el fin de evitar una red excesivamente densa, en\n// esta primera versión\n\n\nlinks_prueba_turismo = [...links_turismo_limpios]\n .sort(\n (a, b) =>\n d3.descending(\n a.value,\n b.value\n )\n )\n .slice(0, 150)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// se establece un máximo de conexiones para la prueba del gráfico\n\nmaxConexiones = Generators.input(\n Inputs.range([1, 10],\n {value: 3, step: 1, label: \"Máximo de conexiones por provincia\"\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"chart_turismo","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"\n\nlinks_filtrados_turismo = {\n const ordenados = [...links_turismo_limpios]\n .sort((a, b) => d3.descending(a.value, b.value));\n\n const contador = new Map();\n const resultado = [];\n\n for (const link of ordenados) {\n\n const origen = link.source;\n const destino = link.target;\n\n const nOrigen = contador.get(origen) || 0;\n const nDestino = contador.get(destino) || 0;\n\n if (\n nOrigen < maxConexiones &&\n nDestino < maxConexiones\n ) {\n\n resultado.push({...link});\n\n contador.set(origen, nOrigen + 1);\n contador.set(destino, nDestino + 1);\n }\n }\n\n return resultado;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// vista comunidad para filtrar\n\nviewof ccaaSeleccionada = Inputs.select(\n [\"Todas\", ...categorias_turismo],\n {\n label: \"Selecciona una comunidad autónoma\",\n value: \"Todas\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// nodos para filtro\n\npoints_filtrados_turismo = (\n ccaaSeleccionada === \"Todas\"\n ? points_turismo\n : points_turismo.filter(\n d => d.group === ccaaSeleccionada\n )\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"links_filtrados_ccaa = {\n\n // Si se seleccionan todas las CCAA, se mantienen todos los enlaces\n if (ccaaSeleccionada === \"Todas\") {\n return links_turismo_limpios;\n }\n\n // IDs de las provincias pertenecientes a la CCAA seleccionada\n const provincias = new Set(\n points_filtrados_turismo.map(\n d => d.id\n )\n );\n\n // Conservamos los enlaces en los que origen O destino pertenece a la CCAA\n return links_turismo_limpios.filter(\n d =>\n provincias.has(d.source) ||\n provincias.has(d.target)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// además de los nodos de las provincias de las CCA seleccionamos otras provincias conectadas con ellas\n\nnodes_filtrados_ccaa = {\n\n // Todas\n if (ccaaSeleccionada === \"Todas\") {\n return points_turismo;\n }\n\n // Recoger todos los nombres que aparecen en los enlaces filtrados\n const ids = new Set(\n links_filtrados_ccaa.flatMap(\n d => [d.source, d.target]\n )\n );\n\n // Mantener solo esos nodos\n return points_turismo.filter(\n d => ids.has(d.id)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"2"}} 33:null