{
"cells": [
{
"cell_type": "markdown",
"id": "1c5474f7-dcb1-41ad-9ede-70a1b146f618",
"metadata": {},
"source": [
"# Multiline Axis Labels\n",
"\n",
"Multiline axis labels allow better visualization of long categorical values. Instead of overcrowding the axis, labels can now be formatted across multiple lines, enhancing readability. \n",
"\n",
"* To create a multiline axis label, simply add \"\\n\" inside the string where you want the line break."
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "de90a7f0-1e1d-4c26-acc0-8da15c2a96fc",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
" <div id=\"kotlin_out_0\"></div>\n",
" <script type=\"text/javascript\">\n",
" if(!window.kotlinQueues) {\n",
" window.kotlinQueues = {};\n",
" }\n",
" if(!window.kotlinQueues[\"DataFrame\"]) {\n",
" var resQueue = [];\n",
" window.kotlinQueues[\"DataFrame\"] = resQueue;\n",
" window[\"call_DataFrame\"] = function(f) {\n",
" resQueue.push(f);\n",
" }\n",
" }\n",
" (function (){\n",
" var modifiers = [(function(script) {\n",
" script.src = \"https://cdn.jsdelivr.net/gh/Kotlin/dataframe@3db46ccccaa1291c0627307d64133317f545e6ae/core/src/main/resources/init.js\"\n",
" script.type = \"text/javascript\";\n",
"})];\n",
" var e = document.getElementById(\"kotlin_out_0\");\n",
" modifiers.forEach(function (gen) {\n",
" var script = document.createElement(\"script\");\n",
" gen(script)\n",
" script.addEventListener(\"load\", function() {\n",
" window[\"call_DataFrame\"] = function(f) {f();};\n",
" window.kotlinQueues[\"DataFrame\"].forEach(function(f) {f();});\n",
" window.kotlinQueues[\"DataFrame\"] = [];\n",
" }, false);\n",
" script.addEventListener(\"error\", function() {\n",
" window[\"call_DataFrame\"] = function(f) {};\n",
" window.kotlinQueues[\"DataFrame\"] = [];\n",
" var div = document.createElement(\"div\");\n",
" div.style.color = 'darkred';\n",
" div.textContent = 'Error loading resource DataFrame';\n",
" document.getElementById(\"kotlin_out_0\").appendChild(div);\n",
" }, false);\n",
" \n",
" e.appendChild(script);\n",
" });\n",
" })();\n",
" </script>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
" <style>\n",
" :root {\n",
" --background: #fff;\n",
" --background-odd: #f5f5f5;\n",
" --background-hover: #d9edfd;\n",
" --header-text-color: #474747;\n",
" --text-color: #848484;\n",
" --text-color-dark: #000;\n",
" --text-color-medium: #737373;\n",
" --text-color-pale: #b3b3b3;\n",
" --inner-border-color: #aaa;\n",
" --bold-border-color: #000;\n",
" --link-color: #296eaa;\n",
" --link-color-pale: #296eaa;\n",
" --link-hover: #1a466c;\n",
"}\n",
"\n",
":root[theme=\"dark\"], :root [data-jp-theme-light=\"false\"], .dataframe_dark{\n",
" --background: #303030;\n",
" --background-odd: #3c3c3c;\n",
" --background-hover: #464646;\n",
" --header-text-color: #dddddd;\n",
" --text-color: #b3b3b3;\n",
" --text-color-dark: #dddddd;\n",
" --text-color-medium: #b2b2b2;\n",
" --text-color-pale: #737373;\n",
" --inner-border-color: #707070;\n",
" --bold-border-color: #777777;\n",
" --link-color: #008dc0;\n",
" --link-color-pale: #97e1fb;\n",
" --link-hover: #00688e;\n",
"}\n",
"\n",
"p.dataframe_description {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe {\n",
" font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n",
" font-size: 12px;\n",
" background-color: var(--background);\n",
" color: var(--text-color-dark);\n",
" border: none;\n",
" border-collapse: collapse;\n",
"}\n",
"\n",
"table.dataframe th, td {\n",
" padding: 6px;\n",
" border: 1px solid transparent;\n",
" text-align: left;\n",
"}\n",
"\n",
"table.dataframe th {\n",
" background-color: var(--background);\n",
" color: var(--header-text-color);\n",
"}\n",
"\n",
"table.dataframe td {\n",
" vertical-align: top;\n",
" white-space: nowrap;\n",
"}\n",
"\n",
"table.dataframe th.bottomBorder {\n",
" border-bottom-color: var(--bold-border-color);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:nth-child(odd) {\n",
" background: var(--background-odd);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:nth-child(even) {\n",
" background: var(--background);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:hover {\n",
" background: var(--background-hover);\n",
"}\n",
"\n",
"table.dataframe a {\n",
" cursor: pointer;\n",
" color: var(--link-color);\n",
" text-decoration: none;\n",
"}\n",
"\n",
"table.dataframe tr:hover > td a {\n",
" color: var(--link-color-pale);\n",
"}\n",
"\n",
"table.dataframe a:hover {\n",
" color: var(--link-hover);\n",
" text-decoration: underline;\n",
"}\n",
"\n",
"table.dataframe img {\n",
" max-width: fit-content;\n",
"}\n",
"\n",
"table.dataframe th.complex {\n",
" background-color: var(--background);\n",
" border: 1px solid var(--background);\n",
"}\n",
"\n",
"table.dataframe .leftBorder {\n",
" border-left-color: var(--inner-border-color);\n",
"}\n",
"\n",
"table.dataframe .rightBorder {\n",
" border-right-color: var(--inner-border-color);\n",
"}\n",
"\n",
"table.dataframe .rightAlign {\n",
" text-align: right;\n",
"}\n",
"\n",
"table.dataframe .expanderSvg {\n",
" width: 8px;\n",
" height: 8px;\n",
" margin-right: 3px;\n",
"}\n",
"\n",
"table.dataframe .expander {\n",
" display: flex;\n",
" align-items: center;\n",
"}\n",
"\n",
"/* formatting */\n",
"\n",
"table.dataframe .null {\n",
" color: var(--text-color-pale);\n",
"}\n",
"\n",
"table.dataframe .structural {\n",
" color: var(--text-color-medium);\n",
" font-weight: bold;\n",
"}\n",
"\n",
"table.dataframe .dataFrameCaption {\n",
" font-weight: bold;\n",
"}\n",
"\n",
"table.dataframe .numbers {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe td:hover .formatted .structural, .null {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe tr:hover .formatted .structural, .null {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"\n",
" </style>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
" <div id=\"WuhlpM\"></div>\n",
" <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
" if(!window.letsPlotCallQueue) {\n",
" window.letsPlotCallQueue = [];\n",
" }; \n",
" window.letsPlotCall = function(f) {\n",
" window.letsPlotCallQueue.push(f);\n",
" };\n",
" (function() {\n",
" var script = document.createElement(\"script\");\n",
" script.type = \"text/javascript\";\n",
" script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.6.1/js-package/distr/lets-plot.min.js\";\n",
" script.onload = function() {\n",
" window.letsPlotCall = function(f) {f();};\n",
" window.letsPlotCallQueue.forEach(function(f) {f();});\n",
" window.letsPlotCallQueue = [];\n",
" \n",
" \n",
" };\n",
" script.onerror = function(event) {\n",
" window.letsPlotCall = function(f) {};\n",
" window.letsPlotCallQueue = [];\n",
" var div = document.createElement(\"div\");\n",
" div.style.color = 'darkred';\n",
" div.textContent = 'Error loading Lets-Plot JS';\n",
" document.getElementById(\"WuhlpM\").appendChild(div);\n",
" };\n",
" var e = document.getElementById(\"WuhlpM\");\n",
" e.appendChild(script);\n",
" })();\n",
" </script>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
" <div id=\"kotlin_out_1\"></div>\n",
" <script type=\"text/javascript\">\n",
" if(!window.kotlinQueues) {\n",
" window.kotlinQueues = {};\n",
" }\n",
" if(!window.kotlinQueues[\"letsPlotJs\"]) {\n",
" var resQueue = [];\n",
" window.kotlinQueues[\"letsPlotJs\"] = resQueue;\n",
" window[\"call_letsPlotJs\"] = function(f) {\n",
" resQueue.push(f);\n",
" }\n",
" }\n",
" (function (){\n",
" var modifiers = [(function(script) {\n",
" script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.6.1/js-package/distr/lets-plot.min.js\"\n",
" script.type = \"text/javascript\";\n",
"})];\n",
" var e = document.getElementById(\"kotlin_out_1\");\n",
" modifiers.forEach(function (gen) {\n",
" var script = document.createElement(\"script\");\n",
" gen(script)\n",
" script.addEventListener(\"load\", function() {\n",
" window[\"call_letsPlotJs\"] = function(f) {f();};\n",
" window.kotlinQueues[\"letsPlotJs\"].forEach(function(f) {f();});\n",
" window.kotlinQueues[\"letsPlotJs\"] = [];\n",
" }, false);\n",
" script.addEventListener(\"error\", function() {\n",
" window[\"call_letsPlotJs\"] = function(f) {};\n",
" window.kotlinQueues[\"letsPlotJs\"] = [];\n",
" var div = document.createElement(\"div\");\n",
" div.style.color = 'darkred';\n",
" div.textContent = 'Error loading resource letsPlotJs';\n",
" document.getElementById(\"kotlin_out_1\").appendChild(div);\n",
" }, false);\n",
" \n",
" e.appendChild(script);\n",
" });\n",
" })();\n",
" </script>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"import kotlin.random.Random\n",
"\n",
"%useLatestDescriptors\n",
"%use dataframe\n",
"%use lets-plot"
]
},