Using a D3 sample in your custom visualization

You use a D3 sample in this step-by-step guide. For more information, see Collision Detection at https://bl.ocks.org/mbostock/3231298/.

About this task

The example does not support data binding, extra interactivity, and so on. Further information on implementing extra custom visualization capabilities can be found in the API development documentation. Further implementation must be done by a developer with JavaScript & D3 skills.

Procedure

  1. Open the renderer/Main.ts file in a code editor.
  2. The Main.ts file is the entry point of the visualization and runs always first. The content of the Main.ts file is:
    import { RenderBase } from "@businessanalytics/customvis-lib"; 
    
    export default class extends RenderBase 
    { 
       protected create( _node: HTMLElement ): HTMLElement 
          {
              _node.textContent = "Basic VizBundle"; 
              return _node; 
          } 
    };
    Note: This code is written in TypeScript, which is a super-set of JavaScript. However, for some code areas you can also use JavaScript. This usage is demonstrated in this step-by-step guide.
  3. Open a command-line interface (CLI) in the directory that was made in Creating a custom visualization and run the following command:
    customvis start

    This command builds the sources and starts a local server that hosts the custom visualization. Additionally, the custom visualizations CLI tools start monitoring the source files and rebuild the custom visualization when its source code changes. It is recommended to have this command running during development of the visualization.

    To stop the local server that hosts the custom visualization, press Ctrl C.

  4. Edit the Main.ts file in such a way that the D3 example can be used in IBM® Cognos Analytics with Watson.
    1. Determine what version of D3 is used in the online example. The version can be found by searching d3 in the script tag of the example. The online example uses d3.v3. Import this dependency in the Main.ts file by adding the following to the top of the file:
      import * as d3 from "https://d3js.org/d3.v3.min.js";
    2. Replace
      _node.textContent = "Basic VizBundle";

      with the content in the script tag of the example:

      {content of the script tag of the example}
    3. Ensure that the rendering happens in the container of the widget. Replace
      d3.select("body").append("svg")
      with
      d3.select(_node).append("svg")
  5. Save the file. If everything works correctly, the CLI displays that the sources finished building.

Results

You can now validate the custom visualization in Cognos Analytics.