json - motor - hacer diagrama sankey online

Transición del diagrama de Sankey

Question

Me gustaría saber si existe una manera fácil de modificar el ejemplo del diagrama de Sankey para que haya una transición sin problemas a nuevos datos. Por ejemplo, imagine que tengo diferentes archivos de datos (energy1.json, energy2.json ...) ¿cómo podría d3 trazar un diagrama de Sankey para el primer conjunto de datos, luego esperar y luego reabrir la disposición de los cuadros para representar el segundo conjunto de datos?

Answer 1

Dado que el posicionamiento automático de los nodos incluye una parte que intenta minimizar la distancia de enlace en un gráfico conectado que es un problema de optimización de np, cualquier tipo de optimizador puede saltar de un mínimo a otro, lo que lleva a un salto en el diseño. Por lo tanto, una transición suave garantizada no será posible.

La solución más cercana posible sería interpolar linealmente entre los dos conjuntos de datos de entrada y generar así una serie de gráficos que (dependiendo de los datos) transición más o menos uniforme de uno dos al otro.

Espero que esto ayude.

Answer 2

Esto es posible. Aquí hay un enfoque que usa un archivo csv. Trabajando sankey aquí: https://www.betterment.com/resources/investment-strategy/portfolio-management/portfolio-diversification/

1. Defina una matriz global fuera de su llamada d3.csv.

   var portfolioValues = [];

2. Al analizar el csv para crear la estructura de nodo / enlace, introduzca valores en su matriz global.

   d3.csv("etf-geo.csv", function(error, data) {
       graph = {"nodes" : [], "links" : []};
       data.forEach(function (d, i) {
           var item = { source: d.source, target: d.target, values: [] };
           for (var j=0; j < 101; j++) {
               item.values.push(d[''value''+j.toString()]);
           }
           portfolioValues.push(item);
           graph.nodes.push({ "name": d.source });
           graph.nodes.push({ "name": d.target });
           graph.links.push({
               source: portfolioValues[i].source,
               target: portfolioValues[i].target,
               value: portfolioValues[i].values[startingAllocation]
           });
       });
   
   //this handy little function returns only the distinct / unique nodes
   graph.nodes = d3.keys(
       d3.nest()
           .key(function (d) { return d.name; })
           .map(graph.nodes)
   );
   
   // it appears d3 with force layout wants a numeric source and target
   // so loop through each link replacing the text with its index from node
   graph.links.forEach(function (d, i) {
       graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
       graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
       portfolioValues[i].source = graph.links[i].source;
       portfolioValues[i].target = graph.links[i].target;
   });
   
   // now loop through each nodes to make nodes an array of objects
   // rather than an array of strings
   graph.nodes.forEach(function (d, i) {
       graph.nodes[i] = { "name": d };
   });
   
   // construct sankey
   sankey
       .nodes(graph.nodes)
       .links(graph.links)
       .layout();

3. Escuche a cambio y pase la entrada del usuario a su función de actualización.

   $(".sankey-slider").bind("slider:changed", function (event, data) {
   
   slideValue = data.value;
   
   updateData(parseInt(slideValue));
   
    });

4. Cree una matriz temporal y recupere los valores correctos de la matriz global. Llame a las funciones de sankey para volver a calcular el diseño.

       var newLinks = [];
   
       portfolioValues.forEach(function(p, i) {
           newLinks.push({
             source: p.source,
             target: p.target,
             value: p.values[allocation]
           });
       });
   
       graph.links = newLinks;
   
       sankey
       .nodes(graph.nodes)
       .links(graph.links)
       .size([width, height])
       .layout();

5. Seleccione cada elemento que se debe cambiar y pase los nuevos valores de datos.

   d3.selectAll(".link")
     .data(graph.links)
     .attr("d", path)
     .attr("id", function(d,i){
       d.id = i;
       return "link-"+i;
     })
     .style("stroke-width", function(d) { return Math.max(1, d.dy); })
     .sort(function(a, b) { return b.dy - a.dy; });
   
   d3.selectAll(".node").attr("transform", function(d) {
     return "translate(" + d.x + "," + d.y + ")"; });
   
   d3.selectAll("rect")
   .attr("height", function(d) { return d.dy; })
   .on("mouseover",highlight_node_links)
   .on("mouseout",onNodeMouseout);

Trabajando sankey aquí: https://www.betterment.com/resources/investment-strategy/portfolio-management/portfolio-diversification/