aboutsummaryrefslogtreecommitdiff
path: root/gn2/wqflask/templates/pca_scree_plot.html
diff options
context:
space:
mode:
Diffstat (limited to 'gn2/wqflask/templates/pca_scree_plot.html')
-rw-r--r--gn2/wqflask/templates/pca_scree_plot.html85
1 files changed, 85 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/pca_scree_plot.html b/gn2/wqflask/templates/pca_scree_plot.html
new file mode 100644
index 00000000..74eb2c15
--- /dev/null
+++ b/gn2/wqflask/templates/pca_scree_plot.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title></title>
+</head>
+
+<body>
+ <div>
+ <h2>Scree Plot</h2>
+ <div style="padding-bottom: 10px;">Review more on <a href="https://en.wikipedia.org/wiki/Scree_plot">scree plots</a>.</div>
+ <div id="scree_plot" style="width:700px;height:600px;"></div>
+ </div>
+</body>
+<script type="text/javascript" src="{{ url_for('js', filename='plotly/plotly.min.js') }}"></script>
+<script type="text/javascript">
+js_data = {{ js_data | safe }}
+
+let { x_coord, y_coord } = js_data["scree_data"]
+
+
+const layout = {
+ yaxis: {
+ title: {
+ text: "% of Variance",
+ font: {
+ "size": 18,
+ "color": ""
+
+ }
+ }
+ },
+
+ xaxis: {
+ title: {
+ text: "Principal Components",
+ font: {
+ "size": 18,
+ "color": ""
+
+ }
+ }
+ },
+
+}
+
+const data = [{
+ x: x_coord,
+ y: y_coord,
+ marker: {
+
+ color: 'rgb(17, 157, 255)',
+ size: 5,
+ line: {
+ color: 'rgb(255, 0, 0)',
+ width: 3
+ }
+
+ }
+}]
+
+
+let custom_configs = (filename, download_format, modebar = true) => {
+
+ return {
+ displayModeBar: modebar,
+ scrollZoom: false,
+ toImageButtonOptions: {
+ filename,
+ format:download_format,
+ height: 600,
+ width: 700,
+ scale: 1
+ }
+ }
+
+}
+
+Plotly.newPlot(document.getElementById("scree_plot"), data, layout,
+ custom_configs(file_name = "scree_plot", download_format = "svg"));
+</script>
+
+</html>