cagrimmett · December 26, 2019 23:15
diff --git a/.block b/.block
 license: gpl-3.0
 height: 900
diff --git a/README.md b/README.md
diff --git a/index.html b/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>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/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>