Skip to content

nextbitlabs/ternary-plot

Repository files navigation

<ternary-plot>

Latest Release Published on webcomponents.org

Web component to implement a ternary plot.

Usage

In an html file

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import 'https://unpkg.com/ternary-plot@latest/dist/ternary-plot.umd.js';
    </script>
  </head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap');
    /*
      CSS custom properties penetrate the Shadow DOM,
      they are useful to provide custom styling.
      The ternary-plot webcomponent exposes font-size and font-family custom properties.
    */
    ternary-plot {
      --font-size: 13px;
      --font-family: 'Roboto Mono', monospace;
    }
  </style>
  <body>
    <!-- Set SVG width and height in pixels with the side attribute -->
    <ternary-plot side="400"></ternary-plot>
  </body>
  <script>
    const element = document.querySelector('ternary-plot');
    // Set data as a dynamic property.
    element.data = {
      titles: {
        bottom: "Variable A",
        right: "Variable B",
        left: "Variable C",
      },
      data: [
        // The sum of bottom, right and left should be 1.
        {
          bottom: 0.3,
          right: 0.4,
          left: 0.3
        },
        {
          bottom: 0.1,
          right: 0.5,
          left: 0.4
        },
      ]
    };
  </script>
</html>

With npm:

npm i ternary-plot

See demo1 and demo2.

License

MIT