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:

Purpose and Status

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.