Grasshopper with D3JS for Section Studies

We’re studying interfaces which allow us to represent complex systems in a legible way. This is a topic we’ve been interested in for a while now, and some earlier work played around with the idea (processing and optimization solvers, animating transformations, and program masses). While our earlier work was a good starting point, we had a few bumps in the road when looking for a suitable workflow for interactive and object-based interfaces. A lot of these issues have now been solved thanks to the awesome javascript library D3JS.

The interface above serves as a proof of concept for using interfaces to study architectural designs. In this case we have a linear form composed of a rotated panel system. This system has 11 unique panels, but when presenting the final form as a digital model, the efficiency of the system is not immediately clear.

With conventional plans and sections, we’re able to provide levels of abstraction to allow one to study the model. The array of sections below offers one example for studying the geometry as a static image:

Another method, and arguably a more effective one, is to create a hybrid section to study how the overall system is formed:

But suppose we want to study a particular panel on the system: say the largest panel or the panel which represents the inflection point of rotation. To understand the connections between these panels, it’s also necessary to study adjacent sections. We want to select the particular panel for study, highlight it with a bolder lineweight, and also have control over the number of adjacent panels we can view.

With this in mind, we can look towards interactivity (this is what the sliders are controlling in the interface above). To keep the workflow fluid, we export our Grasshopper data to a spreadsheet or database and recall the values interactively with D3JS*.

To create the perspective views above, one can use a Grasshopper definition to execute something similar to the “Make2D” command in Rhino. Lines are created between curve control points and the camera. These lines are then intersected by a rectangle in front of the camera on a parallel plane. By evaluating the surface uv intersection of each line with the rectangle, one can export each control point value to a spreadsheet and then recall those values in D3JS by using an SVG Container of the same aspect ratio.

By using the transition() call in D3JS, there is very little work required for animating between views. The Grasshopper definition is run to export the curve values for each view, and D3JS will apply transitions when the data is changed.
When clicking the buttons in the interface at the top of this post, are you able to perceive of the change in camera? While object constancy is a hot topic in data visualization, it can also be applied to rationalizing architectural forms for design, presentation, and fabrication. Upon transition between views, you’ll notice that the camera is not moving. The geometry is instead twisting and contorting so that each curve reaches its new destination. With these transitions, it’s interesting to consider the similarities between basic graph types and architectural objects. By preserving object constancy, one can still perceive of the transition of a perspective view without having to see a key in an orthographic drawing.

We’re looking forward to getting deeper into this topic, and now that we can quickly export SVG to a browser using Grasshopper and D3JS, we plan to release a script soon to do this on a generic level.

Update: the tool can be found on this post:

*Released in 2011, the enormously popular D3JS was developed by Michael Bostock, Jeffrey Heer, and Vadim Ogievetsky. Its intended use is for data visualization and analytics, but can essentially be implemented for representing any two dimensional geometry with parametric control and object constancy. The library utilizes scalable vector graphics, which is a great plus for designers because any part of an interface can be exported to a CAD program or Illustrator without losing resolution. And since the library is based in javascript, it’s viewable in browsers around the world and does not require additional software to use.


  1. Andrew Heumann says:

    now that’s sexy!

  2. Great work guys!

  3. ekatzenstein says:

    Thanks guys! An updated generic definition can be found here:

Leave a Comment