add K15

raywu6 · raywu6 · commit 273f179a1d94 · 2019-03-21T21:29:28.000-04:00
diff --git a/15_svg/index.html b/15_svg/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  
+  <head>
+    <title>K15</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+
+  <body>
+    <svg class="scatterplot" xmlns="http://www.w3.org/2000/svg">
+    </svg>
+    
+    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
+    <script src="index.js"></script>
+  </body>
+
+</html>
+
diff --git a/15_svg/index.js b/15_svg/index.js
@@ -0,0 +1,37 @@
+// Raymond Wu
+// SoftDev pd7
+// HW15 -- Scattered
+// 2019-03-21
+
+var data = [
+    [45,   10],
+    [36,  537],
+    [263, 419],
+    [879, 357],
+    [121, 658],
+    [764, 932],
+    [891, 375],
+    [91,  324],
+    [465,  61],
+    [178, 354],
+    [907,  69],
+    [434,  76],
+    [0, 0],
+    [907,932],
+];
+
+var scaleX = d3.scaleLinear()
+    .domain( [0, 1000] )
+    .range( [0, 500] );
+var scaleY = d3.scaleLinear()
+    .domain( [0, 1000] )
+    .range( [0, 500] );
+
+var scatterplot = d3.select(".scatterplot");
+var dot = scatterplot.selectAll("circle");
+var dotUpdate = dot.data(data);
+var dotEnter = dotUpdate.enter().append("circle");
+
+dotEnter.attr("cx", function(d) {return scaleX(d[0]);} )
+    .attr("cy", function(d) {return 500-scaleY(d[1]);} ) // to make 0,0 at bottom left
+    .attr("r", "5");
diff --git a/15_svg/style.css b/15_svg/style.css
@@ -0,0 +1,11 @@
+svg {
+    border-left: 1px solid black;
+    border-bottom: 1px solid black;
+    width: 500px;
+    height: 500px;
+}
+
+svg circle {
+    fill: red;
+    fill-opacity: .25;
+}
