{"id":48,"date":"2025-06-25T19:22:31","date_gmt":"2025-06-25T18:22:31","guid":{"rendered":"https:\/\/prorocar.webs.upv.es\/?page_id=48"},"modified":"2025-07-05T11:59:21","modified_gmt":"2025-07-05T10:59:21","slug":"easysankey-2","status":"publish","type":"page","link":"https:\/\/prorocar.webs.upv.es\/index.php\/easysankey-2\/","title":{"rendered":"Diagrama Sankey"},"content":{"rendered":"\n<p>Diagrama Sankey<\/p>\n\n\n\n<p class=\"has-small-font-size\">Por favor cita esta web si usas EasySankey:<br>Orozco-Carpio, P. R. (2025). EasySankey. P\u00e1gina web: https:\/\/prorocar.webs.upv.es\/<\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-color has-text-color has-link-color has-small-font-size wp-elements-5ebf6d4fb81cc3ac3afec487433433fc\">Please cite this tool if you use EasySankey:<br>Orozco-Carpio, P. R. (2025). EasySankey. Website: https:\/\/prorocar.webs.upv.es\/<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background has-x-large-font-size\">Generador de Diagrama Sankey<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Instrucciones<\/summary>\n<p class=\"has-secondary-color has-text-color has-link-color wp-elements-69e71cf3a48f25184345cc83f10353eb\">Sube la tabla que generaste mediante <a href=\"https:\/\/prorocar.webs.upv.es\/index.php\/easysankey\/\">https:\/\/prorocar.webs.upv.es\/index.php\/easysankey\/<\/a><br>Esa tabla contiene los datos de: Autor, Keyword, Frecuencia keyword<br>Ajusta los par\u00e1metros de visualizaci\u00f3n mediante el paso a paso. <br>Puedes modificar desde el tama\u00f1o del lienzo que ocupar\u00e1 tu gr\u00e1fico hasta los colores de los nodos y enlaces.<br>Al finalizar puedes descargar tu diagrama como una imagen PNG, o como un archivo vectorial SVG (por si quieres realizar modificaciones m\u00e1s personalizadas). <\/p>\n<\/details>\n\n\n\n<!-- Step Navigation -->\n  <div class=\"step-navigation\">\n    <button class=\"nav-btn\" id=\"prevBtn\" disabled>\u2190 Anterior<\/button>\n    <span id=\"stepIndicator\">Paso 1 de 6<\/span>\n    <button class=\"nav-btn\" id=\"nextBtn\" disabled>Siguiente \u2192<\/button>\n  <\/div>\n\n  <!-- Step 1: File Upload -->\n  <div class=\"step\" id=\"step1\">\n    <h2>Paso 1: Subir Datos<\/h2>\n    <div class=\"upload-section\">\n      <input type=\"file\" id=\"sankeyDataInput\" accept=\".csv\">\n      <button id=\"loadDataBtn\" class=\"action-btn\">Cargar CSV<\/button>\n      <div id=\"fileError\"><\/div>\n      <p><small>El archivo CSV debe tener columnas: Autor, Keyword, Frecuencia keyword<\/small><\/p>\n    <\/div>\n  <\/div>\n\n  <!-- Step 2: Orientation -->\n  <div class=\"step\" id=\"step2\" style=\"display:none;\">\n    <h2>Paso 2: Orientaci\u00f3n<\/h2>\n    <button id=\"flipOrientationBtn\" class=\"action-btn\">\u2194 Intercambiar Autor\/Keyword<\/button>\n    <div id=\"orientationPreview\" style=\"margin:15px 0;\"><\/div>\n  <\/div>\n\n  <!-- Step 3: Dimensions -->\n  <div class=\"step\" id=\"step3\" style=\"display:none;\">\n    <h2>Paso 3: Dimensiones<\/h2>\n    <div class=\"control-group\">\n      <label>Ancho: <input type=\"number\" id=\"widthControl\" value=\"600\" min=\"500\"><\/label><br>\n      <label>Alto: <input type=\"number\" id=\"heightControl\" value=\"1200\" min=\"300\"><\/label><br>\n      <label>Ancho nodos: <input type=\"number\" id=\"nodeWidthControl\" value=\"20\" min=\"5\" max=\"50\"><\/label><br>\n      <label>Altura nodos: <input type=\"number\" id=\"nodeHeightControl\" value=\"1.0\" min=\"0.1\" max=\"5.0\" step=\"0.1\"><\/label><br>\n      <label>Multiplicador grosor links: <input type=\"number\" id=\"linkWidth\" value=\"1.0\" min=\"0.1\" max=\"5.0\" step=\"0.1\"><\/label>\n    <\/div>\n  <\/div>\n\n  <!-- Step 4: Node Colors -->\n  <div class=\"step\" id=\"step4\" style=\"display:none;\">\n    <h2>Paso 4: Colores de Nodos<\/h2>\n    <div class=\"control-group\">\n      <div class=\"color-option\">\n        <label>Color autores: \n          <input type=\"color\" id=\"authorColor\" value=\"#4CAF50\">\n          <button id=\"randomAuthorColors\" class=\"small-btn\">Aleatorio<\/button>\n          <select id=\"authorPalette\">\n            <option value=\"random\">Aleatorio<\/option>\n            <option value=\"pastel\">Pastel<\/option>\n            <option value=\"viridis\">Viridis<\/option>\n            <option value=\"rainbow\">Arco\u00edris<\/option>\n            <option value=\"cool\">Cool<\/option>\n            <option value=\"warm\">C\u00e1lido<\/option>\n          <\/select>\n        <\/label><br>\n        <label><input type=\"checkbox\" id=\"uniformAuthorColor\" checked> Color uniforme<\/label>\n      <\/div>\n      <div class=\"color-option\">\n        <label>Color keywords: \n          <input type=\"color\" id=\"keywordColor\" value=\"#9C27B0\">\n          <button id=\"randomKeywordColors\" class=\"small-btn\">Aleatorio<\/button>\n          <select id=\"keywordPalette\">\n            <option value=\"random\">Aleatorio<\/option>\n            <option value=\"pastel\">Pastel<\/option>\n            <option value=\"viridis\">Viridis<\/option>\n            <option value=\"rainbow\">Arco\u00edris<\/option>\n            <option value=\"cool\">Cool<\/option>\n            <option value=\"warm\">C\u00e1lido<\/option>\n          <\/select>\n        <\/label><br>\n        <label><input type=\"checkbox\" id=\"uniformKeywordColor\" checked> Color uniforme<\/label>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Step 5: Link Styling -->\n  <div class=\"step\" id=\"step5\" style=\"display:none;\">\n    <h2>Paso 5: Estilo de Conexiones<\/h2>\n    <div class=\"control-group\">\n      <label>Color: \n        <select id=\"linkColorMode\">\n          <option value=\"author\">Color autor<\/option>\n          <option value=\"keyword\">Color keyword<\/option>\n          <option value=\"custom\">Personalizado<\/option>\n        <\/select>\n        <input type=\"color\" id=\"linkColorCustom\" value=\"#607D8B\" style=\"display:none\">\n      <\/label><br>\n      <label>Opacidad: <input type=\"number\" id=\"linkOpacity\" value=\"0.5\" min=\"0.1\" max=\"1\" step=\"0.1\"><\/label>\n    <\/div>\n  <\/div>\n\n  <!-- Step 6: Text Styling -->\n  <div class=\"step\" id=\"step6\" style=\"display:none;\">\n    <h2>Paso 6: Estilo de Texto<\/h2>\n    <div class=\"control-group\">\n      <label>Color: <input type=\"color\" id=\"textColor\" value=\"#000000\"><\/label><br>\n      <label>Posici\u00f3n: \n        <select id=\"textPositionControl\">\n          <option value=\"outside\">Fuera<\/option>\n          <option value=\"inside\">Dentro<\/option>\n        <\/select>\n      <\/label><br>\n      <label>Tama\u00f1o: <input type=\"number\" id=\"textSize\" value=\"10\" min=\"6\" max=\"20\"><\/label><br>\n    <\/div>\n    <div class=\"export-buttons\">\n      <button id=\"downloadPNG\" class=\"action-btn\">Descargar PNG<\/button>\n      <button id=\"downloadSVG\" class=\"action-btn\">Descargar SVG<\/button>\n    <\/div>\n    <button id=\"finalizeBtn\" class=\"action-btn\">Generar Diagrama Final<\/button>\n  <\/div>\n\n  <!-- Diagram Preview -->\n  <div id=\"diagramPreview\" style=\"margin-top:30px; border:1px dashed #ccc; padding:10px;\">\n    <p style=\"text-align:center; color:#666;\">Vista previa del diagrama aparecer\u00e1 aqu\u00ed<\/p>\n    <div id=\"sankeyDiagram\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n.sankey-tool {\n  font-family: Arial, sans-serif;\n  margin: 20px 0;\n}\n.step-navigation {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  padding: 10px;\n  background: #f5f5f5;\n  border-radius: 5px;\n}\n.nav-btn {\n  background: #2196F3;\n  color: white;\n  border: none;\n  padding: 8px 15px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.nav-btn:disabled {\n  background: #cccccc;\n  cursor: not-allowed;\n}\n.step {\n  border: 1px solid #ddd;\n  padding: 20px;\n  margin-bottom: 20px;\n  border-radius: 5px;\n  background: #f9f9f9;\n}\n.action-btn {\n  background: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px 15px;\n  margin: 5px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.small-btn {\n  background: #2196F3;\n  color: white;\n  border: none;\n  padding: 5px 10px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n.control-group {\n  margin: 15px 0;\n}\n.color-option {\n  margin: 10px 0;\n}\nlabel {\n  display: inline-block;\n  margin: 5px 0;\n}\ninput[type=\"number\"], select {\n  padding: 5px;\n  margin: 0 5px;\n}\n#sankeyDiagram {\n  width: 100%;\n  overflow: auto;\n}\n#fileError {\n  color: red;\n  margin-top: 10px;\n  display: none;\n}\n.export-buttons {\n  margin: 15px 0;\n  display: flex;\n  gap: 10px;\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Diagrama Sankey Por favor cita esta web si usas EasySankey:Orozco-Carpio, P. R. (2025). EasySankey. P\u00e1gina web: https:\/\/prorocar.webs.upv.es\/ Please cite this tool if you use EasySankey:Orozco-Carpio, P. R. (2025). EasySankey. Website: https:\/\/prorocar.webs.upv.es\/ Generador de Diagrama Sankey \u2190 Anterior Paso 1 de 6 Siguiente \u2192 Paso 1: Subir Datos Cargar CSV El archivo CSV debe tener columnas: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":25,"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/pages\/48\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/prorocar.webs.upv.es\/index.php\/wp-json\/wp\/v2\/media?parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}