JSFiddle - React, Tailwind, and code Playground

by CoolBlue

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div class="svg-container"></div>

JavaScript

var
		container,
		svg,
		rect,
		gridWidth = 800,
		gridHeight = 800;
cellSize = 15;


container = d3.select('.svg-container');
svg = container.append('svg')
							 .attr('width', gridWidth)
							 .attr('height', gridHeight);


var createRandomRGB = function () {
	var red = Math.floor((Math.random() * 256)).toString();
	var green = Math.floor((Math.random() * 256)).toString();
	var blue = Math.floor((Math.random() * 256)).toString();
	var rgb = 'rgb(' + red + ',' + green + ',' + blue + ')';

	return rgb;
}

var createGrid = function (width, height) {

	var
			numberOfRectsPerRow = Math.floor(width / (cellSize + 1)),
			numberOfRectsPerColumn = Math.floor(height / (cellSize + 1)),
			rangeHorizontal = _.range(numberOfRectsPerRow),
			rangeVertical = _.range(numberOfRectsPerColumn);

	_.each(rangeVertical, function (i) {

		_.each(rangeHorizontal, function (j) {

			var randomColor = createRandomRGB();

			svg.append('rect')
					.attr('class', 'cell')
					.attr('width', cellSize)
					.attr('height', cellSize)
					.attr('x', cellSize * j + 1 * j)
					.attr('y', cellSize * i + 1 * i)
					.style('fill', randomColor);
		});
	});
};

var changeColorOfACell = function () {

	var cellToBeChanged = pickRandomCell();
	var randomColor = createRandomRGB();

	d3.select(cellToBeChanged)
			.transition().duration(800)
			.each("start", lock)
			.each("end", unlock)
			.style('fill', randomColor)
};

var getPlusOrMinus = function () {

	var sign = Math.random() < 0.5 ? -1 : 1;
	return sign;
}


var moveCell = function (direction) {

	var cellToBeMoved = pickRandomCell();
	var currentX = cellToBeMoved.x.baseVal.value;
	var currentY = cellToBeMoved.y.baseVal.value;
	var change = getPlusOrMinus() * (cellSize + 1);
	var newX = currentX + change;
	var newY = currentY + change;
	var selectedCell = d3.select(cellToBeMoved);


	if (direction === 'x') {
		selectedCell.transition().duration(1500)
		.each("start", function () { lock.call(this, "lockedX") })
		.each("end", function...