Last active
April 9, 2018 22:46
-
-
Save TVerduyn/6c374dbea0c48b21bbfdb5efdffe4403 to your computer and use it in GitHub Desktop.
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
| <html> | |
| <head> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <p style="font-size:30px;"> Snakeys on a Plane </p> | |
| <div id="grid"></div> | |
| <script> | |
| var rows = 20; | |
| var cols = 20; | |
| var gridsize = 25; | |
| var padding = 20; | |
| var snakeyPos = 1; | |
| var gridData = gridData(rows, cols); | |
| console.log(gridData); | |
| var xscale = d3.scaleLinear() | |
| .domain([ 0 , cols ]) | |
| .range([0, gridsize * cols]); | |
| var yscale = d3.scaleLinear() | |
| .domain([ 0 , rows ]) | |
| .range([gridsize * rows, 0]); | |
| var grid = d3.select("#grid") | |
| .append("svg") | |
| .attr("width", cols * gridsize + 2 * padding) | |
| .attr("height", rows * gridsize + 2 * padding); | |
| var Xaxis = grid.append("g") | |
| .attr("transform", "translate(" + padding + "," + (rows * gridsize + padding) + ")") | |
| .call(d3.axisBottom(xscale)); | |
| var Yaxis = grid.append("g") | |
| .attr("transform", "translate(" + padding + "," + padding + ")") | |
| .call(d3.axisLeft(yscale)); | |
| var row = grid.selectAll(".row") | |
| .data(gridData) | |
| .enter().append("g") | |
| .attr("class", "row"); | |
| var column = row.selectAll(".square") | |
| .data(function(d) { return d; }) | |
| .enter().append("rect") | |
| .attr("class","square") | |
| .attr("x", function(d) { return d.x + padding; }) | |
| .attr("y", function(d) { return d.y + padding; }) | |
| .attr("width", function(d) { return d.width; }) | |
| .attr("height", function(d) { return d.height; }) | |
| .style("fill", "#fff") | |
| .style("stroke", "#222") | |
| .attr("id", function(d) { return d.id; }) | |
| .on('mouseover', function(d) { | |
| if (d.id%cols<cols-4 & d.id>cols-1) | |
| { | |
| grid.append("rect") | |
| .attr("class","preview") | |
| .attr("x", d.x + padding) | |
| .attr("y", d.y + padding) | |
| .attr("width", d.width*4) | |
| .attr("height", d.height) | |
| .attr("opacity", 0.4) | |
| .style("fill", "#aaa") | |
| grid.append("rect") | |
| .attr("class","preview") | |
| .attr("x", d.x + padding) | |
| .attr("y", d.y + padding) | |
| .attr("width", d.width) | |
| .attr("height", d.height) | |
| .attr("opacity", 0) | |
| .style("fill", "#aaa") | |
| .on('click', function() { | |
| drawSnakey(d.id); | |
| }) | |
| .on('mouseout', function(d) { | |
| d3.selectAll("rect.preview").remove() | |
| });; | |
| grid.append("rect") | |
| .attr("class","preview") | |
| .attr("x", d.x + 3*gridsize + padding) | |
| .attr("y", d.y - gridsize + padding) | |
| .attr("width", d.width*2) | |
| .attr("height", d.height) | |
| .attr("opacity", 0.4) | |
| .style("fill", "#aaa"); | |
| } | |
| }) | |
| drawSnakey(Math.floor(Math.random() * 10) + cols * rows/4); | |
| drawSnakey(Math.floor(Math.random() * 10) + cols * (rows-3)); | |
| drawSnakey(Math.floor(Math.random() * 10) + cols * rows/2); | |
| function gridData(rownum, colnum) { | |
| var data = new Array(); | |
| var xpos = 1; | |
| var ypos = 1; | |
| var width = gridsize; | |
| var height = gridsize; | |
| var click = 0; | |
| for (var row = 0; row < rownum; row++) { | |
| data.push( new Array() ); | |
| for (var column = 0; column < colnum; column++) { | |
| data[row].push({ | |
| x: xpos, | |
| y: ypos, | |
| width: width, | |
| height: height, | |
| click: click, | |
| id: (row * colnum) + column | |
| }) | |
| xpos += width; | |
| } | |
| xpos = 1; | |
| ypos += height; | |
| } | |
| return data; | |
| } | |
| function drawSnakey (startid) { | |
| if (startid%cols<cols-4 & startid>cols-1){ | |
| var randomColour = Math.random() * 360 | |
| d3.select("rect[id='" + startid + "']").style("fill",function() {return "hsl(" + randomColour + ",100%,50%)";}); | |
| d3.select("rect[id='" + (startid + 1) + "']").style("fill",function() {return "hsl(" + randomColour + ",100%,50%)";}); | |
| d3.select("rect[id='" + (startid + 2) + "']").style("fill",function() {return "hsl(" + randomColour + ",100%,50%)";}); | |
| d3.select("rect[id='" + (startid + 3) + "']").style("fill",function() {return "hsl(" + randomColour + ",100%,50%)";}); | |
| d3.select("rect[id='" + (startid + 3 - cols) + "']").style("fill",function() {return "hsl(" + randomColour + ",100%,50%)";}); | |
| d3.select("rect[id='" + (startid + 4 - cols) + "']").style("fill",function() {return "hsl(" + randomColour + ",100%,50%)";}); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment