Make Your Own Sol LeWitt 614

Make Your Own Sol LeWitt Wall Drawing 614

Sol LeWitt is a conceptual artist who typically produced directions for producing a piece of art. Those ideas are the art itself. Learn more about Sol LeWitt here.
I made a standalone version with 40 rectangles and 15px wide bands. This was made with D3.js Treemap and randomly-generated data.
I thought it would be a fun learning experience to make it customizable with user inputs, so I made it possible for users to change the number of rectangles and the width of the bands and see the differences in real-time.
Here is #614 implemented on a wall at MASSMoCA.

Here are Sol's original instructions for Wall Drawing 614:

Wall Drawing 614: Rectangles formed by 3-inch (8 cm) wide India ink bands, meeting at right angles.

Shout out to Harry Stevens for showing me a quicker way to trigger the rebuilds with on("change input")!

<html>
<head>
	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<title>Make Your Own Sol LeWitt Wall Drawing 614</title>
<style>

body {
  margin: 0;
  padding:0;
  position: relative;
  background: #000;
}

#controls {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 85px;
	background: #fff;
	text-align: center;
}

#controls .inputs form {
	font-size: 20px;
	line-height: 20px;
	padding-top: 15px;
}

#controls .inputs input:first-of-type {
	margin-right: 30px;
}

.node {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

.node-value {
  color: rgba(0,0,0,0.8);
  font-size: 9px;
  margin-top: 1px;
}

</style>
</head>
<body>
<div id="controls">
	<div class="inputs">
		<form>
			Black band width: <output name="paddingOutput" id="paddingOutputId">15</output>px <input type="range" name="paddingInput" id="paddingInputId" value="15" min="1" max="50" oninput="paddingOutputId.value = paddingInputId.value">
			Number of rectangles: <output name="rectOutput" id="rectOutputId">40</output> <input type="range" name="rectInput" id="rectInputId" value="40" min="5" max="300" oninput="rectOutputId.value = rectInputId.value">
		</form>
	</div>
</div>

//Run on first load
sol614();

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
	 d3.selectAll("div.node").remove();
	 sol614();
});

$( "#paddingInputId" ).on("change input", function() {
  	d3.selectAll("div.node").remove();
	sol614();
});

$( "#rectInputId" ).on("change input", function() {
  	d3.selectAll("div.node").remove();
	sol614();
});

</script>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js