add jsGraphics

5 years ago · 7e6324974b
parent 40bed56cbc
commit 7e6324974b
6 changed files with 81 additions and 0 deletions
--- a/jsGraphics/bindingDataToDOMele.js
+++ 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 <p></p> to the references
+  .text("It if fun to Design Frontend ");  //adding hello to the paragraph text
--- a/jsGraphics/bindingDataUseFunction.js
+++ 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 <p></p> to the references
+  .text( function (d) { return d; } );  //adding hello to the paragraph text
+
+
+   
--- a/jsGraphics/circleJSON.js
+++ 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; });
+    
--- a/jsGraphics/imgstyle.css
+++ b/jsGraphics/imgstyle.css
@ -0,0 +1,6 @@
+circle {
+    fill: blue;
+    stroke: red;
+    stroke-width: 2px;
+}
+line { stroke: red;}
--- a/jsGraphics/shapes.html
+++ b/jsGraphics/shapes.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+   
+<head>
+   <link rel="stylesheet" href="imgstyle.css">
+   
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+  
+
+</head>
+<body>
+    <script src="shapes.js"></script>
+</body>
+
+</html>
+
--- a/jsGraphics/shapes.js
+++ 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);