Old school D3 from simpler times

All examples By author By category About

cagrimmett

Full window Github gist

Sol LeWitt's Wall Drawing 86

Sol LeWitt's Wall Drawing 86

Wall Drawing 86: Ten thousand lines about 10 inches (25 cm) long, covering the wall evenly.

Implemented by Chuck Grimmett with D3.js transitions, randomization, and responsiveness. Learn more.

<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>Sol LeWitt Wall Drawing 86</title>
	<style type="text/css">
		body {
			font-family: 'Open Sans', sans-serif;
			margin: 0;
		}
		.drawing {
			margin: 0;
		}
		#lines {
			width:100%;
			height: 100%;
		}
		line {
		  stroke: #111;
		  stroke-width: 1;
		}
	</style>
</head>
<body>

<div class="drawing">
	<div id="lines"></div>
</div>
</div>

<script>

function sol86() {
	var svg = d3.select('#lines')
		.append('svg')
		.attr("width", "100%")
		.attr("height", "100%");

function lineData() {
		function getRandomArbitrary(min, max) {
		  return Math.random() * (max - min) + min;
		}
		var data = new Array();
		var id = 1;	
		var ww = window.innerWidth; // Width of the window viewing area
		var wh = window.innerHeight; // Height of the window viewing area
		// iterate for cells/columns inside rows
			for (var line = 0; line < 1000; line++) {  // 1000 lines
				var x1 = getRandomArbitrary(-100, ww); // initial points can start 100px off the screen to make even distribution work
				var y1 = getRandomArbitrary(-100, wh);		
					data.push({
					id: id, // For identification and debugging
					x1: x1,
					y1: y1,
					x2: x1 + 100, // Move 100 to the right
					y2: y1 + 100, // Move 100 up
					rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
				})
				id++; // Increment the ID
			}
		return data;
	} 
	
	var lineData = lineData();
	console.log(lineData);
	
	
	var line = svg.selectAll("line")
		.data(lineData)
		.enter().append('line')
		.attr("id", function(d) { return d.id; })
		.attr("x1", function(d) { return d.x1; })
		.attr("y1", function(d) { return d.y1; })
		.attr("transform", function(d) { return "rotate(" + d.rotate + " " + (d.x1 + 50) + " " + (d.y1 + 50) + ")";})
		.attr("x2", function(d) { return d.x1; })
		.attr("y2", function(d) { return d.y1; }).transition().delay(function(d,i){ return 20*i; }).duration(750)
		.attr("x2", function(d) { return d.x2; })
		.attr("y2", function(d) { return d.y2; });
}

// run on load
sol86();

$(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("svg").remove();
	 sol86();
});

</script>

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

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