Make Your Own Sol LeWitt 614!

November 5, 2016
Category: Sol-LeWitt
Tags: D3.js

It is also available as a block.


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.

Technical Details

For the technical details of making the drawing itself, check out my post on it. This post focuses on rebuilding the tool based on user input.

The Inputs

I used a form, a range input, an output, and some in-line JavaScript to power the sliders and display their values in real-time:

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

Live example:

Black band width: 15px
Number of rectangles: 40

Basing my functions on the values of the inputs

A set a variable to the element I wanted to access, then I called the .value of that element in my functions. (See the post on 614 for more info about these functions.)

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

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 treemap = d3.treemap()
    .size([width, height])

Rebuilding after inputs are changed

Similar to rebuilding on screen resize in the original version, I detect when there is a change in one of the inputs and then call a function to remove the divs and rebuild the treemap based on the inputs. jQuery makes this kind of thing fast and easy:

$( "#paddingInputId" ).change(function() {

$( "#rectInputId" ).change(function() {

Want to dig in a little further? Check out my implementation and view source. All of the specs are there.

Tools Used

  • D3.js - The D3.js library is well-suited to Sol LeWitt’s works. D3’s foundational principle of joining data to elements is easy to apply to LeWitt’s drawings.
  • jQuery - I’m using jQuery to detect changes in the window size and trigger removing & rebuilding the visualization.

Find this post useful?

Buy me a coffeeBuy me a coffee