Data Format of ApexSankey

Working with ApexSankey Data

In the ApexSankey library, nodes and edges are fundamental components of a Sankey chart:

Nodes: Represent entities or points in the flow. In a Sankey diagram, nodes are the blocks or labels that you see, which indicate the sources, destinations, or intermediary points in the flow of data.

Edges: Represent the connections or flows between the nodes. Edges are the lines or links that connect one node to another, illustrating the quantity of flow from one point to another.

Mapping CSV Data to ApexSankey Format

If you have a CSV file, the data generally needs to be structured into an array of nodes and edges. Here’s a basic example of how to map a CSV structure to match the ApexSankey format:

Example CSV Structure:

Source, Target, Value
A, B, 10
A, C, 20
B, D, 15
C, D, 25

Mapping to ApexSankey Format:

1. Nodes: Extract unique values from the "Source" and "Target" columns to create the nodes. id is for uniquely identifying nodes and title is for showing node labels. title will be also used for showing tooltips for node-to-node connections.

   const nodes = [
     { id: "A", title: "A" },
     { id: "B", title: "B" },
     { id: "C", title: "C" },
     { id: "D", title: "D" }
   ];
   

2. Edges: Use the "Source", "Target", and "Value" columns to define the edges.

   const edges = [
     { source: "A", target: "B", value: 10 },
     { source: "A", target: "C", value: 20 },
     { source: "B", target: "D", value: 15 },
     { source: "C", target: "D", value: 25 }
   ];
   

3. Combined Data Structure:

   const sankeyOptions = {
     nodes: [
         { id: "A", title: "A" },
         { id: "B", title: "B" },
         { id: "C", title: "C" },
         { id: "D", title: "D" }
     ],
     edges: [
         { source: "A", target: "B", value: 10 },
         { source: "A", target: "C", value: 20 },
         { source: "B", target: "D", value: 15 },
         { source: "C", target: "D", value: 25 }
     ]
   }