added legend in bottom right corner

index.html

@@ -60,13 +60,6 @@ <h1>Visualization</h1>
     <svg id='vis-svg-1'
       preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1000 1000' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
 
-
-      <text x='30%' y='35%' text-anchor='middle'>A</text>
-      <text x='70%' y='35%' text-anchor='middle'>B</text>
-      <rect x='20%' y='40%' width='20%' height='20%' fill='yellow'></rect>
-      <circle cx='70%' cy='50%' r='10%' fill='blue'></circle>
-
-
     <!-- Don't delete the closing tag! -->
     </svg>
   </div>
@@ -109,5 +102,6 @@ <h1>Acknowledgments</h1>
   <!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
   <script src='lib/d3.v6.1.1/d3.min.js'></script>
   <script src='js/visualization.js'></script>
+  <script src='js/Stacked_Bar_Chart.js'></script>
 </body>
 </html>

js/Stacked_Bar_Chart.js

@@ -1,7 +1,122 @@
-// Immediately Invoked Function Expression to limit access to our 
-// variables and prevent 
-((() => {
+// Stacked Bar Chart Data
+let margin = {
+  top: 35,
+  left: 120 ,
+  right: 30,
+  bottom: 50
+},
+width = 500 - margin.left - margin.right,
+height = 500 - margin.top - margin.bottom;
 
-  console.log('Hello, world!');
+let svg_stack_bar = d3.select('#vis-svg-1')
+  .append('svg')
+  .attr('preserveAspectRatio', 'xMidYMid meet') // this will scale your visualization according to the size of the page.
+  .attr('width', '100%') // this is now required by Chrome to ensure the SVG shows up at all
+  .style('background-color', 'white') // change the background color to white
 
-})());
+// Legend Data
+const legend_width = 150
+const legend_height = 200
+const legend_x = 10
+const legend_y = 740
+const y_incr = 20
+const x_incr = 10
+
+// legend outlined box
+svg_stack_bar.append("rect")
+  .attr("x",legend_x)
+  .attr("y",legend_y)
+  .attr("width",legend_width)
+  .attr("height", legend_height)
+  .style("fill", "white")
+  .style("stroke", 'black');
+
+// legend title
+svg_stack_bar.append("text")
+  .attr("x", ((legend_x + legend_width)/2))
+  .attr("y", (legend_y + x_incr))
+  .text("Regeneration Type")
+  .style("font-size", "10px")
+  .style('text-anchor', 'middle')
+  .attr('text-decoration', 'underline')
+  .attr("alignment-baseline","middle")
+
+// legend: none regeneration SHAPE
+svg_stack_bar.append("circle")
+  .attr("cx",(legend_x + y_incr))
+  .attr("cy",(legend_y + (2*y_incr)))
+  .attr("r", 6)
+  .style("fill", "purple")
+  .style("stroke", 'black');
+
+// legend: none regeneration TEXT
+svg_stack_bar.append("text")
+  .attr("x", (legend_x + y_incr + x_incr))
+  .attr("y", (legend_y + (2*y_incr)))
+  .text("None")
+  .style("font-size", "10px")
+  .attr("alignment-baseline","middle")
+
+// legend: not to ring regeneration SHAPE
+svg_stack_bar.append("circle")
+  .attr("cx",(legend_x + y_incr))
+  .attr("cy",(legend_y + (2*y_incr) + y_incr))
+  .attr("r", 6)
+  .style("fill", "blue")
+  .style("stroke", 'black');
+
+// legend: not to ring regeneration TEXT
+svg_stack_bar.append("text")
+  .attr("x", (legend_x + y_incr + x_incr))
+  .attr("y", (legend_y + (2*y_incr) + y_incr))
+  .text("Not to Ring")
+  .style("font-size", "10px")
+  .attr("alignment-baseline","middle")
+
+// legend: to ring regeneration SHAPE
+svg_stack_bar.append("circle")
+.attr("cx",(legend_x + y_incr))
+.attr("cy",(legend_y + (2*y_incr) + y_incr + y_incr))
+.attr("r", 6)
+.style("fill", "green")
+.style("stroke", 'black');
+
+// legend: to ring regeneration TEXT
+svg_stack_bar.append("text")
+.attr("x", (legend_x + y_incr + x_incr))
+.attr("y", (legend_y + (2*y_incr) + y_incr + y_incr))
+.text("To Ring")
+.style("font-size", "10px")
+.attr("alignment-baseline","middle")
+
+// legend: along ring regeneration SHAPE
+svg_stack_bar.append("circle")
+  .attr("cx",(legend_x + y_incr))
+  .attr("cy",(legend_y + (2*y_incr) + y_incr + y_incr + y_incr))
+  .attr("r", 6)
+  .style("fill", "yellow")
+  .style("stroke", 'black');
+
+// legend: along ring regeneration TEXT
+svg_stack_bar.append("text")
+  .attr("x", (legend_x + y_incr + x_incr))
+  .attr("y", (legend_y + (2*y_incr) + y_incr + y_incr + y_incr))
+  .text("Along Ring")
+  .style("font-size", "10px")
+  .attr("alignment-baseline","middle")
+
+// legend: full length regeneration SHAPE
+svg_stack_bar.append("circle")
+  .attr("cx",(legend_x + y_incr))
+  .attr("cy",(legend_y + (2*y_incr) + y_incr + y_incr + y_incr + y_incr))
+  .attr("r", 6)
+  .style("fill", "red")
+  .style("stroke", 'black');
+
+// legend: full length regeneration TEXT
+svg_stack_bar.append("text")
+  .attr("x", (legend_x + y_incr + x_incr))
+  .attr("y", (legend_y + (2*y_incr) + y_incr + y_incr + y_incr + y_incr))
+  .text("Not to Ring")
+  .style("font-size", "10px")
+  .attr("alignment-baseline","middle")