Web component to implement a ternary plot.
<!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');
ternary-plot {
--font-size: 13px;
--font-family: 'Roboto Mono', monospace;
}
</style>
<body>
<ternary-plot side="400"></ternary-plot>
</body>
<script>
const element = document.querySelector('ternary-plot');
element.data = {
titles: {
bottom: "Variable A",
right: "Variable B",
left: "Variable C",
},
data: [
{
bottom: 0.3,
right: 0.4,
left: 0.3
},
{
bottom: 0.1,
right: 0.5,
left: 0.4
},
]
};
</script>
</html>