Rendering Components Gallery
AI Squared offers many pre-configured options for visualizing information!
While AI Squared enables you to build fully customizable user interfaces, we also offer several options for data visualization out of the box, letting you go from idea to dashboard in minutes. These can also be tailored to your use case easily, by enabling you to set CSS styling within the Platform's configuration editor and / or the Python API.
Word Rendering
Word Rendering lets you add a flag to keywords within the DOM, giving you contextual flags as to what is important. This also allows you to embed relevant information within pop-outs that can be accessed on-click or on-hover, as well as link to additional resources. See how it can be used with the Next Best Action and IP Address Lookup use cases!
Container Rendering
The Container Rendering component serves as the canvas that you create dashboards with, and then inject those into the DOM. In the example above, you can see how a dashboard has been created by using the Container Rendering component to nest iframes, so one container holds multiple sub-containers, which in turn hold e.g. HTML Tag rendering objects, Table Rendering objects, etc. An example of this usage is the SOS dashboard use case.
Doughnut Chart Rendering
The Doughnut Chart rendering component is a great choice to display information that is segmented and visualize the constituent pieces of that information. This example is drawn from the SOS Dashboard use case, where product recommendations and a sales propensity score are represented using doughnut charts. By mousing over each segment in a doughnut chart you will see a pop-out containing the value of that segment.
Pie Chart Rendering
An alternative to the Doughnut Chart rendering component is the Pie Chart rendering component. This visualization is well-suited to displaying segmented metrics.
Line Chart Rendering
The Line Chart rendering component is a great fit for visualizing time-series information.
Bar Chart Rendering
The Bar Chart rendering component inserts an bar chart to visualize your information.
HTML Tag Rendering
The HTML Tag rendering component makes it easy to represent any characters, strings of numbers or letters, as HTML elements within a dashboard. In this example, from the SOS Dashboard use case, we create an HTML tag containing the name of the person whose information the dashboard represents.
Table Rendering
The Table rendering component enables you to visualize information in a table. In this example from the SOS Dashboard use case, we have 2 examples of table rendering components, with the top one displaying an overview of a sales prospect and the bottom displaying information about a salesperson's previous engagement with this prospect.
Image Rendering
The Image rendering component is for computer vision use cases where a single image is meant to be processed and a single prediction or classification is made. In this example, we have a model generate a single prediction - in this case, the classification of the age of a subject of a photo. We then overlay a bounding box around the entire image and apply a label to the image. The font size and color, as well as the size and color of the bounding box, are user-configurable. To see how this has been used in practice, see this guide.
Object Rendering
The Object rendering component is designed for use in object detection use cases. While the Image rendering component creates a single label for, and draws a single bounding box around an entire image, the Object rendering component lets you overlay multiple bounding boxes and labels onto an image in the DOM.
Custom Rendering
The Custom Rendering class is different from the previous examples of rendering components in that it isn't a component at all! Rather, this is a fully-custom UI that you can create from scratch with JavaScript, HTML, and CSS, populate it with data from the analytic step, and then use AI Squared to integrate it into a webpage or webapp. In the above image, you can see a different version of the SOS dashboard, this time created using Custom Rendering, and then integrated into the Microsoft Dynamics 365 CRM. An example use case utilizing custom rendering can be found here:
Last updated
