Walkeryr · January 27, 2018 11:00 · Jan 27, 2018 · Jan 27, 2018 · Jan 27, 2018 · Jan 27, 2018
diff --git a/index.html b/index.html
@@ -18,14 +18,6 @@
             height: 400px;
         }
 
-        .viz:after {
-            position: absolute;
-            content: '';
-            left: 2px;
-            right: 2px;
-            bottom: 3px;
-        }
-
         .bar {
             stroke: #fff;
             stroke-width: 1;

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -1 +1 @@
-Visualization of binary search algorithm. 
+Binary search visualization. 
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Binary search algorithm visualziation</title>
+    <title>Binary search visualization</title>
 
     <style>
         .viz {
@@ -27,16 +27,22 @@
         }
 
         .bar {
-            fill: rgb(218, 218, 218);
-            rx: 2;
-            ry: 2;
-            stroke: #292929;
+            stroke: #fff;
             stroke-width: 1;
+            rx: 1;
+            ry: 2;
         }
     </style>
 </head>
 
 <body>
+    <svg>
+        <linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
+            <stop offset="0%" stop-color="#42A5F5" />
+            <stop offset="100%" stop-color="rgba(64, 84, 178, 0.3)" />
+        </linearGradient>
+    </svg>
+
     <div class="viz"></div>
 
     <script src="https://d3js.org/d3.v4.min.js"></script>

diff --git a/visualization.js b/visualization.js
@@ -1,8 +1,8 @@
-const MARGINS = { left: 2, right: 2, top: 2, bottom: 2 };
+const MARGINS = { left: 20, right: 20, top: 20, bottom: 20 };
 const VIEW_WIDTH = 800;
 const VIEW_HEIGHT = 400;
 const MAX_NUMBER = 1000;
-const ITEMS_NUMBER = 80;
+const ITEMS_NUMBER = 95;
 
 // Generate an array of random values
 let list = Array.from(Array(ITEMS_NUMBER), (item, index) =>
@@ -22,6 +22,11 @@ const linearScale = d3
   .domain([0, MAX_NUMBER])
   .range([0, graphHeight]);
 
+const opacityScale = d3
+  .scaleLinear()
+  .domain([0, MAX_NUMBER])
+  .range([0.3, 1]);
+
 const svg = d3
   .select(".viz")
   .append("svg")
@@ -45,4 +50,7 @@ svg
   .attr("y", function(d, i) {
     return graphHeight - linearScale(d);
   })
+  .attr("fill", function(d, i) {
+    return `rgba(64, 84, 178, ${opacityScale(d)})`;
+  })
   .classed("bar", true);
diff --git a/index.html b/index.html
@@ -24,15 +24,14 @@
             left: 2px;
             right: 2px;
             bottom: 3px;
-            border-bottom: 2px solid #000;
         }
 
         .bar {
             fill: rgb(218, 218, 218);
             rx: 2;
             ry: 2;
             stroke: #292929;
-            stroke-width: 2;
+            stroke-width: 1;
         }
     </style>
 </head>

diff --git a/.block b/.block
@@ -0,0 +1,3 @@
+license: MIT
+height: 400
+border: no
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Visualization of binary search algorithm. 
diff --git a/algorithm.js b/algorithm.js
@@ -16,4 +16,4 @@ function binarySearch(list, item) {
   }
 
   return null;
-}
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,18 +17,32 @@
             width: 800px;
             height: 400px;
         }
+
+        .viz:after {
+            position: absolute;
+            content: '';
+            left: 2px;
+            right: 2px;
+            bottom: 3px;
+            border-bottom: 2px solid #000;
+        }
+
         .bar {
-            fill: #243eff;
+            fill: rgb(218, 218, 218);
             rx: 2;
             ry: 2;
+            stroke: #292929;
+            stroke-width: 2;
         }
     </style>
 </head>
+
 <body>
     <div class="viz"></div>
 
     <script src="https://d3js.org/d3.v4.min.js"></script>
     <script src="algorithm.js"></script>
     <script src="visualization.js"></script>
 </body>
+
 </html>
diff --git a/visualization.js b/visualization.js
@@ -1,35 +1,48 @@
-const MAX_NUMBER = 100;
-const ITEMS_NUMBER = 100;
+const MARGINS = { left: 2, right: 2, top: 2, bottom: 2 };
+const VIEW_WIDTH = 800;
+const VIEW_HEIGHT = 400;
+const MAX_NUMBER = 1000;
+const ITEMS_NUMBER = 80;
 
 // Generate an array of random values
