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(array_reverse($nodes,true) 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>

<pre>
  
  <?php
error_reporting(E_ALL);
$number = 999986;

$init = array (2 ,13...

CSS

body {
      font: 10pt sans;
    }
    #mynetwork {
      width: 800px;
      height: 500px;
      border: 1px solid lightgray;
    }

JavaScript

var network = null;
    var layoutMethod = "directed";

    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }

    function draw() {
      destroy();

      var nodes = [
{id: 5 , label: '38461', shape: 'circle', color:'#97C2FC'},
{id: 4 , label: '13', shape: 'circle', color:'#97C2FC'},
{id: 3 , label: '499993', shape: 'circle', color:'#97C2FC'},
{id: 2 , label: '2', shape: 'circle', color:'#97C2FC'},
{id: 1 , label: '999986', shape: 'circle', color:'#97C2FC'},
      ];
      var edges = [
{from: 1, to: 2, color:{color:'#ff0000', opacity:0.3}},
{from: 1, to: 3, color:{color:'#ff0000', opacity:0.3}},
{from: 3, to: 4, color:{color:'#ff0000', opacity:0.3}},
{from: 3, to: 5, color:{color:'#ff0000', opacity:0.3}},
      ];

      /*edges.push({from: 0, to: 1});
      edges.push({from: 0, to: 6});
      edges.push({from: 0, to: 13});
      edges.push({from: 0, to: 11});
      edges.push({from: 1, to: 2});
      edges.push({from: 2, to: 3});
      edges.push({from: 2, to: 4});
      edges.push({from: 3, to: 5});
      edges.push({from: 1, to: 10});
      edges.push({from: 1, to: 7});
      edges.push({from: 2, to: 8});
      edges.push({from: 2, to: 9});
      edges.push({from: 3, to: 14});
      edges.push({from: 1, to: 12});
      edges.push({from: 16, to: 15});
      edges.push({from: 15, to: 17});
      edges.push({from: 18, to: 17});*/

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };

      var options = {
        layout: {
          hierarchical: {
            direction: 'UD',
            sortMethod: layoutMethod
          }
        },
        
        edges: {
          smooth: true,
          forceDirection:  'horizontal',
          arrows: {to : true }
        }
      };
      network = new vis.Network(container, data, options);
    }


draw();