Aren’t familiar with Sol LeWitt or his art? Read this.
I had an insight while going through the D3.js documentation to find a solution to another piece:
d3.area() with a highly curved fit line isn’t that different from wall drawings 852 and 853! By the way, 852 and 853 are actually distinct pieces, though they are often grouped together into one display like the one at MASSMoCA. I worked on the solution to 852 first, then modified it to make 853:
Wall Drawing 852: A wall divided from the upper left to the lower right by a curvy line; left: glossy yellow; right: glossy purple.
Wall Drawing 853: A wall bordered and divided vertically into two parts by a flat black band. Left part: a square is divided vertically by a curvy line. Left: glossy red; right: glossy green; Right part: a square is divided horizontally by a curvy line. Top: glossy blue; bottom: glossy orange.
Here are previews of 852 and 853 respectively:
The underlying data set
So much of implementing these drawings with D3.js rely on making a solid, usable data set to join elements with. (After all, D3 stands for data-driven-documents.) Creating these data sets is where I spend most of my time. Once I’ve created them, everything else follows pretty quickly.
d3.area() makes an area graph with given points, I had to create a data set of points. I wanted the start and end points to be defined with random (but constrained) points in the middle. Here is what I came up with for 852:
For 853, things were a little trickier since the left is oriented vertically:
One of the most important things to note about
d3.area() is that you must sort your data sets (by x if the chart is horizonal, y if vertical) before passing them to the function. Otherwise you end up with something like this because the values are out of order:
selection.sort() built in, but you also need to pass a function telling it how to sort:
Most area charts tend to be horizontal, and nearly all examples you can find are structured in this way. You need to pass
If you are switching to a vertical orientation, you instead need to pass
Curves and Points
I played with a number of curve functions and a number of points to see how they compared to traditional interpretations of Sol LeWitt’s pieces:
I eventually settled on
curveBasis for both pieces. It creates the smoothest curving line with the given random points, which produces results similar to the curved lines in Sol’s earlier work.
curveCatmullRom was my second choice, but occasionally produced harsh concave regions.
For the larger standalone piece (852) I used 7 total points, including the end points. For 853, which consists of two different curves, I used 5 points each since the widths were smaller.
Rebuilding on screen resize
- 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.
Inspiration and References
Detail shot of the version on display at MASSMoCA: