Histogram2d

Overview

The histogram2d insight type is used to create 2D histograms, where data is binned along both the x and y axes, producing a heatmap-like visualization. This allows you to visualize the relationship between two numerical variables by counting how many data points fall into each bin.

You can customize the binning along both axes, as well as the colorscale and aggregation method, to better represent your data.

Common Uses

• Joint Distributions: Visualizing the relationship between two variables.
• Density Plots: Showing the density of data points across two dimensions.
• Statistical Analysis: Identifying patterns, correlations, or anomalies in bivariate data.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Simple 2D Histogram Plot2D Histogram with Custom Bins2D Histogram with Density Mode

Here's a simple histogram2d insight showing how data is distributed across two dimensions:

sources:
  - name: histogram2d-data-source
    type: duckdb
    database: target/seeds/histogram2d_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            x,y
            1,2
            2,3
            3,4
            2,2
            1,3
            3,2
            4,4
            5,6
            4,2
models:
  - name: histogram2d-data
    source: ${ref(histogram2d-data-source)}
    sql: select * from model
insights:
  - name: Simple 2D Histogram Plot
    props:
      type: histogram2d
      x: ?{${ref(histogram2d-data).x}}
      y: ?{${ref(histogram2d-data).y}}
      colorscale: "Viridis"
charts:
  - name: Simple 2D Histogram Chart
    insights:
      - ${ref(Simple 2D Histogram Plot)}
    layout:
      title:
        text: Simple 2D Histogram<br><sub>Data Distribution Across Two Dimensions</sub>
      xaxis:
        title:
          text: "X Axis"
      yaxis:
        title:
          text: "Y Axis"

Example with custom binning along both axes:

sources:
  - name: histogram2d-data-bins-source
    type: duckdb
    database: target/seeds/histogram2d_data_bins.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            x,y
            1,5
            2,6
            3,7
            2,4
            1,5
            3,3
            4,8
            5,9
            4,4
models:
  - name: histogram2d-data-bins
    source: ${ref(histogram2d-data-bins-source)}
    sql: select * from model
insights:
  - name: 2D Histogram with Custom Bins
    props:
      type: histogram2d
      x: ?{${ref(histogram2d-data-bins).x}}
      y: ?{${ref(histogram2d-data-bins).y}}
      xbins:
        size: 1
      ybins:
        size: 1
      colorscale: "Blues"
charts:
  - name: 2D Histogram with Custom Bins
    insights:
      - ${ref(2D Histogram with Custom Bins)}
    layout:
      title:
        text: 2D Histogram with Custom Bins<br><sub>Custom Binning Along X and Y Axes</sub>
      xaxis:
        title:
          text: "X Axis"
      yaxis:
        title:
          text: "Y Axis"

Example with relative density:

sources:
  - name: histogram2d-data-density-source
    type: duckdb
    database: target/seeds/histogram2d_data_density.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            x,y
            1,1
            2,2
            3,3
            2,1
            3,2
            4,3
            5,4
            4,1
            5,2
models:
  - name: histogram2d-data-density
    source: ${ref(histogram2d-data-density-source)}
    sql: select * from model
insights:
  - name: 2D Histogram with Density Mode
    props:
      type: histogram2d
      x: ?{${ref(histogram2d-data-density).x}}
      y: ?{${ref(histogram2d-data-density).y}}
      histnorm: "density"
      colorscale: "Jet"
charts:
  - name: 2D Histogram with Density Mode
    insights:
      - ${ref(2D Histogram with Density Mode)}
    layout:
      title:
        text: 2D Histogram with Density Mode<br><sub>Density Distribution of Data</sub>
      xaxis:
        title:
          text: "X Axis"
      yaxis:
        title:
          text: "Y Axis"