Image

Overview

The image insight type is used to display raster images in a plot. This is particularly useful for visualizing images as data or overlaying images on other plot types. The image insight allows for the rendering of pixel data in a 2D grid.

You can customize the image size, position, and color scaling to represent image data effectively. Images can be used in scientific visualizations, geographic data, or any scenario where image data is needed.

Common Uses

• Raster Images: Displaying raster images in data visualizations.
• Geographic Maps: Visualizing maps or satellite images.
• Image Data: Rendering images directly as part of data exploration and analysis.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Simple Image PlotImage Plot with Custom ColorscaleImage Plot with Axis Annotations

Here's a simple image insight displaying an image based on pixel values:

sources:
  - name: image-data-source
    type: duckdb
    database: target/seeds/image_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            z
            0,0,1,1
            1,0,0,1
            1,1,0,0
models:
  - name: image-data
    source: ${ref(image-data-source)}
    sql: select * from model
insights:
  - name: Simple Image Plot
    props:
      type: image
      z: ?{${ref(image-data).z}}
charts:
  - name: Simple Image Chart
    insights:
      - ${ref(Simple Image Plot)}
    layout:
      title:
        text: Simple Image Plot<br><sub>Raster Image Display</sub>

This example demonstrates an image insight with a custom colorscale to better represent the image data:

sources:
  - name: image-data-custom-source
    type: duckdb
    database: target/seeds/image_data_custom.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            z
            0.1,0.2,0.3,0.4
            0.5,0.6,0.7,0.8
            0.9,1.0,0.2,0.3
models:
  - name: image-data-custom
    source: ${ref(image-data-custom-source)}
    sql: select * from model
insights:
  - name: Image Plot with Custom Colorscale
    props:
      type: image
      z: ?{${ref(image-data-custom).z}}
      colorscale: "Viridis"
charts:
  - name: Image Plot with Custom Colorscale
    insights:
      - ${ref(Image Plot with Custom Colorscale)}
    layout:
      title:
        text: Image Plot with Custom Colorscale<br><sub>Custom Coloring for Image Data</sub>

This example shows an image insight with axis labels and annotations to provide context for the image data:

sources:
  - name: image-data-annotated-source
    type: duckdb
    database: target/seeds/image_data_annotated.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            z
            1,0,0,1
            0,1,1,0
            0,0,1,1
models:
  - name: image-data-annotated
    source: ${ref(image-data-annotated-source)}
    sql: select * from model
insights:
  - name: Image Plot with Axis Annotations
    props:
      type: image
      z: ?{${ref(image-data-annotated).z}}
charts:
  - name: Image Plot with Axis Annotations
    insights:
      - ${ref(Image Plot with Axis Annotations)}
    layout:
      title:
        text: Image Plot with Axis Annotations<br><sub>Image with Axes</sub>
      xaxis:
        title:
          text: "X Axis"
      yaxis:
        title:
          text: "Y Axis"