Visual Reporting for View & Data with D3

By Philippe Leefsma (@F3lipek)

    One of the topic I'm going to present at our upcoming Forge DevCon conference is how to use View & Data API as a visual reporting tool, this blog exposes one of the sample I'm planning to demo during that talk.

    A thing you may want to do with the viewer is using the API to classify the various components based on one of their specific property, then generate a 2D representation of that data. You can potentially map the component ids to an entry in your custom database and represent that data on the screen. This is what is achieved in my mongo integration sample, where prices of the materials are used to generate pie data.

    Here I would like to keep things simple, so I'm only using the component default properties extracted with each model. This also makes it easily testable with any other model with no setup required: just load the extension into the viewer after the geometry and the object tree have been created, see that post for more details about those events.

    This is also the opportunity to play with D3, a data representation library. D3 seems to be the authority (~50K stars on github) in terms of 2d graph and charting among many other open source JavaScript libraries out there and for a reason! It is quite flexible and produces stunning results. But with power comes responsibilities, D3 is also more complex with a steeper learning curve.

    I created 3 samples so far which can theoretically work with any design for any selected property, obviously some properties make more sense than other to be represented that way.

I - The Pie Chart

A classic! We've been already showing such samples here and there, but this one is using d3Pie, a library powered by d3.  

And it's pretty easy to write that one:

II -  The Bar Chart

Another classic, implemented directly with d3 and significantly more custom work:

III - The Force Layout

This one is using a pretty cool feature of d3: the force layout. A 2d flexible force-directed graph where the nodes are maintained together by elastic links. Behaviour can fully be customised, see the doc for more details ...

In the case of View & Data, I used the following approach: if the selected property has float or int values, those are used to represent the size of the nodes, otherwise simply a default size is used. When using that graph, you should then pick a property such as "Mass" or "Density" for example and you would see something like below.

The full source code is available there (with some dependencies to the utils folder) and can be built with webpack, see indication in the readme: Viewing.Extension.VisualReport

Here is a live sample that loads automatically the extension Visual Report.