vegas.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# [Vegas](https://github.com/vegas-viz/Vegas) Examples\n",
    "\n",
    "Based on https://github.com/vegas-viz/Vegas/blob/master/notebooks/jupyter_example.ipynb\n",
    "\n",
    "Vegas 0.3.11 doesn't support Scala 2.12 yet so make sure to run this on an Almond Kernel based on Scala 2.11."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "\u001b[32mimport \u001b[39m\u001b[36m$ivy.$                            \n",
       "\n",
       "\u001b[39m\n",
       "\u001b[32mimport \u001b[39m\u001b[36mvegas._\n",
       "\u001b[39m\n",
       "\u001b[32mimport \u001b[39m\u001b[36mvegas.data.External._\u001b[39m"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import $ivy.`org.vegas-viz::vegas:0.3.11`\n",
    "\n",
    "import vegas._\n",
    "import vegas.data.External._"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# A simple bar chart with embedded data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-2d7328ab-68f8-4485-8a91-a9fa8b39beac\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-2d7328ab-68f8-4485-8a91-a9fa8b39beac'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;bar&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;a&quot;,\n",
       "      &quot;type&quot; : &quot;ordinal&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;b&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;A simple bar chart with embedded data.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;values&quot; : [\n",
       "      {\n",
       "        &quot;a&quot; : &quot;A&quot;,\n",
       "        &quot;b&quot; : 28\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;B&quot;,\n",
       "        &quot;b&quot; : 55\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;C&quot;,\n",
       "        &quot;b&quot; : 43\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;D&quot;,\n",
       "        &quot;b&quot; : 91\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;E&quot;,\n",
       "        &quot;b&quot; : 81\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;F&quot;,\n",
       "        &quot;b&quot; : 53\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;G&quot;,\n",
       "        &quot;b&quot; : 19\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;H&quot;,\n",
       "        &quot;b&quot; : 87\n",
       "      },\n",
       "      {\n",
       "        &quot;a&quot; : &quot;I&quot;,\n",
       "        &quot;b&quot; : 52\n",
       "      }\n",
       "    ]\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-2d7328ab-68f8-4485-8a91-a9fa8b39beac&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-2d7328ab-68f8-4485-8a91-a9fa8b39beac'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"A simple bar chart with embedded data.\").\n",
    "  withData(Seq(\n",
    "    Map(\"a\" -> \"A\", \"b\" -> 28), Map(\"a\" -> \"B\", \"b\" -> 55), Map(\"a\" -> \"C\", \"b\" -> 43),\n",
    "    Map(\"a\" -> \"D\", \"b\" -> 91), Map(\"a\" -> \"E\", \"b\" -> 81), Map(\"a\" -> \"F\", \"b\" -> 53),\n",
    "    Map(\"a\" -> \"G\", \"b\" -> 19), Map(\"a\" -> \"H\", \"b\" -> 87), Map(\"a\" -> \"I\", \"b\" -> 52)\n",
    "  )).\n",
    "  encodeX(\"a\", Ordinal).\n",
    "  encodeY(\"b\", Quantitative).\n",
    "  mark(Bar).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# A bar chart showing the US population distribution of age groups in 2000."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-5afd0d2f-d62f-420a-92f5-5991be23ba05\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-5afd0d2f-d62f-420a-92f5-5991be23ba05'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;bar&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;axis&quot; : {\n",
       "        &quot;title&quot; : &quot;population&quot;\n",
       "      },\n",
       "      &quot;field&quot; : &quot;people&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;sum&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;bandSize&quot; : 17.0\n",
       "      },\n",
       "      &quot;field&quot; : &quot;age&quot;,\n",
       "      &quot;type&quot; : &quot;ordinal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;A bar chart showing the US population distribution of age groups in 2000.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/population.json&quot;\n",
       "  },\n",
       "  &quot;transform&quot; : {\n",
       "    &quot;filter&quot; : &quot;datum.year == 2000&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-5afd0d2f-d62f-420a-92f5-5991be23ba05&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-5afd0d2f-d62f-420a-92f5-5991be23ba05'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"A bar chart showing the US population distribution of age groups in 2000.\").\n",
    "  withURL(Population).\n",
    "  mark(Bar).\n",
    "  filter(\"datum.year == 2000\").\n",
    "  encodeY(\"age\", Ordinal, scale=Scale(bandSize=17)).\n",
    "  encodeX(\"people\", Quantitative, aggregate=AggOps.Sum, axis=Axis(title=\"population\")).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-d1986c92-3b9a-4c64-bf62-39bef3ac9a82\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-d1986c92-3b9a-4c64-bf62-39bef3ac9a82'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;bar&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;column&quot; : {\n",
       "      &quot;axis&quot; : {\n",
       "        &quot;orient&quot; : &quot;bottom&quot;,\n",
       "        &quot;axisWidth&quot; : 1.0,\n",
       "        &quot;offset&quot; : -8.0\n",
       "      },\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;padding&quot; : 4.0\n",
       "      },\n",
       "      &quot;field&quot; : &quot;age&quot;,\n",
       "      &quot;type&quot; : &quot;ordinal&quot;\n",
       "    },\n",
       "    &quot;x&quot; : {\n",
       "      &quot;axis&quot; : false,\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;bandSize&quot; : 6.0\n",
       "      },\n",
       "      &quot;field&quot; : &quot;gender&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;axis&quot; : {\n",
       "        &quot;title&quot; : &quot;population&quot;,\n",
       "        &quot;grid&quot; : false\n",
       "      },\n",
       "      &quot;field&quot; : &quot;people&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;sum&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;range&quot; : [\n",
       "          &quot;#EA98D2&quot;,\n",
       "          &quot;#659CCA&quot;\n",
       "        ]\n",
       "      },\n",
       "      &quot;field&quot; : &quot;gender&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/population.json&quot;\n",
       "  },\n",
       "  &quot;transform&quot; : {\n",
       "    &quot;filter&quot; : &quot;datum.year == 2000&quot;,\n",
       "    &quot;calculate&quot; : [\n",
       "      {\n",
       "        &quot;field&quot; : &quot;gender&quot;,\n",
       "        &quot;expr&quot; : &quot;datum.sex == 2 ? \\&quot;Female\\&quot; : \\&quot;Male\\&quot;&quot;\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  &quot;config&quot; : {\n",
       "    &quot;facet&quot; : {\n",
       "      &quot;cell&quot; : {\n",
       "        &quot;strokeWidth&quot; : 0.0\n",
       "      }\n",
       "    }\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-d1986c92-3b9a-4c64-bf62-39bef3ac9a82&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-d1986c92-3b9a-4c64-bf62-39bef3ac9a82'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas().\n",
    "  withURL(Population).\n",
    "  mark(Bar).\n",
    "  addTransformCalculation(\"gender\", \"\"\"datum.sex == 2 ? \"Female\" : \"Male\"\"\"\").\n",
    "  filter(\"datum.year == 2000\").\n",
    "  encodeColumn(\"age\", Ord, scale=Scale(padding=4.0), axis=Axis(orient=Orient.Bottom, axisWidth=1.0, offset= -8.0)).\n",
    "  encodeY(\"people\", Quantitative, aggregate=AggOps.Sum, axis=Axis(title=\"population\", grid=false)).\n",
    "  encodeX(\"gender\", Nominal, scale=Scale(bandSize = 6.0), hideAxis=true).\n",
    "  encodeColor(\"gender\", Nominal, scale=Scale(rangeNominals=List(\"#EA98D2\", \"#659CCA\"))).\n",
    "  configFacet(cell=CellConfig(strokeWidth = 0)).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-80b93220-b87b-48ef-b6a5-9c5e975ff715\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-80b93220-b87b-48ef-b6a5-9c5e975ff715'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;area&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;axis&quot; : {\n",
       "        &quot;labelAngle&quot; : 0.0,\n",
       "        &quot;format&quot; : &quot;%Y&quot;,\n",
       "        &quot;axisWidth&quot; : 0.0\n",
       "      },\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;nice&quot; : &quot;month&quot;\n",
       "      },\n",
       "      &quot;field&quot; : &quot;date&quot;,\n",
       "      &quot;type&quot; : &quot;temporal&quot;,\n",
       "      &quot;timeUnit&quot; : &quot;yearmonth&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;count&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;sum&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/unemployment-across-industries.json&quot;\n",
       "  },\n",
       "  &quot;config&quot; : {\n",
       "    &quot;cell&quot; : {\n",
       "      &quot;width&quot; : 300.0,\n",
       "      &quot;height&quot; : 200.0\n",
       "    }\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-80b93220-b87b-48ef-b6a5-9c5e975ff715&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-80b93220-b87b-48ef-b6a5-9c5e975ff715'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas().\n",
    "  withURL(Unemployment).\n",
    "  mark(Area).\n",
    "  encodeX(\"date\", Temp, timeUnit=TimeUnit.Yearmonth, scale=Scale(nice=Nice.Month),\n",
    "    axis=Axis(axisWidth=0, format=\"%Y\", labelAngle=0)).\n",
    "  encodeY(\"count\", Quantitative, aggregate=AggOps.Sum).\n",
    "  configCell(width=300, height=200).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-14a5f7a7-a768-4f85-9c31-6b33e35e9f6e\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-14a5f7a7-a768-4f85-9c31-6b33e35e9f6e'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;bar&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;bandSize&quot; : 17.0\n",
       "      },\n",
       "      &quot;field&quot; : &quot;age&quot;,\n",
       "      &quot;type&quot; : &quot;ordinal&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;axis&quot; : {\n",
       "        &quot;title&quot; : &quot;population&quot;\n",
       "      },\n",
       "      &quot;field&quot; : &quot;people&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;sum&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;range&quot; : [\n",
       "          &quot;#EA98D2&quot;,\n",
       "          &quot;#659CCA&quot;\n",
       "        ]\n",
       "      },\n",
       "      &quot;field&quot; : &quot;gender&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/population.json&quot;\n",
       "  },\n",
       "  &quot;transform&quot; : {\n",
       "    &quot;filter&quot; : &quot;datum.year == 2000&quot;,\n",
       "    &quot;calculate&quot; : [\n",
       "      {\n",
       "        &quot;field&quot; : &quot;gender&quot;,\n",
       "        &quot;expr&quot; : &quot;datum.sex == 2 ? \\&quot;Female\\&quot; : \\&quot;Male\\&quot;&quot;\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  &quot;config&quot; : {\n",
       "    &quot;mark&quot; : {\n",
       "      &quot;stacked&quot; : &quot;normalize&quot;\n",
       "    }\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-14a5f7a7-a768-4f85-9c31-6b33e35e9f6e&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-14a5f7a7-a768-4f85-9c31-6b33e35e9f6e'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas().\n",
    "  withURL(Population).\n",
    "  filter(\"datum.year == 2000\").\n",
    "  addTransform(\"gender\", \"datum.sex == 2 ? \\\"Female\\\" : \\\"Male\\\"\").\n",
    "  mark(Bar).\n",
    "  encodeY(\"people\", Quant, AggOps.Sum, axis=Axis(title=\"population\")).\n",
    "  encodeX(\"age\", Ord, scale=Scale(bandSize= 17)).\n",
    "  encodeColor(\"gender\", Nominal, scale=Scale(rangeNominals=List(\"#EA98D2\", \"#659CCA\"))).\n",
    "  configMark(stacked=StackOffset.Normalize).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# A trellis scatterplot showing Horsepower and Miles per gallons, faceted by binned values of Acceleration."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-10d9337d-534f-4a13-961f-71cba54cb88f\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-10d9337d-534f-4a13-961f-71cba54cb88f'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;row&quot; : {\n",
       "      &quot;field&quot; : &quot;Acceleration&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : true\n",
       "    },\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;A trellis scatterplot showing Horsepower and Miles per gallons, faceted by binned values of Acceleration.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-10d9337d-534f-4a13-961f-71cba54cb88f&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-10d9337d-534f-4a13-961f-71cba54cb88f'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"A trellis scatterplot showing Horsepower and Miles per gallons, faceted by binned values of Acceleration.\").\n",
    "  withURL(Cars).\n",
    "  mark(Point).\n",
    "  encodeX(\"Horsepower\", Quantitative).\n",
    "  encodeY(\"Miles_per_Gallon\", Quantitative).\n",
    "  encodeRow(\"Acceleration\", Quantitative, enableBin=true).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-23a634b4-0ff5-406b-bf9a-9b804cad5250\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-23a634b4-0ff5-406b-bf9a-9b804cad5250'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;IMDB_Rating&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : {\n",
       "        &quot;maxbins&quot; : 10.0\n",
       "      }\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Rotten_Tomatoes_Rating&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : {\n",
       "        &quot;maxbins&quot; : 10.0\n",
       "      }\n",
       "    },\n",
       "    &quot;size&quot; : {\n",
       "      &quot;field&quot; : &quot;*&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;count&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/movies.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-23a634b4-0ff5-406b-bf9a-9b804cad5250&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-23a634b4-0ff5-406b-bf9a-9b804cad5250'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas().\n",
    "  withURL(Movies).\n",
    "  mark(Point).\n",
    "  encodeX(\"IMDB_Rating\", Quantitative, bin=Bin(maxbins=10.0)).\n",
    "  encodeY(\"Rotten_Tomatoes_Rating\", Quantitative, bin=Bin(maxbins=10.0)).\n",
    "  encodeSize(aggregate=AggOps.Count, field=\"*\", dataType=Quantitative).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-30a10a9d-d400-44d8-b482-bfacc2338121\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-30a10a9d-d400-44d8-b482-bfacc2338121'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;field&quot; : &quot;Origin&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-30a10a9d-d400-44d8-b482-bfacc2338121&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-30a10a9d-d400-44d8-b482-bfacc2338121'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas().\n",
    "  withURL(Cars).\n",
    "  mark(Point).\n",
    "  encodeX(\"Horsepower\", Quantitative).\n",
    "  encodeY(\"Miles_per_Gallon\", Quantitative).\n",
    "  encodeColor(field=\"Origin\", dataType=Nominal).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# A scatterplot showing horsepower and miles per gallons with binned acceleration on color."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-a075c823-383d-402b-aec5-d4317c3d51d5\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-a075c823-383d-402b-aec5-d4317c3d51d5'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;field&quot; : &quot;Acceleration&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : {\n",
       "        &quot;maxbins&quot; : 5.0\n",
       "      }\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;A scatterplot showing horsepower and miles per gallons with binned acceleration on color.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-a075c823-383d-402b-aec5-d4317c3d51d5&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-a075c823-383d-402b-aec5-d4317c3d51d5'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"A scatterplot showing horsepower and miles per gallons with binned acceleration on color.\").\n",
    "  withURL(Cars).\n",
    "  mark(Point).\n",
    "  encodeX(\"Horsepower\", Quantitative).\n",
    "  encodeY(\"Miles_per_Gallon\", Quantitative).\n",
    "  encodeColor(field=\"Acceleration\", dataType=Quantitative, bin=Bin(maxbins=5.0)).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-a6f1c098-9805-4c69-a751-2f7b3180a2c6\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-a6f1c098-9805-4c69-a751-2f7b3180a2c6'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;area&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Acceleration&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : {\n",
       "        \n",
       "      }\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : false,\n",
       "      &quot;aggregate&quot; : &quot;mean&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;field&quot; : &quot;Cylinders&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-a6f1c098-9805-4c69-a751-2f7b3180a2c6&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-a6f1c098-9805-4c69-a751-2f7b3180a2c6'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas().\n",
    "  withURL(Cars).\n",
    "  mark(Area).\n",
    "  encodeX(\"Acceleration\", Quantitative, bin=Bin()).\n",
    "  encodeY(\"Horsepower\", Quantitative, AggOps.Mean, enableBin=false).\n",
    "  encodeColor(field=\"Cylinders\", dataType=Nominal).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-4d16497d-147d-427e-9901-6dcfcfa564bd\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-4d16497d-147d-427e-9901-6dcfcfa564bd'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;row&quot; : {\n",
       "      &quot;field&quot; : &quot;site&quot;,\n",
       "      &quot;type&quot; : &quot;ordinal&quot;\n",
       "    },\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;yield&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;mean&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;scale&quot; : {\n",
       "        &quot;bandSize&quot; : 12.0\n",
       "      },\n",
       "      &quot;sort&quot; : {\n",
       "        &quot;field&quot; : &quot;yield&quot;,\n",
       "        &quot;op&quot; : &quot;mean&quot;\n",
       "      },\n",
       "      &quot;field&quot; : &quot;variety&quot;,\n",
       "      &quot;type&quot; : &quot;ordinal&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;field&quot; : &quot;year&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/barley.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-4d16497d-147d-427e-9901-6dcfcfa564bd&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-4d16497d-147d-427e-9901-6dcfcfa564bd'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison.\").\n",
    "  withURL(Barley).\n",
    "  mark(Point).\n",
    "  encodeRow(\"site\", Ordinal).\n",
    "  encodeX(\"yield\", Quantitative, aggregate=AggOps.Mean).\n",
    "  encodeY(\"variety\", Ordinal, sortField=Sort(\"yield\", AggOps.Mean), scale=Scale(bandSize = 12.0)).\n",
    "  encodeColor(field=\"year\", dataType=Nominal).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# A scatterplot with custom star shapes."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-92fda7a1-6940-441c-998c-14e9dc00e29a\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-92fda7a1-6940-441c-998c-14e9dc00e29a'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;field&quot; : &quot;Cylinders&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    },\n",
       "    &quot;size&quot; : {\n",
       "      &quot;field&quot; : &quot;Weight_in_lbs&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;A scatterplot with custom star shapes.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  },\n",
       "  &quot;config&quot; : {\n",
       "    &quot;mark&quot; : {\n",
       "      &quot;shape&quot; : &quot;M0,0.2L0.2351,0.3236 0.1902,0.0618 0.3804,-0.1236 0.1175,-0.1618 0,-0.4 -0.1175,-0.1618 -0.3804,-0.1236 -0.1902,0.0618 -0.2351,0.3236 0,0.2Z&quot;\n",
       "    }\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-92fda7a1-6940-441c-998c-14e9dc00e29a&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-92fda7a1-6940-441c-998c-14e9dc00e29a'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"A scatterplot with custom star shapes.\").\n",
    "  withURL(Cars).\n",
    "  mark(Point).\n",
    "  encodeX(\"Horsepower\", Quant).\n",
    "  encodeY(\"Miles_per_Gallon\", Quant).\n",
    "  encodeColor(\"Cylinders\", Nom).\n",
    "  encodeSize(\"Weight_in_lbs\", Quant).\n",
    "  configMark(customShape=\"M0,0.2L0.2351,0.3236 0.1902,0.0618 0.3804,-0.1236 0.1175,-0.1618 0,-0.4 -0.1175,-0.1618 -0.3804,-0.1236 -0.1902,0.0618 -0.2351,0.3236 0,0.2Z\").\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# A scatterplot showing average horsepower and displacement for cars from different origins."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-fdb56192-be2b-4c9b-aee5-19a86dbec2ad\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-fdb56192-be2b-4c9b-aee5-19a86dbec2ad'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;mean&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Displacement&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;mean&quot;\n",
       "    },\n",
       "    &quot;detail&quot; : {\n",
       "      &quot;field&quot; : &quot;Origin&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;A scatterplot showing average horsepower and displacement for cars from different origins.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-fdb56192-be2b-4c9b-aee5-19a86dbec2ad&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-fdb56192-be2b-4c9b-aee5-19a86dbec2ad'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"A scatterplot showing average horsepower and displacement for cars from different origins.\").\n",
    "  withURL(Cars).\n",
    "  mark(Point).\n",
    "  encodeX(\"Horsepower\", Quant, AggOps.Mean).\n",
    "  encodeY(\"Displacement\", Quant, AggOps.Mean).\n",
    "  encodeDetail(\"Origin\").\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Stock prices of 5 Tech Companies Over Time."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-9f2ffbe4-18e1-4979-ad2d-4786be10b850\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-9f2ffbe4-18e1-4979-ad2d-4786be10b850'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;line&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;date&quot;,\n",
       "      &quot;type&quot; : &quot;temporal&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;price&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;detail&quot; : {\n",
       "      &quot;field&quot; : &quot;symbol&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;Stock prices of 5 Tech Companies Over Time.&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;format&quot; : {\n",
       "      &quot;type&quot; : &quot;csv&quot;\n",
       "    },\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/stocks.csv&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-9f2ffbe4-18e1-4979-ad2d-4786be10b850&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-9f2ffbe4-18e1-4979-ad2d-4786be10b850'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"Stock prices of 5 Tech Companies Over Time.\").\n",
    "  withURL(Stocks, formatType = DataFormat.Csv).\n",
    "  mark(Line).\n",
    "  encodeX(\"date\", Temp).\n",
    "  encodeY(\"price\", Quant).\n",
    "  encodeDetailFields(Field(field=\"symbol\", dataType=Nominal)).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plot with hard-coded size value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-cccd5988-aafc-439e-b3a3-c32355a8f393\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-cccd5988-aafc-439e-b3a3-c32355a8f393'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;circle&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;size&quot; : {\n",
       "      &quot;value&quot; : 201.0\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;Plot with hard-coded size value&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-cccd5988-aafc-439e-b3a3-c32355a8f393&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-cccd5988-aafc-439e-b3a3-c32355a8f393'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"Plot with hard-coded size value\").\n",
    "  withURL(Cars).\n",
    "  mark(Circle).\n",
    "  encodeY(\"Horsepower\", Quantitative).\n",
    "  encodeX(\"Miles_per_Gallon\", Quantitative).\n",
    "  encodeSize(value=201L).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plots both mean and IQR as a background layer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-54c10245-1149-4364-9931-cbbc5f8711a4\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-54c10245-1149-4364-9931-cbbc5f8711a4'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;layers&quot; : [\n",
       "    {\n",
       "      &quot;mark&quot; : &quot;line&quot;,\n",
       "      &quot;encoding&quot; : {\n",
       "        &quot;x&quot; : {\n",
       "          &quot;field&quot; : &quot;age&quot;,\n",
       "          &quot;type&quot; : &quot;ordinal&quot;\n",
       "        },\n",
       "        &quot;y&quot; : {\n",
       "          &quot;field&quot; : &quot;people&quot;,\n",
       "          &quot;aggregate&quot; : &quot;mean&quot;\n",
       "        }\n",
       "      }\n",
       "    },\n",
       "    {\n",
       "      &quot;mark&quot; : &quot;area&quot;,\n",
       "      &quot;encoding&quot; : {\n",
       "        &quot;x&quot; : {\n",
       "          &quot;field&quot; : &quot;age&quot;,\n",
       "          &quot;type&quot; : &quot;ordinal&quot;\n",
       "        },\n",
       "        &quot;y&quot; : {\n",
       "          &quot;field&quot; : &quot;people&quot;,\n",
       "          &quot;aggregate&quot; : &quot;q1&quot;\n",
       "        },\n",
       "        &quot;y2&quot; : {\n",
       "          &quot;field&quot; : &quot;people&quot;,\n",
       "          &quot;aggregate&quot; : &quot;q3&quot;\n",
       "        }\n",
       "      }\n",
       "    }\n",
       "  ],\n",
       "  &quot;description&quot; : &quot;Plots both mean and IQR as a background layer&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/population.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-54c10245-1149-4364-9931-cbbc5f8711a4&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-54c10245-1149-4364-9931-cbbc5f8711a4'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas.layered(\"Plots both mean and IQR as a background layer\").\n",
    "  withURL(Population).\n",
    "  withLayers(\n",
    "    Layer().\n",
    "      mark(Line).\n",
    "      encodeX(\"age\", Ordinal).\n",
    "      encodeY(\"people\", aggregate=AggOps.Mean),\n",
    "    Layer().\n",
    "      mark(Area).\n",
    "      encodeX(\"age\", Ordinal).\n",
    "      encodeY(\"people\", aggregate=AggOps.Q1).\n",
    "      encodeY2(\"people\", aggregate=AggOps.Q3)\n",
    "  ).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plot with legend on the left and a different title "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-fd66970c-b1ef-4008-ae5e-9aa6fabb91bd\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-fd66970c-b1ef-4008-ae5e-9aa6fabb91bd'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;point&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;legend&quot; : {\n",
       "        &quot;title&quot; : &quot;Place of Origin&quot;,\n",
       "        &quot;orient&quot; : &quot;left&quot;\n",
       "      },\n",
       "      &quot;field&quot; : &quot;Origin&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    },\n",
       "    &quot;shape&quot; : {\n",
       "      &quot;legend&quot; : {\n",
       "        &quot;title&quot; : &quot;Place of Origin&quot;,\n",
       "        &quot;orient&quot; : &quot;left&quot;,\n",
       "        &quot;titleColor&quot; : &quot;red&quot;\n",
       "      },\n",
       "      &quot;field&quot; : &quot;Origin&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;Plot with legend on the left and a different title &quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-fd66970c-b1ef-4008-ae5e-9aa6fabb91bd&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-fd66970c-b1ef-4008-ae5e-9aa6fabb91bd'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"Plot with legend on the left and a different title \").\n",
    "  withURL(Cars).\n",
    "  mark(Point).\n",
    "  encodeY(\"Horsepower\", Quantitative).\n",
    "  encodeX(\"Miles_per_Gallon\", Quantitative).\n",
    "  encodeColor(field=\"Origin\", dataType=Nominal, legend=Legend(orient = \"left\", title=\"Place of Origin\" )).\n",
    "  encodeShape(field=\"Origin\", dataType=Nominal, legend=Legend(orient = \"left\", title=\"Place of Origin\",\n",
    "    titleColor=\"red\")).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plot to show Binning options"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-5fb52360-2185-404d-8c60-1512edf1bcb9\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-5fb52360-2185-404d-8c60-1512edf1bcb9'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;bar&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;IMDB_Rating&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : {\n",
       "        &quot;step&quot; : 2.0,\n",
       "        &quot;maxbins&quot; : 3.0\n",
       "      }\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;*&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;count&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;Plot to show Binning options&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/movies.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-5fb52360-2185-404d-8c60-1512edf1bcb9&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-5fb52360-2185-404d-8c60-1512edf1bcb9'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"Plot to show Binning options\").\n",
    "  withURL(Movies).\n",
    "  mark(Bar).\n",
    "  encodeX(\"IMDB_Rating\", Quantitative, bin=Bin(step=2.0, maxbins=3.0)).\n",
    "  encodeY(field=\"*\", Quantitative, aggregate=AggOps.Count).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plot to show Binning options"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-daf96ea6-be83-41bd-986c-b4ccfc8f7701\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-daf96ea6-be83-41bd-986c-b4ccfc8f7701'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;bar&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;sort&quot; : &quot;descending&quot;,\n",
       "      &quot;field&quot; : &quot;Worldwide_Gross&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;bin&quot; : {\n",
       "        &quot;maxbins&quot; : 20.0\n",
       "      }\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;*&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;,\n",
       "      &quot;aggregate&quot; : &quot;count&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;Plot to show Binning options&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/movies.json&quot;\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-daf96ea6-be83-41bd-986c-b4ccfc8f7701&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-daf96ea6-be83-41bd-986c-b4ccfc8f7701'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"Plot to show Binning options\").\n",
    "  withURL(Movies).\n",
    "  mark(Bar).\n",
    "  encodeX(\"Worldwide_Gross\", Quant, bin=Bin(maxbins=20.0), sortOrder=SortOrder.Desc).\n",
    "  encodeY(field=\"*\", Quant, aggregate=AggOps.Count).\n",
    "  show\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plot to show usage of encodeText"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "  <iframe id=\"frame-vegas-97777dd4-ec0e-4af9-9352-2a06e293a0f5\" sandbox=\"allow-scripts allow-same-origin\" style=\"border: none; width: 100%\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/d3/3.5.17/d3.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega/2.6.3/vega.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://cdn.jsdelivr.net/webjars/org.webjars.bower/vega-lite/1.2.0/vega-lite.min.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "&lt;script src=&quot;https://vega.github.io/vega-editor/vendor/vega-embed.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       " &lt;div id='vegas-97777dd4-ec0e-4af9-9352-2a06e293a0f5'&gt;&lt;/div&gt;\n",
       " &lt;script&gt;\n",
       "   var embedSpec = {\n",
       "     mode: &quot;vega-lite&quot;,\n",
       "     spec: {\n",
       "  &quot;mark&quot; : &quot;text&quot;,\n",
       "  &quot;encoding&quot; : {\n",
       "    &quot;x&quot; : {\n",
       "      &quot;field&quot; : &quot;Horsepower&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;y&quot; : {\n",
       "      &quot;field&quot; : &quot;Miles_per_Gallon&quot;,\n",
       "      &quot;type&quot; : &quot;quantitative&quot;\n",
       "    },\n",
       "    &quot;color&quot; : {\n",
       "      &quot;field&quot; : &quot;Origin&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    },\n",
       "    &quot;text&quot; : {\n",
       "      &quot;field&quot; : &quot;OriginInitial&quot;,\n",
       "      &quot;type&quot; : &quot;nominal&quot;\n",
       "    }\n",
       "  },\n",
       "  &quot;description&quot; : &quot;Plot to show usage of encodeText&quot;,\n",
       "  &quot;data&quot; : {\n",
       "    &quot;url&quot; : &quot;https://vega.github.io/vega-editor/app/data/cars.json&quot;\n",
       "  },\n",
       "  &quot;transform&quot; : {\n",
       "    &quot;calculate&quot; : [\n",
       "      {\n",
       "        &quot;field&quot; : &quot;OriginInitial&quot;,\n",
       "        &quot;expr&quot; : &quot;datum.Origin[0]&quot;\n",
       "      }\n",
       "    ]\n",
       "  }\n",
       "}\n",
       "   }\n",
       "   vg.embed(&quot;#vegas-97777dd4-ec0e-4af9-9352-2a06e293a0f5&quot;, embedSpec, function(error, result) {});\n",
       " &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\"></iframe>\n",
       "  <script>\n",
       "    (function() {\n",
       "      function resizeIFrame(el, k) {\n",
       "        var height = el.contentWindow.document.body.scrollHeight || '400'; // Fallback in case of no scroll height\n",
       "        el.style.height = height + 'px';\n",
       "        if (k <= 10) { setTimeout(function() { resizeIFrame(el, k+1) }, 1000 + (k * 250)) };\n",
       "      }\n",
       "      resizeIFrame(document.querySelector('#frame-vegas-97777dd4-ec0e-4af9-9352-2a06e293a0f5'), 1);\n",
       "    })(); // IIFE\n",
       "  </script>\n",
       "    "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vegas(\"Plot to show usage of encodeText\").\n",
    "  withURL(Cars).\n",
    "  addTransform(\"OriginInitial\", \"datum.Origin[0]\").\n",
    "  mark(Text).\n",
    "  encodeX(\"Horsepower\", Quantitative).\n",
    "  encodeY(\"Miles_per_Gallon\", Quantitative).\n",
    "  encodeColor(field=\"Origin\", dataType= Nominal).\n",
    "  encodeText(field=\"OriginInitial\", dataType= Nominal).\n",
    "  show\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Almond 0.1.11 (2.11)",
   "language": "scala",
   "name": "almond_0.1.11_2.11"
  },
  "language_info": {
   "codemirror_mode": "text/x-scala",
   "file_extension": ".scala",
   "mimetype": "text/x-scala",
   "name": "scala",
   "nbconvert_exporter": "script",
   "version": "2.11.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}