Draw correlation matrix in pure JavaScript. This is an easy way you can show your correlation matrix in a web app.
_canvasName_
- You can set the proper name of canvas for HTML tag.
N
- You can give the size of quadratic-matrix from 3 to n.
__labelsVector__
- You can give the name vector for "legends".
__correlationMatrix__
- Here can you push the data in 2D array for showing.
│
|
├── tests/
│ └── draw-correlation-matrix.test.js
|
├── draw-correlation-matrix.js
├── example.html
├── package.json
└── README.mdgit clone https://github.com/vargalaszlo87/draw-correlation-matrix.git
This solution is simple, you can use it easily.
- Copy the draw-correlation.matrix.js to you directory where you would like use it.
- Add a canvas into your HTML (or other) code.
- Add the size of quadratic-matrix.
- Add the labels vector.
- Finally, add the 2D correlation matrix for the method.
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw Correlation Matrix</title>
<script type="text/javascript" src="draw-correlation-matrix.js"></script>
</head>
<body>
<canvas id="matrixCanvas"></canvas>
<script type="text/javascript">
// add the datas
const corrMatrix = [
[1.00,-0.85,-0.78,0.68,-0.87,0.42],
[-0.85,1.00,0.79,-0.71,0.89,-0.43],
[-0.78,0.79,1.00,-0.45,0.66,-0.71],
[0.68,-0.71,-0.45,1.00,-0.71,0.09],
[-0.87,0.89,0.66,-0.71,1.00,-0.17],
[0.42,-0.43,-0.71,0.09,-0.17,1.00]
];
const labels = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta"];
// call the funcion
drawCorrelationMatrix.chart("matrixCanvas", 6, labels, corrMatrix);
</script>
</body>
</html>Distributed under the MIT License. See LICENSE.txt for more information.
Varga Laszlo - https://vargalaszlo.com - mail@vargalaszlo.com
Project Link: https://github.com/vargalaszlo87/pid-c
