Skip to content

Densitymapbox

Overview

The densitymapbox insight is used to create density maps on a Mapbox layer. This is commonly used to visualize the density of points in a geographical area. Density maps can help in identifying hotspots or areas with a higher concentration of data points.

You can customize the colorscale, radius of influence for each point, and other properties to fine-tune the visualization.

Common Uses

  • Geospatial Data Analysis: Identifying hotspots in geographic data, such as crime rates or customer locations.
  • Event Density: Visualizing the concentration of events or occurrences across regions.
  • Heatmap for Geographic Points: Creating heatmaps based on spatial data distributions on a map.

Check out the Attributes for the full set of configuration options.

Examples

Common Configurations

Here's a simple densitymapbox insight showing the density of random points on a Mapbox map:

sources:
  - name: densitymapbox-data-source
    type: duckdb
    database: target/seeds/densitymapbox_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            lat,lon
            37.7749,-122.4194
            34.0522,-118.2437
            40.7128,-74.0060
            41.8781,-87.6298
            29.7604,-95.3698
models:
  - name: densitymapbox-data
    source: ${ref(densitymapbox-data-source)}
    sql: select * from model
insights:
  - name: Simple Densitymapbox Insight
    props:
      type: densitymapbox
      lat: ?{${ref(densitymapbox-data).lat}}
      lon: ?{${ref(densitymapbox-data).lon}}
      radius: 10
      colorscale: "Viridis"
      zmin: 0
      zmax: 100
charts:
  - name: Simple Densitymapbox Chart
    insights:
      - ${ref(Simple Densitymapbox Insight)}
    layout:
      title:
        text: Simple Densitymapbox Insight<br><sub>Spatial Data Density</sub>
      mapbox:
        style: "carto-positron"
        zoom: 3
        center:
          lat: 37
          lon: -95

This example demonstrates a densitymapbox insight with a custom radius for the points, which influences how smooth the heatmap appears:

sources:
  - name: densitymapbox-data-radius-source
    type: duckdb
    database: target/seeds/densitymapbox_data_radius.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            lat,lon
            51.5074,-0.1278
            48.8566,2.3522
            52.5200,13.4050
            40.7128,-74.0060
            34.0522,-118.2437
models:
  - name: densitymapbox-data-radius
    source: ${ref(densitymapbox-data-radius-source)}
    sql: select * from model
insights:
  - name: Densitymapbox with Custom Radius
    props:
      type: densitymapbox
      lat: ?{${ref(densitymapbox-data-radius).lat}}
      lon: ?{${ref(densitymapbox-data-radius).lon}}
      radius: 20
      colorscale: "Jet"
      zmin: 0
      zmax: 50
charts:
  - name: Densitymapbox Chart with Custom Radius
    insights:
      - ${ref(Densitymapbox with Custom Radius)}
    layout:
      title:
        text: Densitymapbox Insight with Custom Radius<br><sub>Radius of Influence on Heatmap</sub>
      mapbox:
        style: "carto-darkmatter"
        zoom: 2
        center:
          lat: 50
          lon: 0

This example shows a densitymapbox insight with a custom colorscale and zoom centered on Europe:

sources:
  - name: densitymapbox-data-colorscale-source
    type: duckdb
    database: target/seeds/densitymapbox_data_colorscale.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            lat,lon
            48.8566,2.3522
            41.9028,12.4964
            52.3676,4.9041
            40.4168,-3.7038
            51.1657,10.4515
models:
  - name: densitymapbox-data-colorscale
    source: ${ref(densitymapbox-data-colorscale-source)}
    sql: select * from model
insights:
  - name: Densitymapbox with Custom Colorscale
    props:
      type: densitymapbox
      lat: ?{${ref(densitymapbox-data-colorscale).lat}}
      lon: ?{${ref(densitymapbox-data-colorscale).lon}}
      radius: 15
      colorscale: [[0, "rgb(255,245,240)"], [0.5, "rgb(252,146,114)"], [1, "rgb(165,15,21)"]]
      zmin: 0
      zmax: 50
charts:
  - name: Densitymapbox Chart with Custom Colorscale
    insights:
      - ${ref(Densitymapbox with Custom Colorscale)}
    layout:
      title:
        text: Densitymapbox Insight with Custom Colorscale<br><sub>Custom Coloring and Center</sub>
      mapbox:
        style: "carto-positron"
        zoom: 4
        center:
          lat: 48
          lon: 3