Basis Vectors by mgold

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .axis {
      stroke: black;
     	stroke-width: 3px;
    }
    
    .grid.x {
      stroke: red;
      stroke-width: 1px;
    }
    
    .grid.y {
      stroke: blue;
      stroke-width: 1px;
    }
  </style>
</head>

<body>
  <script>
    var width = 960, height = 500;
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var grid = svg.append("g")
    	.attr("transform", "translate("+width/2+","+height/2+")")
    grid.append("line")
    	.attr("class", "axis")
    	.attr("x1", -width/2)
      .attr("y1", 0)
      .attr("x2", width/2)
      .attr("y2", 0)
    grid.append("line")
    	.attr("class", "axis")
    	.attr("x1", 0)
      .attr("y1", -height/2)
      .attr("x2", 0)
      .attr("y2", height/2)
    
    function render(r1, t1, r2, t2){
      var lineCount = 60;
      var lineLength = Math.sqrt(width*width + height*height);
      
    	var xLines = grid.selectAll(".grid.x")
      	.data(d3.range(-lineCount, lineCount))
      xLines.enter().append("line").attr("class", "grid x")
      	.merge(xLines)
      	.attr("x1", function(d){return d*r1})
     	  .attr("y1", -lineLength)
     	  .attr("x2", function(d){return d*r1})
     	  .attr("y2", lineLength)
      	.attr("transform", "rotate(-"+t1+")")
      xLines.exit().remove();
      
      var yLines = grid.selectAll(".grid.y")
      	.data(d3.range(-lineCount, lineCount))
      yLines.enter().append("line").attr("class", "grid y")
      	.merge(yLines)
      	.attr("x1", function(d){return d*r2})
     	  .attr("y1", -lineLength)
     	  .attr("x2", function(d){return d*r2})
     	  .attr("y2", lineLength)
      	.attr("transform", "rotate(-"+t2+")")
      yLines.exit().remove();
    }

		render(30, 10, 70, 120)

  </script>
</body>