Using Inkscape to annotate schematics for use in IBM Cognos Analytics

Schematics are a visualization type that is able to render a user-defined scalable vector graphic (SVG) document (rendered as an image) against a dataset. Schematics are non-geographical maps that you can use in IBM Cognos Analytics.

The SVG needs to be annotated with certain parameters to link the SVG elements and the dataset values. More features are supported, such as a highlighting regions and the ability to work with SVG views.

You can use a text editor to annotate the SVG. For more information, see https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0com.ibm.swg.ba.cognos.dg_custom_vis.doc/ca_developingschematics_intro.html.

Workflow using Inkscape 

Inkscape is an open source SVG editor for Microsoft Windows, Apple Mac OS X, and Linux. You can download it from https://inkscape.org. 

You can open and SVG file in a text editor. When you open an SVG file in Inkscape, you will see the graphical representation. You can copy and paste the SVG information from this blog in a text editor and save the file as .svg.

Open an SVG in Inkscape

Open the following SVG in Inkscape

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
   <g>
      <circle cx="10" cy="10" fill="#cd5c5c" r="10"/>
      <circle cx="30" cy="10" fill="#fa8072" r="10"/>
      <circle cx="50" cy="10" fill="#e9967a" r="10"/>
      <circle cx="70" cy="10" fill="#ffa07a" r="10"/>
      <circle cx="90" cy="10" fill="#dc143c" r="10"/>
   </g>
   <g>
      <circle cx="70" cy="30" fill="#adff2f" r="10"/>
      <circle cx="10" cy="30" fill="#ff0000" r="10"/>
      <circle cx="30" cy="30" fill="#b22222" r="10"/>
      <circle cx="50" cy="30" fill="#8b0000" r="10"/>
   </g>
</svg>

Explanation SVG elements:

• circle cx = x position circle
• circle cy = y position circle
• r = radius circle

Inkscape displays the following:

Grouped circle annotation

In this example you will add two sets of grouped circles.

You will add title and desc attributes. The title and desc attributes are used to show a title and a mouse over description when you use a the svg in a schematic in IBM Cognos Analytics.

Schematics support Views that are defined in the SVG. Views are conceptually different than layers.

A layer is created when data is mapped to either the Region > Locations or Points > Locations slots. You can toggle layers on or off, which shows or hides the results of the data mapping.

When you author an SVG, you can create views. Views define groups of SVG elements where these elements are logically related to each other. For example, if you create a floor plan of a hospital, then you define Views for each hospital ward in the SVG. These views allow the user of the schematic to show or hide the views that they are interested in.

To annotate the SVG in Inkscape, click Edit > XML Editor.

In the XML Editor, you will see two SVG elements of type svg:g. Select the first and type data-cv-view into the Attribute Name input box and view_0 into the Attribute value text area, then click Set. Scroll the list of attributes to view the newly added class.

Note: In your SVG files you will see different generated IDs.

Do the same by adding an attribute of title with a value of view_0 title.

Do the same by adding an attribute of desc with a value of view_0 desc.

Do the same process by adding an attribute of title with a value of view_0 title.

Repeat this for the next svg:g element. Use values view_1,  view_1 title, and view_1 desc respectively.

Individual circle annotation

The data-cv-key attributes are added for mapping the elements of the SVG to the data source.

Follow a similar process to annotate each svg:circle child under the two svg:g elements by using the following keys:

view_0:
data-cv-key="A1"
data-cv-key="A2"
data-cv-key="A3"
data-cv-key="A4"
data-cv-key="A5"

view_1:
data-cv-key="B1"
data-cv-key="B2"
data-cv-key="B3"
data-cv-key="B4" 

The result is an SVG as per the following (all changes highlighted):

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
     <g data-cv-view="view_0" desc="view_0 desc" title="view_0 title">
          <circle data-cv-key="A1" cx="10" cy="10" fill="#cd5c5c" r="10"/>
          <circle data-cv-key="A2" cx="30" cy="10" fill="#fa8072" r="10"/>
          <circle data-cv-key="A3" cx="50" cy="10" fill="#e9967a" r="10"/>
          <circle data-cv-key="A4" cx="70" cy="10" fill="#ffa07a" r="10"/>
          <circle data-cv-key="A5" cx="90" cy="10" fill="#dc143c" r="10"/>
     </g>
     <g data-cv-view="view_1" desc="view_1 desc" title="view_1 title">
          <circle data-cv-key="B1" cx="70" cy="30" fill="#adff2f" r="10"/>
          <circle data-cv-key="B2" cx="10" cy="30" fill="#ff0000" r="10"/>
          <circle data-cv-key="B3" cx="30" cy="30" fill="#b22222" r="10"/>
          <circle data-cv-key="B4" cx="50" cy="30" fill="#8b0000" r="10"/>
     </g>
</svg>

You can now use this SVG with the following example dataset (save it as a CSV):

Adding a schematic to a report

To add the schematic to a report, see
https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_cr_rptstd.doc/t_import_schematic_report.html.

In our case it would look like this:

Adding points and regions to a schematic

After you have added your schematic to a report, you can add point and region data to your schematic.

For more information, see https://www.ibm.com/support/knowledgecenter/SSEP7J_11.1.0/com.ibm.swg.ba.cognos.ug_cr_rptstd.doc/t_schematic_report_custompointsregions.html.

If you create a report and use the following data (make sure to create a data module of it first) then you can drag and drop the following data on the data slots to see the Regions layer working:

1. Drag Ref onto the Locations.
2. Drag yesNo onto the Location color field.

To see the Points layer working, do the following:

1. Select the Points layer from the menu.
2. Drag Ref onto the Locations.
3. Drag Size onto the Point size.
4. Drag Color onto the Point color.
5. Open the properties and set the Point size calculation to Custom.
6. Set the following sizes:
   1. Default size: 10
   2. Maximum size: 5
   3. Minimum size: 8
   4. Static zero value size: 5
   5. Scaling factor: 1

Result:

More schematics examples are available on IBM Accelerator Catalog:
https://community.ibm.com/accelerators/?context=analytics&type=Schematic