d3-lineage

D3 Lineage - 1.0.11

D3.js lineage chart to display a tree of provenance
This is based on the Pedigree chart by Mike Bostock: https://bl.ocks.org/mbostock/2966094

The tree is drawn horizontally from right to left starting at the root node. Height and Width of the renderTo element are automatically updated to fit the nodes. This may look better wrapped in an element with style overflow:auto.

This chart depends on d3.js (v3), jQuery and font-awesome for a spinner icon.

Usage

Create a new chart and supply a css selector or jquery object as renderTo

  var chart = d3.lineageChart({
    renderTo: '#chart'
  });

Supply a URL that will return JSON formatted data

  chart.load(url);

For bootstrap tabs, redraw the chart when the tab is activated

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    chart.redraw();
  });

Data Format

This graph expects a nested node structure in json format. Each node has the following attributes:

• type: Top Text for Node
• name: node link text
• link: node link url,
• color: the color used to render edge between nodes
• child: name of child node or nil,
• edges: array of edge(s) between child and node
  • each edge is an object with name and link for the edge.
  • edge names are displayed below the node
• parents: array with one node for each parent.

For example:

{
  "type": "Experiment",
  "link": "/experiment/designs/13182",
  "name": "Test experiment",
  "child": null,
  "edges": null,
  "parents": [
    {
      "type": "Pretreated Feedstock",
      "color": "teal",
      "link": "/pretreatment/batches/10898",
      "name": "Corn Stover 2012 AFEX (36H56) Batch 906",
      "child": "Nick's Test experiment",
      "edges": [
        {
          "name": "FSMSU000000000957",
          "link": "/pretreatment/items/14798"
        }
      ],
      "parents": [
 
      ]
    },
    {
      "type": "Hydrolysate",
      "color": "skyblue",
      "link": "/hydrolysate/biomass_batches/10095",
      "name": "MiSynBio 7% Glucan Hydrolysate SG UW12 AFEX Batch 837",
      "child": "Nick's Test experiment",
      "edges": [
        {
          "name": "FHUWM000000000837",
          "link": "/hydrolysate/items/16181"
        }
      ],
      "parents": [
        {
          "type": "Pretreated Feedstock",
          "color": "teal",
          "link": "/pretreatment/batches/10248",
          "name": "Switchgrass 2012 AFEX 822-91",
          "child": "MiSynBio 7% Glucan Hydrolysate SG UW12 AFEX Batch 837",
          "edges": [
            {
              "name": "FSMSU000000000667",
              "link": "/pretreatment/items/15352"
            }
          ],
          "parents": [
            {
              "type": "Untreated Feedstock",
              "link": "/feedstock/batches/10050",
              "color": "green",
              "name": "GLBRC Switchgrass UW 2012",
              "child": "Switchgrass 2012 AFEX 822-91",
              "edges": [
                {
                  "name": "FSUWM000000022633",
                  "link": "/feedstock/items/12666"
                }
              ],
              "parents": [
 
              ]
            }
          ]
        }
      ]
    }
  ]
}