Old school D3 from simpler times

All examples By author By category About

cagrimmett

Full window Github gist

Sol LeWitt's Wall Drawing 11

Sol LeWitt Wall Drawing 11

A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.

Learn more at cagrimmett.com

<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:360,600" rel="stylesheet">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/textures@1.0.4/textures.js"></script>
	<style type="text/css">
		body {
			font-family: 'Open Sans', sans-serif;
		}		
		.drawing {
			margin: 0 auto;
			text-align: center;
			width: 1310px;
			margin-top: 40px;
		}
		#grid {
			display: inline-block;
		}
		.description {
			width:600px;
			margin: 36px 4px;
			text-align: left;
		}
		a {color: #F76B48;}
		a:hover {
			text-decoration: underline;
			color: #e8370a;
		}
	</style>
</head>
<body>

<div class="drawing">
	<div id="grid"></div>
	<div class="description">
		<h2>Sol LeWitt Wall Drawing 11</h2>
		<p>A wall divided horizontally and vertically into four equal parts. Within each part, three of the four kinds of lines are superimposed.</p>
		<p><em>Implemented by Chuck Grimmett.</em> <a href="https://cagrimmett.com/sol-lewitt/2016/10/10/sol-lewitt-11.html">Learn more &rarr;</a></p>
	</div>
</div>

<script type="text/javascript">
function gridData() {
	var data = new Array();
	var id = 1;
	var xpos = 4.5; 
	var ypos = 4.5;
	var width = 650.5;
	var height = 400.5;
	
	// iterate for rows	
	for (var row = 0; row < 2; row++) {
		data.push( new Array() );
		
	// iterate for cells/columns inside rows
		for (var column = 0; column < 2; column++) {
			data[row].push({
				id: id,
				x: xpos,
				y: ypos,
				width: width,
				height: height
			})
			xpos += width;
			id += 1;
		}
		xpos = 4.5;
		ypos += height;	
	}
	return data;
}

var gridData = gridData();

var grid = d3.select("#grid")
	.append("svg")
	.attr("width","1310px")
	.attr("height","810px");

var size = 10;
var strokewidth = 1;
var stroke = "#111"

var t1 = textures.lines()
          .size(size)
          .orientation("vertical", "horizontal", "diagonal")
          .strokeWidth(strokewidth)
          .stroke(stroke),
      t2 = textures.lines()
	  	  .size(size)
          .orientation("vertical", "horizontal", "6/8")
          .strokeWidth(strokewidth)
          .stroke(stroke),
      t3 = textures.lines()
          .size(size)
		  .orientation("vertical", "horizontal", "6/8")
          .strokeWidth(strokewidth)
          .stroke(stroke),
      t4 = textures.lines()
          .size(size)
		  .orientation("vertical", "horizontal", "diagonal")
          .strokeWidth(strokewidth)
          .stroke(stroke);
          
 grid.call(t1);
 grid.call(t2);
 grid.call(t3);
 grid.call(t4);
	
var row = grid.selectAll(".row")
	.data(gridData)
	.enter().append("g")
	.attr("class", "row");
    	
var column = row.selectAll(".square")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("class","square")
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.attr("width", function(d) { return d.width; })
	.attr("height", function(d) { return d.height; })
	.style("fill", function(d) {            
            if (d.id == 1) {return t1.url()}
            if (d.id == 2) {return t2.url()}
            if (d.id == 3) {return t3.url()}
            if (d.id == 4) {return t4.url()}  
	;})
	
</script>

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

https://unpkg.com/textures@1.0.4/textures.js