Custom visualizations - tutorial

In this tutorial you learn how to create a custom visualization, from scratch, using the customvis command line interface (CLI) tool.

Before you start

  1. Make sure that you have setup your development environment and installed the custom visualizations CLI tools as explained in Setting up the development environment.
  2. This tutorial assumes a basic knowledge about d3. It makes following the steps in this document much easier and allows you to make your own modifications after you have completed the tutorial.
  3. Basic knowledge about TypeScript is recommended since the samples in this tutorial are TypeScript based.
  4. There is API reference documentation available on all classes and functions in customvis-lib.

At the end of this tutorial you have created a visualization that looks as follows:

Custom visualiztion

The visualization has three data slots and a customizable palette. In addition, the visualization supports tooltips, selection, highlighting, and shows a product-based legend when used in IBM Cognos Analytics dashboard or reporting.

Part 1 will setup the data model and implement initialization and rendering code. At the end of this part you will have a working, data bound, scatter visualization with support for highlights, selections and tooltips.

Part 2 will be adding more properties to the visualization, like a point shape, title, and maximum values for the x- and y axis. You will use different property types and see how to use the 'defaultValue' and 'allowNull' attributes of a property.

Part 3 will further improve the visualization by adapting the legend to the scatter symbols, setting the active state of the title property based on the value of the showTitle property, and providing property captions.

Part 4 is the last part of this tutorial. It shows how to define optional slots, change the legend order, and provide localization. Localization allows you to provide translations in various languages for the user interface elements, for example slot- and property captions, of your visualization.

At the end of each part there is a link to the source code used in that part. Every part builds upon the previous one, so if you want to skip a part you can download the source code of the preceding part and continue with that.

  • Download the complete source code for the tutorial.