d3VIEW
d3VIEW

Image Annotations

September 17, 2021 | by

d3VIEW Features d3VIEW Platform Simlytiks

Simlytiks application in d3VIEW converts raw data into descriptive analytics using a variety of visualizers to facilitate a quick understanding of the data and to aid in decision making. Among the library of visualizers, one that belongs to the category of InfoGraphics is the newest addition called Image Annotator. It is one of the powerful visualizations in Simlytiks that helps associate data with meaningful images. Infographics has been seen as early as 25,000 years ago in the Serra Da Capivara caves of Brazil and it not new for humans to use data associated with Images to describe information. In this post, we walk you through the aspects of creating a visualization using ImageAnnotator using realistic simulation and non-simulation data to demonstrate its flexibility to work with a variety of data formats and types.

In the example below related to occupants and their safety, if we need to view key metrics pertaining to an occupant model such as Peak Head/Chest Acceleration or Peak Airbag Pressure or Volume, we can use an Occupant image and drag and drop the required key-performance-indicators (KPIs) which would result in an image as shown in Figure 1.0 below. As you see, now, we can visually associate the data to its measuring location and eliminate the need for time needed to associate the data to its location without this feature.

Figure 1.0: Occupant and Airbag Image Annotation

Let’s walk through an example in steps to creating them.

Creating an Image Annotator Visualization

  1. Open d3VIEW platform. Click on Application menu available towards left top corner to view list of applications.
  2. Click on Simlytiks logo to open the Simlytiks application page.
Figure 1.1: d3VIEW dashboard page and a list of applications under the Applications menu
  1. There are 2 ways to create a dataset in Simlytiks as shown in Figure 1.2
    • Using Drop or Click to Add Files Box (a) or
    • Using New Dataset (b) button
  2. Click on Drop or Click to Add Files Box to upload a file from local system.
Figure 1.2: Image shows ways of creating Dataset.
  1. Click on New Dataset to open Create New Simlytiks Dataset modal. Within this modal, there are 4 ways to create a dataset.
    • Import From File to upload file from local system (i)
    • Connect to a Database to create dataset using databases (ii)
    • Simulations & Experiments to create dataset from simulations (iii)
    • Sample Datasets to create dataset from available sample datasets(iv)
Figure 1.3: Four ways of creating datasets within the Create New New Simlytiks Dataset modal and imported file from local system

For this illustration, we are now creating dataset using Import From File option and choosing ‘HVAC_Dataset’ that is available in the local system. The Fig 1.3 above shows the uploaded file(a).

  1. Click on View to complete creating a Dataset.
  2. Go to Classic View. Click on New Page to add a page to the dataset.
Figure 1.4: Image shows Classic view and New Page button.
  1. Alternatively, click on Modern within View to access modern view of simlytiks page. Click on Add Page to add new page.
Figure 1.5: Image shows Modern view and Add Page button to add new page.
  1. In this example, we are accessing Classic view.
  2. Click on page name (Page A) or the 3 vertical dots to display available options. Click on Edit label to change edit page name.
Figure 1.6: Image shows different ways to edit page name.
  1. Type new page name and click on Save to update page name.
Figure 1.7: Click on Save to update new page name.
  1. Create a new visualization in one of the 3 ways – Clicking on Add Chart or Add Visualization or Run Wizard buttons.
    • For the current illustration, let’s create a new visualization by clicking on Add Visualization button.
Figure 1.6: Image shows, ways of creating visualization: Add Visualization, Run Wizard available within the Add Visualization and Add Chart.
  1. Using the search window, search for Image annotator visualizer from the list of 40+ available visualizers.
Figure 1.7: With the help of Add Visualization, search for Image annotator visualization. Click on visualization name (Image Annotator) to add it to the page.
Figure 1.8: Image shows placeholder(b) for Image Annotator visualization and Input fields(a) for it.
  1. We can upload image for the visualization in 2 ways.
    • Click on Upload Image(a) as in Fig: 1.9 to upload an image from local system.
    • Click on Select image column(b) dropdown to choose image from a set of available images. This will be enabled if the dataset has any images in it.
Figure 1.9: Image shows uploading options from another dataset which has images.
Figure 1.10: Image shows, Upload button to import image from local system. Since this dataset does not have any image response, we don’t see other uploading option.
  1.  Now, we are uploading an image from local system using Upload Image(a) in Fig 1.10.
  2. Once the image is uploaded, provide name for the visualization. Ex: Annotator. Click on Accept button to create/add visualization to the Simlytiks page.
Figure 1.11: Click on Accept to save image to the Simlytiks page.

Once an image is added, Click and drag the required response to drop it on the image from left side panel. Please note that we can drop curve responses, scalar responses, Images and Key value.

Figure 1.12: Image shows different types of responses(Curve, Scalar, Image/Animations, Key value) that are available.
Figure 1.13: Drag and Drop responses from the Responses section available in the left side panel. Here the responses EngineSpeed and DewPointTemperatureL are dragged and dropped onto the image above.

Edit Responses’ settings

Once the required responses are dragged onto the image, we can change the settings for them.

  1. Click and drag response to change its position.
  2. Right click on the response to see more settings like, Edit style, Make opaque, Remove.
  3. Click Edit style to change settings like, Font size, Font style, Font color, Italics, Bold and underline for the response name.
  4. Click Make opaque to make transparent background or Opaque background.
  5. Click Remove to delete added response.
