flare_edge_bundle

by transcend2030

HTML

<div id="chart" style="overflow:scroll">

CSS

.node {
     font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
     fill: #bbb;
   }

   .node:hover {
     fill: #000;
   }

   .link {
     stroke: steelblue;
     stroke-opacity: .4;
     fill: none;
     pointer-events: none;
   }

   .node:hover,
   .node--source,
   .node--target {
     font-weight: 700;
   }

   .node--source {
     fill: #d62728;
   }

   .node--target {
     fill: #2ca02c;
   }

   .link--source,
   .link--target {
     stroke-opacity: 1;
     stroke-width: 2px;
   }

   .link--source {
     stroke: #2ca02c;
   }

   .link--target {
     stroke: #d62728;
   }

JavaScript

var flaredata = [{
         "name": "flare.QTL.4H_GBM1069",
         "imports": [
           "flare.metabolite.M746",
           "flare.metabolite.M1016",
           "flare.metabolite.M1024",
           "flare.metabolite.M2262",
           "flare.metabolite.M2459",
           "flare.metabolite.M2509",
           "flare.metabolite.M3403",
           "flare.metabolite.M3591",
           "flare.metabolite.M3625"
         ]
       },
       {
         "name": "flare.QTL.6H_Bmag500",
         "imports": [
           "flare.metabolite.M2579",
           "flare.metabolite.M2775",
           "flare.metabolite.M3275",
           "flare.metabolite.M3904",
           "flare.metabolite.M4073"
         ]
       },
       {
         "name": "flare.QTL.6H_EBmag0755B",
         "imports": [
           "flare.metabolite.M2579",
           "flare.metabolite.M2775",
           "flare.metabolite.M3275",
           "flare.metabolite.M3904"
         ]
       },
       {
         "name": "flare.QTL.6H_GBM1021",
         "imports": [
           "flare.metabolite.M2579",
           "flare.metabolite.M2775",
           "flare.metabolite.M3275",
           "flare.metabolite.M3904",
           "flare.metabolite.M4073"
         ]
       },
       {
         "name": "flare.QTL.bPb_2055_1H",
         "imports": [
           "flare.metabolite.M198",
           "flare.metabolite.M404",
           "flare.metabolite.M971",
           "flare.metabolite.M1081",
           "flare.metabolite.M1240",
           "flare.metabolite.M1500",
           "flare.metabolite.M1876",
           "flare.metabolite.M2291",
           "flare.metabolite.M2529",
           "flare.metabolite.M3066",
           "flare.metabolite.M3302",
           "flare.metabolite.M3316",
           "flare.metabolite.M3451",
           "flare.metabolite.M4004"
         ]
       },
       {
         "name": "flare.QTL.bPb_3217_1H",
         "imports": [
           "flare.metabolite.M198",
           "flare.metabolite.M971",
          ...