
{
"cell_type": "markdown",
"id": "da0c0aa7-62ef-4459-b128-9be1664a0403",
"metadata": {},
"source": [
"## Quarters & Years"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "60243931-5d37-4289-8f35-8c9ae8ca9a2f",
"metadata": {},
"outputs": [
{
"data": {
"application/kotlindataframe+json": "{\"nrow\":4,\"ncol\":3,\"columns\":[\"Quarter_Year\",\"Type\",\"Amount\"],\"kotlin_dataframe\":[{\"Quarter_Year\":\"Q1-2022\",\"Type\":\"Income\",\"Amount\":15425},{\"Quarter_Year\":\"Q1-2022\",\"Type\":\"Expenses\",\"Amount\":7232},{\"Quarter_Year\":\"Q2-2022\",\"Type\":\"Income\",\"Amount\":13012},{\"Quarter_Year\":\"Q2-2022\",\"Type\":\"Expenses\",\"Amount\":8337}]}",
"text/html": [
" <html>\n",
" <head>\n",
" <style type=\"text/css\">\n",
" :root {\n",
" --background: #fff;\n",
" --background-odd: #f5f5f5;\n",
" --background-hover: #d9edfd;\n",
" --header-text-color: #474747;\n",
" --text-color: #848484;\n",
" --text-color-dark: #000;\n",
" --text-color-medium: #737373;\n",
" --text-color-pale: #b3b3b3;\n",
" --inner-border-color: #aaa;\n",
" --bold-border-color: #000;\n",
" --link-color: #296eaa;\n",
" --link-color-pale: #296eaa;\n",
" --link-hover: #1a466c;\n",
"}\n",
"\n",
":root[theme=\"dark\"], :root [data-jp-theme-light=\"false\"], .dataframe_dark{\n",
" --background: #303030;\n",
" --background-odd: #3c3c3c;\n",
" --background-hover: #464646;\n",
" --header-text-color: #dddddd;\n",
" --text-color: #b3b3b3;\n",
" --text-color-dark: #dddddd;\n",
" --text-color-medium: #b2b2b2;\n",
" --text-color-pale: #737373;\n",
" --inner-border-color: #707070;\n",
" --bold-border-color: #777777;\n",
" --link-color: #008dc0;\n",
" --link-color-pale: #97e1fb;\n",
" --link-hover: #00688e;\n",
"}\n",
"\n",
"p.dataframe_description {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe {\n",
" font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n",
" font-size: 12px;\n",
" background-color: var(--background);\n",
" color: var(--text-color-dark);\n",
" border: none;\n",
" border-collapse: collapse;\n",
"}\n",
"\n",
"table.dataframe th, td {\n",
" padding: 6px;\n",
" border: 1px solid transparent;\n",
" text-align: left;\n",
"}\n",
"\n",
"table.dataframe th {\n",
" background-color: var(--background);\n",
" color: var(--header-text-color);\n",
"}\n",
"\n",
"table.dataframe td {\n",
" vertical-align: top;\n",
" white-space: nowrap;\n",
"}\n",
"\n",
"table.dataframe th.bottomBorder {\n",
" border-bottom-color: var(--bold-border-color);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:nth-child(odd) {\n",
" background: var(--background-odd);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:nth-child(even) {\n",
" background: var(--background);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:hover {\n",
" background: var(--background-hover);\n",
"}\n",
"\n",
"table.dataframe a {\n",
" cursor: pointer;\n",
" color: var(--link-color);\n",
" text-decoration: none;\n",
"}\n",
"\n",
"table.dataframe tr:hover > td a {\n",
" color: var(--link-color-pale);\n",
"}\n",
"\n",
"table.dataframe a:hover {\n",
" color: var(--link-hover);\n",
" text-decoration: underline;\n",
"}\n",
"\n",
"table.dataframe img {\n",
" max-width: fit-content;\n",
"}\n",
"\n",
"table.dataframe th.complex {\n",
" background-color: var(--background);\n",
" border: 1px solid var(--background);\n",
"}\n",
"\n",
"table.dataframe .leftBorder {\n",
" border-left-color: var(--inner-border-color);\n",
"}\n",
"\n",
"table.dataframe .rightBorder {\n",
" border-right-color: var(--inner-border-color);\n",
"}\n",
"\n",
"table.dataframe .rightAlign {\n",
" text-align: right;\n",
"}\n",
"\n",
"table.dataframe .expanderSvg {\n",
" width: 8px;\n",
" height: 8px;\n",
" margin-right: 3px;\n",
"}\n",
"\n",
"table.dataframe .expander {\n",
" display: flex;\n",
" align-items: center;\n",
"}\n",
"\n",
"/* formatting */\n",
"\n",
"table.dataframe .null {\n",
" color: var(--text-color-pale);\n",
"}\n",
"\n",
"table.dataframe .structural {\n",
" color: var(--text-color-medium);\n",
" font-weight: bold;\n",
"}\n",
"\n",
"table.dataframe .dataFrameCaption {\n",
" font-weight: bold;\n",
"}\n",
"\n",
"table.dataframe .numbers {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe td:hover .formatted .structural, .null {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe tr:hover .formatted .structural, .null {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"\n",
":root {\n",
" --background: #fff;\n",
" --background-odd: #f5f5f5;\n",
" --background-hover: #d9edfd;\n",
" --header-text-color: #474747;\n",
" --text-color: #848484;\n",
" --text-color-dark: #000;\n",
" --text-color-medium: #737373;\n",
" --text-color-pale: #b3b3b3;\n",
" --inner-border-color: #aaa;\n",
" --bold-border-color: #000;\n",
" --link-color: #296eaa;\n",
" --link-color-pale: #296eaa;\n",
" --link-hover: #1a466c;\n",
"}\n",
"\n",
":root[theme=\"dark\"], :root [data-jp-theme-light=\"false\"], .dataframe_dark{\n",
" --background: #303030;\n",
" --background-odd: #3c3c3c;\n",
" --background-hover: #464646;\n",
" --header-text-color: #dddddd;\n",
" --text-color: #b3b3b3;\n",
" --text-color-dark: #dddddd;\n",
" --text-color-medium: #b2b2b2;\n",
" --text-color-pale: #737373;\n",
" --inner-border-color: #707070;\n",
" --bold-border-color: #777777;\n",
" --link-color: #008dc0;\n",
" --link-color-pale: #97e1fb;\n",
" --link-hover: #00688e;\n",
"}\n",
"\n",
"p.dataframe_description {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe {\n",
" font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n",
" font-size: 12px;\n",
" background-color: var(--background);\n",
" color: var(--text-color-dark);\n",
" border: none;\n",
" border-collapse: collapse;\n",
"}\n",
"\n",
"table.dataframe th, td {\n",
" padding: 6px;\n",
" border: 1px solid transparent;\n",
" text-align: left;\n",
"}\n",
"\n",
"table.dataframe th {\n",
" background-color: var(--background);\n",
" color: var(--header-text-color);\n",
"}\n",
"\n",
"table.dataframe td {\n",
" vertical-align: top;\n",
" white-space: nowrap;\n",
"}\n",
"\n",
"table.dataframe th.bottomBorder {\n",
" border-bottom-color: var(--bold-border-color);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:nth-child(odd) {\n",
" background: var(--background-odd);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:nth-child(even) {\n",
" background: var(--background);\n",
"}\n",
"\n",
"table.dataframe tbody > tr:hover {\n",
" background: var(--background-hover);\n",
"}\n",
"\n",
"table.dataframe a {\n",
" cursor: pointer;\n",
" color: var(--link-color);\n",
" text-decoration: none;\n",
"}\n",
"\n",
"table.dataframe tr:hover > td a {\n",
" color: var(--link-color-pale);\n",
"}\n",
"\n",
"table.dataframe a:hover {\n",
" color: var(--link-hover);\n",
" text-decoration: underline;\n",
"}\n",
"\n",
"table.dataframe img {\n",
" max-width: fit-content;\n",
"}\n",
"\n",
"table.dataframe th.complex {\n",
" background-color: var(--background);\n",
" border: 1px solid var(--background);\n",
"}\n",
"\n",
"table.dataframe .leftBorder {\n",
" border-left-color: var(--inner-border-color);\n",
"}\n",
"\n",
"table.dataframe .rightBorder {\n",
" border-right-color: var(--inner-border-color);\n",
"}\n",
"\n",
"table.dataframe .rightAlign {\n",
" text-align: right;\n",
"}\n",
"\n",
"table.dataframe .expanderSvg {\n",
" width: 8px;\n",
" height: 8px;\n",
" margin-right: 3px;\n",
"}\n",
"\n",
"table.dataframe .expander {\n",
" display: flex;\n",
" align-items: center;\n",
"}\n",
"\n",
"/* formatting */\n",
"\n",
"table.dataframe .null {\n",
" color: var(--text-color-pale);\n",
"}\n",
"\n",
"table.dataframe .structural {\n",
" color: var(--text-color-medium);\n",
" font-weight: bold;\n",
"}\n",
"\n",
"table.dataframe .dataFrameCaption {\n",
" font-weight: bold;\n",
"}\n",
"\n",
"table.dataframe .numbers {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe td:hover .formatted .structural, .null {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"table.dataframe tr:hover .formatted .structural, .null {\n",
" color: var(--text-color-dark);\n",
"}\n",
"\n",
"\n",
" </style>\n",
" </head>\n",
" <body>\n",
" <table class=\"dataframe\" id=\"df_1140850688\"></table>\n",
"\n",
"<p class=\"dataframe_description\">DataFrame: rowsCount = 4, columnsCount = 3</p>\n",
"<table class=\"dataframe\" id=\"static_df_1140850689\"><thead><tr><th class=\"bottomBorder\" style=\"text-align:left\">Quarter_Year</th><th class=\"bottomBorder\" style=\"text-align:left\">Type</th><th class=\"bottomBorder\" style=\"text-align:left\">Amount</th></tr></thead><tbody><tr><td style=\"vertical-align:top\">Q1-2022</td><td style=\"vertical-align:top\">Income</td><td style=\"vertical-align:top\">15425</td></tr><tr><td style=\"vertical-align:top\">Q1-2022</td><td style=\"vertical-align:top\">Expenses</td><td style=\"vertical-align:top\">7232</td></tr><tr><td style=\"vertical-align:top\">Q2-2022</td><td style=\"vertical-align:top\">Income</td><td style=\"vertical-align:top\">13012</td></tr><tr><td style=\"vertical-align:top\">Q2-2022</td><td style=\"vertical-align:top\">Expenses</td><td style=\"vertical-align:top\">8337</td></tr></tbody></table>\n",
" </body>\n",
" <script>\n",
" /*<!--*/\n",
"call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: \"<span title=\\\"Quarter_Year: String\\\">Quarter_Year</span>\", children: [], rightAlign: false, values: [\"Q1-2022\",\"Q1-2022\",\"Q2-2022\",\"Q2-2022\"] }, \n",
"{ name: \"<span title=\\\"Type: String\\\">Type</span>\", children: [], rightAlign: false, values: [\"Income\",\"Expenses\",\"Income\",\"Expenses\"] }, \n",
"{ name: \"<span title=\\\"Amount: Int\\\">Amount</span>\", children: [], rightAlign: true, values: [\"<span class=\\\"formatted\\\" title=\\\"\\\"><span class=\\\"numbers\\\">15425</span></span>\",\"<span class=\\\"formatted\\\" title=\\\"\\\"><span class=\\\"numbers\\\">7232</span></span>\",\"<span class=\\\"formatted\\\" title=\\\"\\\"><span class=\\\"numbers\\\">13012</span></span>\",\"<span class=\\\"formatted\\\" title=\\\"\\\"><span class=\\\"numbers\\\">8337</span></span>\"] }, \n",
"], id: 1140850688, rootId: 1140850688, totalRows: 4 } ) });\n",
"/*-->*/\n",
"\n",
"call_DataFrame(function() { DataFrame.renderTable(1140850688) });\n",
"\n",
"document.getElementById(\"static_df_1140850689\").style.display = \"none\";\n",
" </script>\n",
" </html>"
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"// Create a DataFrame with artificial income and expenses\n",
"val years = listOf(2022, 2023, 2024)\n",
"val quarters = listOf(\"Q1\", \"Q2\", \"Q3\", \"Q4\")\n",
"\n",
"val quarterYears = mutableListOf<String>()\n",
"val types = mutableListOf<String>()\n",
"val amounts = mutableListOf<Int>()\n",
"\n",
"for (year in years) {\n",
" val baseIncome = Random.nextInt(5000, 15000)\n",
" val baseExpenses = baseIncome * Random.nextDouble(0.6, 0.9)\n",
" \n",
" for (quarter in quarters) {\n",
" val income = baseIncome + Random.nextInt(-2000, 2000)\n",
" val expenses = baseExpenses + Random.nextInt(-1500, 1500)\n",
" val quarterYear = \"$quarter-$year\"\n",
" \n",
" quarterYears.add(quarterYear)\n",
" types.add(\"Income\")\n",
" amounts.add(income.toInt())\n",
" \n",
" quarterYears.add(quarterYear)\n",
" types.add(\"Expenses\")\n",
" amounts.add(expenses.toInt())\n",
" }\n",
"}\n",
"\n",
"val df = dataFrameOf(\"Quarter_Year\" to quarterYears, \"Type\" to types, \"Amount\" to amounts)\n",
"df.head(4)"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "91397a5c-5128-4e5f-8789-1860838d867e",
"metadata": {},
"outputs": [],
"source": [
"// Multiline labels for X-axis\n",
"val xLabelsMapping = years.flatMap { year ->\n",
" quarters.map { quarter -> if (quarter == \"Q1\") \"$quarter\\n$year\" else quarter }\n",
"}"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "228eb185-bdf6-4075-b928-d910b4bf8217",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
" <div id=\"yUIlDi\"></div>\n",
" <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
" if(!window.letsPlotCallQueue) {\n",
" window.letsPlotCallQueue = [];\n",
" }; \n",
" window.letsPlotCall = function(f) {\n",
" window.letsPlotCallQueue.push(f);\n",
" };\n",
" (function() {\n",
" var script = document.createElement(\"script\");\n",
" script.type = \"text/javascript\";\n",
" script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.6.1/js-package/distr/lets-plot.min.js\";\n",
" script.onload = function() {\n",
" window.letsPlotCall = function(f) {f();};\n",
" window.letsPlotCallQueue.forEach(function(f) {f();});\n",
" window.letsPlotCallQueue = [];\n",
" \n",
" \n",
" };\n",
" script.onerror = function(event) {\n",
" window.letsPlotCall = function(f) {};\n",
" window.letsPlotCallQueue = [];\n",
" var div = document.createElement(\"div\");\n",
" div.style.color = 'darkred';\n",
" div.textContent = 'Error loading Lets-Plot JS';\n",
" document.getElementById(\"yUIlDi\").appendChild(div);\n",
" };\n",
" var e = document.getElementById(\"yUIlDi\");\n",
" e.appendChild(script);\n",
" })();\n",
" </script>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/plot+json": {
"apply_color_scheme": true,
"output": {
"data": {
"Amount": [
15425,
7232,
13012,
8337,
12547,
8680,
15877,
8348,
6557,
6358,
5930,
6412,
4462,
6108,
6076,
6687,
7054,
6273,
8946,
8212,
9370,
7842,
8567,
8284
],
"Quarter_Year": [
"Q1-2022",
"Q1-2022",
"Q2-2022",
"Q2-2022",
"Q3-2022",
"Q3-2022",
"Q4-2022",
"Q4-2022",
"Q1-2023",
"Q1-2023",
"Q2-2023",
"Q2-2023",
"Q3-2023",
"Q3-2023",
"Q4-2023",
"Q4-2023",
"Q1-2024",
"Q1-2024",
"Q2-2024",
"Q2-2024",
"Q3-2024",
"Q3-2024",
"Q4-2024",
"Q4-2024"
],
"Type": [
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses",
"Income",
"Expenses"
]
},
"data_meta": {
"series_annotations": [
{
"column": "Quarter_Year",
"type": "str"
},
{
"column": "Type",
"type": "str"
},
{
"column": "Amount",
"type": "int"
}
]
},
"ggtitle": {
"text": "Quarterly Income vs Expenses"
},
"guides": {
"x": {
"title": "Quarters"
},
"y": {
"title": "Amount ($)"
}
},
"kind": "plot",
"layers": [
{
"geom": "line",
"mapping": {},
"position": "identity",
"size": 1.5,
"stat": "identity"
},
{
"geom": "point",
"mapping": {},
"position": "identity",
"size": 4,
"stat": "identity"
}
],
"mapping": {
"color": "Type",
"x": "Quarter_Year",
"y": "Amount"
},
"scales": [
{
"aesthetic": "x",
"discrete": true,
"labels": [
"Q1\n2022",
"Q2",
"Q3",
"Q4",
"Q1\n2023",
"Q2",
"Q3",
"Q4",
"Q1\n2024",
"Q2",
"Q3",
"Q4"
]
}
],
"theme": {
"axis_text_x": {
"angle": 30,
"blank": false
}
}
},
"output_type": "lets_plot_spec",
"swing_enabled": true
},
"text/html": [
" <div id=\"TKCMYs\"></div>\n",
" <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
" \n",
" (function() {\n",
" // ----------\n",
" \n",
" const forceImmediateRender = false;\n",
" const responsive = false;\n",
" \n",
" let sizing = {\n",
" width_mode: \"MIN\",\n",
" height_mode: \"SCALED\",\n",
" width: null, \n",
" height: null \n",
" };\n",
" \n",
" const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
" if (preferredWidth !== undefined) {\n",
" sizing = {\n",
" width_mode: 'FIXED',\n",
" height_mode: 'SCALED',\n",
" width: parseFloat(preferredWidth)\n",
" };\n",
" }\n",
" \n",
" const containerDiv = document.getElementById(\"TKCMYs\");\n",
" let fig = null;\n",
" \n",
" function renderPlot() {\n",
" if (fig === null) {\n",
" const plotSpec = {\n",
"\"ggtitle\":{\n",
"\"text\":\"Quarterly Income vs Expenses\"\n",
"},\n",
"\"mapping\":{\n",
"\"x\":\"Quarter_Year\",\n",
"\"y\":\"Amount\",\n",
"\"color\":\"Type\"\n",
"},\n",
"\"guides\":{\n",
"\"x\":{\n",
"\"title\":\"Quarters\"\n",
"},\n",
"\"y\":{\n",
"\"title\":\"Amount ($)\"\n",
"}\n",
"},\n",
"\"data\":{\n",
"\"Type\":[\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\",\"Income\",\"Expenses\"],\n",
"\"Quarter_Year\":[\"Q1-2022\",\"Q1-2022\",\"Q2-2022\",\"Q2-2022\",\"Q3-2022\",\"Q3-2022\",\"Q4-2022\",\"Q4-2022\",\"Q1-2023\",\"Q1-2023\",\"Q2-2023\",\"Q2-2023\",\"Q3-2023\",\"Q3-2023\",\"Q4-2023\",\"Q4-2023\",\"Q1-2024\",\"Q1-2024\",\"Q2-2024\",\"Q2-2024\",\"Q3-2024\",\"Q3-2024\",\"Q4-2024\",\"Q4-2024\"],\n",
"\"Amount\":[15425.0,7232.0,13012.0,8337.0,12547.0,8680.0,15877.0,8348.0,6557.0,6358.0,5930.0,6412.0,4462.0,6108.0,6076.0,6687.0,7054.0,6273.0,8946.0,8212.0,9370.0,7842.0,8567.0,8284.0]\n",
"},\n",
"\"kind\":\"plot\",\n",
"\"scales\":[{\n",
"\"aesthetic\":\"x\",\n",
"\"discrete\":true,\n",
"\"labels\":[\"Q1\\n2022\",\"Q2\",\"Q3\",\"Q4\",\"Q1\\n2023\",\"Q2\",\"Q3\",\"Q4\",\"Q1\\n2024\",\"Q2\",\"Q3\",\"Q4\"]\n",
"}],\n",
"\"layers\":[{\n",
"\"mapping\":{\n",
"},\n",
"\"stat\":\"identity\",\n",
"\"size\":1.5,\n",
"\"position\":\"identity\",\n",
"\"geom\":\"line\",\n",
"\"data\":{\n",
"}\n",
"},{\n",
"\"mapping\":{\n",
"},\n",
"\"stat\":\"identity\",\n",
"\"size\":4.0,\n",
"\"position\":\"identity\",\n",
"\"geom\":\"point\",\n",
"\"data\":{\n",
"}\n",
"}],\n",
"\"theme\":{\n",
"\"axis_text_x\":{\n",
"\"angle\":30.0,\n",
"\"blank\":false\n",
"}\n",
"},\n",
"\"data_meta\":{\n",
"\"series_annotations\":[{\n",
"\"type\":\"str\",\n",
"\"column\":\"Quarter_Year\"\n",
"},{\n",
"\"type\":\"str\",\n",
"\"column\":\"Type\"\n",
"},{\n",
"\"type\":\"int\",\n",
"\"column\":\"Amount\"\n",
"}]\n",
"},\n",
"\"spec_id\":\"1\"\n",
"};\n",
" window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
" } else {\n",
" fig.updateView({});\n",
" }\n",
" }\n",
" \n",
" const renderImmediately = \n",
" forceImmediateRender || (\n",
" sizing.width_mode === 'FIXED' && \n",
" (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
" );\n",
" \n",
" if (renderImmediately) {\n",
" renderPlot();\n",
" }\n",
" \n",
" if (!renderImmediately || responsive) {\n",
" // Set up observer for initial sizing or continuous monitoring\n",
" var observer = new ResizeObserver(function(entries) {\n",
" for (let entry of entries) {\n",
" if (entry.contentBoxSize && \n",
" entry.contentBoxSize[0].inlineSize > 0) {\n",
" if (!responsive && observer) {\n",
" observer.disconnect();\n",
" observer = null;\n",
" }\n",
" renderPlot();\n",
" if (!responsive) {\n",
" break;\n",
" }\n",
" }\n",
" }\n",
" });\n",
" \n",
" observer.observe(containerDiv);\n",
" }\n",
" \n",
" // ----------\n",
" })();\n",
" \n",
" </script> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=aac2d731-ef60-4128-8df8-3b975fdfce6e width=\"100%\" height=\"100%\" style=\"max-width: 600.0px; max-height: 400.0px;\" viewBox=\"0 0 600.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
" <style type=\"text/css\">\n",
" .plt-container {\n",
" font-family: Lucida Grande, sans-serif;\n",
" user-select: none;\n",
" -webkit-user-select: none;\n",
" -moz-user-select: none;\n",
" -ms-user-select: none;\n",
"}\n",
"text {\n",
" text-rendering: optimizeLegibility;\n",
"}\n",
"#pCfNSZ3 .plot-title {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 16.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .plot-subtitle {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 15.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .plot-caption {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .hyperlink-element {\n",
"fill: #118ed8;\n",
"font-weight: normal;\n",
" font-style: normal;\n",
"}\n",
"#pCfNSZ3 .legend-title {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 15.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .legend-item {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .axis-title-x {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 15.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .axis-text-x {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#drtdga5 .axis-tooltip-text-x {\n",
"fill: #ffffff;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .axis-title-y {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 15.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .axis-text-y {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#drtdga5 .axis-tooltip-text-y {\n",
"fill: #ffffff;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .facet-strip-text-x {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#pCfNSZ3 .facet-strip-text-y {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#drtdga5 .tooltip-text {\n",
"fill: #474747;\n",
"font-weight: normal;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#drtdga5 .tooltip-title {\n",
"fill: #474747;\n",
"font-weight: bold;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"#drtdga5 .tooltip-label {\n",
"fill: #474747;\n",
"font-weight: bold;\n",
" font-style: normal;font-family: Lucida Grande, sans-serif;\n",
"font-size: 13.0px;\n",
"\n",
"}\n",
"\n",
" </style>\n",
" <g id=\"pCfNSZ3\">\n",
" <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\">\n",
" </path>\n",
" <g transform=\"translate(29.5 26.5 ) \">\n",
" <g>\n",
" <g transform=\"translate(50.97651758668602 0.0 ) \">\n",
" <g>\n",
" <line x1=\"6.970890775417484\" y1=\"0.0\" x2=\"6.970890775417484\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"41.825344652504896\" y1=\"0.0\" x2=\"41.825344652504896\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"76.67979852959232\" y1=\"0.0\" x2=\"76.67979852959232\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"111.53425240667973\" y1=\"0.0\" x2=\"111.53425240667973\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"146.38870628376714\" y1=\"0.0\" x2=\"146.38870628376714\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"181.24316016085456\" y1=\"0.0\" x2=\"181.24316016085456\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"216.09761403794195\" y1=\"0.0\" x2=\"216.09761403794195\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"250.95206791502937\" y1=\"0.0\" x2=\"250.95206791502937\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"285.8065217921168\" y1=\"0.0\" x2=\"285.8065217921168\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"320.6609756692042\" y1=\"0.0\" x2=\"320.6609756692042\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"355.51542954629167\" y1=\"0.0\" x2=\"355.51542954629167\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"390.36988342337906\" y1=\"0.0\" x2=\"390.36988342337906\" y2=\"306.39999540319974\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(50.97651758668602 0.0 ) \">\n",
" <g>\n",
" <line x1=\"0.0\" y1=\"303.74631010075893\" x2=\"397.34077419879645\" y2=\"303.74631010075893\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"0.0\" y1=\"254.9429022397786\" x2=\"397.34077419879645\" y2=\"254.9429022397786\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"0.0\" y1=\"206.13949437879825\" x2=\"397.34077419879645\" y2=\"206.13949437879825\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"0.0\" y1=\"157.33608651781793\" x2=\"397.34077419879645\" y2=\"157.33608651781793\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"0.0\" y1=\"108.53267865683762\" x2=\"397.34077419879645\" y2=\"108.53267865683762\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"0.0\" y1=\"59.729270795857246\" x2=\"397.34077419879645\" y2=\"59.729270795857246\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" <line x1=\"0.0\" y1=\"10.925862934876932\" x2=\"397.34077419879645\" y2=\"10.925862934876932\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
" </line>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" <g clip-path=\"url(#cAmJxA8)\" clip-bounds-jfx=\"[rect (50.97651758668602, 0.0), (397.34077419879645, 306.39999540319974)]\">\n",
" <g transform=\"translate(50.97651758668602 0.0 ) \">\n",
" <g>\n",
" <g>\n",
" <g>\n",
" <path d=\"M6.970890775417484 24.9568426949088 L6.970890775417484 24.9568426949088 L41.825344652504896 83.83815427918154 L76.67979852959232 95.18494660685946 L111.53425240667973 13.927272518327243 L146.38870628376714 241.35115315049555 L181.24316016085456 256.6510215149129 L216.09761403794195 292.47272288487244 L250.95206791502937 253.08837274106133 L285.8065217921168 229.22350629704195 L320.6609756692042 183.05548246055454 L355.51542954629167 172.70915999402672 L390.36988342337906 192.30372825021033 \" fill=\"none\" stroke-width=\"3.3000000000000003\" stroke=\"rgb(228,26,28)\" stroke-opacity=\"1.0\">\n",
" </path>\n",
" </g>\n",
" <g>\n",
" <path d=\"M6.970890775417484 224.8800029974147 L6.970890775417484 224.8800029974147 L41.825344652504896 197.91612015422305 L76.67979852959232 189.54633570606492 L111.53425240667973 197.64770141098768 L146.38870628376714 246.2070922326631 L181.24316016085456 244.88940022041663 L216.09761403794195 252.30751821528563 L250.95206791502937 238.17893163953184 L285.8065217921168 248.28123706675476 L320.6609756692042 200.96633314553432 L355.51542954629167 209.9949635998157 L390.36988342337906 199.20941046253904 \" fill=\"none\" stroke-width=\"3.3000000000000003\" stroke=\"rgb(55,126,184)\" stroke-opacity=\"1.0\">\n",
" </path>\n",
" </g>\n",
" </g>\n",
" <g>\n",
" <g>\n",
" <g >\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"6.970890775417484\" cy=\"24.9568426949088\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"6.970890775417484\" cy=\"224.8800029974147\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"41.825344652504896\" cy=\"83.83815427918154\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"41.825344652504896\" cy=\"197.91612015422305\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"76.67979852959232\" cy=\"95.18494660685946\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"76.67979852959232\" cy=\"189.54633570606492\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"111.53425240667973\" cy=\"13.927272518327243\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"111.53425240667973\" cy=\"197.64770141098768\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"146.38870628376714\" cy=\"241.35115315049555\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"146.38870628376714\" cy=\"246.2070922326631\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"181.24316016085456\" cy=\"256.6510215149129\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"181.24316016085456\" cy=\"244.88940022041663\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"216.09761403794195\" cy=\"292.47272288487244\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"216.09761403794195\" cy=\"252.30751821528563\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"250.95206791502937\" cy=\"253.08837274106133\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"250.95206791502937\" cy=\"238.17893163953184\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"285.8065217921168\" cy=\"229.22350629704195\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"285.8065217921168\" cy=\"248.28123706675476\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"320.6609756692042\" cy=\"183.05548246055454\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"320.6609756692042\" cy=\"200.96633314553432\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"355.51542954629167\" cy=\"172.70915999402672\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"355.51542954629167\" cy=\"209.9949635998157\" r=\"4.4\" />\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"390.36988342337906\" cy=\"192.30372825021033\" r=\"4.4\" />\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"390.36988342337906\" cy=\"199.20941046253904\" r=\"4.4\" />\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" <defs>\n",
" <clipPath id=\"cblWmoF\">\n",
" <rect x=\"50.97651758668602\" y=\"0.0\" width=\"397.34077419879645\" height=\"306.39999540319974\">\n",
" </rect>\n",
" </clipPath>\n",
" </defs>\n",
" <defs>\n",
" <clipPath id=\"cAmJxA8\">\n",
" <rect x=\"50.97651758668602\" y=\"0.0\" width=\"397.34077419879645\" height=\"306.39999540319974\">\n",
" </rect>\n",
" </clipPath>\n",
" </defs>\n",
" </g>\n",
" <g>\n",
" <g transform=\"translate(50.97651758668602 306.39999540319974 ) \">\n",
" <g transform=\"translate(6.970890775417484 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q1</tspan>\n",
" </text>\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"13.0\">\n",
" <tspan>2022</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(41.825344652504896 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q2</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(76.67979852959232 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q3</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(111.53425240667973 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q4</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(146.38870628376714 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q1</tspan>\n",
" </text>\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"13.0\">\n",
" <tspan>2023</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(181.24316016085456 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q2</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(216.09761403794195 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q3</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(250.95206791502937 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q4</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(285.8065217921168 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q1</tspan>\n",
" </text>\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"13.0\">\n",
" <tspan>2024</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(320.6609756692042 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q2</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(355.51542954629167 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q3</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(390.36988342337906 0.0 ) \">\n",
" <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
" </line>\n",
" <g transform=\"translate(0.0 7.0 ) rotate(-30.0 ) \">\n",
" <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.7em\" y=\"0.0\">\n",
" <tspan>Q4</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <line x1=\"0.0\" y1=\"0.0\" x2=\"397.34077419879645\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
" </line>\n",
" </g>\n",
" <g transform=\"translate(50.97651758668602 0.0 ) \">\n",
" <g transform=\"translate(0.0 303.74631010075893 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>4,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 254.9429022397786 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>6,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 206.13949437879825 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>8,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 157.33608651781793 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>10,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 108.53267865683762 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>12,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 59.729270795857246 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>14,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 10.925862934876932 ) \">\n",
" <g transform=\"translate(-3.0 0.0 ) \">\n",
" <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
" <tspan>16,000</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(80.47651758668601 16.8 ) \">\n",
" <text class=\"plot-title\" y=\"0.0\">\n",
" <tspan>Quarterly Income vs Expenses</tspan>\n",
" </text>\n",
" </g>\n",
" <g transform=\"translate(16.0 179.69999770159987 ) rotate(-90.0 ) \">\n",
" <text class=\"axis-title-y\" y=\"0.0\" text-anchor=\"middle\">\n",
" <tspan>Amount ($)</tspan>\n",
" </text>\n",
" </g>\n",
" <g transform=\"translate(279.1469046860842 393.0 ) \">\n",
" <text class=\"axis-title-x\" y=\"0.0\" text-anchor=\"middle\">\n",
" <tspan>Quarters</tspan>\n",
" </text>\n",
" </g>\n",
" <g transform=\"translate(489.3172917854825 140.44999770159987 ) \">\n",
" <rect x=\"0.0\" y=\"0.0\" height=\"78.5\" width=\"110.68270821451749\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\">\n",
" </rect>\n",
" <g transform=\"translate(5.0 5.0 ) \">\n",
" <g transform=\"translate(0.0 12.0 ) \">\n",
" <text class=\"legend-title\" y=\"0.0\">\n",
" <tspan>Type</tspan>\n",
" </text>\n",
" </g>\n",
" <g transform=\"translate(0.0 22.5 ) \">\n",
" <g transform=\"\">\n",
" <g>\n",
" <g transform=\"translate(1.0 1.0 ) \">\n",
" <g>\n",
" <line x1=\"0.0\" y1=\"10.5\" x2=\"21.0\" y2=\"10.5\" stroke=\"rgb(228,26,28)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
" </line>\n",
" </g>\n",
" <g>\n",
" <g >\n",
" <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(26.9903027277341 16.05 ) \">\n",
" <text class=\"legend-item\" y=\"0.0\">\n",
" <tspan>Income</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(0.0 23.0 ) \">\n",
" <g>\n",
" <g transform=\"translate(1.0 1.0 ) \">\n",
" <g>\n",
" <line x1=\"0.0\" y1=\"10.5\" x2=\"21.0\" y2=\"10.5\" stroke=\"rgb(55,126,184)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
" </line>\n",
" </g>\n",
" <g>\n",
" <g >\n",
" <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" <g transform=\"translate(26.9903027277341 16.05 ) \">\n",
" <text class=\"legend-item\" y=\"0.0\">\n",
" <tspan>Expenses</tspan>\n",
" </text>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" </g>\n",
" <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\" pointer-events=\"none\">\n",
" </path>\n",
" </g>\n",
" <g id=\"drtdga5\">\n",
" </g>\n",
"</svg>\n",
" <script>document.getElementById(\"aac2d731-ef60-4128-8df8-3b975fdfce6e\").style.display = \"none\";</script>"
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"letsPlot(df.toMap()) {\n",
" x = \"Quarter_Year\"\n",
" y = \"Amount\"\n",
" color = \"Type\"\n",
"} +\n",
" geomLine(size = 1.5) +\n",
" geomPoint(size = 4.0) +\n",
" scaleXDiscrete(labels = xLabelsMapping) +\n",
" ggtitle(\"Quarterly Income vs Expenses\") +\n",
" xlab(\"Quarters\") +\n",
" ylab(\"Amount ($)\") +\n",
" theme(axisTextX = elementText(angle = 30))"
]
}
],
"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
}