README

Triad Balance Interactive, Responsive Diagram

Because this is an interactive demo, please go to https://pubinv.github.io/TriadBalance/TriadBalanceDemo.html, which has an extensive demo and a JSFiddle.

On the demo page you will see something that looks like this:

example triad diagram

Purpose and Status

This interactive page presents what may be a new graphical user interface element — the "triad-balance" diagram. The purpose is to use a single click on a triangle to enter three values such as "Mind/Body/Sprit" or "Strength/Endurance/Flexibility" that are presumed to in some sense be "in balance", or where it is interesting if they are in balance. This diagram solves the fundamental problem of converting a point on such a diagram into a 3-vector of values in a mathematically consistent and invertible way. The Triad Balance widget is fully responsive and stylable in css. It should be easy for any JavaScript programmer to embed this on a page. A full test suite and example code should assist in reuse.

Usage

To place an interactive diagram on your page:

Include the file ./dist/TriadBalance.js in your HTML.
Include the file ./dist/TriadBalance.css for styling.
Create an SVG element where you want the diagram.
Create a callback to receive the data when the diagram is clicked on.
In your JavaScript, create the initialization object from your svg element and your callback. Other configuration is possible, but defaults are given.

This is a minimal example of invocation; for more explanation see the docs.

function init() {
  // HERE IS THE INITIALIZATION of the object
  let GLOBAL_SVG_ID = "create_svg";
  TBS = new TriadBalanceState();
  TBS.SVG_ELT = document.getElementById(GLOBAL_SVG_ID);
  TBS.CLICK_CALLBACK = ((tp,tpi,bal) => foo(bal));
  TBS.LABELS = ["Mind", "Body", "Spirit"];

  triadb.initialize_triad_diagram(TBS);
}

The TriadBalance functions are brought into JavaScript under the symbol triadb.

Development Usage

npm install

Should give you browserify and tinify for the purpose of building; the code itself does not depend on anything not in the repo.

TriadBalance is direcly including an extension of vec-la-fp by Francis Stokes. This has kept the footprint of this widget very small (< 12K bytes).

npm run build execute scripts to copy to run browserify and tinify; build the browser test file, and, finally, copy the .css files into the distro and copy a file where it can be serverd by GitHub pages for the JSFiddle to read.

There are extensive tests, which are loaded into a file in the browser. I prefer to use mocha but have found it difficult to make mocha tests work both the cli and the browser.

License

You are free to reuse this software under the terms of the GNU General Public License. Although the code is covered by the GPL, the algorithm is not. Please re-code the math and algorithm here and use it as you see fit.

Contact me (<read.robert@gmail.com>) with any questions or comments.

Acknowledgements

Thanks to Mark Frazier for the concept and Sean Johnson for a proofread and code review.

triadbalance

Usage no npm install needed!