{ "cells": [ { "cell_type": "markdown", "id": "0eec6ea2-efb3-4db0-8292-55132ba56d21", "metadata": {}, "source": [ "# `Zoom` and `Pan` Interactivity\n", "\n", "Use the `ggtb()` function to enable `Pan` and `Zoom` interactivity on a chart.\n", "\n", "This function adds a toolbar containing three tool-buttons: pan, rubber-band zoom, and center-point zoom. \n", "\n", "Each tool uses **mouse-drag** for its specific functionality. Additionally, the **mouse wheel** can be used for zooming in and out, regardless of the selected tool.\n", "\n", "The behavior of these tools adapts to the initial mouse drag direction:\n", "- Near-horizontal drag: restricts panning to horizontal movement or creates a vertical band for zooming.\n", "- Near-vertical drag: limits panning to vertical movement or produces a horizontal band for zooming.\n", "- Diagonal drag: allows panning in any direction or creates a rectangular area for zooming.\n", "\n", "**Double-clicking** anywhere on the plot resets it to its original coordinates, regardless of whether a tool is selected or not.\n", "\n", "Click the 4th button, `Reset`, to reset the plot and tools to their original state." ] }, { "cell_type": "code", "execution_count": 1, "id": "c30b5821-0de3-4956-868e-136fe21f2cfa", "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", " " ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "
\n", " " ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ " " ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%useLatestDescriptors\n", "%use lets-plot\n", "%use dataframe" ] }, { "cell_type": "code", "execution_count": 2, "id": "cb9eb6f1-7618-447f-947c-69966aec823c", "metadata": {}, "outputs": [ { "data": { "text/plain": [ "Lets-Plot Kotlin API v.4.9.0. Frontend: Notebook with dynamically loaded JS. Lets-Plot JS v.4.5.1." ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "LetsPlot.getInfo()" ] }, { "cell_type": "code", "execution_count": 3, "id": "6c3e6be4-0c10-4d29-b23d-9f58f22c40cb", "metadata": {}, "outputs": [ { "data": { "application/kotlindataframe+json": "{\"nrow\":3,\"ncol\":12,\"columns\":[\"untitled\",\"manufacturer\",\"model\",\"displ\",\"year\",\"cyl\",\"trans\",\"drv\",\"cty\",\"hwy\",\"fl\",\"class\"],\"kotlin_dataframe\":[{\"untitled\":1,\"manufacturer\":\"audi\",\"model\":\"a4\",\"displ\":1.8,\"year\":1999,\"cyl\":4,\"trans\":\"auto(l5)\",\"drv\":\"f\",\"cty\":18,\"hwy\":29,\"fl\":\"p\",\"class\":\"compact\"},{\"untitled\":2,\"manufacturer\":\"audi\",\"model\":\"a4\",\"displ\":1.8,\"year\":1999,\"cyl\":4,\"trans\":\"manual(m5)\",\"drv\":\"f\",\"cty\":21,\"hwy\":29,\"fl\":\"p\",\"class\":\"compact\"},{\"untitled\":3,\"manufacturer\":\"audi\",\"model\":\"a4\",\"displ\":2.0,\"year\":2008,\"cyl\":4,\"trans\":\"manual(m6)\",\"drv\":\"f\",\"cty\":20,\"hwy\":31,\"fl\":\"p\",\"class\":\"compact\"}]}", "text/html": [ " \n", " \n", " \n", " \n", " \n", "
\n", "\n", "

DataFrame: rowsCount = 3, columnsCount = 12

\n", "
untitledmanufacturermodeldisplyearcyltransdrvctyhwyflclass
1audia41.80000019994auto(l5)f1829pcompact
2audia41.80000019994manual(m5)f2129pcompact
3audia42.00000020084manual(m6)f2031pcompact
\n", " \n", " \n", " " ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ "val mpg = DataFrame.readCSV(\"https://raw.githubusercontent.com/JetBrains/lets-plot-docs/master/data/mpg.csv\")\n", "mpg.head(3)" ] }, { "cell_type": "code", "execution_count": 4, "id": "afc221c1-d84a-448d-83b6-8c8ff0f33f49", "metadata": {}, "outputs": [ { "data": { "text/plain": [ "RasterData(2000 x 1334 x 4)" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "import javax.imageio.ImageIO\n", "import java.net.URL\n", "import org.jetbrains.letsPlot.geom.Extensions.create\n", "\n", "val url = URL(\"https://github.com/JetBrains/lets-plot/raw/master/docs/f-24g/images/shevy_impala_64.png\")\n", "val img = ImageIO.read(url)\n", "val shevy = RasterData.create(img)\n", "shevy" ] }, { "cell_type": "code", "execution_count": 5, "id": "d43f2e2a-80db-4780-8bd7-6662a0780831", "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", " " ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "val p = letsPlot(mpg.toMap()) {\n", " x = \"displ\"\n", " y = \"hwy\"\n", " color = \"manufacturer\" \n", " } + ggtb() + // <--- NEW!\n", " themeBW() +\n", " flavorHighContrastDark() +\n", " theme(axisTitle=\"blank\").legendPositionNone() +\n", " ggsize(1000, 600)\n", "\n", "p + geomImshow(shevy, extent = listOf(5.5, 7, 35, 45)) +\n", " geomPoint(position = positionJitter(height = 0, width = 0.1, seed = 0), \n", " tooltips = layerTooltips(\"displ\", \"cyl\", \"trans\")\n", " .title(\"@manufacturer @model @year\")) +\n", " geomLabel(checkOverlap = true, \n", " alpha = 0.5,\n", " position = positionJitter(seed = 0)) {label = \"model\"} +\n", " ggtitle(\"Highway MPG vs Engine displacement [L]\") +\n", " scaleColorBrewer(palette = \"Set3\") +\n", " scaleContinuous(aesthetic = listOf(\"x\", \"y\"), otherOptions = mapOf(\"position\" to \"both\")) +\n", " coordCartesian()\n" ] } ], "metadata": { "kernelspec": { "display_name": "Kotlin", "language": "kotlin", "name": "kotlin" }, "language_info": { "codemirror_mode": "text/x-kotlin", "file_extension": ".kt", "mimetype": "text/x-kotlin", "name": "kotlin", "nbconvert_exporter": "", "pygments_lexer": "kotlin", "version": "1.9.23" } }, "nbformat": 4, "nbformat_minor": 5 }