Histogram2dcontour

Overview

The histogram2dcontour insight type is used to create 2D contour plots that represent the density of data points across two dimensions. Similar to a 2D histogram, this plot type bins data along the x and y axes but visualizes the density using contour lines instead of filled colors.

You can customize the binning along both axes, contour lines, and the color mapping to suit your data. This insight type is useful for visualizing patterns and clusters in bivariate data.

Common Uses

• Density Contours: Showing how data points are distributed and clustered.
• Joint Distribution Analysis: Visualizing the relationship between two variables with density contours.
• Bivariate Statistical Analysis: Analyzing two variables and their joint behavior.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Simple 2D Contour Histogram2D Contour Histogram with Filled Contours2D Contour Histogram with Custom Bins

Here's a simple histogram2dcontour insight showing the density of data points using contour lines:

sources:
  - name: histogram2dcontour-data-source
    type: duckdb
    database: target/seeds/histogram2dcontour_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            x,y
            1,1
            2,3
            3,4
            4,5
            2,1
            3,2
            5,6
            4,2
            5,3
models:
  - name: histogram2dcontour-data
    source: ${ref(histogram2dcontour-data-source)}
    sql: select * from model
insights:
  - name: Simple 2D Contour Histogram
    props:
      type: histogram2dcontour
      x: ?{${ref(histogram2dcontour-data).x}}
      y: ?{${ref(histogram2dcontour-data).y}}
      colorscale: "Viridis"
      contours:
        coloring: "none"
charts:
  - name: Simple 2D Contour Histogram
    insights:
      - ${ref(Simple 2D Contour Histogram)}
    layout:
      title:
        text: Simple 2D Contour Histogram<br><sub>Density Contours of Bivariate Data</sub>
      xaxis:
        title:
          text: "X Axis"
      yaxis:
        title:
          text: "Y Axis"

Example with filled contour regions to better visualize data density:

sources:
  - name: histogram2dcontour-data-filled-source
    type: duckdb
    database: target/seeds/histogram2dcontour_data_filled.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            x,y
            2,1
            3,2
            4,3
            5,4
            6,5
            3,1
            4,2
            5,3
            6,4
models:
  - name: histogram2dcontour-data-filled
    source: ${ref(histogram2dcontour-data-filled-source)}
    sql: select * from model
insights:
  - name: 2D Contour Histogram with Filled Contours
    props:
      type: histogram2dcontour
      x: ?{${ref(histogram2dcontour-data-filled).x}}
      y: ?{${ref(histogram2dcontour-data-filled).y}}
      colorscale: "Blues"
      contours:
        coloring: "heatmap"
charts:
  - name: 2D Contour Histogram with Filled Contours
    insights:
      - ${ref(2D Contour Histogram with Filled Contours)}
    layout:
      title:
        text: 2D Contour Histogram with Filled Contours<br><sub>Filled Density Contours</sub>
      xaxis:
        title:
          text: "X Axis"
      yaxis:
        title:
          text: "Y Axis"

Example with custom bin sizes for both axes:

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