Skip to content

Instantly share code, notes, and snippets.

@nachocab

nachocab/index.html

Created November 11, 2014 01:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nachocab/f9daf1b41ab57cc7fe5f to your computer and use it in GitHub Desktop.
Save nachocab/f9daf1b41ab57cc7fe5f to your computer and use it in GitHub Desktop.
Download ZIP
criss cross
Raw
index.html
<!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