a1-mnorales-Monet-Norales

README.md

@@ -1,5 +1,10 @@
 Assignment 1 - Hello World: GitHub and d3  
 ===
+Source: https://webdva.github.io/how-to-draw-a-line-in-d3js/
+gh-url: https://github.com/mnorales/a1-ghd3/blob/master/index.html
+Section for Technical and Design Achievements:
+I am completely new to Java Script and I haven't used github in 5-6 years, so as of right now, i am pretty pround of the fact that i was able to get this far  while being so out of practice. A technical acheivment for me was finding an alternative to making the polygons because i tries multiple methods that all failed. Ans the basic design was made through multiple lines instead of one program.
+---
 
 This is a starting project to make sure you can write and host a webpage that generates graphics using d3. 
 

index.html

@@ -2,9 +2,109 @@
 
 <script>
   console.log(d3); // test if d3 is loaded
+  <p id="para1" class="heading">
+    Name: Monet Norales  Title: Assignment 1  Date: January 21, 2022
+  </p>
+
+  d3.select('#para1')
+    .style('color', 'purple');
+
+  var dataset = [73, 15, 56, 38 ,4];
+  var dataset2 = [87, 8, 95, 78, 21];
+  var dataset3 = [30, 44, 48, 64, 90];
+
   // Add an SVG
+  <svg width=800 height=800>
+  </svg>
+
   // Add Rectangles
+  var rec = d3.select('svg')
+    .selectAll('rect')
+    .data(dataset2)
+    .enter().append('rect')
+    .attr('x', function(d){return linescale(d);})
+    .attr('y', function(d){return linescale(d);})
+    .attr('width', 50)
+    .attr('height', 10)
+    .style('fill', 'aqua');
+
   // Add Circles
+  var cir = d3.select('svg')
+    .selectAll('circle')
+    .data(dataset)
+    .enter().append('circle')
+    .attr('cx', function(d){return linescale(d);})
+    .attr('cy', function(d){return linescale(d);})
+    .attr('r', 10)
+    .style('fill', 'blue')
+    .on("click", function(){d3.select(this).;
+</script>
+
   // Add Lines
+  // Source: https://webdva.github.io/how-to-draw-a-line-in-d3js/
+  <svg id="svg1" style="margin: 0 auto; display: block;"></svg>
+<script>
+  let svg = d3.select('#svg1')
+      .attr('width', 600)
+      .attr('height', 600)
+      .style('background-color', 'teal');
+
+  svg.append('line')
+      .style("stroke", "pink")
+      .style("stroke-width", 30)
+      .attr("x1", 0)
+      .attr("y1", 0)
+      .attr("x2", 600)
+      .attr("y2", 600);
+</script>
+
+<script>
   // Add Polygons
+    let poly  = d3.select('#svg2')
+      .attr('width', 600)
+      .attr('height', 600)
+      .style('background-color', 'pink');
+
+    poly.append('line')
+        .style("stroke", "black")
+        .style("stroke-width", 5)
+        .attr("x1", 200)
+        .attr("y1", 200)
+        .attr("x2", 400)
+        .attr("y2", 200);
+    poly.append('line')
+        .style("stroke", "black")
+        .style("stroke-width", 5)
+        .attr("x1", 400)
+        .attr("y1", 200)
+        .attr("x2", 550)
+        .attr("y2", 300);
+  poly.append('line')
+        .style("stroke", "black")
+        .style("stroke-width", 5)
+        .attr("x1", 550)
+        .attr("y1", 300)
+        .attr("x2", 400)
+        .attr("y2", 550);
+  poly.append('line')
+        .style("stroke", "black")
+        .style("stroke-width", 5)
+        .attr("x1", 200)
+        .attr("y1", 550)
+        .attr("x2", 400)
+        .attr("y2", 550);
+  poly.append('line')
+        .style("stroke", "black")
+        .style("stroke-width", 5)
+        .attr("x1", 50)
+        .attr("y1", 300)
+        .attr("x2", 200)
+        .attr("y2", 550);
+  poly.append('line')
+        .style("stroke", "black")
+        .style("stroke-width", 5)
+        .attr("x1", 50)
+        .attr("y1", 300)
+        .attr("x2", 200)
+        .attr("y2", 200);
 </script>