-let list = Array.from(Array(ITEMS_NUMBER), (item, index) => Math.floor(Math.random() * MAX_NUMBER));
+let list = Array.from(Array(ITEMS_NUMBER), (item, index) =>
+  Math.floor(Math.random() * MAX_NUMBER)
+);
 
 // Sort an array for algorithm
 list.sort((a, b) => a - b);
 
-const linearScale = d3.scaleLinear()
-  .domain([0, 100])
-  .range([0, 400]);
-
-const graphWidth = 800;
-const graphHeight = 400;
-const gap = 1;
+const graphWidth = VIEW_WIDTH - MARGINS.left - MARGINS.right;
+const graphHeight = VIEW_HEIGHT - MARGINS.top - MARGINS.bottom;
+const gap = 0;
 const barWidth = (graphWidth - gap * (list.length - 1)) / list.length;
 
-console.log(barWidth);
+const linearScale = d3
+  .scaleLinear()
+  .domain([0, MAX_NUMBER])
+  .range([0, graphHeight]);
 
-const svg = d3.select('.viz')
-            .append('svg')
-                .attr('width', graphWidth)
-                .attr('height', graphHeight);
+const svg = d3
+  .select(".viz")
+  .append("svg")
+  .attr("width", VIEW_WIDTH)
+  .attr("height", VIEW_HEIGHT);
 
 svg
-    .selectAll('rect')
-    .data(list)
-    .enter()
-        .append('rect')
-        .attr('width', function(d, i) { return barWidth })
-        .attr('height', function (d, i) { return linearScale(d); })
-        .attr('x', function (d, i) { return i * barWidth + i * gap })
-        .attr('y', function (d, i) { return 400 - linearScale(d); })
-        .classed('bar', true)
+  .selectAll("rect")
+  .data(list)
+  .enter()
+  .append("rect")
+  .attr("width", function(d, i) {
+    return barWidth;
+  })
+  .attr("height", function(d, i) {
+    return linearScale(d);
+  })
+  .attr("x", function(d, i) {
+    return i * barWidth + i * gap + MARGINS.left;
+  })
+  .attr("y", function(d, i) {
+    return graphHeight - linearScale(d);
+  })
+  .classed("bar", true);
diff --git a/algorithm.js b/algorithm.js
@@ -0,0 +1,19 @@
+function binarySearch(list, item) {
+  let low = 0;
+  let high = list.length - 1;
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const guess = list[mid];
+
+    if (guess === item) {
+      return mid;
+    } else if (guess > item) {
+      high = mid - 1;
+    } else {
+      low = mid + 1;
+    }
+  }
+
+  return null;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Binary search algorithm visualziation</title>
+
+    <style>
+        .viz {
+            position: absolute;
+            margin: auto;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 800px;
+            height: 400px;
+        }
+        .bar {
+            fill: #243eff;
+            rx: 2;
+            ry: 2;
+        }
+    </style>
+</head>
+<body>
+    <div class="viz"></div>
+
+    <script src="https://d3js.org/d3.v4.min.js"></script>
+    <script src="algorithm.js"></script>
+    <script src="visualization.js"></script>
+</body>
+</html>
diff --git a/visualization.js b/visualization.js
@@ -0,0 +1,35 @@
+const MAX_NUMBER = 100;
+const ITEMS_NUMBER = 100;
+
+// Generate an array of random values
+let list = Array.from(Array(ITEMS_NUMBER), (item, index) => Math.floor(Math.random() * MAX_NUMBER));
+
+// Sort an array for algorithm
+list.sort((a, b) => a - b);
+
+const linearScale = d3.scaleLinear()
+  .domain([0, 100])
+  .range([0, 400]);
+
+const graphWidth = 800;
+const graphHeight = 400;
+const gap = 1;
+const barWidth = (graphWidth - gap * (list.length - 1)) / list.length;
+
+console.log(barWidth);
+
+const svg = d3.select('.viz')
+            .append('svg')
+                .attr('width', graphWidth)
+                .attr('height', graphHeight);
+
+svg
+    .selectAll('rect')
+    .data(list)
+    .enter()
+        .append('rect')
+        .attr('width', function(d, i) { return barWidth })
+        .attr('height', function (d, i) { return linearScale(d); })
+        .attr('x', function (d, i) { return i * barWidth + i * gap })
+        .attr('y', function (d, i) { return 400 - linearScale(d); })
+        .classed('bar', true)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Visualization of binary search algorithm.
		Binary search visualization.
No results found