Custom visualizations code samples

There are code samples available for developers of custom visualizations.

The code samples found provided have the purpose of illustrating certain aspects of the customvis library and tools. This means that the main focus of each sample is not completeness of the visualization, showing how certain things work. Each sample is fully documented and tested and can be made publicly available.

Before you deploy the custom visualization, you must package it.

For more information, see Packaging the custom visualization.

Location of the samples

You can find the custom visualization samples here: https://github.com/IBM/ca_customvis/tree/master/code-samples/11.1.x.

Weather

  • Render a single, non-optional, formatted data value.
  • Show how to include static images.
  • Make a sizeable visualization using svg viewBox.
  • Use of color, number and boolean properties.

Ternary

  • Render elements on a position in an equilateral triangle.
  • Enable or disable properties based on the value of another property.
  • Change render behaviour for small size visualizations.
  • Apply highlight and selection styling.
  • Store text in a resource file for possible translation.
  • Use an external javascript library ('RBush' for label overlapping).
  • Separate render logic from data handling as a coding pattern.
  • Memory efficient rendering with accessor functions for calculations.
  • Use UpdateInfo.reason for render optimization.

Scatter

  • Render a simple scatter plot chart.
  • Provide UI-language aware text.
  • Use various types of properties in the visualization.
  • Update property status based on the value of another property.
  • Customize the legend.
  • Use an optional slot.

Overlay bar

  • Render a simple bar chart with overlaid bars.
  • Embed a static image in a visualization.
  • Highlight and selection decorations.
  • Make modifications to palette colors.

Quadrant

  • Render a more advanced scatter visualization.
  • Use animation in charts.
  • Render axis titles.
  • Highlight and selection decorations (raise elements).
  • Use custom data domains for the x-axis and y-axis.

Sankey

  • Use a third party library for calculations.
  • Highlight and selection decorations by color and font.
  • Implement custom hit testing for tooltips, highlights and selections.