Widget:CharlesSVG: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 35: Line 35:
       </script>
       </script>
       </div>
       </div>


       <!--Green Rectangle via D3.js-->
       <!--Green Rectangle via D3.js-->
      <div id = "D3GreenRectangle">
       <script>
       <script>
         var width = 300;
         var width = 300;
         var height = 300;
         var height = 300;
         //Create SVG element
         //Create SVG element
         var svg = d3.select("#svgcontainer")
         var svg = d3.select("#D3BlueLine")
             .append("svg")
             .append("svg")
             .attr("width", width)
             .attr("width", width)
Line 53: Line 55:
             .attr("fill", "green");
             .attr("fill", "green");
         </script>
         </script>
        </div>


       <!--Red Circle via D3.js-->
       <!--Yellow Circle via D3.js-->
      <div id = "D3YellowCircle">
       <script>
       <script>
         var width = 300;
         var width = 300;
         var height = 300;
         var height = 300;
         //Create SVG element
         //Create SVG element
         var svg = d3.select("#svgcontainer")
         var svg = d3.select("#D3GreenRectangle")
             .append("svg")
             .append("svg")
             .attr("width", width)
             .attr("width", width)
Line 68: Line 72:
             .attr("cy", 50)
             .attr("cy", 50)
             .attr("r", 20)
             .attr("r", 20)
             .attr("fill", "red");
             .attr("fill", "yellow");
       </script>
       </script>