First Commit

INFO-3171 Data Visualization and UI/Notes/D3js/plainSVGwithD3.js

@@ -0,0 +1,59 @@
+            var width = 500;
+            var height = 500;
+
+            var svg = d3.select('body')
+                        .append('svg')
+                        .attr("width", width)
+                        .attr("height", height)
+            
+            //1. rect
+            // <svg width="300" height="300">
+            //     <rect width="100" height="200" x="100" y="100"></rect>
+            // </svg>
+
+            // svg.append("rect")
+            //     .attr("x", 100)
+            //     .attr("y", 100)
+            //     .attr("width", 100)
+            //     .attr("height", 200)
+            
+            //2. line
+            // <svg width="500" height="500">
+            //     <line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
+            // </svg>
+            // svg.append('line')
+            //     .attr('x1', 0)
+            //     .attr('x2', 400)
+            //     .attr('y1', 300)
+            //     .attr('y2', 100)
+            //     .attr('stroke', '#000000')
+
+            //3. circle - try on your own!
+
+            //4. ellipse - try on your own!
+
+            //5. text - try on your own!
+
+            //6. Circle over text
+            // <svg width="500" height="500">
+            //     <g>
+            //         <circle r="100" cx="250" cy="250"></circle>
+            //         <text x="200" y="200" stroke="#fff">Text Goes Here</text>
+            //     </g>
+            // </svg>
+            var group = svg.append('g')
+
+            var circle = group.append('circle')
+                                .attr('cx', 250)
+                                .attr('cy', 250)
+                                .attr('r', 100)
+                                .attr('fill', 'hotpink')
+                                .style('opacity', 0.8)
+            group.append("text")
+                .attr("x", 175)
+                .attr("y", 200)
+                .attr("stroke", "#fff")
+                .attr("font-family", "Impact, sans-serif")
+                .attr("font-size", '24px')
+                .attr("fill", "red")
+                .text("This is a circle!")