Plot Overlay with ggdeck()

The ggdeck() function enables multivariate comparison by synchronized overlaying of independent plots. This allows you to combine separate plot objects—each with its own coordinate system and geometries—into a unified view.

%useLatestDescriptors
%use dataframe
%use lets-plot

kotlin-logging: initializing... active logger factory: Slf4jLoggerFactory

LetsPlot.getInfo()

Lets-Plot Kotlin API v.4.14.0. Frontend: Notebook with dynamically loaded JS. Lets-Plot JS v.4.10.1.
Outputs: Web (HTML+JS), Kotlin Notebook (Swing), Static SVG (hidden)

1. Delhi Mean Temperature Chart

var climateData = DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-docs/refs/heads/master/data/delhi_climate.csv")
climateData.head(3)

DataFrame: rowsCount = 3, columnsCount = 5

date	meantemp	humidity	wind_speed	meanpressure
2013-01-01	10.000000	84.500000	0.000000	1015.666667
2013-01-02	7.400000	92.000000	2.980000	1017.800000
2013-01-03	7.166667	87.000000	4.633333	1018.666667

climateData.schema().print()

date: kotlinx.datetime.LocalDate
meantemp: Double
humidity: Double
wind_speed: Double
meanpressure: Double

val temperaturePlot = letsPlot(climateData.toMap()) +
    geomLine() {
        x = "date"
        y = "meantemp"
        color = "meantemp"
    } +
    scaleColorGradient2(
        low = "#0571b0",
        mid = "#f7f7f7",
        high = "#ca0020",
        midpoint = 30
    ) +
    labs(y = "Mean Temperature [°C]") +
    theme(
        axisTextY = elementText(color = "#0571b0"),
        axisTitleY = elementText(color = "#0571b0")
    )

temperaturePlot

2. Fictional 'Daily Ice Cream Cost' Data

fun calculateDailyCost(t: Double): Double {
    val baseCost = 1.5
    var surge = 0.0
    
    if (t > 30.0) {
        // Sharp surge above 30 degrees
        surge = 0.15 * (t - 30.0).pow(2)
    }
    
    return baseCost + surge
}

// Synthesize daily cost data and aggregate by month

// 1. Map the daily cost to a new column
val costDataTemp = climateData.add("daily_cost") {
    calculateDailyCost(it["meantemp"] as Double)
}

// 2. Group by Month-Start date and then aggregate
val costData = costDataTemp
    .add("month_start") {
        val date = it["date"] as kotlinx.datetime.LocalDate
        kotlinx.datetime.LocalDate(date.year, date.month, 1)
    }
    .groupBy("month_start")
    .aggregate {
        val dailyCosts = "daily_cost"<Double>()
        
        dailyCosts.mean() into "avg_daily_cost"
        dailyCosts.min() into "min_daily_cost"
        dailyCosts.max() into "max_daily_cost"
    }

costData.head(3)

DataFrame: rowsCount = 3, columnsCount = 4

month_start	avg_daily_cost	min_daily_cost	max_daily_cost
2013-01-01	1.500000	1.500000	1.500000
2013-02-01	1.500000	1.500000	1.500000
2013-03-01	1.500000	1.500000	1.500000

3. 'Daily Cost' Plot with Y-Axis on the Right

val costPlot = letsPlot(costData.toMap()) +
    geomBar(stat = Stat.identity, fill = "#F39C12", alpha = 0.4) {
        x = "month_start"
        y = "avg_daily_cost"
    } +
    geomPointRange(color = "#A04000", fatten = 3.0, size = 0.8) {
        x = "month_start"
        y = "avg_daily_cost"
        ymin = "min_daily_cost"
        ymax = "max_daily_cost"
    } +
    labs(y = "Daily Ice Cream Cost per Kid [\$]") +
    theme(
        axisTextY = elementText(color = "#A04000"),
        axisTitleY = elementText(color = "#A04000")
    ) +
    scaleYContinuous(position = "right")

costPlot

4. Composing the 'Temperature' and 'Daily Cost' Plots into a Deck

ggdeck(listOf(
        temperaturePlot + theme().legendPositionNone(),
        costPlot
    )) +
    theme(
        plotTitle = elementText(hjust = 0.5, size = 21)
    ) +
    ggtitle("Delhi Mean Temperature & Ice Cream Cost") +
    ggsize(800, 400)

5. Managing Tooltips in Composites

Since ggdeck() overlays independent plots, multiple tooltips may trigger simultaneously. This can lead to visual clutter and overlapping labels, especially on the axes.

To maintain clarity:

• Silence background layers: Disable tooltips on secondary geometries to reduce hover noise.
• Remove redundant axis labels: Suppress axis tooltips on overlaid plots to avoid duplication.
• Use anchored tooltips: Consolidate information into a fixed position.

// Configure tooltips on the 'Daily Cost' plot

val costPlot2 = letsPlot(costData.toMap()) +
    geomBar(stat = Stat.identity, fill = "#F39C12", alpha = 0.4, 
            tooltips = tooltipsNone  // <-- Disable all tooltips on bars
           ) {
        x = "month_start"
        y = "avg_daily_cost"
    } + 
    geomPointRange(color = "#A04000", fatten = 3.0, size = 0.8,
        tooltips = layerTooltips() // <-- Consolidate tooltips in a single panel
            .title("@month_start")
            .line("Avg | ^y")
            .line("Min | ^ymin")
            .line("Max | ^ymax")
            .format("^Y", "\${.2f}")
            .format("@month_start", "%b")
            .anchor("top_right") // <-- Anchor to the top-right corner
    ) {
        x = "month_start"
        y = "avg_daily_cost"
        ymin = "min_daily_cost"
        ymax = "max_daily_cost"
    } +
    theme(axisTooltipX = "blank") + // <-- Suppress redundant X-axis tooltips
    labs(y = "Daily Ice Cream Cost per Kid [\$]") +
    theme(
        axisTextY = elementText(color = "#A04000"),
        axisTitleY = elementText(color = "#A04000")
    ) +
    scaleYContinuous(position = "right")

costPlot2 + ggsize(800, 400)

6. Assembling the Updated 'Daily Cost' Plot into a Final Deck

ggdeck(listOf(
        temperaturePlot + theme().legendPositionNone(),
        costPlot2
    )) +
    theme(
        plotTitle = elementText(hjust = 0.5, size = 21)
    ) +
    ggtitle("Delhi Mean Temperature & Ice Cream Cost") +
    ggsize(800, 400)