StateFarmInsCodingCompetition · ethankeystone · Nov 9, 2020 · Nov 9, 2020 · Nov 9, 2020 · Nov 9, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/docs/adults.html b/docs/adults.html
@@ -0,0 +1,79 @@
+
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title> State Farm Coding Competition </title>
+  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.js"></script>
+
+
+
+
+</head>
+
+<body>
+  <link rel="stylesheet" href="topnav.css"/>
+  <div id="topnav" class = "topnav" w3-include-html="topnav.html" >
+    <a id="logoBox" href= "index.html#home">
+        <img
+        id ="logo"
+        src= "https://cdn6.f-cdn.com/contestentries/363431/6597075/56d7ded7655e2_thumb900.jpg"
+        alt = "Logo"
+
+        />
+    </a>
+    <a id="index.html" href="index.html#home">Home</a>
+    <a id="adults.html" href="adults.html">Adults</a>
+    <a id="autoMpg.html" href="autoMpg.html">Auto-MPG</a>
+    <a id="autos.html" href="autos.html">Autos</a>
+    <a id="cars.html" href="cars.html">Cars</a>
+    <a id="forestFires.html" href="forestFires.html">Forest Fires</a>
+    <a id="seoulBikes.html" href="seoulBikes.html">Seoul Bikes</a>
+  </div id="topnav">
+
+
+  <div id="home" class="main">
+    <h1 id="mainTitle"> 2020 StateFarm Coding Competition</h1>
+    <h2> Alex Kim and Ethan Xie </h2>
+    <div class="divider"></div>
+
+    <canvas id="chart" width="400" height="400"></canvas>
+
+    <div id="options">
+      <div class="colFlexBox">
+        <label for="chartType">Chart Type</label>
+        <select id="chartType" onchange="updateChart()">
+          <option value="line">Line</option>
+          <option value="bar">Bar</option>
+          <option value="scatter" selected>Scatter</option>
+        </select>
+      </div>  
+      <div class="colFlexBox">
+        <label for="xAxisSelect">X-Axis</label>
+        <select id="xAxisSelect" onchange="updateChart()"></select>
+      </div>
+      <div class="colFlexBox">
+        <label for="yAxisSelect">Y-Axis</label>
+        <select id="yAxisSelect" onchange="updateChart()"></select>
+      </div>
+    </div>
+
+
+
+
+
+
+
+</div id ="main">
+
+
+<script src="adults.js"> </script>
+<!-- link at the bottom to reduce load time -->
+<!--<script>
+includeHTML();
+</script>
+-->
+</body>
+</html>
diff --git a/docs/adults.js b/docs/adults.js
@@ -0,0 +1,121 @@
+
+const chartType = document.getElementById('chartType');
+const xAxisSelect = document.getElementById('xAxisSelect');
+const yAxisSelect = document.getElementById('yAxisSelect');
+
+var dataset;
+$.get('./data/adults.csv', function(data) {
+  dataset = $.csv.toObjects(data);
+  // add keys to both x and y axis select
+  var keys = Object.keys(dataset[0])
+  keys.forEach(element => {
+    var option = document.createElement("option");
+    option.value = element;
+    option.text = element;
+    xAxisSelect.add(option);
+
+    option = document.createElement("option");
+    option.value = element;
+    option.text = element;
+    yAxisSelect.add(option);
+  });
+  // set the default
+  xAxisSelect.value = keys[0];
+  yAxisSelect.value = keys[1];
+  updateChart();
+
+});
+
+
+// for dumym
+var myChart;
+//Load auto mpg chart
+function updateChart() {
+  var filteredDataset = [];
+  dataset.forEach(obj => {
+    var newObj = {x: obj[xAxisSelect.value], y: obj[yAxisSelect.value]};
+    filteredDataset.push(newObj);
+  });
+  console.log(filteredDataset);
+  if (!(myChart === undefined)) {
+    myChart.destroy();
+  }
+  var ctx = document.getElementById('chart').getContext('2d');
+  myChart = new Chart(ctx, {
+      type: chartType.value,
+      data: {
+          datasets: [{
+              label: "Data",
+              data: filteredDataset,
+              backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          }]
+      },
+      options: {
+        // parsing: {
+        //   xAxisKey: "mpg",
+        //   yAxisKey: "cylinders"
+        // },
+        title: {
+          display: true,
+          text: "Adults Dataset"
+        },
+
+        scales: {
+          yAxes: [{
+            scaleLabel: {
+              display: true,
+              labelString: yAxisSelect.value
+            },
+          }],
+          xAxes: [{
+            scaleLabel: {
+              display: true,
+              labelString: xAxisSelect.value
+            }
+          }]
+        }
+      }
+  });
+}
+
+
+
+
+function testChart() {
+  dataset = [{mpg:"10", cylinders:"5"}, {mpg:"12", cylinders:"6"}];
+  xAxisSelect.value = "mpg";
+  yAxisSelect.value = "cylinders";
+
+  var ctx = document.getElementById('chart').getContext('2d');
+  myChart = new Chart(ctx, {
+    type: 'scatter',
+    data: {
+        datasets: [{
+            label: 'Scatter Dataset',
+            data: [{
+                a: "-10",
+                y: "0"
+            }, {
+                a: "0",
+                y: "10"
+            }, {
+                a: "10",
+                y: "5"
+            }],
+            backgroundColor: 'rgba(255, 99, 132, 0.5)',
+
+        }]
+    },
+    options: {
+      parsing: {
+        xAxisKey: "a"
+      },
+        scales: {
+            xAxes: [{
+                type: 'linear',
+                position: 'bottom'
+            }]
+        }
+    }
+});
+}
diff --git a/docs/autoMpg.html b/docs/autoMpg.html
@@ -0,0 +1,80 @@
+
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title> State Farm Coding Competition </title>
+  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.js"></script>
+
+
+
+
+</head>
+
+<body>
+  <link rel="stylesheet" href="topnav.css"/>
+  <div id="topnav" class = "topnav" w3-include-html="topnav.html" >
+    <a id="logoBox" href= "index.html#home">
+        <img
+        id ="logo"
+        src= "https://cdn6.f-cdn.com/contestentries/363431/6597075/56d7ded7655e2_thumb900.jpg"
+        alt = "Logo"
+
+        />
+    </a>
+    <a id="index.html" href="index.html#home">Home</a>
+    <a id="adults.html" href="adults.html">Adults</a>
+    <a id="autoMpg.html" href="autoMpg.html">Auto-MPG</a>
+    <a id="autos.html" href="autos.html">Autos</a>
+    <a id="cars.html" href="cars.html">Cars</a>
+    <a id="forestFires.html" href="forestFires.html">Forest Fires</a>
+    <a id="seoulBikes.html" href="seoulBikes.html">Seoul Bikes</a>
+  </div id="topnav">
+
+
+  <div id="home" class="main">
+    <h1 id="mainTitle"> 2020 StateFarm Coding Competition</h1>
+    <h2> Alex Kim and Ethan Xie </h2>
+    <div class="divider"></div>
+
+    <canvas id="chart" width="400" height="400"></canvas>
+
+    <div id="options">
+      <div class="colFlexBox">
+        <label for="chartType">Chart Type</label>
+        <select id="chartType" onchange="updateChart()">
+          <option value="line">Line</option>
+          <option value="bar">Bar</option>
+          <option value="scatter" selected>Scatter</option>
+        </select>
+      </div>  
+      <div class="colFlexBox">
+        <label for="xAxisSelect">X-Axis</label>
+        <select id="xAxisSelect" onchange="updateChart()">
+        </select>
+      </div>
+      <div class="colFlexBox">
+        <label for="yAxisSelect">Y-Axis</label>
+        <select id="yAxisSelect" onchange="updateChart()">
+      </div>
+    </div>
+
+
+
+
+
+
+
+</div id ="main">
+
+
+<script src="autoMpg.js"> </script>
+<!-- link at the bottom to reduce load time -->
+<!--<script>
+includeHTML();
+</script>
+-->
+</body>
+</html>