diff --git a/app.py b/app.py
index 97278b7..cbdcf6a 100644
--- a/app.py
+++ b/app.py
@@ -13,13 +13,14 @@
 import pandas as pd
 from dash.dependencies import Input, Output
 
-
 app = Flask(__name__)
-cache = {"filters":""}
+cache = {"filters": ""}
 df = pd.DataFrame()
 available_indicators = df
-initial= table.makeTable
+initial = table.makeTable
 external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css', '/static/css/template.css']
+
+
 #
 # server = flask.Flask(__name__)
 # plot = dash.Dash(__name__, server=server, url_base_pathname='/get/', external_stylesheets=external_stylesheets)
@@ -54,7 +55,7 @@ def home():
     #     print(data)
     #     return render_template("output.html", colNames=json.dumps(colNames))
     if request.method == "GET":
-        #upon clicking submit this stuff will render
+        # upon clicking submit this stuff will render
         colNames = []
         print("from GET!")
         print("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
@@ -72,17 +73,48 @@ def home():
         tables = initial.outputTable()
         df = tables
         # cache1 = json.dumps(cache)
-        colNames = ['choose filter','ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
-       'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A',
-       'ABS_f_D', 'CT_f_conn_D', 'CT_f_conn_D_An', 'CT_f_conn_A_Ca',
-       'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I', 'STAT_e',
-       'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An',
-       'CT_f_D_tort1', 'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1',
-       'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r', 'NOMALIZED_INTERFACE',
-       'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+        colNames = ['choose filter', 'ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
+                    'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A',
+                    'ABS_f_D', 'CT_f_conn_D', 'CT_f_conn_D_An', 'CT_f_conn_A_Ca',
+                    'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I', 'STAT_e',
+                    'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An',
+                    'CT_f_D_tort1', 'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1',
+                    'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r', 'NOMALIZED_INTERFACE',
+                    'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
         print(colNames)
+
         return render_template("output.html", colNames=json.dumps(colNames))
+    # return render_template("scatter_plot.html", table=[df.to_html(header="true")], tabledata=tabledata)
     return render_template("output.html")
+
+
+@app.route("/data.json")
+def data():
+    jsonfile = initial.returnResponse()
+    colNames = ['case_name', 'source', 'ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
+                'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A',
+                'ABS_f_D', 'CT_f_conn_D', 'CT_f_conn_D_An', 'CT_f_conn_A_Ca',
+                'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I', 'STAT_e',
+                'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An',
+                'CT_f_D_tort1', 'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1',
+                'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r', 'NOMALIZED_INTERFACE',
+                'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+    return render_template("jsondata.html", jsonData=json.dumps(jsonfile), colNames=colNames)
+
+
+@app.route("/plot")
+def plot():
+    jsonfile = initial.returnResponse()
+    cols = ['case_name', 'source', 'ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
+            'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A',
+            'ABS_f_D', 'CT_f_conn_D', 'CT_f_conn_D_An', 'CT_f_conn_A_Ca',
+            'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I', 'STAT_e',
+            'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An',
+            'CT_f_D_tort1', 'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1',
+            'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r', 'NORMALIZED_INTERFACE',
+            'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+
+    return render_template("scatter_plot.html", jsonData=jsonfile, colNames=cols)
     # table.makeTable.getCache([])
     # tables= table.makeTable.outputTable()
     #             # print("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
@@ -92,6 +124,8 @@ def home():
     # colNames = json.dumps(cols)
     # cache1 = json.dumps('no filters entered yet')
     # return render_template("output.html", table=[tables.to_html(header="true")], tabledata=tabledata, colNames=colNames, cache=cache1)
+
+
 @app.route("/table", methods=["GET"])
 def table():
     global cache
@@ -111,9 +145,9 @@ def table():
     #     print(df)
     #     tabledata = json.dumps(initial.getBoolData())
     #     return render_template("index.html", table=[df.to_html(header="true")], tabledata=tabledata)
-    if request.method=="GET":
-        #have filters in the URL that GET can access
-        #request.args.GET
+    if request.method == "GET":
+        # have filters in the URL that GET can access
+        # request.args.GET
         print("~~~~~~~~~~~~~~~GOT GET~~~~~~~~~~~~~~~~~~~~~")
         # print(request.args)
         # data = request.args
@@ -126,14 +160,16 @@ def table():
         initial.getCache(cache["filters"])
         tables = initial.outputTable()
         df = tables
-        print(df)
+        print(f"tables {df}")
         tabledata = json.dumps(initial.getBoolData())
         print(tabledata)
+        # return render_template("scatter_plot.html", table=[df.to_html(header="true")], tabledata=tabledata)
         return render_template("index.html", table=[df.to_html(header="true")], tabledata=tabledata)
     return render_template("index.html", table=[df.to_html(header="true")], tabledata=tabledata)
-    #serve this as iframe???
+    # serve this as iframe???
 
-@app.route("/export", methods=["GET"]) # this is a job for GET, not POST
+
+@app.route("/export", methods=["GET"])  # this is a job for GET, not POST
 def export():
     print("export clicekd???")
     df.to_csv("output/datafile.csv")
@@ -142,93 +178,96 @@ def export():
                      attachment_filename='datafile.csv',
                      as_attachment=True)
 
-plot = dash.Dash(__name__, server=app, url_base_pathname='/dash/',external_stylesheets=external_stylesheets)
+
+plot = dash.Dash(__name__, server=app, url_base_pathname='/dash/', external_stylesheets=external_stylesheets)
 
 colNames = ['ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
-       'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A',
-       'ABS_f_D', 'CT_f_conn_D', 'CT_f_conn_D_An', 'CT_f_conn_A_Ca',
-       'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I', 'STAT_e',
-       'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An',
-       'CT_f_D_tort1', 'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1',
-       'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r', 'NOMALIZED_INTERFACE',
-       'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+            'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A',
+            'ABS_f_D', 'CT_f_conn_D', 'CT_f_conn_D_An', 'CT_f_conn_A_Ca',
+            'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I', 'STAT_e',
+            'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An',
+            'CT_f_D_tort1', 'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1',
+            'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r', 'NOMALIZED_INTERFACE',
+            'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
 plot.layout = html.Div([
-                # dcc.Interval(id='dash-table', interval=10000),
-                html.Div([
-                    html.Div([
-                        dcc.Dropdown(
-                            id='xaxis-column',
-                            options=[{'label': i, 'value': i} for i in colNames],
-                            value='int_r'
-                            ),
-                        dcc.RadioItems(
-                 id='xaxis-type',
-                 options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
-                 value='Linear',
-                 labelStyle={'display': 'inline-block'}
-             )
-        ],style={'width': '48%', 'display': 'inline-block'}),
-
-            html.Div([
-                dcc.Dropdown(
+    # dcc.Interval(id='dash-table', interval=10000),
+    html.Div([
+        html.Div([
+            dcc.Dropdown(
+                id='xaxis-column',
+                options=[{'label': i, 'value': i} for i in colNames],
+                value='int_r'
+            ),
+            dcc.RadioItems(
+                id='xaxis-type',
+                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
+                value='Linear',
+                labelStyle={'display': 'inline-block'}
+            )
+        ], style={'width': '48%', 'display': 'inline-block'}),
+
+        html.Div([
+            dcc.Dropdown(
                 id='yaxis-column',
                 options=[{'label': i, 'value': i} for i in colNames],
                 value='STAT_n_A'
             ),
-                dcc.RadioItems(
-                 id='yaxis-type',
-                 options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
-                 value='Linear',
-                 labelStyle={'display': 'inline-block'}
-             )
-        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
+            dcc.RadioItems(
+                id='yaxis-type',
+                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
+                value='Linear',
+                labelStyle={'display': 'inline-block'}
+            )
+        ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
     ]),
 
-            dcc.Graph(id='indicator-graphic'),
+    dcc.Graph(id='indicator-graphic'),
 
 ])
 
+
 @plot.callback(
     Output('indicator-graphic', 'figure'),
     [Input('xaxis-column', 'value'),
-    Input('yaxis-column', 'value'),
-    Input('xaxis-type', 'value'),
-    Input('yaxis-type', 'value')])
+     Input('yaxis-column', 'value'),
+     Input('xaxis-type', 'value'),
+     Input('yaxis-type', 'value')])
 def update_graph(xaxis_column_name, yaxis_column_name,
-            xaxis_type, yaxis_type):
-        dff = df
-        print("whyyyyyyyyyyyyyyyyyy")
-        print(dff.columns)
-        return {
-                'data': [dict(
-                x=dff[xaxis_column_name],
-                y=dff[yaxis_column_name],
-                text=dff['STAT_n_A'] ,
-                mode='markers',
-                marker={
-                    'size': 15,
-                    'opacity': 0.5,
-                    'line': {'width': 0.5, 'color': 'white'}
-                    }
-                    )],
-                    'layout': dict(
-                    xaxis={
-                    'title': xaxis_column_name,
-                #'type': 'linear'
-                    'type': 'linear' if xaxis_type == 'Linear' else 'log'
-                    },
-                    yaxis={
-                    'title': yaxis_column_name,
-                #'type': 'linear'
-                    'type': 'linear' if yaxis_type == 'Linear' else 'log'
-                    },
-                    margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
-                    hovermode='closest'
-                    )
-                }
+                 xaxis_type, yaxis_type):
+    dff = df
+    print("whyyyyyyyyyyyyyyyyyy")
+    print(dff.columns)
+    print(f"x: {xaxis_column_name}, y: {yaxis_column_name}")
+    return {
+        'data': [dict(
+            x=dff[xaxis_column_name],
+            y=dff[yaxis_column_name],
+            text=dff['STAT_n_A'],
+            mode='markers',
+            marker={
+                'size': 15,
+                'opacity': 0.5,
+                'line': {'width': 0.5, 'color': 'white'}
+            }
+        )],
+        'layout': dict(
+            xaxis={
+                'title': xaxis_column_name,
+                # 'type': 'linear'
+                'type': 'linear' if xaxis_type == 'Linear' else 'log'
+            },
+            yaxis={
+                'title': yaxis_column_name,
+                # 'type': 'linear'
+                'type': 'linear' if yaxis_type == 'Linear' else 'log'
+            },
+            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
+            hovermode='closest'
+        )
+    }
 
 
 if __name__ == "__main__":
-    #app.run(host="localhost", port=3050, debug=True)
+    # app.run(host="localhost", port=3050, debug=True)
     plot.run_server(host="localhost", port=3050, threaded=True, debug=True)
     # plot.run_server(host="localhost", port=2000, debug=True)
diff --git a/templates/index.html b/templates/index.html
index c7eab59..81cb121 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,8 +22,56 @@
        {% endfor %}
      <!-- <iframe id="dash-table" src="http://localhost:8050" width=700 height=300></iframe> -->
      </div>
-
    </body>
+
+<!-- <script>
+//import {chart as chart1} with {values as data} from "@d3/histogram"
+      // set the dimensions and margins of the graph
+  var margin = {top: 10, right: 30, bottom: 30, left: 60},
+    width = 460 - margin.left - margin.right,
+    height = 400 - margin.top - margin.bottom;
+  var JSONData = $("#jsondata");
+
+  // append the svg object to the body of the page
+var svg = d3.select("#my_dataviz")
+  .append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform",
+          "translate(" + margin.left + "," + margin.top + ")");
+
+  //Read the data
+       d3.json(JSONData, function(data) {
+           // Add X axis
+  var x = d3.scaleLinear()
+    .domain([0, 4000])
+    .range([ 0, width ]);
+  svg.append("g")
+    .attr("transform", "translate(0," + height + ")")
+    .call(d3.axisBottom(x));
+
+  // Add Y axis
+  var y = d3.scaleLinear()
+    .domain([0, 5000])
+    .range([ height, 0]);
+  svg.append("g")
+    .call(d3.axisLeft(y));
+
+  // Add dots
+  svg.append('g')
+    .selectAll("dot")
+    .data(data)
+    .enter()
+    .append("circle")
+      .attr("cx", function (d) { return x(d.GrLivArea); } )
+      .attr("cy", function (d) { return y(d.SalePrice); } )
+      .attr("r", 1.5)
+      .style("fill", "#69b3a2")
+      });
+
+  </script> -->
+
    <!-- <script type="text/javascript">
    $(function(){
     var filters = $("#filters");
diff --git a/templates/jsondata.html b/templates/jsondata.html
new file mode 100644
index 0000000..ca3e813
--- /dev/null
+++ b/templates/jsondata.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>jsonData</title>
+</head>
+<body>
+<div id="data-viz">
+    {{ jsonData | safe }}
+</div>
+<script>
+    var element ={{ jsonData | tojson| safe }};
+    var json = JSON.parse(element);
+
+    var a = {{ colNames | safe }}
+    var firstElem = a[0];
+
+    //var colNames = document.getElementById("colNames");
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/scatter_plot.html b/templates/scatter_plot.html
new file mode 100644
index 0000000..7e5b450
--- /dev/null
+++ b/templates/scatter_plot.html
@@ -0,0 +1,392 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scatterplot</title>
+</head>
+<label>Choose x-axis value:
+<select class="dropdown" id="x-axis">
+<option value="">x-axis</option>
+    <!--     const schema = [ 'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A', 'ABS_f_D', 'CT_f_conn_D',
+                          'CT_f_conn_D_An', 'CT_f_conn_A_Ca', 'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I',
+                          'STAT_e', 'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An', 'CT_f_D_tort1',
+                          'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1', 'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r',
+                          'NORMALIZED_INTERFACE', 'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+ -->
+    <option value=0>case_name</option>
+    <option value=1>source</option>
+    <option value=2>ABS_wf_D</option>
+    <option value=3>STAT_CC_D</option>
+    <option value=4>STAT_CC_A</option>
+    <option value=5>STAT_CC_D_An</option>
+    <option value=6>STAT_CC_A_Ca</option>
+    <option value=7>STAT_n</option>
+    <option value=8>STAT_n_D</option>
+    <option value=9>STAT_n_A</option>
+    <option value=10>ABS_f_D</option>
+    <option value=11>'CT_f_conn_D</option>
+    <option value=12>CT_f_conn_D_An</option>
+    <option value=13>CT_f_conn_A_Ca</option>
+    <option value=14>DISS_wf10_D</option>
+    <option value=15>DISS_f10_D</option>
+    <option value=16>DISS_f2_D</option>
+    <option value=17>STAT_e</option>
+    <option value=18>CT_e_conn</option>
+    <option value=19>CT_f_e_conn</option>
+    <option value=20>CT_e_D_An</option>
+    <option value=21>CT_e_A_Ca</option>
+    <option value=22>CT_n_D_adj_An</option>
+    <option value=23>CT_f_D_tort1</option>
+    <option value=24>CT_wtort_D</option>
+    <option value=25>CT_n_A_adj_Ca</option>
+    <option value=26>CT_f_A_tort1</option>
+    <option value=27>CT_wtort_A</option>
+    <option value=28>int_x</option>
+    <option value=29>int_d</option>
+    <option value=30>int_g</option>
+    <option value=31>int_r</option>
+    <option value=32>NORMALIZED_INTERFACE</option>
+    <option value=33>jsc</option>
+    <option value=34>jsc_d</option>
+    <option value=35>int_r_int_d</option>
+    <option value=36>int_d_int_g</option>
+    <option value=37>jsc_int_d</option>
+</select>
+</label>
+    <!--     const schema = ['case_name', 'source', 'ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
+                          'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A', 'ABS_f_D', 'CT_f_conn_D',
+                          'CT_f_conn_D_An', 'CT_f_conn_A_Ca', 'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I',
+                          'STAT_e', 'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An', 'CT_f_D_tort1',
+                          'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1', 'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r',
+                          'NORMALIZED_INTERFACE', 'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+ -->
+<label> Choose y-axis value:
+<select class="dropdown" id="y-axis">
+<option value="">y-axis</option>
+    <option value=0>case_name</option>
+    <option value=1>source</option>
+    <option value=2>ABS_wf_D</option>
+    <option value=3>STAT_CC_D</option>
+    <option value=4>STAT_CC_A</option>
+    <option value=5>STAT_CC_D_An</option>
+    <option value=6>STAT_CC_A_Ca</option>
+    <option value=7>STAT_n</option>
+    <option value=8>STAT_n_D</option>
+    <option value=9>STAT_n_A</option>
+    <option value=10>ABS_f_D</option>
+    <option value=11>'CT_f_conn_D</option>
+    <option value=12>CT_f_conn_D_An</option>
+    <option value=13>CT_f_conn_A_Ca</option>
+    <option value=14>DISS_wf10_D</option>
+    <option value=15>DISS_f10_D</option>
+    <option value=16>DISS_f2_D</option>
+    <option value=17>STAT_e</option>
+    <option value=18>CT_e_conn</option>
+    <option value=19>CT_f_e_conn</option>
+    <option value=20>CT_e_D_An</option>
+    <option value=21>CT_e_A_Ca</option>
+    <option value=22>CT_n_D_adj_An</option>
+    <option value=23>CT_f_D_tort1</option>
+    <option value=24>CT_wtort_D</option>
+    <option value=25>CT_n_A_adj_Ca</option>
+    <option value=26>CT_f_A_tort1</option>
+    <option value=27>CT_wtort_A</option>
+    <option value=28>int_x</option>
+    <option value=29>int_d</option>
+    <option value=30>int_g</option>
+    <option value=31>int_r</option>
+    <option value=32>NORMALIZED_INTERFACE</option>
+    <option value=33>jsc</option>
+    <option value=34>jsc_d</option>
+    <option value=35>int_r_int_d</option>
+    <option value=36>int_d_int_g</option>
+    <option value=37>jsc_int_d</option>
+</select>
+</label>
+ <div>
+    <input type="submit" value="Submit">
+  </div>
+<button class="btn btn-success" onclick="clearGraph();clearlabels()">
+Clear
+</button>
+<button class="btn btn-success" onclick="updateData();updateLabels()">
+    updateData
+</button>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<canvas id="myChart"></canvas>
+<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
+<div id="chartContainer" style="height: 360px; width: 100%;"></div>
+
+  <script>
+      let x_from_frontend = document.getElementById('x-axis');
+      let y_from_frontend = document.getElementById('y-axis');
+      //let x = x_from_frontend.value;
+      //let y = y_from_frontend.value;
+      const submitButton = document.querySelector('input');
+      //const removeDataButton = document.getElementById('removeData');
+      //let x; //this variable copies the value from x_from_frontend
+      //let y; //this variable copies the value from y_from_frontend
+
+      let rawInput = {{ jsonData | tojson | safe }} //returnResponse JSON string from app.py
+      const schema = {{ colNames | safe }}
+      const inputData = rawInput["data"]; //data part of the returnResponse JSON string
+      let allPointsToBeDisplayed = []; //used to display
+      //TODO: use these event listeners to take the x and y values from the inputData dataset and plot the datasets on the scatter plot.
+      //TODO: The scatter plots must have different colors.
+      //TODO: Label the axes in the graph
+      let inputData_for_x_axis = []; //make a flowchart. When does each block of code depend on? When do you need each block of code to run. Don't use a value before its properly defined
+      let inputData_for_y_axis = [];
+      let x_axis_label;
+      let y_axis_label;
+      //button.addEventListener('click', updateButton);
+      //console.log(x);
+      //console.log(y);
+      submitButton.addEventListener('click', showGraph);
+      x_from_frontend.addEventListener('change', ()=> {
+          //let x = event.options[event.selectedIndex].value;
+          x_axis_label = schema[x_from_frontend.value];
+          console.log(x_axis_label);
+          for(let i = 0; i < inputData.length; i++){
+              //console.log(x);
+              inputData_for_x_axis.push(parseFloat(inputData[i][x_from_frontend.value])); //values are undefined I don't understand why they are undefined
+          }
+      });
+      y_from_frontend.addEventListener('change', () => {
+          //let y = event.options[event.selectedIndex].value;
+          y_axis_label = schema[y_from_frontend.value];
+          console.log(y_axis_label);
+          for (let i = 0; i < inputData.length; i++) {
+              //console.log(y);
+              inputData_for_y_axis.push(parseFloat(inputData[i][y_from_frontend.value])); //values are undefined here too
+          }
+      });
+      //const concatenatedArray = inputData_for_x_axis.concat(inputData_for_y_axis);
+
+     function showGraph(){
+           for(let i = 0; i < inputData.length; i++){
+           //let onePointToBeDisplayed = {x: parseFloat(inputData_for_x_axis[i]), y: parseFloat(inputData_for_y_axis[i])}; //hence undefined coordinates and it doesn't plot the graph
+           //console.log(onePointToBeDisplayed);
+               //console.log("inputData for x-axis at index " + i + " contains = " + inputData_for_x_axis[i]);
+               //console.log("schema index value for x-axis" + " = " + x_from_frontend.value);
+               //console.log("inputData for y-axis at index " + i + " contains = " + inputData_for_y_axis[i]);
+                //console.log("schema index value for y-axis" + " = " + y_from_frontend.value);
+                //console.log("coordinates to be displayed" + " = " + "(" + parseFloat(inputData_for_x_axis[i]) + " , " + parseFloat(inputData_for_y_axis[i]) + ")");
+           allPointsToBeDisplayed.push({x: inputData_for_x_axis[i], y: inputData_for_y_axis[i]}); //array is undefined.
+               //console.log(inputData_for_y_axis);
+               //console.log(x);
+               //console.log(y);
+
+       }
+           updateLabels();
+     }
+     var ctx = document.getElementById("myChart").getContext('2d');
+     var chart = new Chart(ctx, {
+         type: 'scatter',
+         data: {
+             labels: 'data',
+             datasets: [{
+                 label: 'Data',
+                 backgroundColor: 'rgb(255, 99, 132)',
+                 borderColor: 'rgb(255, 99, 132)',
+                 data: allPointsToBeDisplayed
+             }]
+         },
+         options: {
+        scales: {
+            x: {
+                title: {
+                display: true,
+                text: x_axis_label
+            }
+            },
+            y: {
+                title: {
+                display: true,
+                text: y_axis_label
+            }
+            }
+        }
+         }
+     });
+     function updateLabels(){
+         chart.options.scales.x.title.text = schema[x_from_frontend.value];
+         chart.options.scales.y.title.text = schema[y_from_frontend.value];
+         chart.update();
+     }
+     function updateData(){
+         const newX = document.getElementById('x-axis')
+         const newY = document.getElementById('y-axis')
+         let data_for_x = []
+         let data_for_y = []
+         for(let i = 0; i < inputData.length; i++){
+               console.log("new x values" + inputData[i][newX.value])
+             data_for_x.push(parseFloat(inputData[i][newX.value]));
+               console.log("new y values" + inputData[i][newY.value])
+             data_for_y.push(parseFloat(inputData[i][newY.value]));
+         }
+         for(let j = 0; j < inputData.length; j++){
+             console.log("updated values" + chart.data.datasets[0].data.push({x: data_for_x[j], y: data_for_y[j]}))
+         }
+         chart.update();
+     }
+     function clearGraph(){
+         for(let i = 0; i < inputData.length; i++){
+             chart.data.datasets[0].data.pop();
+         }
+         //chart.clear();
+         chart.update();
+     }
+     function clearlabels(){
+         chart.options.scales.x.title.text = "";
+         chart.options.scales.y.title.text = "";
+         chart.update();
+     }
+     /*
+     function updateScales() {
+    var xScale = chart.scales.x;
+    var yScale = chart.scales.y;
+    chart.options.scales = {
+        newId: {
+            display: true
+        },
+        y: {
+            display: true
+        }
+    };
+    chart.update();
+    // need to update the reference
+    xScale = chart.scales.newId;
+    yScale = chart.scales.y;
+}*/
+   //  function removeCurrentGraph(){
+    //     chart.data.datasets[0].data.pop()
+    //     chart.update();
+    // }
+
+
+      //Take the code that depends that on x or y and put it in the event handler and put its own function for both event handlers.
+
+
+
+
+      //TODO: Create one dataset for x and one dataset for y so that you can differentiate between them by using different colors
+     /* const data = {
+          datasets: [{ //there needs to be two datasets so that you can change color between two datasets
+                       //right now there is only one. One dataset for x-axis and one dataset for y-axis
+              label: 'Dataset',
+              pointBackgroundColor: 'red',
+                borderColor: 'red',
+                backgroundColor : 'rgba(255,0,0,0.5)',
+              data: concatenatedArray,
+         }],
+      };
+
+     const schema = ['case_name', 'source', 'ABS_wf_D', 'STAT_CC_D', 'STAT_CC_A',
+                          'STAT_CC_D_An', 'STAT_CC_A_Ca', 'STAT_n', 'STAT_n_D', 'STAT_n_A', 'ABS_f_D', 'CT_f_conn_D',
+                          'CT_f_conn_D_An', 'CT_f_conn_A_Ca', 'DISS_wf10_D', 'DISS_f10_D', 'DISS_f2_D', 'DISS_prob_reach_I',
+                          'STAT_e', 'CT_e_conn', 'CT_f_e_conn', 'CT_e_D_An', 'CT_e_A_Ca', 'CT_n_D_adj_An', 'CT_f_D_tort1',
+                          'CT_wtort_D', 'CT_n_A_adj_Ca', 'CT_f_A_tort1', 'CT_wtort_A', 'int_x', 'int_d', 'int_g', 'int_r',
+                          'NORMALIZED_INTERFACE', 'jsc', 'jsc_d', 'int_r_int_d', 'int_d_int_g', 'jsc_int_d']
+
+                TODO: 0-38
+
+      const config = {
+          type: 'scatter',
+          data: data,
+          options: {
+            scales: {
+                xAxes: [{
+                type: 'linear',
+                position: 'bottom',
+                    scaleLabel: {
+                      display: true,
+                      labelString: 'X axis label'
+                    }
+
+                }],
+                yAxes: [{
+                    type: 'linear',
+                position: 'bottom',
+                    scaleLabel: {
+                      display: true,
+                      labelString: 'Y axis label'
+                    }
+                }]
+            }
+        }
+      };
+      var myChart = new Chart(
+       document.getElementById('myChart'),
+    config
+  ); */
+</script>
+
+<!--<script>
+    var JSONData = document.getElementById("data-viz");
+</script> -->
+
+   <!--Create a div where the graph will take place-->
+<!--<script src="https://d3js.org/d3.v7.js"></script> -->
+  <!--<div id="data-viz">
+    {{ jsonData | tojson | safe }}
+</div> -->
+  <!--<script>
+//import {chart as chart1} with {values as data} from "@d3/histogram"
+      // set the dimensions and margins of the graph
+
+//var jsonElement = document.getElementById("data-viz");
+//var jsonHTML = jsonElement.outerHTML;
+//var jsonData = {jsonHTML : jsonHTML};
+//var json = JSON.stringify(jsonData);
+
+var cols = {{ colNames | safe }}
+var jsonData = {{ jsonData | tojson | safe }};
+var json = JSON.parse(jsonData);
+
+  var margin = {top: 10, right: 30, bottom: 30, left: 60},
+    width = 460 - margin.left - margin.right,
+    height = 400 - margin.top - margin.bottom;
+
+
+  // append the svg object to the body of the page
+var svg = d3.select("my_dataviz")
+  .append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform",
+          "translate(" + margin.left + "," + margin.top + ")");
+
+  //Read the data
+       d3.json(json, function(data) {
+           // Add X axis
+  var x = d3.scaleLinear()
+    .domain([0, 4000])
+    .range([ 0, width ]);
+  svg.append("g")
+    .attr("transform", "translate(0," + height + ")")
+    .call(d3.axisBottom(x));
+
+  // Add Y axis
+  var y = d3.scaleLinear()
+    .domain([0, 5000])
+    .range([ height, 0]);
+  svg.append("g")
+    .call(d3.axisLeft(y));
+
+  // Add dots
+  svg.append('g')
+    .selectAll("dot")
+    .data(data)
+    .enter()
+    .append("circle")
+      .attr("cx", function (d) { return x(d.GrLivArea); } )
+      .attr("cy", function (d) { return y(d.SalePrice); } )
+      .attr("r", 1.5)
+      .style("fill", "#69b3a2")
+      });
+
+  </script> -->
+</body>
+</html>
\ No newline at end of file