added plots. created visualization page

AshokBatakala · Oct 8, 2023 · 0e011ff · 0e011ff
1 parent 7f95712
commit 0e011ff
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 44 deletions.
diff --git a/Projects/Datascience_project/index.html b/Projects/Datascience_project/index.html
@@ -1,50 +1,43 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>My Chart</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+	<title>My Data Science Project</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
-    <canvas id="myChart"></canvas>
-
-    <script>
-        var ctx = document.getElementById('myChart').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
-                        }
-                    }]
-                }
-            }
-        });
-    </script>
+    <h1>DS200  Data Science Project</h1>
+	<h2>Project 1</h2>
+	<div>
+
+        <img src="plots/project1/active_vs_inactive_job_cards.png" alt="Image 1">
+        <img src="plots/project1/jobcards_vs_workers_per_jobcard.png" alt="Image 2">
+        <img src="plots/project1/boxplot_agri.png" alt="Image 3">
+        <img src="plots/project1/normal_vs_differently_abled.png" alt="Image 4">
+        <img src="plots/project1/jobcards_vs_workers.png" alt="Image 5">
+
+
+
+    	</div>
+
+	<h2>Project 2</h2>
+	<div>
+
+
+        <img src="plots/project2/bar_state_accidents.png" alt="Image 1">
+        <img src="plots/project2/bar_tractor.png" alt="Image 2">
+        <img src="plots/project2/boxplot_tractor_percentage.png" alt="Image 3">
+        <img src="plots/project2/boxplot_vehicle_type.png" alt="Image 4">
+        <img src="plots/project2/scatter_cars_tractors.png" alt="Image 5">
+        <img src="plots/project2/scatter_total_two_wheeler.png" alt="Image 6">
+        <img src="plots/project2/scatter_tractor_two_wheeler.png" alt="Image 7">
+        <img src="plots/project2/segmented_barplot_vehicle_types.png" alt="Image 8">
+
+
+
+
+
+
+
+    </div>
 </body>
 </html>
diff --git a/Projects/Datascience_project/plots/project1/active_vs_inactive_job_cards.png b/Projects/Datascience_project/plots/project1/active_vs_inactive_job_cards.png
diff --git a/Projects/Datascience_project/plots/project1/boxplot_agri.png b/Projects/Datascience_project/plots/project1/boxplot_agri.png
diff --git a/Projects/Datascience_project/plots/project1/jobcards_vs_workers.png b/Projects/Datascience_project/plots/project1/jobcards_vs_workers.png
diff --git a/Projects/Datascience_project/plots/project1/jobcards_vs_workers_per_jobcard.png b/Projects/Datascience_project/plots/project1/jobcards_vs_workers_per_jobcard.png
diff --git a/Projects/Datascience_project/plots/project1/normal_vs_differently_abled.png b/Projects/Datascience_project/plots/project1/normal_vs_differently_abled.png
diff --git a/Projects/Datascience_project/plots/project2/bar_state_accidents.png b/Projects/Datascience_project/plots/project2/bar_state_accidents.png
diff --git a/Projects/Datascience_project/plots/project2/bar_tractor.png b/Projects/Datascience_project/plots/project2/bar_tractor.png
diff --git a/Projects/Datascience_project/plots/project2/boxplot_tractor_percentage.png b/Projects/Datascience_project/plots/project2/boxplot_tractor_percentage.png
diff --git a/Projects/Datascience_project/plots/project2/boxplot_vehicle_type.png b/Projects/Datascience_project/plots/project2/boxplot_vehicle_type.png
diff --git a/Projects/Datascience_project/plots/project2/scatter_cars_tractors.png b/Projects/Datascience_project/plots/project2/scatter_cars_tractors.png
diff --git a/Projects/Datascience_project/plots/project2/scatter_total_two_wheeler.png b/Projects/Datascience_project/plots/project2/scatter_total_two_wheeler.png
diff --git a/Projects/Datascience_project/plots/project2/scatter_tractor_two_wheeler.png b/Projects/Datascience_project/plots/project2/scatter_tractor_two_wheeler.png
diff --git a/Projects/Datascience_project/plots/project2/segmented_barplot_vehicle_types.png b/Projects/Datascience_project/plots/project2/segmented_barplot_vehicle_types.png
diff --git a/Projects/Datascience_project/style.css b/Projects/Datascience_project/style.css
@@ -0,0 +1,29 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+  }
+
+  h1 {
+    color: #333;
+    text-align: center;
+  }
+  h2 {
+    color: #53a0aa;
+    text-align: center;
+  }
+
+  div {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  img {
+    margin: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    /* #fix the width with same proportions */
+    width: 600px;
+
+  }
+
diff --git a/index.html b/index.html