In [2]:

LetsPlot.getInfo()

Out[2]:

Lets-Plot Kotlin API v.4.4.2. Frontend: Notebook with dynamically loaded JS. Lets-Plot JS v.4.0.0.

In [3]:

var mpg_df = DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/mpg.csv")
mpg_df.head()

Out[3]:

DataFrame: rowsCount = 5, columnsCount = 12

In [4]:

val mpg_dat = mpg_df.toMap()

In [5]:

val p = letsPlot(mpg_dat) {x="displ"; y="cty"} + 
    scaleSize(range = 5 to 15, breaks = listOf(15, 40)) + ggsize(600, 350)

In [6]:

// Default tooltips.
p + geomPoint(shape=21, color="white") {fill="drv"; size="hwy"}

Out[6]:

In [7]:

// No tooltips.
p + geomPoint(shape=21, color="white", tooltips=tooltipsNone) {fill="drv"; size="hwy"}

Out[7]:

In [8]:

// Change format for the "size" aesthetic which is already shown in the tooltip by default.
p + geomPoint(shape=21,
              color="white",
              tooltips=layerTooltips().format("^size", "{.0f} mpg")) {fill="drv"; size="hwy"}

Out[8]:

In [9]:

// Show the vehicle "class" value in the tooltip (instead of the value of the "size" aesthetic).
p + geomPoint(shape=21, 
              color="white", 
              tooltips=layerTooltips().line("@class")) {fill="drv"; size="hwy"}

Out[9]:

In [10]:

// Configure a multiline tooltip.
p + geomPoint(shape=21, 
              color="white",
              tooltips=layerTooltips()
                          .format("cty", ".0f")
                          .format("hwy", ".0f")
                          .format("drv", "{}wd")
                          .line("@manufacturer @model")
                          .line("cty/hwy [mpg]|@cty/@hwy")
                          .line("@|@class")
                          .line("drive train|@drv")
                          .line("@|@year")) {fill="drv"; size="hwy"}

Out[10]:

In [11]:

// List of variables to place in a multiline tooltip with the default formatting.
p + geomPoint(shape=21, 
              color="white",
              tooltips=layerTooltips("manufacturer", "model", "class", "year")
             ) {fill="drv"; size="hwy"}

Out[11]:

In [12]:

// Define the format for the variable from the list and specify an additional line.
p + geomPoint(shape=21, 
              color="white",
              tooltips=layerTooltips("manufacturer", "model", "class", "drv")
                         .format("drv", "{}wd")
                         .line("cty/hwy [mpg]|@cty/@hwy")
             ) {fill="drv"; size="hwy"}

Out[12]:

In [13]:

// Anchor the tooltip in the top-right corner of the plot.
p + geomPoint(shape=21,
              color="white",
              tooltips=layerTooltips()
                          .anchor("top_right")
                          .minWidth(180)
                          .format("cty", ".0f")
                          .format("hwy", ".0f")
                          .format("drv", "{}wd")
                          .line("@manufacturer @model")
                          .line("cty/hwy [mpg]|@cty/@hwy")
                          .line("@|@class")
                          .line("drive train|@drv")
                          .line("@|@year")) {fill="drv"; size="hwy"}

Out[13]:

"Side" tooltips.¶

In [14]:

val p2 = letsPlot(mpg_dat) {x="class"; y="hwy"} + theme().legendPositionNone() + ggsize(600, 350)

// Default tooltips
p2 + geomBoxplot()

Out[14]:

In [15]:

// Configure text in outlier tootips using the 'format()' function.
p2 + geomBoxplot(tooltips=layerTooltips()
                    .format("^Y", "{.0f}")       // all Y-positionals (note: no 'labels')
                    .format("^middle", ".2f")    // different precision for 'middle' (note: default 'label')
                    .format("^ymin", "min: {}")  // ymin/ymax aesthetics:
                    .format("^ymax", "max: {}")) //  - add custom 'label'

Out[15]:

In [16]:

// Replace "side" tooltips with anchored (top_center) "general" tooltip.
// The 'line()' function assigns aesthetic or 'variable' to a general multiline tooltip.
p2 + geomBoxplot(tooltips=layerTooltips()
                    .anchor("top_center")
                    .format("^Y", ".0f")
                    .format("^middle", ".2f")
                    .line("min/max|^ymin/^ymax")
                    .line("lower/upper|^lower/^upper")
                    .line("@|^middle"))

Out[16]:

Showing constants in tooltip.¶

In [17]:

// By default tooltip never shows values defined via layer parameters (constants).
// Still, these values can be added to a layer tooltip using the 'layer_tooltips()' function.
val rand = java.util.Random()
val n = 100
val dat = mapOf<String, Any>(
    "x" to List(n) { rand.nextGaussian() },
    "y" to List(n) { rand.nextGaussian() }
)

letsPlot(dat) {x="x"; y="y"} + 
    geomPoint() +
    geomVLine(xintercept=(dat["x"] as List<Double>).average(), color="red", linetype="dashed", size=1,
              tooltips=layerTooltips().format("^xintercept", ".4f").line("mean = ^xintercept"))

Out[17]:

Some other examples.¶

In [18]:

val iris_df = DataFrame.readCSV("https://raw.githubusercontent.com/JetBrains/lets-plot-kotlin/master/docs/examples/data/iris.csv")
iris_df.head()

Out[18]:

DataFrame: rowsCount = 5, columnsCount = 5

In [19]:

val iris_dat = iris_df.toMap()

In [20]:

// Default density plot.
letsPlot(iris_dat) + ggsize(650, 300) + 
    geomArea(stat=Stat.density(), color="white") {x="sepal_length"; fill="species"}

Out[20]:

In [21]:

// Change the tooltip content.
letsPlot(iris_dat) + ggsize(650, 300) +
    geomArea(stat=Stat.density(),
             color="white",
             tooltips=layerTooltips()
                .anchor("top_right")
                .line("^fill")
                .line("length|^x")
                .line("density|^y")) {x="sepal_length"; fill="species"}

Out[21]:

In [22]:

// Use '..density..' variable in the tooltip
letsPlot(iris_dat) + ggsize(650, 300) +
    geomArea(stat=Stat.density(), 
             color="white",
             tooltips=layerTooltips()
                .anchor("top_right")
                .format("..density..", ".4f")
                .line("density|@..density..")) {x="sepal_length"; fill="species"}

Out[22]:

Tooltip Customization¶

"Side" tooltips.¶

Showing constants in tooltip.¶

Some other examples.¶