index.html

<!--

  GNU GENERAL PUBLIC LICENSE
  Version 3, 29 June 2007
  (see LICENSE)

  spreadsheet-flowchart creator

  by Anthony Haffey and Nico Biagi from Scientific Open Solutions

-->
<script src="libraries/jquery-3.3.1.min.js"></script>
<script src="libraries/bootstrap.4.0.min.js"></script>
<script src="libraries/bootbox.4.4.0.min.js"></script>
<script src="libraries/leader-line.min.js"></script>
<script src="libraries/papaparse.4.3.6.min.js"></script>

<link rel="stylesheet" href="libraries/bootstrapCollector.css">
<!--
<div style="border-radius:400px;
border-style: ridge;
  border-color: coral;
  border-width: 7px;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  margin-right: -50%;
  transform: translate(-50%, -50%);
   width:400; height:400"></div>
-->
<div id="map"></div>
<script>

function draw_node(this_row, generation, x_coordinate, y_coordinate, parent_degrees){

  var this_button = $("<button>")
    .addClass("btn")
    .addClass("btn-primary")
    .css("position", "fixed")
    .css("top", "50%")
    .css("left", "50%")
    .css("text-align", "center")
    //.css("margin-right", "-50%")
    .css("margin-left", x_coordinate)
    .css("transform", "translate(-50%, -50%)")
    .css("margin-top", y_coordinate)
    .html(this_row.label)
    .prop("id", this_row.location);

  $("body").append(this_button);

  var new_generation = generation + 1;
  var branches = this_row.branches.split(",");
  var no_branches = branches.length;

  var degree_cut = 45;
  var valid_degrees = 360/ generation - degree_cut;


  console.log("valid_degrees");
  console.log(valid_degrees);

  var branch_degrees = valid_degrees/no_branches;

  branches.forEach(function(this_location, branch_index){

    var this_degrees = (branch_index + 1) * branch_degrees;

    var radius = 200;
    //parent_degrees = 0;

    child_y_coordinate = y_coordinate + Math.sin((parent_degrees + this_degrees)*Math.PI/180) * radius;
    child_x_coordinate = x_coordinate + Math.cos((parent_degrees + this_degrees)*Math.PI/180) * radius;

    var this_new_row = csv_data.filter(function(local_row){
      local_row.this_degrees = this_degrees;
      local_row.parent_degrees = parent_degrees;
      local_row.child_x_coordinate = child_x_coordinate;
      local_row.child_y_coordinate = child_y_coordinate;
      return local_row.location == this_location;
    })[0];
    if(typeof(this_new_row) !== "undefined"){
      draw_node(this_new_row, new_generation, child_x_coordinate, child_y_coordinate, this_degrees);
    }
  });
/*
define x and y coordinates for the button
y = yCenter + sin(alpha)*radius;
x = xCenter + cos(alpha)*radius;
*/

}

/*
* valid degrees (out of 360)
  - divide by generation
* direction (?out of 360?)
*/

var csv_data;
$.get("flowdata.csv", function(data){
  csv_data = Papa.parse(data, {
    header: true }
  ).data;

  /*
  * draw first button
  */
  var this_row = csv_data[0];
  $("body").append(
    $("<button>")
      .addClass("btn")
      .addClass("btn-primary")
      .css("position", "fixed")
      .css("top", "50%")
      .css("left", "50%")
      .css("text-align", "center")
      //.css("margin-right", "-50%")
      .css("margin-left", 0)
      .css("transform", "translate(-50%, -50%)")
      .css("margin-top", 0)
      .html(this_row.label)
      .prop("id", this_row.location)
  );
  var new_generation = 1;
  var branches = this_row.branches.split(",");
  var no_branches = branches.length;
  var valid_degrees = 360;
  var branch_degrees = valid_degrees/no_branches;

  branches.forEach(function(this_location, branch_index){

    var this_degrees = (branch_index + 1) * branch_degrees;

    var radius = 200;
    //parent_degrees = 0;

    child_y_coordinate = 0 + Math.sin((0 + this_degrees-90)*Math.PI/180) * radius;
    child_x_coordinate = 0 + Math.cos((0 + this_degrees-90)*Math.PI/180) * radius;

    var this_new_row = csv_data.filter(function(local_row){
      local_row.this_degrees = this_degrees;
      local_row.parent_degrees = 0;
      local_row.child_x_coordinate = child_x_coordinate;
      local_row.child_y_coordinate = child_y_coordinate;
      return local_row.location == this_location;
    })[0];
    if(typeof(this_new_row) !== "undefined"){
      draw_node(this_new_row, new_generation, child_x_coordinate, child_y_coordinate, this_degrees);
    }
  });

  /*
  draw_node(
    csv_data[0], // this_row
    0,           // generation
    0,           // x_coordinate
    0,           // y_coordinate
    0,           // parents degreed
  );
  */



});

function draw_arrow(parent_node, child_node){
  if(parent_node !== null){
    new LeaderLine(
    /*
      document.getElementById(parent_node),
      document.getElementById(row.location),
    */
      document.getElementById(parent_node),
      document.getElementById(child_node),
        {
          color: "red",
          animation: true,
          endPlug: 'arrow1',
          endSocket: "center",
          path:  "magnet",
          size:  2,
          startSocket: "top",
          startPlug: 'behind',
          startPlugColor: '#a6f41d', gradient: true
        }
    );
  }
}


/*




  csv_data = Papa.parse(data, {
    header: true }
  ).data;
  console.log(csv_data);
  var this_row = [
    csv_data[0], // first row
    0,           // row_no
    null,        // location
    1            // branch_index/branches.length
  ];

})
*/
</script>