Added a viz.html that will contain the code of the interface. Started…

… javascript coding, updated style.css

src/server.py

@@ -61,12 +61,12 @@ def upload():
     '''
 
 
-def one_way_anova():
+def one_way_anova(data):
     t, p =  f_oneway(*data.values())
     return p
 
 
-def t_test():
+def t_test(data):
     for list1, list2 in combinations(data.keys(), 2):
         t, p = ttest_ind(data[list1], data[list2])
         print(list1, list2, p)

src/static/IRViz.js

@@ -0,0 +1,61 @@
+<script>
+var graphDiv = document.getElementById('tester'),
+data = [{x: [], y:[]}],
+layout = {};
+
+Plotly.newPlot(graphDiv, data, layout);
+
+$.get("/data", function(data){
+console.log(data)
+myfunction(data);
+})
+
+function myfunction(data){
+var xaxis = []
+var yaxis = []
+response_json = JSON.parse(data);
+for (i=0; i < response_json.length; i++){
+        xaxis.push(response_json[i].country)
+        yaxis.push(response_json[i].total_usd)
+}
+
+
+graphDiv.data = [
+{
+        x: xaxis,
+        y: yaxis,
+        type: 'bar'
+}
+];
+
+graphDiv.layout = {
+title: 'Total trade (in USD) of edible commodities for top countries',
+yaxis: {title : {text: 'Trade in USD'}, range: [0,160000000000]}
+};
+
+Plotly.react(graphDiv, graphDiv.data, graphDiv.layout);
+}
+
+$(document).ready(function() {
+
+$("select").on('change', function(event){
+var yearvalue = document.getElementById("year-value").value;
+var dataToBeSent = document.getElementById("mySelect").value;
+$.ajax({
+type: "POST",
+url: "send_data",
+contentType: "application/json",
+data: JSON.stringify([dataToBeSent, yearvalue, $top.data("from"), $top.data("to")]),
+dataType: "json",
+success: function (response) {
+console.log(Date.now());
+
+myfunction(response);
+},
+error: function (error) {
+console.log(error);
+}
+});
+});
+});
+</script>

src/static/style.css

@@ -1,22 +1,60 @@
 html { font-family: sans-serif; background: #eee; padding: 1rem; }
-body { max-width: 960px; margin: 0 auto; background: white; }
-h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
-a { color: #377ba8; }
-hr { border: none; border-top: 1px solid lightgray; }
-nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
-nav h1 { flex: auto; margin: 0; }
-nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
-nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
-nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
-.content { padding: 0 1rem 1rem; }
-.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
-.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
-.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
-.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
-.post > header > div:first-of-type { flex: auto; }
-.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
-.post .about { color: slategray; font-style: italic; }
-.post .body { white-space: pre-line; }
+body {
+  margin: 0 auto 0 auto;
+  padding: 0;
+  background-color: white;
+  width: 840px;
+  font-family: "Avenir", "Avenir Next", Helvetica Neue, Arial;
+  font-size: 0.95em;
+}
+
+a, a:visited { text-decoration: none; color: #ff0000; }
+a:hover { text-decoration: underline; color: #f4b014; }
+img, a.img, a:hover.img { border: none; }
+
+img {
+  max-width: 800px;
+}
+
+h1, h2, h3, h4, h5 {
+  color: #990000;
+  background-color: inherit;
+  font-weight: normal;
+  padding: 0 0 5px 0;
+  margin: 15px 0 0 0;
+  border: none;
+  clear: right;
+}
+h1 { font-size: 18pt; margin:  5px 0 10px 0; line-height: 28px; }
+h2 { font-size: 14pt; margin: 30px 0 15px 0; letter-spacing: 0.01em; border-bottom: 1px solid #ccc;  line-height: 20px;}
+h3 { font-size: 13pt; }
+h4 { font-size: 12pt; }
+h5 { font-size: 11pt; }
+p { margin: 0 0 10px 0; }
+hr { border: 0px; border-top: 1px solid #ccc; height: 0px; }
+ol { margin: 1em; }
+
+.content {
+  margin: 0;
+  padding: 15px 20px;
+  background-color: #ffffff;
+}
+
+.article {
+  line-height: 1.5em;
+}
+
+.entry  {
+  border-top: 1px solid #ddd;
+  padding-top: 2px;
+  margin-top: 3em;
+}
+
+div.ex1 {
+  margin-left: 100px;
+  margin-top: 25px;
+}
+
 .content:last-child { margin-bottom: 0; }
 .content form { margin: 1em 0; display: flex; flex-direction: column; }
 .content label { font-weight: bold; margin-bottom: 0.5em; }

src/templates/viz.html

@@ -0,0 +1,26 @@
+<html xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<head>
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<!-- <script type="text/javascript" src="main.js"></script> -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>
+<script type="text/javascript" src="{{ url_for('static', filename='IRViz.js') }}"></script>
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+
+<div class = "ex1">
+<select id="mySelect">
+  <option>MAP</option>
+  <option>nDCG</option>
+</select>
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+<input type="text" id="range-value" value="2002" class="autoupdate"/>
+<input type="submit" value="Submit">
+</div>
+
+<div id="tester"></div>
+
+<div id="topslider"></div>
+
+</html>