Created
November 11, 2014 01:03
-
-
Save nachocab/6bae64c9165ba98390c9 to your computer and use it in GitHub Desktop.
criss cross
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<base target="_blank"> <!-- open all links on a new tab --> | |
<!-- <script src="bower_components/d3/d3.js"></script> --> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body{ | |
font-size: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
// tags: transform translate rotate skewX | |
var margin = {top: 40, bottom: 40, left: 40, right: 40}, | |
width = 200, | |
height = 200; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g") | |
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
svg.append("rect") | |
.attr("height", height) | |
.attr("width", width) | |
.attr("fill", "#EFF2F3"); | |
var data = d3.range(5); | |
var distance = 100, | |
angle = 45, | |
line_width = 1.5, | |
vertical_scale = 1, | |
horizontal_scale = 1; | |
// vertical | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M0,0V" + height) | |
.attr("transform", function(d,i){ return "translate(" + i * distance/2 + ",0)"}) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width); | |
// horizontal | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M0,0H" + width) | |
.attr("transform", function(d,i){ return "translate(0," + i * distance/2 +")"}) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width); | |
// up diagonal | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M0,0V" + Math.sqrt(height*height + width*width)) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width) | |
.attr("transform", function(d,i){ | |
var xi = i * distance; | |
return "translate(" + xi + ",0) rotate(" + angle +")"}); | |
// down diagonal | |
svg.selectAll(".lines") | |
.data(data) | |
.enter().append("path") | |
.attr("d", "M" + -distance + ",0V" + height * 10) | |
.style("fill", "none") | |
.style("stroke", "black") | |
.style("stroke-width", line_width) | |
.attr("transform", function(d,i){ | |
var xi = i * distance; | |
return "translate(" + xi + ",0) rotate(" + -angle +"," + -distance + "," + 0 +")"}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment