Interactive Triad Balance Diagram

Interactive diagram for selecting points on a "Mind/Body/Spirit" diagram and converting to a meaningful vector of values representing those attributes.

by RobertLRead

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://pubinv.github.io/TriadBalance/TriadBalance.forJSFiddle.js"></script>
<!-- Full Triad Balance code available via GPL at: https://github.com/PubInv/TriadBalance -->
<div style="display:flex-column; justify-content: center; align-content: center; width: 50vw;">
  <svg id="create_svg" style="background: silver; width: 50vw; height: 35vw;" font-size="24px"> </svg> Click in area above.
</div>
<legend>Attributes Calculated from Triangle Position:</legend>
<div style="display: flex; justify-content: space-around; font-size: large; font-weight: bold">
  <div>
    <label for="d0" id="d0l">Mind: </label>
    <span type="text" id="d0">0%</span>
  </div>
  <div>
    <label for="d1" id="d1l">Body: </label>
    <span type="text" id="d1">0%</span>
  </div>
  <div>
    <label for="d2" id="d2l">Spirit: </label>
    <span type="text" id="d2">0%</span>
  </div>
</div>

CSS

#triad-balance-triangle {
    fill: lemonchiffon;
    stroke: blue;
    stroke-width: 1;
}

.triad-vertices-labels {
    fill: blue;
    text-anchor: middle;
}

#triad-vertex-label-0 {
    fill: green;
}

#triad-vertex-label-1 {
    fill: blue;
}

#triad-vertex-label-2 {
    fill: red;
}

#triangle_origin {
    fill: black;
    stroke: black;
    stroke-width: 1px;
}

.triad-marker {
    fill: red;
    stroke: red;
    stroke-width: 1px;
    r: 3px;
}

JavaScript

// A more complete demnostration and discussion of Triad Balance 
// include code available via GPL at: https://github.com/PubInv/TriadBalance 


var CUR_BAL;
// norm_to_use should be a parameter here
function setBalance(bal) {
  CUR_BAL = bal;
  $( "#d0" ).text( (CUR_BAL[0] * 100).toFixed(0) +  "%" );
  $( "#d1" ).text( (CUR_BAL[1] * 100).toFixed(0) +  "%" );
  $( "#d2" ).text( (CUR_BAL[2] * 100).toFixed(0) +  "%" );
}


// THIS IS AN EXAMPLE OF INITIALIZING THE TRIAD DIAGRAM
var TBS;
function init() {
  // HERE IS THE INITIALIZATION OF THE DIAGRAM
  let GLOBAL_SVG_ID = "create_svg";
  TBS = new triadb.TriadBalanceState();
  TBS.SVG_ELT = document.getElementById(GLOBAL_SVG_ID);
  TBS.CLICK_CALLBACK = ((tp,tpi,bal) => setBalance(bal));
  TBS.LABELS = ["Mind","Body","Spirit"];

  // These are optional configuraton settings, which have defaults.
  TBS.POINTS_UPWARD = true;
  TBS.FONT_SIZE_RATIO_TO_HEIGHT = 1/20;
  // These value look good to me but I am not a web designer.
  // 4/5 is generally too high for this!
  TBS.SIDE_TO_MIN_BOUND = 7/10;
  // The percentage to push the origin down to make it look balanced.
  TBS.Y_DISP_PER_CENT = 10;

  TBS.NORM_TO_USE =  triadb.L1;

  triadb.initialize_triad_diagram(TBS);
}

$( document ).ready(function() {

  $("#MBS").click(() => { set_and_render("MBS");});
  $("#HHH").click(() => { set_and_render("HHH");});
  $("#PSM").click(() => { set_and_render("PSM");});
  $("#SEF").click(() => { set_and_render("SEF");});
  $("#FSH").click(() => { set_and_render("FSH");});


  function set_dimension_labels(labels) {
    $("#d0l").text(labels[0] + ":");
    $("#d1l").text(labels[1] + ":");
    $("#d2l").text(labels[2] + ":");
  }

  function set_and_render(cur) {
    CUR_LABELS = cur;
    set_dimension_labels(THREE_DIMENSIONS[cur]);
    triadb.set_labels(TBS.SVG_ELT,THREE_DIMENSIONS[cur]);
  }



  init();

  // NOW WE EXECUTE OUR TEST SUITE; A NON-DEVELOPER NEED NOT DO THIS

  var UPWARD_TRIANGLES =...