Merge pull request #6 from koalabears/vector

normalising station vectors
koalabears · Oct 21, 2015 · 7a81908 · 7a81908
2 parents a404286 + 9d95122
commit 7a81908
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 41 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -1,6 +1,6 @@
 /*main.css*/
 #polygon {
-  /*fill: none;*/
+  fill: none;
   stroke: #FFCC00;
   stroke-width: 1;
 }

diff --git a/public/js/main.js b/public/js/main.js
@@ -7,62 +7,60 @@ function createPolygonCoordinates(values){
   return values.map(function(value, valueIndex) {
     var radius = value + 1;
     return [
-      (radius*Math.sin(angleStep*valueIndex)+2)*25,
-      (radius*Math.cos(angleStep*valueIndex)+2)*25
+      (radius*Math.sin(angleStep*valueIndex)),
+      (radius*Math.cos(angleStep*valueIndex))
     ];
   });
 }
 
+function ourTransform(vectorArray) {
+  return transform2D(vectorArray, [2, 2], [25, 25]);
+}
 
-function drawPolygon(poly){
+function transform2D(vectorArray, transform, scale) {
+  return vectorArray.map(function(vector) {
+    return [
+      (vector[0] + transform[0]) * scale[0],
+      (vector[1] + transform[1]) * scale[1]
+    ];
+  });
+}
 
 
+function drawPolygon(poly){
+  var scaling = 2;
+
   var container = d3.select("#polygon").append("svg")
     .attr("width", 1000)
     .attr("height", 667);
 
-
-
-
-
        var path = container.append("path")
-        .data([poly])
-        .attr('stroke', 'red')
+        .data([ourTransform(poly)])
+        // .attr('stroke', 'red')
         .attr('stroke-width', 2)
         .attr("d", d3.svg.line()
           .tension(0.5)
           .interpolate("cardinal-closed")
         );
-        container.append("path")
-         .data([[[0, 0], [100, 100]]])
-         .attr('fill', 'transparent')
-         .attr('stroke', 'blue')
-         .attr('stroke-width', 2)
-         .attr('id', 'myLine')
-         .attr('fill', 'none')
-         .attr("d", d3.svg.line()
-           .interpolate("linear")
-         );
-  // var scaleX = d3.scale.linear()
-  //   .domain([-2,2])
-  //   .range([0,100]);
-  //
-  // var scaleY = d3.scale.linear()
-  //   .domain([-2, 2])
-  //   .range([0,100]);
-
-
-//
-// console.log(poly);
-
 
-//
-// visual.selectAll("polygon")
-//   .data([poly])
-//   .enter().append("polygon")
-//   .attr("points",function(d) {
-//     return d.map(function(d) {
-//       return [scaleX(d.x),scaleY(d.y)].join(",");
-//     }).join(" ");
-//   });
+        poly.forEach(function(coord){
+          var line = coord;
+          var lineLength = Math.sqrt(line[0]*line[0] + line[1]*line[1]);
+          line = [
+            (line[0]/lineLength)*scaling,
+            (line[1]/lineLength)*scaling
+          ];
+          var lineToDraw = ourTransform([[0, 0], line]);
+          // console.log(data);
+          container.append("path")
+           .data([lineToDraw])
+           .attr('fill', 'transparent')
+           .attr('stroke', 'blue')
+           .attr('stroke-width', 0.4)
+           .attr('id', 'myLine')
+           .attr('fill', 'none')
+           .attr("d", d3.svg.line()
+             .interpolate("linear")
+           );
+        });
 }