Comment convertir des données tabulaires en nœuds et liens pour le Sankey de d3js

Question

Nous avons un projet où nous travaillons plusieurs milliers d'éléments à travers un processus en plusieurs étapes. Je veux créer un diagramme Sankey multi-groupes pour visualiser où nous en sommes dans le processus. Cela doit fonctionner dans un navigateur et utilise du javascript côté client. J'ai suivi cette démo et je l'ai fait fonctionner.

Le défi auquel je suis confronté est de convertir mes données tabulaires en liens et nœuds nécessaires à un diagramme Sankey. Dans cet exemple, les données transmises au graphique sont organisées comme suit :

{ "nodes":[
    {"node":0,"name":"node0"},
    {"node":1,"name":"node1"},
    {"node":2,"name":"node2"},
    {"node":3,"name":"node3"},
    {"node":4,"name":"node4"}
],
"links":[
    {"source":0,"target":2,"value":2},
    {"source":1,"target":2,"value":2},
    {"source":1,"target":3,"value":2},
    {"source":0,"target":4,"value":2},
    {"source":2,"target":3,"value":2},
    {"source":2,"target":4,"value":2},
    {"source":3,"target":4,"value":4}
]}

Je commence avec des données brutes, un élément pour chaque élément de notre projet, et chaque élément aura les colonnes suivantes (tronquées pour plus de clarté) et des valeurs échantillons :

ID  Process  Owner   Decision  Status
01  rapide   groupe1  retirer   terminé
02  standard groupe2  remplacer en cours
03  rapide   aucun    aucun     suspendu
04  rapide   groupe2  retirer   en cours

Il y a plusieurs autres colonnes et valeurs pour chacun, mais je pense que cela donne une idée. Il provient d'une requête ajax au format json (pas de colonnes de largeur fixe), mais c'est la structure générale.

Comment puis-je convertir cela en liens et nœuds ?

J'ai trouvé ce fil de discussion qui pose la même question (je pense) mais c'est pour R et je n'ai pas assez d'expérience pour comprendre la réponse.

J'ai cherché des réponses sur Google. La plupart des tutoriels supposent que vous avez les données sous format de nœuds/liens. Et, comme le fil de discussion précédent, j'en ai trouvé quelques uns parlant de R, php, ou SQL pour convertir les données en nœuds et liens - aucuns desquels je ne comprends.

Les données changent chaque heure/jour et je veux que cela se charge automatiquement pour quiconque veut vérifier à tout moment. J'ai donc besoin d'une solution automatisée.

J'ai les données brutes et un modèle pour créer le diagramme. Il me manque juste la façon de convertir les données de manière programmée.

ÉDIT

J'ai déjà mes données brutes dans mon code. Ce n'est pas le problème. Le souci est que tous les tutoriels supposent que vous avez déjà des nœuds et liens. J'ai une ligne par élément. Ce ne sont pas la même chose. Je n'ai pas besoin d'aide avec json, ajax, ou le chargement de fichiers. Je vous remercie des suggestions, mais elles vont complètement dans la mauvaise direction.

Answer 1

Mise à jour

Voici le diagramme Sankey complet avec vos données : Diagramme Sankey à partir d'un fichier csv à colonnes multiples

Sur la base d'informations supplémentaires concernant les exigences et l'amélioration des codes, j'ai élaboré ceci :

  var keys = Object.keys(data[0]); //obtenir les en-têtes des données
  keys.splice(keys.indexOf('ID'), 1)//supprimer la clé "ID"

  data.forEach(function(d){
    keys.forEach(function (key, i){
      if (d[key]!="none") { adduniquenodes(d[key]); } //ajouter un nœd si différent de "none"
        var c = 1; //vérifie la colonne suivante à i
        if (d[keys[i+c]]!= undefined && d[key] !== "none"){
          while (d[keys[i+c]] === "none"){
            c = c+1;     //passer à la colonne suivante si "none" est trouvé
           }
          graph.links.push ({
            "source" : d[key],
            "target" : d[keys[i+c]],
            "value" : countvalues(key,d[key],keys[i+c],d[keys[i+c]]) 
          });
        }
      })
  });

function adduniquenodes(value) {
      if (graph.nodes.indexOf(value) === -1){
        graph.nodes.push(value);
      }
}

function countvalues (sourcekey, source, targetkey, target) {
      var c = 0;
      data.forEach (function (d){
        if (d[sourcekey] === source && d[targetkey]===target){
          c++;
        }

      });
      return c;
 }
 console.log(graph);

---

Première réponse :

Peut-être que cela vous aidera : Le code suivant place chaque Processus, Propriétaire, Décision et État en tant que nœuds uniques et les liens également.

Notez que je ne suis toujours pas sûr de la valeur que vous souhaitez, donc j'ai mis 1 comme valeur.

  graph = {"nodes" : [], "links" : []};
    data.forEach(function(d){
      adduniquenodes(d.Process);
      adduniquenodes(d.Owner);
      adduniquenodes(d.Decision);
      adduniquenodes(d.Status);
      graph.links.push ( {"source" : d.Process,
                            "target" :d.Owner,
                          "value" : countvalues('Process',d.Process,'Owner',d.Owner)                         
                         });
      graph.links.push ( {"source" : d.Owner,
                          "target" :d.Decision,
                          "value" : countvalues('Owner',d.Owner,'Decision',d.Decision)                       
                         });
      graph.links.push ( {"source" : d.Decision,
                          "target" :d.Status,
                          "value" : countvalues('Decision',d.Decision,'Status',d.Status)                        
                         });
    });

    function adduniquenodes(value) {
      if (graph.nodes.indexOf(value) === -1){
        graph.nodes.push(value);
      }
    }

    function countvalues (sourcekey, source, targetkey, target) {
      var c = 0;
      data.forEach (function (d){
        if (d[sourcekey] === source && d[targetkey]===target){
          c++;
        }
      });
      return c;
      }
console.log(graph);

---