diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..82ce85d
Binary files /dev/null and b/.DS_Store differ
diff --git a/docs/adults.html b/docs/adults.html
new file mode 100644
index 0000000..d5534a7
--- /dev/null
+++ b/docs/adults.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+
+
+
+
+ Chart Type
+
+ Line
+ Bar
+ Scatter
+
+
+
+ X-Axis
+
+
+
+ Y-Axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/adults.js b/docs/adults.js
new file mode 100644
index 0000000..98c5dbf
--- /dev/null
+++ 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'
+ }]
+ }
+ }
+});
+}
\ No newline at end of file
diff --git a/docs/autoMpg.html b/docs/autoMpg.html
new file mode 100644
index 0000000..b4e7bfe
--- /dev/null
+++ b/docs/autoMpg.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+
+
+
+
+ Chart Type
+
+ Line
+ Bar
+ Scatter
+
+
+
+ X-Axis
+
+
+
+
+ Y-Axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/autoMpg.js b/docs/autoMpg.js
new file mode 100644
index 0000000..5b7059f
--- /dev/null
+++ b/docs/autoMpg.js
@@ -0,0 +1,121 @@
+
+const chartType = document.getElementById('chartType');
+const xAxisSelect = document.getElementById('xAxisSelect');
+const yAxisSelect = document.getElementById('yAxisSelect');
+
+var dataset;
+$.get('./data/auto-mpg.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: "Auto MPG 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'
+ }]
+ }
+ }
+});
+}
\ No newline at end of file
diff --git a/docs/autos.html b/docs/autos.html
new file mode 100644
index 0000000..3418f8e
--- /dev/null
+++ b/docs/autos.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+
+
+
+
+ Chart Type
+
+ Line
+ Bar
+ Scatter
+
+
+
+ X-Axis
+
+
+
+
+ Y-Axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/autos.js b/docs/autos.js
new file mode 100644
index 0000000..a0d4a78
--- /dev/null
+++ b/docs/autos.js
@@ -0,0 +1,121 @@
+
+const chartType = document.getElementById('chartType');
+const xAxisSelect = document.getElementById('xAxisSelect');
+const yAxisSelect = document.getElementById('yAxisSelect');
+
+var dataset;
+$.get('./data/autos.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: "Auto MPG 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'
+ }]
+ }
+ }
+});
+}
\ No newline at end of file
diff --git a/docs/cars.html b/docs/cars.html
new file mode 100644
index 0000000..a84623d
--- /dev/null
+++ b/docs/cars.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+
+
+
+
+ Chart Type
+
+ Line
+ Bar
+ Scatter
+
+
+
+ X-Axis
+
+
+
+
+ Y-Axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/cars.js b/docs/cars.js
new file mode 100644
index 0000000..a6dd29b
--- /dev/null
+++ b/docs/cars.js
@@ -0,0 +1,121 @@
+
+const chartType = document.getElementById('chartType');
+const xAxisSelect = document.getElementById('xAxisSelect');
+const yAxisSelect = document.getElementById('yAxisSelect');
+
+var dataset;
+$.get('./data/cars.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: "Cars 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'
+ }]
+ }
+ }
+});
+}
\ No newline at end of file
diff --git a/src/main/resources/DataFiles/adults.csv b/docs/data/adults.csv
similarity index 100%
rename from src/main/resources/DataFiles/adults.csv
rename to docs/data/adults.csv
diff --git a/src/main/resources/DataFiles/auto-mpg.csv b/docs/data/auto-mpg.csv
similarity index 100%
rename from src/main/resources/DataFiles/auto-mpg.csv
rename to docs/data/auto-mpg.csv
diff --git a/src/main/resources/DataFiles/autos.csv b/docs/data/autos.csv
similarity index 100%
rename from src/main/resources/DataFiles/autos.csv
rename to docs/data/autos.csv
diff --git a/src/main/resources/DataFiles/cars.csv b/docs/data/cars.csv
similarity index 100%
rename from src/main/resources/DataFiles/cars.csv
rename to docs/data/cars.csv
diff --git a/src/main/resources/DataFiles/forest-fires.csv b/docs/data/forest-fires.csv
similarity index 100%
rename from src/main/resources/DataFiles/forest-fires.csv
rename to docs/data/forest-fires.csv
diff --git a/src/main/resources/DataFiles/seoul-bike-data.csv b/docs/data/seoul-bike-data.csv
similarity index 100%
rename from src/main/resources/DataFiles/seoul-bike-data.csv
rename to docs/data/seoul-bike-data.csv
diff --git a/docs/forestFires.html b/docs/forestFires.html
new file mode 100644
index 0000000..8ea68db
--- /dev/null
+++ b/docs/forestFires.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+
+
+
+
+ Chart Type
+
+ Line
+ Bar
+ Scatter
+
+
+
+ X-Axis
+
+
+
+
+ Y-Axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/forestFires.js b/docs/forestFires.js
new file mode 100644
index 0000000..8bd46d3
--- /dev/null
+++ b/docs/forestFires.js
@@ -0,0 +1,121 @@
+
+const chartType = document.getElementById('chartType');
+const xAxisSelect = document.getElementById('xAxisSelect');
+const yAxisSelect = document.getElementById('yAxisSelect');
+
+var dataset;
+$.get('./data/forest-fires.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: "Forest Fires 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'
+ }]
+ }
+ }
+});
+}
\ No newline at end of file
diff --git a/docs/index.css b/docs/index.css
new file mode 100644
index 0000000..fd005db
--- /dev/null
+++ b/docs/index.css
@@ -0,0 +1,9 @@
+
+#likeButton, #subscribeButton{
+ transition: 800ms all;
+ border-radius: 600px;
+ height: 50px;
+ width: 100px;
+ background-color: white;
+
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..b0cccfb
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+ This is website provides flexible, dynamic, and easy to use data visualizations for all the datasets provided.
+ Much of the website is dynamically built so it can accept different kinds of datasets.
+ See the existing datasets in the top nav bar!
+
Sample Datasets
+
Adults Dataset
+
+
+
Auto MPG Dataset
+
+
+
Autos Dataset
+
+
+
Cars Dataset
+
+
+
Forest Fires Dataset
+
+
+
Seoul Bike Dataset
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/index.js b/docs/index.js
new file mode 100644
index 0000000..89c9621
--- /dev/null
+++ b/docs/index.js
@@ -0,0 +1,242 @@
+var adultsData;
+var autoMpgData;
+var autosData;
+var carsData;
+var forestFiresData;
+var seoulBikeData;
+
+$.get('./data/adults.csv', function(data) {
+ adultsData = $.csv.toObjects(data);
+ console.log(adultsData)
+});
+
+$.get('./data/auto-mpg.csv', function(data) {
+ autoMpgData = $.csv.toObjects(data);
+});
+
+$.get('./data/autos.csv', function(data) {
+ autosData = $.csv.toObjects(data);
+});
+
+$.get('./data/cars.csv', function(data) {
+ carsData = $.csv.toObjects(data);
+});
+
+$.get('./data/forest-fires.csv', function(data) {
+ forestFiresData = $.csv.toObjects(data);
+});
+
+$.get('./data/seoul-bike-data.csv', function(data) {
+ seoulBikeData = $.csv.toObjects(data);
+});
+
+//Load adults chart
+var ctx = document.getElementById('adultsChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+ datasets: [{
+ label: '# of Votes',
+ data: [12, 19, 3, 5, 2, 3],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)',
+ 'rgba(153, 102, 255, 0.2)',
+ 'rgba(255, 159, 64, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ }
+ }]
+ }
+ }
+});
+
+
+//Load auto mpg chart
+var ctx = document.getElementById('autoMpgChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'scatter',
+ data: {
+ datasets: [{
+ data: [autoMpgData]
+ }]
+ },
+ options: {
+ parsing: {
+ xAxisKey: 'displacement',
+ yAxisKey: 'horsepower'
+ },
+ scales: {
+ yAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'HorsePower'
+ },
+ ticks: {
+ beginAtZero: true
+ }
+ }],
+ xAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'Displacement'
+ }
+ }]
+ }
+ }
+});
+
+
+//Load autos chart
+var ctx = document.getElementById('autosChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'bar',
+data: {
+ datasets: [{
+ data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
+ }]
+},
+options: {
+ parsing: {
+ xAxisKey: 'id',
+ yAxisKey: 'nested.value'
+ }
+}
+});
+
+
+//Load cars chart
+var ctx = document.getElementById('carsChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+ datasets: [{
+ label: '# of Votes',
+ data: [12, 19, 3, 5, 2, 3],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)',
+ 'rgba(153, 102, 255, 0.2)',
+ 'rgba(255, 159, 64, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ }
+ }]
+ }
+ }
+});
+
+
+//Load forest fires chart
+var ctx = document.getElementById('forestFiresChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+ datasets: [{
+ label: '# of Votes',
+ data: [12, 19, 3, 5, 2, 3],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)',
+ 'rgba(153, 102, 255, 0.2)',
+ 'rgba(255, 159, 64, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ }
+ }]
+ }
+ }
+});
+
+//Load seoul bike data
+var ctx = document.getElementById('seoulBikeChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+ datasets: [{
+ label: '# of Votes',
+ data: [12, 19, 3, 5, 2, 3],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)',
+ 'rgba(153, 102, 255, 0.2)',
+ 'rgba(255, 159, 64, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ }
+ }]
+ }
+ }
+});
diff --git a/docs/seoulBikes.html b/docs/seoulBikes.html
new file mode 100644
index 0000000..d3fc0bd
--- /dev/null
+++ b/docs/seoulBikes.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
2020 StateFarm Coding Competition
+
Alex Kim and Ethan Xie
+
+
+
+
+
+
+ Chart Type
+
+ Line
+ Bar
+ Scatter
+
+
+
+ X-Axis
+
+
+
+
+ Y-Axis
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/seoulBikes.js b/docs/seoulBikes.js
new file mode 100644
index 0000000..4eed08f
--- /dev/null
+++ b/docs/seoulBikes.js
@@ -0,0 +1,121 @@
+
+const chartType = document.getElementById('chartType');
+const xAxisSelect = document.getElementById('xAxisSelect');
+const yAxisSelect = document.getElementById('yAxisSelect');
+
+var dataset;
+$.get('./data/seoul-bike-data.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: "Seoul Bikes 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'
+ }]
+ }
+ }
+});
+}
\ No newline at end of file
diff --git a/docs/topnav.css b/docs/topnav.css
new file mode 100644
index 0000000..2175864
--- /dev/null
+++ b/docs/topnav.css
@@ -0,0 +1,120 @@
+*{
+ box-sizing: border-box;
+}
+body {
+ display: flex;
+ background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/With_Antarctica%27s_Mount_Erebus_in_the_Background%2C_An_Ad%C3%A9lie_Waddles_Towards_Secretary_Kerry_and_his_Traveling_Party_in_Antarctica_%2830913579475%29.jpg/1599px-With_Antarctica%27s_Mount_Erebus_in_the_Background%2C_An_Ad%C3%A9lie_Waddles_Towards_Secretary_Kerry_and_his_Traveling_Party_in_Antarctica_%2830913579475%29.jpg");
+
+ /* Full height */
+ min-height: 100vh;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ /* Center and scale the image nicely */
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+
+}
+
+h1{
+ font-size: 3.5em;
+}
+
+hr {
+ display: block;
+ margin-before: 0.5em;
+ margin-after: 0.5em;
+ margin-start: auto;
+ margin-end: auto;
+ overflow: hidden;
+ border-style: inset;
+ border-width: 1px;
+}
+
+/* Add a black background color to the top navigation */
+.topnav{
+ position: fixed;
+ top: 0;
+ width: 100%;
+ left:0;
+ overflow: hidden;
+ background-color: #333;
+ display:flex;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+ float: left;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+ background-color: #4CAF50;
+ color: white;
+}
+
+
+.main{
+ display:flex;
+ flex-flow: column nowrap;
+ align-items: center;
+ background-color: rgba(255,255,255,.4);
+ margin: 50px;
+ border-radius: 30px;
+ padding: 20px 70px;
+ background-clip: border-box;
+}
+
+.rowFlexbox{
+ display: flex;
+ flex-direction: row;
+ align-items: space-around;
+}
+
+#logoBox{
+ padding: 0;
+ height: 48px;
+}
+#logo{
+ -webkit-filter: invert(1);
+ filter: invert(1);
+ width: 67.9px;
+ height: 48px;
+}
+
+canvas{
+ background-color: rgba(255,255,255,.5);
+ width: 80%;
+ height: 80%;
+}
+#options {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ padding: 20px;
+ justify-content: space-around;
+}
+
+label {
+ font-size: 1.5em;
+ font-weight: bold;
+}
+
+.colFlexBox {
+ display:flex;
+ flex-direction: column;
+
+}
\ No newline at end of file
diff --git a/feedback.txt b/feedback.txt
index b931d50..12581ee 100644
--- a/feedback.txt
+++ b/feedback.txt
@@ -1,9 +1,9 @@
-Your team (name of each individual participating):
+Your team (name of each individual participating): Alex Kim and Ethan Xie
How many JUnits were you able to get to pass?
-
+N/A
Document and describe any enhancements included to help the judges properly grade your submission.
- Step 1:
- Step 2:
+ Step 1: Created a website to allow for visualizations of the data set. Allows for any dataset to be submitted and creates visualizations dynamically (you can choose the type of visualization and the features to be displayed on the x and y axis).
+ Step 2: Trained neural networks to make predictions based off the given dataset with over 80% accuracy on the Adults dataset.
Feedback for the coding competition? Things you would like to see in future events?
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000..0bcebc2
Binary files /dev/null and b/src/.DS_Store differ
diff --git a/src/main/.DS_Store b/src/main/.DS_Store
new file mode 100644
index 0000000..bb12063
Binary files /dev/null and b/src/main/.DS_Store differ
diff --git a/src/main/java/sf/codingcompetition2020/finals/CodingCompCsvUtil.java b/src/main/java/sf/codingcompetition2020/finals/CodingCompCsvUtil.java
deleted file mode 100644
index 98d8ccf..0000000
--- a/src/main/java/sf/codingcompetition2020/finals/CodingCompCsvUtil.java
+++ /dev/null
@@ -1,37 +0,0 @@
-package sf.codingcompetition2020.finals;
-
-import java.io.FileReader;
-import java.io.Reader;
-import java.util.ArrayList;
-import java.util.List;
-
-import com.fasterxml.jackson.databind.DeserializationFeature;
-import com.fasterxml.jackson.databind.MappingIterator;
-import com.fasterxml.jackson.databind.ObjectReader;
-import com.fasterxml.jackson.dataformat.csv.CsvMapper;
-import com.fasterxml.jackson.dataformat.csv.CsvSchema;
-
-public class CodingCompCsvUtil {
-
- //read a CSV File and return a List of that File
- public