How do I take the Collision visualization from the documentation and connect it to data inside Cognos Analytics? Well, read on....
Custom Visualization was introduced in Cognos Analytics 11.1.4 in Oct 2019 and that allows everyone to import custom specific visualizations from any JavaScript based library... almost ;-)
Since every library (D3, Highcharts, echarts, Googlecharts etc) have their own structure, it's not possible to document exactly how to integrate them - someone with Javascript and/or D3 coding skills is needed in the process... For business users, the non-coding approach would be to look for "ready-to-use" examples in the Accelerator Catalog: https://community.ibm.com/accelerators/?context=analytics&type=Visualization
In the documentation, there is an example of how to use an existing D3 visualization (the Collision Detection: https://bl.ocks.org/mbostock/3231298/) and only changing a couple of lines code, will bring the visualization into Cognos Analytics: https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_customviz_tutstepbystep3.html - it looks good and is fun to play with ;-)
But, when I present this, then the most obvious question is: How do I connect data to it...?
This blog is around taking this example (which will bring the Collision D3 Visualization into Cognos Analytics in 2 minutes) and connect it to a data source in Cognos Analytics (so it's a bit more useful...)
This is not around how to explain the different pieces - for a detailed step-by-step explanation of how to create a custom visualization from scratch, see the very detailed tutorial on how to create a Scatter visualization: https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_customviz_lib_tutorialscatter0.html
Step 1:
You have either built the Collision customvis yourself or downloaded the initial version from the documentation: https://github.com/IBM/ca_customvis/blob/master/docs/tutorial/collision-initial.zip
Step 2:
Changing the Vizdef.xml file:
The file looks very empty for now, since we haven't defined anything for this visualization - it only shows the Collision bubbles..
Looking into the documentation: https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_customviz_lib_vizdef.html I can see that we need to define Slots, DataSets and some properties...
- Slots are the Data Slots we can see in Cognos Analytics where I can drop measures and dimensions
- DataSets are the collection of Data Slots, defining the edge of the data
- Properties are different properties you can set on the customvis, in our case we want to define some colors on our Collision visualization.
For the Collision example, I want to add 1 Category dataslot to define the number of bubbles, 1 measure to define the size of the bubbles and 1 property to control the colors on the bubbles.
To define this, I'm adding these lines to the vizdef.xml file:
<slots>
<slot name="category" caption="Category" type="cat" optional="false" channel="color" />
<slot name="size" caption="Size" type="cont" optional="false" />
</slots>
<dataSets>
<dataSet name="data">
<ref slot="category" />
<ref slot="size" />
</dataSet>
</dataSets>
<properties>
<group name="Visualization">
<group name="Palettes">
<palette name="color" caption="Color" slot="category" type="cat" />
</group>
</group>
</properties>
Step 3:With our Slots, DataSets and Properties (colors) well defined, we are now ready to connect the visualization to Cognos Analytics. We need to add a couple of things and change the existing code. This is dependent on how the D3 code has been written and since these can be very different, it might conform to your D3 and it might not...
Open the main.ts file in your code editor (or just notepad) and take a look at the code... it's basically just creating some random bubbles and adding some interactions when the mouse is coming close to them. So there is some work to update it to create bubbles based on the data and adjust the colors.
1) We update the import statement to include Datasets, updateinfo and Catpalette since we are adding a datasets, we need the viz to update and adding some colors:
import { RenderBase, DataSet, UpdateInfo, CatPalette } from "@businessanalytics/customvis-lib";
2) In the initial code, we just create the Collision viz, there is no need to update it since it's static (there is no data that will change) - for our example, we need to create a quick Create statement to create the canvas for the Viz and then adding a longer Update statement for updating the Viz every time we add data, filter it, change colors etc.
For that reason, we are moving the var out of the Create statement and define them as constants in the beginning:
const CATEGORY = 0, SIZE = 1;const WIDTH = 960, HEIGHT = 500;const MIN_RADIUS = 5, MAX_RADIUS = 20;
I changed the Height to 500 since the bubbles tended to drop out of the screen...
The Create statement has been reduced to just creating the canvas:
var svg = d3.select( _node ).append("svg")
.attr("width", WIDTH)
.attr("height", HEIGHT);
return svg.node();
3)
The Update statement contains a couple of blocks from the orginal Create statement and some additions:
- We need to define what to do, if there is no data (then don't create the viz):
const rows = _info.data.rows;
if ( !rows || rows.length === 0 )
return;
Then we need to calculate the radius of the bubbles, based on the Size measure (not just random sizes):
const valueDomain = _info.data.cols[ SIZE ].domain.asArray();
const radius = d3.scale.linear().domain( valueDomain ).range( [ MIN_RADIUS, MAX_RADIUS ] );
Next up is the colors, I need to get them from the property:
const palette = _info.props.get( "color" ) as CatPalette;
Then it's time to combine all of this and create the bubbles:
const nodes = [];
rows.forEach( row => nodes.push(
{
radius: radius( row.value( SIZE ) ),
fill: palette.getFillColor( row )
}
and lastly a "virtual node" for the collision calculation:
nodes.unshift(
{
radius: 0,
fixed: true,
data: null,
fill: null
}
)
There is also a need for a couple of minor adjustments to the existing code to get everything to connect and respond, please take a look at the final code in the link below for information on these.Save the code and start your local Collision visualization and test it out in Dashboards or Reporting!
The final version should look something like this:
I have posted the final code here if you want to compare your version with the steps above or if you just want to test it out - again, the purpose of this blog is not to share a final production ready version of the Collision visualization, but more to share the steps needed from the initial D3 visualization to a version that connects to the data inside Cognos Analytics.
Final version:
https://github.com/IBM/ca_customvis/blob/master/docs/tutorial/collision-with-dataslots.zip(if you want to test it out in Cognos Analytics, remember to pack it first)
A big thanks to Duy Tran for helping with the code ;-)
Have fun with your custom visualization and please share what you are creating with me!
Torben
#Administration#classicviewer#CognosAnalyticswithWatson#Customvis#D3#Dashboard#DataVisualization#home#LearnCognosAnalytics#report#visualizations