{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# vega-extension"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.display import display\n",
    "import pandas as pd\n",
    "\n",
    "def Vega(spec):\n",
    "    bundle = {}\n",
    "    bundle['application/vnd.vega.v4+json'] = spec\n",
    "    display(bundle, raw=True)\n",
    "\n",
    "def VegaLite(spec):\n",
    "    bundle = {}\n",
    "    bundle['application/vnd.vegalite.v2+json'] = spec\n",
    "    display(bundle, raw=True)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Vega(spec: dict)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.vega.v4+json": {
       "$schema": "https://vega.github.io/schema/vega/v3.0.json",
       "axes": [
        {
         "orient": "bottom",
         "scale": "xscale"
        },
        {
         "orient": "left",
         "scale": "yscale"
        }
       ],
       "data": [
        {
         "name": "table",
         "values": [
          {
           "amount": 28,
           "category": "A"
          },
          {
           "amount": 55,
           "category": "B"
          },
          {
           "amount": 43,
           "category": "C"
          },
          {
           "amount": 91,
           "category": "D"
          },
          {
           "amount": 81,
           "category": "E"
          },
          {
           "amount": 53,
           "category": "F"
          },
          {
           "amount": 19,
           "category": "G"
          },
          {
           "amount": 87,
           "category": "H"
          }
         ]
        }
       ],
       "height": 200,
       "marks": [
        {
         "encode": {
          "enter": {
           "width": {
            "band": 1,
            "scale": "xscale"
           },
           "x": {
            "field": "category",
            "scale": "xscale"
           },
           "y": {
            "field": "amount",
            "scale": "yscale"
           },
           "y2": {
            "scale": "yscale",
            "value": 0
           }
          },
          "hover": {
           "fill": {
            "value": "red"
           }
          },
          "update": {
           "fill": {
            "value": "steelblue"
           }
          }
         },
         "from": {
          "data": "table"
         },
         "type": "rect"
        },
        {
         "encode": {
          "enter": {
           "align": {
            "value": "center"
           },
           "baseline": {
            "value": "bottom"
           },
           "fill": {
            "value": "#333"
           }
          },
          "update": {
           "fillOpacity": [
            {
             "test": "datum === tooltip",
             "value": 0
            },
            {
             "value": 1
            }
           ],
           "text": {
            "signal": "tooltip.amount"
           },
           "x": {
            "band": 0.5,
            "scale": "xscale",
            "signal": "tooltip.category"
           },
           "y": {
            "offset": -2,
            "scale": "yscale",
            "signal": "tooltip.amount"
           }
          }
         },
         "type": "text"
        }
       ],
       "padding": 5,
       "scales": [
        {
         "domain": {
          "data": "table",
          "field": "category"
         },
         "name": "xscale",
         "padding": 0.05,
         "range": "width",
         "round": true,
         "type": "band"
        },
        {
         "domain": {
          "data": "table",
          "field": "amount"
         },
         "name": "yscale",
         "nice": true,
         "range": "height"
        }
       ],
       "signals": [
        {
         "name": "tooltip",
         "on": [
          {
           "events": "rect:mouseover",
           "update": "datum"
          },
          {
           "events": "rect:mouseout",
           "update": "{}"
          }
         ],
         "value": {}
        }
       ],
       "width": 400
      },
      "image/png": "[encoded data, 12468 characters]"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vega({\n",
    "  \"$schema\": \"https://vega.github.io/schema/vega/v3.0.json\",\n",
    "  \"width\": 400,\n",
    "  \"height\": 200,\n",
    "  \"padding\": 5,\n",
    "\n",
    "  \"data\": [\n",
    "    {\n",
    "      \"name\": \"table\",\n",
    "      \"values\": [\n",
    "        {\"category\": \"A\", \"amount\": 28},\n",
    "        {\"category\": \"B\", \"amount\": 55},\n",
    "        {\"category\": \"C\", \"amount\": 43},\n",
    "        {\"category\": \"D\", \"amount\": 91},\n",
    "        {\"category\": \"E\", \"amount\": 81},\n",
    "        {\"category\": \"F\", \"amount\": 53},\n",
    "        {\"category\": \"G\", \"amount\": 19},\n",
    "        {\"category\": \"H\", \"amount\": 87}\n",
    "      ]\n",
    "    }\n",
    "  ],\n",
    "\n",
    "  \"signals\": [\n",
    "    {\n",
    "      \"name\": \"tooltip\",\n",
    "      \"value\": {},\n",
    "      \"on\": [\n",
    "        {\"events\": \"rect:mouseover\", \"update\": \"datum\"},\n",
    "        {\"events\": \"rect:mouseout\",  \"update\": \"{}\"}\n",
    "      ]\n",
    "    }\n",
    "  ],\n",
    "\n",
    "  \"scales\": [\n",
    "    {\n",
    "      \"name\": \"xscale\",\n",
    "      \"type\": \"band\",\n",
    "      \"domain\": {\"data\": \"table\", \"field\": \"category\"},\n",
    "      \"range\": \"width\",\n",
    "      \"padding\": 0.05,\n",
    "      \"round\": True\n",
    "    },\n",
    "    {\n",
    "      \"name\": \"yscale\",\n",
    "      \"domain\": {\"data\": \"table\", \"field\": \"amount\"},\n",
    "      \"nice\": True,\n",
    "      \"range\": \"height\"\n",
    "    }\n",
    "  ],\n",
    "\n",
    "  \"axes\": [\n",
    "    { \"orient\": \"bottom\", \"scale\": \"xscale\" },\n",
    "    { \"orient\": \"left\", \"scale\": \"yscale\" }\n",
    "  ],\n",
    "\n",
    "  \"marks\": [\n",
    "    {\n",
    "      \"type\": \"rect\",\n",
    "      \"from\": {\"data\":\"table\"},\n",
    "      \"encode\": {\n",
    "        \"enter\": {\n",
    "          \"x\": {\"scale\": \"xscale\", \"field\": \"category\"},\n",
    "          \"width\": {\"scale\": \"xscale\", \"band\": 1},\n",
    "          \"y\": {\"scale\": \"yscale\", \"field\": \"amount\"},\n",
    "          \"y2\": {\"scale\": \"yscale\", \"value\": 0}\n",
    "        },\n",
    "        \"update\": {\n",
    "          \"fill\": {\"value\": \"steelblue\"}\n",
    "        },\n",
    "        \"hover\": {\n",
    "          \"fill\": {\"value\": \"red\"}\n",
    "        }\n",
    "      }\n",
    "    },\n",
    "    {\n",
    "      \"type\": \"text\",\n",
    "      \"encode\": {\n",
    "        \"enter\": {\n",
    "          \"align\": {\"value\": \"center\"},\n",
    "          \"baseline\": {\"value\": \"bottom\"},\n",
    "          \"fill\": {\"value\": \"#333\"}\n",
    "        },\n",
    "        \"update\": {\n",
    "          \"x\": {\"scale\": \"xscale\", \"signal\": \"tooltip.category\", \"band\": 0.5},\n",
    "          \"y\": {\"scale\": \"yscale\", \"signal\": \"tooltip.amount\", \"offset\": -2},\n",
    "          \"text\": {\"signal\": \"tooltip.amount\"},\n",
    "          \"fillOpacity\": [\n",
    "            {\"test\": \"datum === tooltip\", \"value\": 0},\n",
    "            {\"value\": 1}\n",
    "          ]\n",
    "        }\n",
    "      }\n",
    "    }\n",
    "  ]\n",
    "})"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Vega(spec: string)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.vega.v4+json": "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json",
      "image/png": "[encoded data, 12468 characters]"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Vega('https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json')"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## VegaLite(spec: dict)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.vegalite.v2+json": {
       "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
       "data": {
        "values": [
         {
          "a": "A",
          "b": 28
         },
         {
          "a": "B",
          "b": 55
         },
         {
          "a": "C",
          "b": 43
         },
         {
          "a": "D",
          "b": 91
         },
         {
          "a": "E",
          "b": 81
         },
         {
          "a": "F",
          "b": 53
         },
         {
          "a": "G",
          "b": 19
         },
         {
          "a": "H",
          "b": 87
         },
         {
          "a": "I",
          "b": 52
         }
        ]
       },
       "description": "A simple bar chart with embedded data.",
       "encoding": {
        "x": {
         "field": "a",
         "type": "ordinal"
        },
        "y": {
         "field": "b",
         "type": "quantitative"
        }
       },
       "mark": "bar"
      },
      "image/png": "[encoded data, 7812 characters]"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "VegaLite({\n",
    "  \"$schema\": \"https://vega.github.io/schema/vega-lite/v2.json\",\n",
    "  \"description\": \"A simple bar chart with embedded data.\",\n",
    "  \"data\": {\n",
    "    \"values\": [\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",
    "  \"mark\": \"bar\",\n",
    "  \"encoding\": {\n",
    "    \"x\": {\"field\": \"a\", \"type\": \"ordinal\"},\n",
    "    \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}\n",
    "  }\n",
    "})"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## VegaLite(spec: string)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.vegalite.v2+json": "https://raw.githubusercontent.com/vega/vega-lite/master/examples/specs/bar.vl.json",
      "image/png": "[encoded data, 7812 characters]"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "VegaLite('https://raw.githubusercontent.com/vega/vega-lite/master/examples/specs/bar.vl.json')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 1,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
