cagrimmett/.block

## .block
license: gpl-3.0
height: 900

## README.md

      
    Raw
  

              README.md
            
          
    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")!

  
## index.html
<html>
<head>
	<!-- Implemented by Chuck Grimmett http://cagrimmett.com -->
	<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>


<script>

var padding = document.getElementById("paddingInputId");
var rectNumber = document.getElementById("rectInputId");

function sol614() {

	var width = window.innerWidth,
	    height = window.innerHeight - 85;
	var format = d3.format(",d");

	function getRandomArbitrary(min, max) {
		  return Math.random() * (max - min) + min;
	}


	function treeData() {
	  var obj = {name: "rect"};
	  var children = [];
	  for (var row = 0; row < rectNumber.value; row++) {
	    children.push({id: row, value: getRandomArbitrary(60, 1000)})
	  }
	  obj['children'] = children;
	  return obj;
	}


	var tree = treeData();
	console.log(tree);


	var treemap = d3.treemap()
	    .size([width, height])
	    .padding(padding.value)
	    .round(true)
		.tile(d3.treemapBinary);

	var tree = d3.hierarchy(tree);

	tree.sum(function(d) { return d.value; });
	console.log(tree);

	treemap(tree);

	d3.select("body")
	.selectAll(".node")
	.data(tree.leaves())
	.enter().append("div")
	  .attr("class", "node")
	  .attr("title", function(d) { return d.data.id; })
	  .style("left", function(d) { return d.x0 + "px"; })
	  .style("top", function(d) { return d.y0+85 + "px"; })
	  .style("width", function(d) { return d.x1 - d.x0 + "px"; })
	  .style("height", function(d) { return d.y1 - d.y0 + "px"; })
	  .style("background", "#fff");
}

//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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<!-- Implemented by Chuck Grimmett http://cagrimmett.com -->
	<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>



	<script>

	var padding = document.getElementById("paddingInputId");
	var rectNumber = document.getElementById("rectInputId");

	function sol614() {

	var width = window.innerWidth,
	height = window.innerHeight - 85;
	var format = d3.format(",d");

	function getRandomArbitrary(min, max) {
	return Math.random() * (max - min) + min;
	}


	function treeData() {
	var obj = {name: "rect"};
	var children = [];
	for (var row = 0; row < rectNumber.value; row++) {
	children.push({id: row, value: getRandomArbitrary(60, 1000)})
	}
	obj['children'] = children;
	return obj;
	}


	var tree = treeData();
	console.log(tree);


	var treemap = d3.treemap()
	.size([width, height])
	.padding(padding.value)
	.round(true)
	.tile(d3.treemapBinary);

	var tree = d3.hierarchy(tree);

	tree.sum(function(d) { return d.value; });
	console.log(tree);

	treemap(tree);

	d3.select("body")
	.selectAll(".node")
	.data(tree.leaves())
	.enter().append("div")
	.attr("class", "node")
	.attr("title", function(d) { return d.data.id; })
	.style("left", function(d) { return d.x0 + "px"; })
	.style("top", function(d) { return d.y0+85 + "px"; })
	.style("width", function(d) { return d.x1 - d.x0 + "px"; })
	.style("height", function(d) { return d.y1 - d.y0 + "px"; })
	.style("background", "#fff");
	}

	//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>