Scattermap

Overview

The scattermap insight type is used to create scatter plots on a MapLibre map. This is ideal for visualizing geospatial data with the added customization and interactivity that MapLibre provides, including satellite imagery and street maps.

You can plot geographic points with latitude and longitude and customize the marker size, color, and labels to represent data effectively.

Common Uses

• Geospatial Analysis: Plotting geographic points on an interactive map.
• Location-Based Data: Visualizing locations and patterns on a MapLibre map.
• Mapping Events: Plotting real-world events, like earthquakes or delivery points.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Simple Scattermap InsightScattermap Insight with LinesScattermap Insight with Custom Marker Sizes and Colors

Here's a simple scattermap insight showing data points on a MapLibre map:

sources:
  - name: scattermap-data-source
    type: duckdb
    database: target/seeds/scattermap_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            lon,lat
            -73.9857,40.7484
            -118.2437,34.0522
            -0.1276,51.5074
            139.6917,35.6895
models:
  - name: scattermap-data
    source: ${ref(scattermap-data-source)}
    sql: select * from model
insights:
  - name: Simple Scattermap Insight
    props:
      type: scattermap
      lon: ?{${ref(scattermap-data).lon}}
      lat: ?{${ref(scattermap-data).lat}}
      mode: "markers"
      marker:
        size: 10
    interactions:
      - split: ?{ lon }
      - split: ?{ lat }
charts:
  - name: Simple Scattermap Chart
    insights:
      - ${ref(Simple Scattermap Insight)}
    layout:
      mapbox:
        style: "open-street-map"
      title:
        text: Simple Scattermap Plot<br><sub>Geographical Data Points on MapLibre</sub>

This example demonstrates a scattermap insight with lines connecting geographic points:

sources:
  - name: scattermap-data-lines-source
    type: duckdb
    database: target/seeds/scattermap_data_lines.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            lon,lat
            -73.9857,40.7484
            -118.2437,34.0522
            -0.1276,51.5074
            139.6917,35.6895
models:
  - name: scattermap-data-lines
    source: ${ref(scattermap-data-lines-source)}
    sql: select * from model
insights:
  - name: Scattermap Insight with Lines
    props:
      type: scattermap
      lon: ?{${ref(scattermap-data-lines).lon}}
      lat: ?{${ref(scattermap-data-lines).lat}}
      mode: "lines+markers"
      marker:
        size: 10
    interactions:
      - split: ?{ lon }
      - split: ?{ lat }
charts:
  - name: Scattermap Chart with Lines
    insights:
      - ${ref(Scattermap Insight with Lines)}
    layout:
      mapbox:
        style: "satellite-streets"
      title:
        text: Scattermap Plot with Lines<br><sub>Connecting Geographic Points on MapLibre</sub>

Here's a scattermap insight with custom marker sizes and colors:

sources:
  - name: scattermap-data-custom-source
    type: duckdb
    database: target/seeds/scattermap_data_custom.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            lon,lat,size,color
            -73.9857,40.7484,10,#1f77b4
            -118.2437,34.0522,15,#ff7f0e
            -0.1276,51.5074,20,#2ca02c
            139.6917,35.6895,25,#d62728
models:
  - name: scattermap-data-custom
    source: ${ref(scattermap-data-custom-source)}
    sql: select * from model
insights:
  - name: Scattermap Insight with Custom Markers
    props:
      type: scattermap
      lon: ?{${ref(scattermap-data-custom).lon}}
      lat: ?{${ref(scattermap-data-custom).lat}}
      mode: "markers"
      marker:
        size: ?{${ref(scattermap-data-custom).size}}
        color: ?{${ref(scattermap-data-custom).color}}
    interactions:
      - split: ?{ lon }
      - split: ?{ lat }
      - split: ?{ color }
charts:
  - name: Scattermap Chart with Custom Markers
    insights:
      - ${ref(Scattermap Insight with Custom Markers)}
    layout:
      mapbox:
        style: "dark"
      title:
        text: Scattermap Plot with Custom Markers<br><sub>Custom Sizes and Colors for Geographic Data Points</sub>