How to create 3D Body Maps in Yellowfin BI

From linking analytic content with JavaScript APIs to extending visualization capabilities with JavaScript charts, Yellowfin opens up a range of toolsets for your data projects. 

One particular feature that our customers request is 3D body mapping, and whether exporting 3D models and utilizing its visualization and filtering can be easily applied.

This technical walkthrough shows you how to leverage Yellowfin to integrate 3D models within Yellowfin and then use them to create a fully interactive display in your dashboard.

3D Body Maps in Yellowfin: The Pre-requisites

Before any body mapping with Yellowfin can begin, there are four core resources you'll need:

1. A 3D modeling program such as Blender 
2. JavaScript Charts and Code Mode enabled in Yellowfin 
3. Three.js libraries placed into your Yellowfin installation's ROOT folder (located at <your_yellowfin>/appserver/webapps/ROOT/)
4. Yellowfin version 9.4.2

To see it all in action, we’ve provided all of the necessary files which you can download by clicking here. In addition, we've included a full video walkthrough - you can watch below.

Step 1: 3D Model Setup 

The first order of business is to create a 3D model in your favorite tool, save it and export that model into the standard glTF file format.  For the purposes of this technical walkthrough, we used Blender as it is a free 3D modeling tool. However, most other tools also allow you to create and export models in this format. 

If you're using Blender, you can follow our walkthrough by using the attached file:  

basic_person.blend

If you opt to use another tool, you can import the following file: 

basic_person.glb

Once you've imported the basic_person file into Blender, you should see the following on your screen: 

Note we have separated individual objects for each part of the person’s body, and given distinct names to each. This will be important when we consume the model in Three.js. 

In practice, this would be a more linked and complex structure, but we are keeping it simple for demonstration purposes so you can get up and running quicker. 

 tytyfftuyftuyfuy

If you wish to edit this model further before proceeding, you can. As these tools are quite complex and have a learning curve, we recommended that you familarize yourself with them before following along. There are many videos and guides online to get started. 

Once you are done editing, we can proceed to export this again into glTF format, as shown in the screenshot below.

You can then place the exported 3D model into the ROOT folder of Yellowfin, which is located at <your_yellowfin>/appserver/webapps/ROOT/.

Step 2: Create a Yellowfin Report 

Now that the 3D model is exported into Yellowfin, we can proceed to create a fresh report in Yellowfin in preparation to link with the prepared 3D model.

The pre-installed Skiteam data model only offers bone injuries for athletes and since we are tracking muscles instead of bones, we have used a reference code to re-label the “broken bones” field, matching to body areas in the 3D model. 

We can then add a metric, like Athlete Count, as shown in these example screenshots:

Placeholder

Placeholder

Step 3: Prepare your JavaScript Chart

To render the 3D model we have created, we will use a library called Three.js. We have attached the JavaScript we used for this walkthrough, but to highlight a few key points: 

You will first need to place the following libraries (loader.js, OrbitControls.js and threefull.js) in your Yellowfin ROOT folder for this walkthrough.

Within the 3D Body Map report, we will select a JavaScript chart and proceed to reference the libraries:

Placeholder

The first code we will add is to create a canvas div for our scene to be rendered in. You could also just use the chart draw div, as shown in the screenshot below.

Placeholder

Next, we need to massage the data a little to get it ready. In this case, we create a simple object (body_parts) containing the parts and their counts

Placeholder

{ 

Abdomen: 97, 

Head: 93, 

"Left Bicep": 108, 

"Left Foot": 95, 

"Left Quad": 77, 

"Right Bicep": 104, 

"Right Foot": 101, 

"Right Quad": 101 

} 

Once Three.js is loaded, we create a scene, define basic parameters, and begin to add a camera and lighting to the scene:  

Placeholder

We can then load the 3D model itself into the scene:

Placeholder

Once loaded, we will iterate through all of the elements in the model (same as the “Scene Collection” list we noted in Blender), searching for body parts, and adjusting the amount of red in the material color based on the count of athletes: 

From here, add it to the scene and render.

The only thing left to do here, is to handle any possible user clicks. We will do that by comparing the user’s click to our list of body parts.  

If the user does click on a body part, we will call a function window.setBodyPartFilter, and pass the object they clicked on. This function does not exist yet in the JavaScript chart, but we will create it in the Yellowfin dashboard’s Code Mode.

Placeholder

Note that we have removed a mapping of the “body part” back to the original “bone group”. If you are using the supplied YFX files, this will look slightly different from what’s shown above.  

Now, proceed to preview the 3D model. It should look something like this:

Placeholder

Step 4: Link the 3D Model with the rest of your dashboard

It’s time to get our prepared 3D model into our Yellowfin dashboard.

Add the report we just created to the dashboard, along with another report (Player Injuries) that accepts the “Body Part” field as a filter. 

Switch into the dashboard’s Code Mode, and create the setBodyPartFilter function that we referenced in the JavaScript chart. This not only accepts the body part value from our 3D model report but also applies that as a filter to the dashboard by leveraging Yellowfin’s filter API.

Placeholder

Why is this useful? Well, if clicking on a 3D body part sets the dashboard filter then other charts and reports (ie, the Player Injuries report) that are linked to the same dashboard filter will also refresh accordingly!

Step 5: Time to publish and test the body map

Following all proceeding steps correctly, you should now be able to click on each individual body part — either from the body parts filter panel or on the actual 3D model — to filter down the list of athletes.

You can also adjust the demographic filter to see the body parts change colors, as the count of athletes is limited by demographic.

You may also like: