Testing Altair's HTML renderer with nbviewer

TestHTMLRenderer.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-1\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  (function(){\n",
       "    const spec = {\"config\": {\"view\": {\"width\": 400, \"height\": 300}, \"mark\": {\"tooltip\": null}}, \"data\": {\"url\": \"https://vega.github.io/vega-datasets/data/population.json\"}, \"mark\": {\"type\": \"boxplot\", \"extent\": \"min-max\"}, \"encoding\": {\"x\": {\"type\": \"ordinal\", \"field\": \"age\"}, \"y\": {\"type\": \"quantitative\", \"field\": \"people\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.4.0.json\"};\n",
       "    const embedOpt = {\"mode\": \"vega-lite\"};\n",
       "    const outputDiv = \"altair-viz-1\";\n",
       "    const baseUrl = \"https://cdn.jsdelivr.net/npm/\"\n",
       "    const element = document.getElementById(outputDiv);\n",
       "\n",
       "    function loadScript(url) {\n",
       "      var fullUrl = `${baseUrl}/${url}`\n",
       "      console.log(`loadScript(\"${fullUrl}\")`);\n",
       "      return new Promise(function(resolve, reject) {\n",
       "        var s = document.createElement('script');\n",
       "        s.src = fullUrl;\n",
       "        s.async = true;\n",
       "        s.onload = function(){resolve(fullUrl);};\n",
       "        s.onerror = function(){reject(fullUrl);};\n",
       "        document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "      });\n",
       "    }\n",
       "\n",
       "    function showError(e) {\n",
       "      element.innerHTML = `<div class=\"error\" style=\"color:red;\">${e}</div>`\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(\"#\" + outputDiv, spec, embedOpt)\n",
       "        .catch(error => {\n",
       "          showError(\"JavaScript Error: \" + error.message + \"<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.\");\n",
       "          throw error;\n",
       "        });\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      console.log(\"loading vega libraries viaw requirejs\");\n",
       "      requirejs.config({\n",
       "        paths: {\n",
       "          \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
       "          \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
       "          \"vega-lite\": \"https://cdn.jsdelivr.net/npm//[email protected]?noext\",\n",
       "          \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@4?noext\",\n",
       "        }\n",
       "      });\n",
       "      require([\"vega-embed\"], displayChart);\n",
       "    } else if (typeof vegaEmbed === \"function\") {\n",
       "      console.log(\"vegaEmbed already loaded\");\n",
       "      displayChart(vegaEmbed);\n",
       "    } else {\n",
       "      loadScript('vega@5?noext')\n",
       "        .then(() => loadScript('[email protected]?noext'))\n",
       "        .then(() => loadScript('vega-embed@4?noext'))\n",
       "        .catch(url => showError(`Error loading javascript from ${url}`))\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })();\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import altair as alt\n",
    "alt.renderers.enable('html')\n",
    "from vega_datasets import data\n",
    "\n",
    "alt.Chart(\n",
    "    data.population.url\n",
    ").mark_boxplot(\n",
    "    extent='min-max'\n",
    ").encode(\n",
    "    x='age:O',\n",
    "    y='people:Q'\n",
    ")"
   ]
  }
 ],
 "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.7.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}