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);