Figure 2.1: Edit options for the response name.
  1. Click on A(Toggle annotations) available at the right top corner of the chart to view and add Arrow, shapes, text settings.
  2. Click Arrow icon to add arrow to the chart which helps in pointing.
    • Click and drag arrow to change its position in the chart.
    • Click on Dotted circle at the top of the arrow and rotate to change its direction.
    • Click on Dotted circle at the bottom of the arrow and drag to change its size.
Figure 2.2: Toggle annotations(A) to view shapes and add them.
  1. Click on Circle icon or other shapes to highlight particular area in the image.
  2. Click anywhere on the chart to add Text which helps in naming if there are multiple images in the chart or, if we want to assign a curve to the chart.
  3. Type text and make other changes like Font size, Font style, Font color, etc.
Figure 2.3: Click anywhere on the chart to add text. Click on Save to apply changes to the chart.
  1. Click on Assign curve dropdown to assign selected curve for the text. To be able to enable this option, we should have curve responses in the dataset.
  2. Click on Save to view text on the image.
  3. Click on Done available at the top right corner to exit from edit mode and save settings.
Figure 2.4: Image shows shapes, arrows options for the image, which will be enabled when we click on A

We have other editing options like, Disable Annotations, Trim common strings, Remove all annotations when we right click anywhere on the image. These settings are global meaning they are applied to all the added responses.

  1. Click on Disable Annotations to hide all annotations.
  2. Click on Trim Common Strings to remove common strings in all the responses which makes response name’s shorter.
  3. Click on Remove All Annotations to delete all the added responses for the image.
Figure 2.5: Final Image annotated Visualization

Interacting with annnotated data

  1. Once we have completed editing the annotations, we can now view the annotated data.
  2. Click on Response (For ex: GlassTemperature) to view the details corresponding to that response.
  1. In this illustration, we have added Text and Number responses of Scalar type. We can have a detailed view of these responses by clicking on them.
  2. Alternatively, click on Responses list button available towards the right hand side of the response page. In this toggle window, we can get to know response that is currently being viewed in detail. Click on all available responses to view them in detail.
Figure 3.2: Image shows Responses List toggle window button.
  1. Click Overlay curves button available at the top of the Response List. Select any of the available responses to overlay. To be able to overlay the responses, we should have responses of different parameters in curve type responses.
Figure 3.3: Image shows, Responses List toggle button and Overlay Curves button within the toggle window.
  1. Below table shows types of available responses along with their icons.
Table 3.1: Types of responses and their icons.

These are the main steps carried out while creating image annotations, editing added responses and viewing the added responses.

More Examples

Automobiles

The Automobiles dataset explores basic statistics of cars. Here is an image annotation showing a summary of these statistics which include MPG, cylinders and weight.

Figure 4.1: Annotated automobile image.

2020 World Happiness

The 2020 World Happiness dataset explores happiness score values based on a multitude of variables. Here is an image annotation showing the summary of these factors for over 100 different countries.

Figure 4.2: Annotated image of 2020 World Happiness

Average weather

The Average Weather dataset explores yearly averages for European countries. Here is an image annotation showing average temperature, average high, average low and average precipitation.

Figure 4.3: Average weather annotated image.

Car Release

The Car Release dataset explores the release of car brands based on programs and platforms. Here is an image annotation showing the release summary.

Figure 4.4: Car release annotated image.

Breakfast Cereals

The Breakfast Cereals dataset explores nutritional values of popular cereals. Here is an image annotation showing calories, sugars, protein and fiber.

Figure 4.5: Breakfast Cereals annotated image

Head Impact

The Head Impact dataset explores the crash analysis on pedestrian head impact. Here is an image annotation showing hood and bumper forces, mass and peak acceleration.

Figure 4.6: Head Impact annotated image.

Insurance

The Insurance dataset explores insurance holders based on certain variables. Here is an image annotation showing a summary of these insurance categories.

Figure 4.7: Insurance annotated image.

NFL Teams

The NFL Teams dataset explores the points and yards statistics for each team. Here is an image annotation showing yard stats.

Figure 4.8: NFL Teams annotated image.

Craft Beers

The Craft Beers dataset explores ABV values and types for American craft beers. Here is an image annotation showing the ABV and beer style.

Figure 4.9: Craft Beers annotated image.

UFO Sightings

The UFO Sightings dataset explores location, duration, shape and comments of the sightings. Here is an image annotation showing the location, duration and shape.

Figure 4.10: UFO Sightings annotated image.

Diabetes

The Diabetes dataset explores factors that may cause diabetes. Here is an image annotation showing pregnancy factors and the diabetes pedigree function.

Figure 4.11: Diabetes annotated image.

Michigan Museum

The Michigan Museums dataset explores different types of museums and their finances. Here is an image annotation showing city, type, income and revenue.

Figure 4.12: Michigan Museum annotated image.

Rail Model

The Rail Model scientific dataset explores an axial crush material calibration simulation. Here is an image annotation for the forces at play during the crush.

Figure 4.13: Rail Model annotated image

Categories

|

Related Posts

no-image

Crashing A 1998 Toyota Into A 2015 Toyota Shows – How Far Car Safety Has Advanced
no-image

Explore User Friendly Navigation with Dashboard Pages and Filters
no-image

Damage modeling using GURSON

Leave a Reply