Make Your Own Sol LeWitt 614!

Make your own version of Wall Drawing 614 now! →

It is also available as a block.

Background

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.

Make your own version of Wall Drawing 614 now! →

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: type="range" name="paddingInput" id="paddingInputId" value="15" min="1" max="50" oninput="paddingOutputId.value = paddingInputId.value"> name="paddingOutput" id="paddingOutputId">15px /> Number of rectangles: type="range" name="rectInput" id="rectInputId" value="40" min="5" max="300" oninput="rectOutputId.value = rectInputId.value"> name="rectOutput" id="rectOutputId">40

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])     .padding(padding.value)     .round(true)     .tile(d3.treemapBinary);

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() {   	d3.selectAll("div.node").remove(); 	sol614(); });  $( "#rectInputId" ).change(function() {   	d3.selectAll("div.node").remove(); 	sol614(); });

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: