Skip to content

Instantly share code, notes, and snippets.

@mgold
Created July 22, 2016 04:12
Show Gist options
  • Save mgold/3a632f9d7d03632b06b25addbac64130 to your computer and use it in GitHub Desktop.
Save mgold/3a632f9d7d03632b06b25addbac64130 to your computer and use it in GitHub Desktop.
Basis Vectors
license: gpl-3.0
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment