JSFiddle - React, Tailwind, and code Playground

by orthosie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css">
<div id="mynetwork"></div>

<pre>
<?php
$ini = array (2 ,13 ,38461);
for($i = 0; $i < count($ini); $i++)
    $nodes[$i+1] =  $ini[$i];

$id = count($ini);
$links = array();


function pf_nodes($in)
{
    global $nodes, $links, $id;
    /*if ( count ($in) < 1 )
        return;*/
    
    $level = array();
    $fi = array_chunk ( $in , 2 , 1);
    foreach ( $fi as $ffi )
    {
        
        $keys = array();
        //print_r($ffi);
        //print "<br/>\n";
        $newnode = 1;
        if ( count($ffi) > 1 )
        {
           foreach ($ffi as $key => $val )
           {
             $newnode = $newnode * $val;
             array_push($keys,$key);
           }
           $id++;
           $nodes[$id] = $newnode;
           $level[$id] = $newnode;
        } else
        {
           $k = 0;
           foreach ($ffi as $key => $val )
           {
             $newnode = $newnode * $val;
               $k = $key;
             //array_push($keys,$key);
           }
           //$id++;
           $level[$k] = $newnode;
        }
        
        foreach($keys as $k)
            array_push($links , array ( 'from' => $k, 'to' => $id ) );
    } 
    /*print_r($level);
    print "<br/>";
    print_r($links);*/
    if ( count($level) > 1 )
        pf_nodes($level);
}

//print_r($fi);

pf_nodes($nodes);
    //print "<br/>";
    //print_r($links);

//print "<br/>";
//print_r($nodes);

foreach($nodes as $key => $val)
{
    print "{id: $key , label: '${val}', shape: 'circle', color:'#97C2FC'},";
    print "<br/>";
}

foreach($links as $link )
{
    print "{from: ". $link['from'] . ", to: " . $link['to'] .", color:{color:'#ff0000', opacity:0.3}},";
    print "<br/>";
}

?>

</pre>

CSS

#mynetwork {
      width: 100%;
      height: 500px;
      border: 1px solid lightgray;
    }

    p {
      max-width:800px;
    }

JavaScript

// create an array with nodes
  var nodes = new vis.DataSet([
{id: 1 , label: '2', shape: 'circle', color:'#97C2FC'},
{id: 2 , label: '13', shape: 'circle', color:'#97C2FC'},
{id: 3 , label: '38461', shape: 'circle', color:'#97C2FC'},
{id: 4 , label: '26', shape: 'circle', color:'#97C2FC'},
{id: 5 , label: '999986', shape: 'circle', color:'#97C2FC'},
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
{from: 1, to: 4, color:{color:'#ff0000', opacity:0.3}},
{from: 2, to: 4, color:{color:'#ff0000', opacity:0.3}},
{from: 4, to: 5, color:{color:'#ff0000', opacity:0.3}},
{from: 3, to: 5, color:{color:'#ff0000', opacity:0.3}},
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    nodes: {
      shape: 'circle'
    }
  };
  var network = new vis.Network(container, data, options);