How to customize D3 Tree Chart widget by applying conditional formatting and changing node orientation

Customizing D3 Tree Chart widget

This article outlines how to customize the D3 Tree Chart widget in the Bold BI® application. Follow the steps below to apply conditional formatting and change orientation.

Add the D3 Tree Chart widget in Bold BI® application

You can add the D3 Tree Chart widget into your Bold BI® dashboard by below steps:

• Download the D3 Tree chart by using this link.
• Upload the custom widget into your Bold BI® application. You can find a detailed guide on how to publish custom widgets here.
• Once the custom widget is uploaded successfully, then it will list under “Miscellaneous” category in the designer page. Drag and drop the widget and start configuring data.

Apply Conditional Formatting to the nodes in D3 Tree Chart

By using the conditional formatting option, you can be able to apply color to specific nodes based on specific conditions. We can achieve this by making use of “Conditional Formatting” section in the property window. Follow the steps below to achieve formatting in the nodes.

1. To set formatting to the node, go to the below section in the properties window.

• Applied Column - Refers to the column to which you would like to apply the formatting,
• Based on Column - Refers to the column which will act as a condition for the format
• Value - Represents the conditional value.
• Format Color - Conditional color that you would like to apply to the specific node.
  
  

2. Initially, we have to bind the condition column (i.e… Based on Column) in Hidden Column section in the Assign Data like below.
   

   

3. Once the widget is configured properly, update the column details and condition details in the property window and select the Format Color. Now the color to the respective node will be applied like below.
   

   

4. After applying conditional formatting, the customized nodes in the tree chart will look like above. Currently, we have provided option to add up to 5 conditions. If you would like to add more than 5 conditions, follow the steps below:

   • Follow this documentation to unpack the custom widget file (.bicw format). Then, you can add the required number of conditions in the widgetconfig.json by referring the existing conditions format under Conditional Format Settings property.
     
     
     .
   • Additionally, in the existing widget, formatting can be applied to the initial two levels of child nodes. If you would like to extend formatting to additional child nodes, you can alter the code in the renderD3TreeView() method located in the sourcefile.js file within the src folder of the custom widget.
     
     
   • Once incorporated the changes, we need to publish the custom widget and make use of it in the Bold BI® application by packing and uploading the widget. Due to limitations in custom widget, we have provided support for adding conditional formatting in dimension columns alone.

Customize the Node Orientation in D3 Tree Chart

The default node orientation of the D3 tree chart will be vertical. We can switch the orientation between Horizontal and Vertical using the Node Orientation property available in the property window of the D3 tree chart.

• Horizontal: On selecting orientation as Horizontal, the nodes in the tree view will expand horizontally.
  
  
• Vertical: On selecting orientation as Vertical, the nodes will expand vertically like below.
  
  

Additional References

For more detailed instructions and best practices on using widgets in Bold BI®, refer to the following resources:

• Bold BI® Widgets Documentation
• Bold BI® Dashboard Design Guide
• Bold BI® User Guide