diff --git a/jsGraphics/bindingDataToDOMele.js b/jsGraphics/bindingDataToDOMele.js
new file mode 100644
index 0000000..35ddf7d
--- /dev/null
+++ b/jsGraphics/bindingDataToDOMele.js
@@ -0,0 +1,9 @@
+//Binding DATA to DOM element - SIMPLE Example
+//assume the body is empty
+var theData = [ 1, 2, 3 ]
+
+var a = d3.select("body").selectAll("p") //returns empty selection
+ .data(theData) // creates 3 empty placeholders as there are three data items
+ .enter() // gives us reference/pointer to manipulate 3 placeholders. Using the reference we can append, insert and select
+ .append("p") //appending to the references
+ .text("It if fun to Design Frontend "); //adding hello to the paragraph text
\ No newline at end of file
diff --git a/jsGraphics/bindingDataUseFunction.js b/jsGraphics/bindingDataUseFunction.js
new file mode 100644
index 0000000..1b32d4b
--- /dev/null
+++ b/jsGraphics/bindingDataUseFunction.js
@@ -0,0 +1,12 @@
+//Binding DATA to DOM element - SIMPLE Example
+//assume the body is empty
+var theData = [ 1, 2, 3 ]
+
+var a = d3.select("body").selectAll("p") //returns empty selection
+ .data(theData) // creates 3 empty placeholders as there are three data items
+ .enter() // gives us reference/pointer to manipulate 3 placeholders. Using the reference we can append, insert and select
+ .append("p") //appending to the references
+ .text( function (d) { return d; } ); //adding hello to the paragraph text
+
+
+
\ No newline at end of file
diff --git a/jsGraphics/circleJSON.js b/jsGraphics/circleJSON.js
new file mode 100644
index 0000000..fa3e065
--- /dev/null
+++ b/jsGraphics/circleJSON.js
@@ -0,0 +1,20 @@
+var jsonCircles = [
+ { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
+ { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
+ { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];
+
+ var svgContainer = d3.select("body").append("svg")
+ .attr("width", 200)
+ .attr("height", 200);
+
+ var circles = svgContainer.selectAll("circle")
+ .data(jsonCircles) //place holder
+ .enter() //reference
+ .append("circle"); //3 circles
+
+ var circleAttributes = circles
+ .attr("cx", function (d) { return d.x_axis; })
+ .attr("cy", function (d) { return d.y_axis; })
+ .attr("r", function (d) { return d.radius; })
+ .style("fill", function(d) { return d.color; });
+
\ No newline at end of file
diff --git a/jsGraphics/imgstyle.css b/jsGraphics/imgstyle.css
new file mode 100644
index 0000000..27582c5
--- /dev/null
+++ b/jsGraphics/imgstyle.css
@@ -0,0 +1,6 @@
+circle {
+ fill: blue;
+ stroke: red;
+ stroke-width: 2px;
+}
+line { stroke: red;}
\ No newline at end of file
diff --git a/jsGraphics/shapes.html b/jsGraphics/shapes.html
new file mode 100644
index 0000000..d2ec119
--- /dev/null
+++ b/jsGraphics/shapes.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/jsGraphics/shapes.js b/jsGraphics/shapes.js
new file mode 100644
index 0000000..d41f5fc
--- /dev/null
+++ b/jsGraphics/shapes.js
@@ -0,0 +1,17 @@
+//Make an SVG Container
+var svgContainer = d3.select("body").append("svg")
+ .attr("width", 200)
+ .attr("height", 200);
+
+//Draw the Circle
+var circle = svgContainer.append("circle")
+ .attr("cx", 30)
+ .attr("cy", 30)
+ .attr("r", 20);
+
+//Drwa the Rectangle
+var rectangle = svgContainer.append("rect")
+ .attr("x", 50)
+ .attr("y", 50)
+ .attr("width", 50)
+ .attr("height", 100);
\ No newline at end of file