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/.

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.
   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.