Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; About_Widget has a deprecated constructor in /var/www/vhosts/ on line 275
Grasshopper to D3JS | LMNts

Grasshopper to D3JS

We’re ramping up our investment in interfaces as design and presentation tools. As mentioned in a previous post, D3JS offers solid potential for generating abstract drawings and diagrams. We’ve looked at ways of parametrically controlling drawings in the past, and this library offers a vast improvement compared to previous explorations. D3 is a two-dimensional library, and while there are several javascript platforms out there for three-dimensional browser-based rendering (namely Three.js), we believe there is currently more value in creating a robust two-dimensional platform for rationalizing and interfacing with building information.
As a jumping off point, we want to create generic tools for common tasks that we predict will occur when creating these dashboards. The first tool is a generic D3JS drawer for Grasshopper which we’re releasing on this site as a demo (download at the bottom of the page). This tool allows the user to toggle a button in Grasshopper to create a D3JS view. Views can be orthogonal or perspective and are either defined by the viewport or by an optional rectangle drawn in the Rhino model.

The aim here is to make the tool simple to use for Grasshopper beginners. The tool uses a Python script (you’ll need to download python for GH, and check out some of the great new features) to create a JSON file from Grasshopper. This JSON is then read with D3JS when one loads the html file in a browser. The above video demonstrates the use of the tool with some Kangaroo studies, and here is a live version of the interface:
[pageview url=”” width=”600px” height=”480px” border=”no”]
This dashboard can be customized to become fully interactive, yet there are some tricky parts when dealing with changing geometry. Kangaroo was helpful in this case because the objects are maintaining a set number of curves since they are representations of the original mesh. Maintaining object constancy gets more difficult when adding or removing objects from a view, and the interface below demonstrates these transitions.  The buttons iterate from curves of differing vertex counts to views with differing curve counts.  Notice when moving from a larger curve count to a smaller curve count, the additional curves are removed.  The Grasshopper definition needs to be set up properly to keep object constancy:
[pageview url=”” width=”600px” height=”320px” border=”no”]
And here’s a demo showing axons, perspectives, two point perspectives, and dashed lines:
[pageview url=”” width=”600px” height=”380px” border=”no”]
And last, the video and interface which should be referenced for using the demo:

[pageview url=”” width=”600px” height=”500px” border=”no”]
The svg button on the browser allows the user to download the file at its current state of the interface and open it with Adobe Illustrator as a vector drawing (thanks to SVG Crowbar). This will help for parametrically controlled drawings. And while there are often standardized diagrams for projects, particularly with climate based studies, we plan on using this tool for making that workflow more efficient. This is a starting point for our interface work, but should provide ample opportunity for studying parametric models.

For an implementation of this interface with 3D models, see this post.

[download id=”43″]
*This is the first version of the tool, so it currently only works with polylines. There are surely some bugs to figure out with the script, so let us know if you have any trouble getting it to run.


  • clevie

    Very, very cool. I can imagine how useful this will be for client and collaborator communication.

    You said: “we believe there is currently more value in creating a robust two-dimensional platform for rationalizing and interfacing with building information.”

    Is this due to the technical limitations of WebGL (e.g. inconsistent browser support)? or some other reason? Can you elaborate?

  • ekatzenstein

    We’re focusing on d3 at the moment because it complements our 3d modeling platforms well. Programs like Rhino/Grasshopper are well equipped for modeling and visualizing 3d geometry, but can become cumbersome when developing two dimensional drawings and diagrams.

    There aren’t any technical limitations to WebGL that I’m aware of, but why would we want a 3d model in a browser instead of using our current software? There are definitely several reasons for this, especially for analyzing building components for fabrication, but it seems more important to get all of our data under control and presented as legibly as possible. So we’re starting at the drawing board…we’ll jump into 3d in the near future, but the 2d appeal of D3JS allows us to remain abstract and interpret data before interfacing with it.

  • Aaron Williams

    Hey Erick,

    Great work. I love how you built these graphics to show perspectives of objects and buildings. Is there any way to contact you to discuss how you modeled the SVGs and how this can be extrapolated to other domains? Namely, I’m looking to create a similar graphic for building I want to know more about the workflow from 3D to d3.


  • ekatzenstein

    Aaron, thanks for the interest and feel free to send an email through the contact button at the top of the page.

    Have you downloaded the tool above? There are some basic instructions within the grasshopper file which should give a better idea.

  • Esteban

    Hi! amazing work! i think this is wonderful tool. will be it someday commercially available? It makes really fluent the interaction and the sharing of concepts… what about the licence terms?

  • ekatzenstein

    Thanks Esteban. You can download the current version at the bottom of the article.