I used to draw these things as a kid when I was bored in school. I think the most I ever got to was a 20 x 20.
<!DOCTYPE html>
<!-- Paul Buffa 2015
-->
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
margin: 10;
}
.lines {
stroke: #000;
stroke-opacity: .3;
stroke-width: .5;
}
rect {
fill-opacity: .05;
stroke: #000;
stroke-width: .1;
}
#slider {
width: 350px;
}
</style>
<body>
Choose # of Points
<input id="slider" type="range" min="1" max="100" value="5" step="1" />
<span id="slider-value">5</span>
<br />
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 480 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
function makeDataset(datalist, num) {
for (var i = 1; i < (num+1); i++) {
datalist.push(i);
}
}
function makeCoordinates(datalist, num) {
for (var i = 1; i < (num+1); i++) {
for (var j = num; j > 0; j--) {
set = [i,j]
datalist.push(set);
}
}
}
var dataset = [],
coordinates = [],
points = 5;
makeDataset(dataset, points);
makeCoordinates(coordinates, points)
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("rect")
.attr("width", width)
.attr("height", height);
// // North Horizontal Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cx",function(d,i) { return (i+1) * (width/points); })
.attr("cy",0)
.attr("r",2);
// South Horizontal Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cx",function(d,i) { return i * (width/points); })
.attr("cy",height)
.attr("r",2);
// // West Vertical Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cy",function(d,i) { return (i+1) * (height/points); })
.attr("cx",0)
.attr("r",2);
// East Vertical Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cy",function(d,i) { return i * (height/points); })
.attr("cx",width)
.attr("r",2);
// Northwest lines
svg.selectAll("lines")
.data(coordinates)
.enter().append("line")
.attr("class","lines")
.attr("x1", function(d,i) { return d[0] * (width/points); })
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", function(d,i) { return d[1] * (height/points); });
// Southeast lines
svg.selectAll("lines")
.data(coordinates)
.enter().append("line")
.attr("class","lines")
.attr("x2", function(d,i) { return (d[0] * (width/points)) - (width/points); })
.attr("x1", width)
.attr("y2", height)
.attr("y1", function(d,i) { return (d[1] * (height/points)) - (height/points); });
d3.select("#slider").on("input", change)
// Redraw
function change() {
// Reset variables
var dataset = [],
coordinates = [],
points = +this.value;
// Recreate arrays
makeDataset(dataset, points);
makeCoordinates(coordinates, points);
d3.select("#slider-value").text(points);
// Remove old
d3.selectAll(".dots").remove();
d3.selectAll(".lines").remove();
// North Horizontal Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cx",function(d,i) { return (i+1) * (width/points); })
.attr("cy",0)
.attr("r",2);
// South Horizontal Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cx",function(d,i) { return i * (width/points); })
.attr("cy",height)
.attr("r",2);
// West Vertical Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cy",function(d,i) { return (i+1) * (height/points); })
.attr("cx",0)
.attr("r",2);
// East Vertical Dots
svg.selectAll("dots")
.data(dataset)
.enter().append("circle")
.attr("class","dots")
.attr("cy",function(d,i) { return i * (height/points); })
.attr("cx",width)
.attr("r",2);
// Northwest lines
svg.selectAll("lines")
.data(coordinates)
.enter().append("line")
.attr("class","lines")
.attr("x1", function(d,i) { return d[0] * (width/points); })
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", function(d,i) { return d[1] * (height/points); });
// Southeast lines
svg.selectAll("lines")
.data(coordinates)
.enter().append("line")
.attr("class","lines")
.attr("x2", function(d,i) { return (d[0] * (width/points)) - (width/points); })
.attr("x1", width)
.attr("y2", height)
.attr("y1", function(d,i) { return (d[1] * (height/points)) - (height/points); });
} // Finishes Change Function
</script>
</body>
</html>