2 files changed, 34 insertions, 1 deletions
diff --git a/src/Navbar.svelte b/src/Navbar.svelte
index 5b70e53..cee69d0 100644
--- a/src/Navbar.svelte
+++ b/src/Navbar.svelte
@@ -4,9 +4,9 @@
   import Home from './Home.svelte';
   import DDA from './algorithms/line-drawing/DDA.svelte';
   import Bresenham from './algorithms/line-drawing/Bresenham.svelte';
+  import Scaling from './algorithms/2d-transformations/Scaling.svelte';
 
   const dispatch = createEventDispatcher();
-
   const changePage = (p) => dispatch('message', { page: p });
 </script>
 
@@ -24,6 +24,18 @@
       </button>
     </div>
   </div>
+
+  <div class="ddgroup">
+    2 Dimensional Transformations
+    <div class="ddsub">
+      <button on:click={() => changePage(Scaling)}>
+        Scaling
+      </button>
+      <button on:click={() => changePage(Bresenham)}>
+        Bresenham
+      </button>
+    </div>
+  </div>
 </nav>
 
 <style>
@@ -74,5 +86,8 @@
       position: static;
       margin-top: 10px;
     }
+    .ddmenu button, .ddmenu .ddgroup {
+      padding: 12px;
+    }
   }
 </style>
diff --git a/src/algorithms/2d-transformations/Scaling.svelte b/src/algorithms/2d-transformations/Scaling.svelte
new file mode 100644
index 0000000..ce312de
--- /dev/null
+++ b/src/algorithms/2d-transformations/Scaling.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { onMount } from "svelte";
+  import Plotly from "plotly.js-basic-dist-min";
+
+  onMount(() => {
+    Plotly.newPlot('algoChart', [{
+      x: [1, 2],
+      y: [2, 3],
+      type: 'lines',
+      name: 'Scaling'
+    }]);
+  });
+</script>
+
+<h2>Scaling</h2>
+<div id="algoChart"></div>
+<style>
+</style>