{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Declarative Data Visualization\n",
    "\n",
    "A picture is worth a thousand words. In machine learning, we usually handle high-dimensional data, which is impossible to draw on display directly. But a variety of statistical plots are tremendously valuable for us to grasp the characteristics of many data points. Smile provides data visualization tools such as plots and maps for researchers to understand information more easily and quickly.\n",
    "\n",
    "With `smile.plot.vega` package, we can create a specification that describes visualizations as mappings from data to properties of graphical marks (e.g., points or bars). The specification is based on [Vega-Lite](https://vega.github.io/vega-lite). The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. It then determines properties of these components based on a set of carefully designed rules.\n",
    "\n",
    "This approach allows specifications to be succinct and expressive, but also provide user control. As Vega-Lite is designed for analysis, it supports data transformations such as aggregation, binning, filtering, sorting, and visual transformations including stacking and faceting. Moreover, Vega-Lite specifications can be composed into layered and multi-view displays, and made interactive with selections."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import $ivy.`com.github.haifengl::smile-scala:3.1.0`\n",
    "import $ivy.`org.slf4j:slf4j-simple:2.0.13`  \n",
    "\n",
    "import java.lang.Math._\n",
    "import smile._\n",
    "import smile.json._\n",
    "import smile.plot.vega._\n",
    "import smile.plot.show\n",
    "import smile.plot.Render._"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Simple Bar Chart\n",
    "A bar chart encodes quantitative values as the extent of rectangular bars."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val bar = VegaLite.view().\n",
    "  mark(\"bar\").\n",
    "  heightStep(17).\n",
    "  x(field = \"a\", `type` = \"ordinal\", axis = JsObject(\"labelAngel\" -> JsInt(0))).\n",
    "  y(field = \"b\", `type` = \"quantitative\").\n",
    "  data(jsan\"\"\"\n",
    "      [\n",
    "        {\"a\": \"A\", \"b\": 28}, {\"a\": \"B\", \"b\": 55}, {\"a\": \"C\", \"b\": 43},\n",
    "        {\"a\": \"D\", \"b\": 91}, {\"a\": \"E\", \"b\": 81}, {\"a\": \"F\", \"b\": 53},\n",
    "        {\"a\": \"G\", \"b\": 19}, {\"a\": \"H\", \"b\": 87}, {\"a\": \"I\", \"b\": 52}\n",
    "      ]\"\"\"\n",
    "  ).\n",
    "  description(\"A simple bar chart with embedded data.\")\n",
    "\n",
    "show(bar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Aggregate Bar Chart\n",
    "A bar chart showing the US population distribution of age groups in 2000."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val aggregateBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/population.json\").\n",
    "  mark(\"bar\").\n",
    "  heightStep(17).\n",
    "  x(field = \"people\", `type` = \"quantitative\", aggregate = \"sum\", title = \"population\").\n",
    "  y(field = \"age\", `type` = \"ordinal\").\n",
    "  transform(json\"\"\"{\"filter\": \"datum.year == 2000\"}\"\"\").\n",
    "  description(\"A bar chart showing the US population distribution of age groups in 2000.\")\n",
    "\n",
    "show(aggregateBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Aggregate Bar Chart (Sorted)\n",
    "A bar chart that sorts the y-values by the x-values."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val sortedAggregateBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/population.json\").\n",
    "  mark(\"bar\").\n",
    "  heightStep(17).\n",
    "  x(field = \"people\", `type` = \"quantitative\", aggregate = \"sum\", title = \"population\").\n",
    "  y(field = \"age\", `type` = \"ordinal\", sort = Some(\"-x\")).\n",
    "  transform(json\"\"\"{\"filter\": \"datum.year == 2000\"}\"\"\").\n",
    "  description(\"A bar chart that sorts the y-values by the x-values.\")\n",
    "\n",
    "show(sortedAggregateBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Grouped Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val groupedBar = VegaLite.facet(\"https://vega.github.io/vega-lite/examples/data/population.json\").\n",
    "  column(field = \"age\", `type` = \"ordinal\", spacing = Some(10)).\n",
    "  mark(\"bar\").\n",
    "  widthStep(12).\n",
    "  x(field = \"gender\", `type` = \"nominal\", title = null).\n",
    "  y(field = \"people\", `type` = \"quantitative\", aggregate = \"sum\", axis = json\"\"\"{\"title\": \"population\", \"grid\": false}\"\"\").\n",
    "  color(field = \"gender\", `type` = \"nominal\", scale = json\"\"\"{\"range\": [\"#675193\", \"#ca8861\"]}\"\"\").\n",
    "  transform(\n",
    "      json\"\"\"{\"filter\": \"datum.year == 2000\"}\"\"\",\n",
    "      json\"\"\"{\"calculate\": \"datum.sex == 2 ? 'Female' : 'Male'\", \"as\": \"gender\"}\"\"\"\n",
    "  ).\n",
    "  config(json\"\"\"{\"view\": {\"stroke\": \"transparent\"}, \"axis\": {\"domainWidth\": 1}}\"\"\")\n",
    "\n",
    "show(groupedBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Stacked Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val stackedBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/seattle-weather.csv\").\n",
    "  mark(\"bar\").\n",
    "  x(field = \"date\", `type` = \"ordinal\", timeUnit = \"month\", title = \"Month of the year\").\n",
    "  y(field = null, aggregate = \"count\", `type` = \"quantitative\").\n",
    "  color(field = \"weather\", `type` = \"nominal\",\n",
    "      scale = json\"\"\"{\n",
    "        \"domain\": [\"sun\", \"fog\", \"drizzle\", \"rain\", \"snow\"],\n",
    "        \"range\": [\"#e7ba52\", \"#c7c7c7\", \"#aec7e8\", \"#1f77b4\", \"#9467bd\"]\n",
    "      }\"\"\",\n",
    "      legend = JsObject(\"title\" -> JsString(\"Weather type\"))\n",
    "  )\n",
    "\n",
    "show(stackedBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Stacked Bar Chart with Rounded Corners"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val stackedRoundedBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/seattle-weather.csv\").\n",
    "  mark(JsObject(\"type\" -> \"bar\", \"cornerRadiusTopLeft\" -> 3, \"cornerRadiusTopRight\" -> 3)).\n",
    "  x(field = \"date\", `type` = \"ordinal\", timeUnit = \"month\").\n",
    "  y(field = null, aggregate = \"count\", `type` = \"quantitative\").\n",
    "  color(field = \"weather\", `type` = \"nominal\")\n",
    "\n",
    "show(stackedRoundedBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Horizontal Stacked Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val horizontalStackedBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/barley.json\").\n",
    "  mark(\"bar\").\n",
    "  x(field = \"yield\", `type` = \"quantitative\", aggregate = \"sum\").\n",
    "  y(field = \"variety\", `type` = \"nominal\").\n",
    "  color(field = \"site\", `type` = \"nominal\")\n",
    "\n",
    "show(horizontalStackedBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Normalized (Percentage) Stacked Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val normalizedStackedBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/population.json\").\n",
    "  mark(\"bar\").\n",
    "  widthStep(17).\n",
    "  x(field = \"age\", `type` = \"ordinal\").\n",
    "  y(field = \"people\", `type` = \"quantitative\", aggregate = \"sum\", title = \"population\", stack = \"normalize\").\n",
    "  color(field = \"gender\", `type` = \"nominal\", scale = json\"\"\"{\"range\": [\"#675193\", \"#ca8861\"]}\"\"\").\n",
    "  transform(\n",
    "      json\"\"\"{\"filter\": \"datum.year == 2000\"}\"\"\",\n",
    "      json\"\"\"{\"calculate\": \"datum.sex == 2 ? 'Female' : 'Male'\", \"as\": \"gender\"}\"\"\"\n",
    "  )\n",
    "\n",
    "show(normalizedStackedBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Layered Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val layeredBar = VegaLite(\"https://vega.github.io/vega-lite/examples/data/population.json\").\n",
    "  mark(\"bar\").\n",
    "  widthStep(17).\n",
    "  x(field = \"age\", `type` = \"ordinal\").\n",
    "  y(field = \"people\", `type` = \"quantitative\", aggregate = \"sum\", title = \"population\", stack = JsNull).\n",
    "  color(field = \"gender\", `type` = \"nominal\", scale = json\"\"\"{\"range\": [\"#675193\", \"#ca8861\"]}\"\"\").\n",
    "  opacity(0.7).\n",
    "  transform(\n",
    "      json\"\"\"{\"filter\": \"datum.year == 2000\"}\"\"\",\n",
    "      json\"\"\"{\"calculate\": \"datum.sex == 2 ? 'Female' : 'Male'\", \"as\": \"gender\"}\"\"\"\n",
    "  )\n",
    "\n",
    "show(layeredBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Gantt Chart (Ranged Bar Marks)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val gantt = VegaLite.view().\n",
    "  mark(\"bar\").\n",
    "  y(field = \"task\", `type` = \"ordinal\").\n",
    "  x(field = \"start\", `type` = \"quantitative\").\n",
    "  x2(field = \"end\").\n",
    "  data(jsan\"\"\"\n",
    "      [\n",
    "        {\"task\": \"A\", \"start\": 1, \"end\": 3},\n",
    "        {\"task\": \"B\", \"start\": 3, \"end\": 8},\n",
    "        {\"task\": \"C\", \"start\": 8, \"end\": 10}\n",
    "      ]\"\"\"\n",
    "  )\n",
    "\n",
    "show(gantt)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## A Bar Chart Encoding Color Names in the Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val colorBar = VegaLite.view().\n",
    "  mark(\"bar\").\n",
    "  x(field = \"color\", `type` = \"nominal\").\n",
    "  y(field = \"b\", `type` = \"quantitative\").\n",
    "  color(field = \"color\", `type` = \"nominal\", scale = JsNull).\n",
    "  data(jsan\"\"\"\n",
    "      [\n",
    "        {\"color\": \"red\", \"b\": 28},\n",
    "        {\"color\": \"green\", \"b\": 55},\n",
    "        {\"color\": \"blue\", \"b\": 43}\n",
    "      ]\"\"\"\n",
    "  )\n",
    "\n",
    "show(colorBar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Histogram"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val histogram = VegaLite(\"https://vega.github.io/vega-lite/examples/data/movies.json\").\n",
    "  mark(\"bar\").\n",
    "  x(field = \"IMDB_Rating\", `type` = \"quantitative\", bin = Left(true)).\n",
    "  y(field = null, `type` = \"quantitative\", aggregate = \"count\")\n",
    "\n",
    "show(histogram)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Relative Frequency Histogram"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val freqHistogram = VegaLite(\"https://vega.github.io/vega-lite/examples/data/cars.json\").\n",
    "  mark(JsObject(\"type\" -> \"bar\", \"tooltip\" -> true)).\n",
    "  x(field = \"bin_Horsepwoer\", `type` = \"quantitative\", bin = Right(json\"\"\"{\"binned\":true}\"\"\"), title = \"Horsepower\").\n",
    "  x2(field = \"bin_Horsepwoer_end\").\n",
    "  y(field = \"PercentOfTotal\", `type` = \"quantitative\", title = \"Relative Frequency\", axis = json\"\"\"{\"format\": \".1~%\"}\"\"\").\n",
    "  transform(jsan\"\"\"[\n",
    "      {\n",
    "        \"bin\": true, \"field\": \"Horsepower\", \"as\": \"bin_Horsepwoer\"\n",
    "      },\n",
    "      {\n",
    "        \"aggregate\": [{\"op\": \"count\", \"as\": \"Count\"}],\n",
    "        \"groupby\": [\"bin_Horsepwoer\", \"bin_Horsepwoer_end\"]\n",
    "      },\n",
    "      {\n",
    "        \"joinaggregate\": [{\"op\": \"sum\", \"field\": \"Count\", \"as\": \"TotalCount\"}]\n",
    "      },\n",
    "      {\n",
    "        \"calculate\": \"datum.Count/datum.TotalCount\", \"as\": \"PercentOfTotal\"\n",
    "      }\n",
    "    ]\"\"\"\n",
    "  )\n",
    "\n",
    "show(freqHistogram)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2D Histogram Heatmap"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val histHeatmap = VegaLite(\"https://vega.github.io/vega-lite/examples/data/movies.json\").\n",
    "  mark(\"rect\").\n",
    "  x(field = \"IMDB_Rating\", `type` = \"quantitative\", bin = Right(json\"\"\"{\"maxbins\":60}\"\"\"), title = \"IMDB Rating\").\n",
    "  y(field = \"Rotten_Tomatoes_Rating\", `type` = \"quantitative\", bin = Right(json\"\"\"{\"maxbins\":40}\"\"\")).\n",
    "  color(field = null, `type` = \"quantitative\", aggregate = \"count\").\n",
    "  width(300).\n",
    "  height(200).\n",
    "  transform(json\"\"\"{\n",
    "    \"filter\": {\n",
    "      \"and\": [\n",
    "        {\"field\": \"IMDB_Rating\", \"valid\": true},\n",
    "        {\"field\": \"Rotten_Tomatoes_Rating\", \"valid\": true}\n",
    "      ]}}\"\"\"\n",
    "  ).\n",
    "  config(JsObject(\"view\" -> json\"\"\"{\"stroke\": \"transparent\"}\"\"\"))\n",
    "\n",
    "show(histHeatmap)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Density Plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val density = VegaLite(\"https://vega.github.io/vega-lite/examples/data/movies.json\").\n",
    "  mark(\"area\").\n",
    "  x(field = \"value\", `type` = \"quantitative\", title = \"IMDB Rating\").\n",
    "  y(field = \"density\", `type` = \"quantitative\").\n",
    "  width(400).\n",
    "  height(100).\n",
    "  transform(json\"\"\"\n",
    "    {\n",
    "      \"density\": \"IMDB_Rating\",\n",
    "      \"bandwidth\": 0.3\n",
    "    }\"\"\"\n",
    "  )\n",
    "\n",
    "show(density)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Cumulative Frequency Distribution"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val cdf = VegaLite(\"https://vega.github.io/vega-lite/examples/data/movies.json\").\n",
    "  mark(\"area\").\n",
    "  x(field = \"IMDB_Rating\", `type` = \"quantitative\").\n",
    "  y(field = \"cumulative_count\", `type` = \"quantitative\").\n",
    "  transform(json\"\"\"\n",
    "    {\n",
    "      \"sort\": [{\"field\": \"IMDB_Rating\"}],\n",
    "      \"window\": [{\"op\": \"count\", \"field\": \"count\", \"as\": \"cumulative_count\"}],\n",
    "      \"frame\": [null, 0]\n",
    "    }\"\"\"\n",
    "  )\n",
    "\n",
    "show(cdf)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Scatterplot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val scatter = VegaLite(\"https://vega.github.io/vega-lite/examples/data/cars.json\").\n",
    "  mark(\"point\").\n",
    "  x(field = \"Horsepower\", `type` = \"quantitative\").\n",
    "  y(field = \"Miles_per_Gallon\", `type` = \"quantitative\").\n",
    "  color(field = \"Origin\", `type` = \"nominal\").\n",
    "  shape(field = \"Origin\", `type` = \"nominal\")\n",
    "\n",
    "show(scatter)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bubble Plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val bubble = VegaLite(\"https://vega.github.io/vega-lite/examples/data/cars.json\").\n",
    "  mark(\"point\").\n",
    "  x(field = \"Horsepower\", `type` = \"quantitative\").\n",
    "  y(field = \"Miles_per_Gallon\", `type` = \"quantitative\").\n",
    "  size(field = \"Acceleration\", `type` = \"quantitative\")\n",
    "\n",
    "show(bubble)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Natural Disasters"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val disaster = VegaLite(\"https://vega.github.io/vega-lite/examples/data/disasters.csv\").\n",
    "  mark(JsObject(\n",
    "    \"type\" -> \"circle\",\n",
    "    \"opacity\" -> 0.8,\n",
    "    \"stroke\" -> \"black\",\n",
    "    \"strokeWidth\" -> 1\n",
    "  )).\n",
    "  width(600).\n",
    "  height(400).\n",
    "  x(field = \"Year\", `type` = \"ordinal\", axis = json\"\"\"{\"labelAngle\": 0}\"\"\").\n",
    "  y(field = \"Entity\", `type` = \"nominal\", title = null).\n",
    "  size(field = \"Deaths\", `type` = \"quantitative\",\n",
    "      legend = json\"\"\"{\"title\": \"Annual Global Deaths\", \"clipHeight\": 30}\"\"\",\n",
    "      scale = json\"\"\"{\"range\": [0, 5000]}\"\"\"\n",
    "  ).\n",
    "  color(field = \"Entity\", `type` = \"nominal\", legend = JsNull).\n",
    "  transform(json\"\"\"{\"filter\": \"datum.Entity !== 'All natural disasters'\"}\"\"\")\n",
    "\n",
    "\n",
    "show(disaster)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Text Plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val textPlot = VegaLite(\"https://vega.github.io/vega-lite/examples/data/cars.json\").\n",
    "  mark(\"text\").\n",
    "  x(field = \"Horsepower\", `type` = \"quantitative\").\n",
    "  y(field = \"Miles_per_Gallon\", `type` = \"quantitative\").\n",
    "  color(field = \"Brand\", `type` = \"nominal\").\n",
    "  text(field = \"Brand\", `type` = \"nominal\").\n",
    "  transform(json\"\"\"\n",
    "    {\n",
    "      \"calculate\": \"split(datum.Name, ' ')[0]\",\n",
    "      \"as\": \"Brand\"\n",
    "    }\"\"\"\n",
    "  )\n",
    "\n",
    "show(textPlot)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Line Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val line = VegaLite(\"https://vega.github.io/vega-lite/examples/data/stocks.csv\").\n",
    "  mark(\"line\").\n",
    "  x(field = \"date\", `type` = \"temporal\").\n",
    "  y(field = \"price\", `type` = \"quantitative\").\n",
    "  transform(json\"\"\"{\"filter\": \"datum.symbol==='GOOG'\"}\"\"\")\n",
    "\n",
    "show(line)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Line Chart with Point Markers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val pointLine = VegaLite(\"https://vega.github.io/vega-lite/examples/data/stocks.csv\").\n",
    "  mark(JsObject(\"type\" -> \"line\", \"point\" -> true)).\n",
    "  x(field = \"date\", `type` = \"temporal\", timeUnit = \"year\").\n",
    "  y(field = \"price\", `type` = \"quantitative\", aggregate = \"mean\").\n",
    "  color(field = \"symbol\", `type` = \"nominal\")\n",
    "\n",
    "show(pointLine)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Line Chart with Confidence Interval Band"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val confidenceInterval = VegaLite.layer(\n",
    "    \"https://vega.github.io/vega-lite/examples/data/cars.json\",\n",
    "    \"json\",\n",
    "    VegaLite.view().\n",
    "      mark(JsObject(\"type\" -> \"errorband\", \"extent\" -> \"ci\")).\n",
    "      y(field = \"Miles_per_Gallon\", `type` = \"quantitative\", title = \"Mean of Miles per Gallon (95% CIs)\"),\n",
    "    VegaLite.view().\n",
    "      mark(\"line\").\n",
    "      y(field = \"Miles_per_Gallon\", `type` = \"quantitative\", aggregate = \"mean\")      \n",
    "  ).x(field = \"Year\", `type` = \"temporal\", timeUnit = \"year\")\n",
    "\n",
    "show(confidenceInterval)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Rolling Averages over Raw Values"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val rollingAverages = VegaLite.layer(\n",
    "    \"https://vega.github.io/vega-lite/examples/data/seattle-weather.csv\",\n",
    "    \"csv\",\n",
    "    VegaLite.view().\n",
    "      mark(JsObject(\"type\" -> \"point\", \"opacity\" -> 0.3)).\n",
    "      x(field = \"date\", `type` = \"temporal\", title = \"Date\").\n",
    "      y(field = \"temp_max\", `type` = \"quantitative\", title = \"Max Temperature\"),\n",
    "    VegaLite.view().\n",
    "      mark(JsObject(\"color\" -> \"red\", \"size\" -> 3, \"type\" -> \"line\")).\n",
    "      x(field = \"date\", `type` = \"temporal\").\n",
    "      y(field = \"rolling_mean\", `type` = \"quantitative\"),\n",
    "  ).\n",
    "  width(400).\n",
    "  height(300).\n",
    "  transform(json\"\"\"\n",
    "    {\n",
    "      \"frame\": [-15, 15],\n",
    "      \"window\": [\n",
    "        {\n",
    "          \"field\": \"temp_max\",\n",
    "          \"op\": \"mean\",\n",
    "          \"as\": \"rolling_mean\"\n",
    "        }\n",
    "      ]\n",
    "    }\"\"\"\n",
    "  )\n",
    "\n",
    "show(rollingAverages)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Area Chart with Overlaying Lines and Point Markers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val area = VegaLite(\"https://vega.github.io/vega-lite/examples/data/stocks.csv\").\n",
    "  mark(JsObject(\"type\" -> \"area\", \"line\" -> true, \"point\" -> true)).\n",
    "  x(field = \"date\", `type` = \"temporal\").\n",
    "  y(field = \"price\", `type` = \"quantitative\").\n",
    "  transform(json\"\"\"{\"filter\": \"datum.symbol==='GOOG'\"}\"\"\")\n",
    "\n",
    "show(area)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Annual Weather Heatmap"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val heatmap = VegaLite(\"https://vega.github.io/vega-lite/examples/data/seattle-temps.csv\").\n",
    "  mark(\"rect\").\n",
    "  x(field = \"date\", `type` = \"ordinal\", timeUnit = \"date\", title = \"Day\", axis = json\"\"\"{\"labelAngle\": 0, \"format\": \"%e\"}\"\"\").\n",
    "  y(field = \"date\", `type` = \"ordinal\", timeUnit = \"month\", title = \"Month\").\n",
    "  color(field = \"temp\", `type` = \"quantitative\", aggregate = \"max\", legend = json\"\"\"{\"title\": null}\"\"\").\n",
    "  config(json\"\"\"\n",
    "    {\n",
    "      \"view\": {\n",
    "          \"strokeWidth\": 0,\n",
    "          \"step\": 13\n",
    "      },\n",
    "      \"axis\": {\n",
    "          \"domain\": false\n",
    "      }\n",
    "    }\"\"\"\n",
    "  ).\n",
    "  title(\"2010 Daily Max Temperature (F) in Seattle, WA\")\n",
    "\n",
    "show(heatmap)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Donut Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val donut = VegaLite(jsan\"\"\"\n",
    "    [\n",
    "      {\"category\": 1, \"value\": 4},\n",
    "      {\"category\": 2, \"value\": 6},\n",
    "      {\"category\": 3, \"value\": 10},\n",
    "      {\"category\": 4, \"value\": 3},\n",
    "      {\"category\": 5, \"value\": 7},\n",
    "      {\"category\": 6, \"value\": 8}\n",
    "    ]\"\"\"\n",
    "  ).\n",
    "  mark(JsObject(\"type\" -> \"arc\", \"innerRadius\" -> 50)).\n",
    "  view(JsObject(\"stroke\" -> JsNull)).\n",
    "  theta(field = \"value\", `type` = \"quantitative\").\n",
    "  color(field = \"category\", `type` = \"nominal\")\n",
    "\n",
    "show(donut)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Radial Plot\n",
    "This radial plot uses both angular and radial extent to convey multiple dimensions of data. However, this approach is not perceptually effective, as viewers will most likely be drawn to the total area of the shape, conflating the two dimensions. This example also demonstrates a way to add labels to circular plots."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val radial = VegaLite.layer(\n",
    "    jsan\"\"\"[12, 23, 47, 6, 52, 19]\"\"\",\n",
    "    VegaLite.view().\n",
    "      mark(JsObject(\"type\" -> \"arc\", \"innerRadius\" -> 20, \"stroke\" -> \"#fff\")),\n",
    "    \n",
    "    VegaLite.view().mark(JsObject(\"type\" -> \"text\", \"radiusOffset\" -> 10)).\n",
    "      text(field = \"data\", `type` = \"quantitative\")\n",
    "  ).\n",
    "  mark(JsObject(\"type\" -> \"arc\", \"innerRadius\" -> 50)).\n",
    "  view(JsObject(\"stroke\" -> JsNull)).\n",
    "  theta(field = \"data\", `type` = \"quantitative\", stack = true).\n",
    "  radius(field = \"data\", `type` = \"quantitative\", scale = json\"\"\"{\"type\": \"sqrt\", \"zero\": true, \"range\": [20, 100]}\"\"\").\n",
    "  color(field = \"data\", `type` = \"nominal\", legend = JsNull)\n",
    "\n",
    "show(radial)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Box Plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val boxplot = VegaLite(\"https://vega.github.io/vega-lite/examples/data/population.json\").\n",
    "  mark(JsObject(\"type\" -> \"boxplot\", \"extent\" -> \"min-max\")).\n",
    "  view(JsObject(\"stroke\" -> JsNull)).\n",
    "  x(field = \"age\", `type` = \"ordinal\").\n",
    "  y(field = \"people\", `type` = \"quantitative\", title = \"population\")\n",
    "\n",
    "show(boxplot)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Horizontal Concatenation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "show(VegaLite.hconcat(bar, aggregateBar, groupedBar))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Scatterplot Matrix (SPLOM)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val iris = read.arff(\"../data/weka/iris.arff\")\n",
    "show(VegaLite.splom(iris, \"class\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Choropleth of Unemployment Rate per County"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "val geo = VegaLite(\n",
    "    \"https://vega.github.io/vega-lite/examples/data/us-10m.json\",\n",
    "    JsObject(\"type\" -> \"topojson\", \"feature\" -> \"counties\")\n",
    "  ).\n",
    "  mark(\"geoshape\").\n",
    "  color(field = \"rate\", `type` = \"quantitative\").\n",
    "  projection(json\"\"\"{\"type\": \"albersUsa\"}\"\"\").\n",
    "  width(500).\n",
    "  height(300).\n",
    "  transform(json\"\"\"\n",
    "    {\n",
    "      \"lookup\": \"id\",\n",
    "      \"from\": {\n",
    "        \"data\": {\n",
    "          \"url\": \"https://vega.github.io/vega-lite/examples/data/unemployment.tsv\"\n",
    "        },\n",
    "        \"key\": \"id\",\n",
    "        \"fields\": [\"rate\"]\n",
    "      }\n",
    "    }\"\"\"\n",
    "  )\n",
    "\n",
    "show(geo)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Scala (2.13)",
   "language": "scala",
   "name": "scala213"
  },
  "language_info": {
   "codemirror_mode": "text/x-scala",
   "file_extension": ".scala",
   "mimetype": "text/x-scala",
   "name": "scala",
   "nbconvert_exporter": "script",
   "version": "2.13.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}