nteract - plotly.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The API returns a page of 10 (by default)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "inputHidden": false,
    "outputHidden": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"  \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n",
       "<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n",
       "<head>\r\n",
       "<title>HTML TABLE</title>\r\n",
       "</head><body>\r\n",
       "<table>\r\n",
       "<colgroup><col/><col/><col/><col/><col/><col/><col/><col/></colgroup>\r\n",
       "<tr><th>name</th><th>height</th><th>mass</th><th>hair_color</th><th>skin_color</th><th>eye_color</th><th>birth_year</th><th>gender</th></tr>\r\n",
       "<tr><td>Luke Skywalker</td><td>172</td><td>77</td><td>blond</td><td>fair</td><td>blue</td><td>19BBY</td><td>male</td></tr>\r\n",
       "<tr><td>C-3PO</td><td>167</td><td>75</td><td>n/a</td><td>gold</td><td>yellow</td><td>112BBY</td><td>n/a</td></tr>\r\n",
       "<tr><td>R2-D2</td><td>96</td><td>32</td><td>n/a</td><td>white, blue</td><td>red</td><td>33BBY</td><td>n/a</td></tr>\r\n",
       "<tr><td>Darth Vader</td><td>202</td><td>136</td><td>none</td><td>white</td><td>yellow</td><td>41.9BBY</td><td>male</td></tr>\r\n",
       "<tr><td>Leia Organa</td><td>150</td><td>49</td><td>brown</td><td>light</td><td>brown</td><td>19BBY</td><td>female</td></tr>\r\n",
       "<tr><td>Owen Lars</td><td>178</td><td>120</td><td>brown, grey</td><td>light</td><td>blue</td><td>52BBY</td><td>male</td></tr>\r\n",
       "<tr><td>Beru Whitesun lars</td><td>165</td><td>75</td><td>brown</td><td>light</td><td>blue</td><td>47BBY</td><td>female</td></tr>\r\n",
       "<tr><td>R5-D4</td><td>97</td><td>32</td><td>n/a</td><td>white, red</td><td>red</td><td>unknown</td><td>n/a</td></tr>\r\n",
       "<tr><td>Biggs Darklighter</td><td>183</td><td>84</td><td>black</td><td>light</td><td>brown</td><td>24BBY</td><td>male</td></tr>\r\n",
       "<tr><td>Obi-Wan Kenobi</td><td>182</td><td>77</td><td>auburn, white</td><td>fair</td><td>blue-gray</td><td>57BBY</td><td>male</td></tr>\r\n",
       "</table>\r\n",
       "</body></html>"
      ],
      "text/plain": [
       "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"  \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n",
       "<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n",
       "<head>\r\n",
       "<title>HTML TABLE</title>\r\n",
       "</head><body>\r\n",
       "<table>\r\n",
       "<colgroup><col/><col/><col/><col/><col/><col/><col/><col/></colgroup>\r\n",
       "<tr><th>name</th><th>height</th><th>mass</th><th>hair_color</th><th>skin_color</th><th>eye_color</th><th>birth_year</th><th>gender</th></tr>\r\n",
       "<tr><td>Luke Skywalker</td><td>172</td><td>77</td><td>blond</td><td>fair</td><td>blue</td><td>19BBY</td><td>male</td></tr>\r\n",
       "<tr><td>C-3PO</td><td>167</td><td>75</td><td>n/a</td><td>gold</td><td>yellow</td><td>112BBY</td><td>n/a</td></tr>\r\n",
       "<tr><td>R2-D2</td><td>96</td><td>32</td><td>n/a</td><td>white, blue</td><td>red</td><td>33BBY</td><td>n/a</td></tr>\r\n",
       "<tr><td>Darth Vader</td><td>202</td><td>136</td><td>none</td><td>white</td><td>yellow</td><td>41.9BBY</td><td>male</td></tr>\r\n",
       "<tr><td>Leia Organa</td><td>150</td><td>49</td><td>brown</td><td>light</td><td>brown</td><td>19BBY</td><td>female</td></tr>\r\n",
       "<tr><td>Owen Lars</td><td>178</td><td>120</td><td>brown, grey</td><td>light</td><td>blue</td><td>52BBY</td><td>male</td></tr>\r\n",
       "<tr><td>Beru Whitesun lars</td><td>165</td><td>75</td><td>brown</td><td>light</td><td>blue</td><td>47BBY</td><td>female</td></tr>\r\n",
       "<tr><td>R5-D4</td><td>97</td><td>32</td><td>n/a</td><td>white, red</td><td>red</td><td>unknown</td><td>n/a</td></tr>\r\n",
       "<tr><td>Biggs Darklighter</td><td>183</td><td>84</td><td>black</td><td>light</td><td>brown</td><td>24BBY</td><td>male</td></tr>\r\n",
       "<tr><td>Obi-Wan Kenobi</td><td>182</td><td>77</td><td>auburn, white</td><td>fair</td><td>blue-gray</td><td>57BBY</td><td>male</td></tr>\r\n",
       "</table>\r\n",
       "</body></html>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "$swPeople = irm https://swapi.co/api/people\n",
    "$People = $swPeople.results \n",
    "$People | select name, height, mass, *color, *year, gender | ConvertTo-Html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 118,
   "metadata": {
    "inputHidden": false,
    "outputHidden": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "function appendScript(url, callback) {\n",
       "    var script = document.createElement('script');\n",
       "    script.type = 'text/javascript';\n",
       "    if (script.readyState){  //IE\n",
       "        script.onreadystatechange = function(){\n",
       "            if (script.readyState == \"loaded\" ||\n",
       "                    script.readyState == \"complete\"){\n",
       "                script.onreadystatechange = null;\n",
       "                callback();\n",
       "            }\n",
       "        };\n",
       "    } else {  //Others\n",
       "        script.onload = function(){\n",
       "            callback();\n",
       "        };\n",
       "    }\n",
       "    \n",
       "    script.src = url;\n",
       "    document.getElementsByTagName(\"head\")[0].appendChild(script);\n",
       "}\n",
       "appendScript(\"https://cdn.plot.ly/plotly-latest.min.js\", function(){ alert(Plotly); });"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "function Show-Plotly {\n",
    "    [CmdletBinding()]\n",
    "    param($data, $layout)\n",
    "    if($IsNteract) {   \n",
    "        $plot = [PSCustomObject]@{\n",
    "            \"application/vnd.plotly.v1+json\" = @{ data = @($data); layout = $layout }\n",
    "        }\n",
    "        $plot | Write-Jupyter\n",
    "    } else {\n",
    "        $guid = [Guid]::NewGuid().Guid\n",
    "        $pData = $data | ConvertTo-Json\n",
    "        $pLayout = $layout | ConvertTo-Json\n",
    "        Write-Jupyter -MimeType html -Input \"<div id='$guid' style='width:100%;'></div>\"\n",
    "        Write-Jupyter -MimeType javascript -Input \"Plotly.plot('$guid', $pData, $pLayout)\"\n",
    "    }\n",
    "}\n",
    "Write-Jupyter -MimeType javascript -Input @'\n",
    "function appendScript(url, callback) {\n",
    "    var script = document.createElement('script');\n",
    "    script.type = 'text/javascript';\n",
    "    if (script.readyState){  //IE\n",
    "        script.onreadystatechange = function(){\n",
    "            if (script.readyState == \"loaded\" ||\n",
    "                    script.readyState == \"complete\"){\n",
    "                script.onreadystatechange = null;\n",
    "                callback();\n",
    "            }\n",
    "        };\n",
    "    } else {  //Others\n",
    "        script.onload = function(){\n",
    "            callback();\n",
    "        };\n",
    "    }\n",
    "    \n",
    "    script.src = url;\n",
    "    document.getElementsByTagName(\"head\")[0].appendChild(script);\n",
    "}\n",
    "appendScript(\"https://cdn.plot.ly/plotly-latest.min.js\", function(){ alert(Plotly); });\n",
    "'@#>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 111,
   "metadata": {
    "inputHidden": false,
    "outputHidden": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id='91382c8c-d8b5-4cc3-acfb-7d0edbb39150' style='width:100%;'></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "Plotly.plot('91382c8c-d8b5-4cc3-acfb-7d0edbb39150', [\r\n",
       "    {\r\n",
       "        \"y\":  [\r\n",
       "                  \"172\",\r\n",
       "                  \"167\",\r\n",
       "                  \"96\",\r\n",
       "                  \"202\",\r\n",
       "                  \"150\",\r\n",
       "                  \"178\",\r\n",
       "                  \"165\",\r\n",
       "                  \"97\",\r\n",
       "                  \"183\",\r\n",
       "                  \"182\"\r\n",
       "              ],\r\n",
       "        \"marker\":  {\r\n",
       "                       \"color\":  \"rgb(55, 83, 109)\"\r\n",
       "                   },\r\n",
       "        \"name\":  \"Height\",\r\n",
       "        \"type\":  \"bar\",\r\n",
       "        \"x\":  [\r\n",
       "                  \"Luke Skywalker\",\r\n",
       "                  \"C-3PO\",\r\n",
       "                  \"R2-D2\",\r\n",
       "                  \"Darth Vader\",\r\n",
       "                  \"Leia Organa\",\r\n",
       "                  \"Owen Lars\",\r\n",
       "                  \"Beru Whitesun lars\",\r\n",
       "                  \"R5-D4\",\r\n",
       "                  \"Biggs Darklighter\",\r\n",
       "                  \"Obi-Wan Kenobi\"\r\n",
       "              ]\r\n",
       "    },\r\n",
       "    {\r\n",
       "        \"xaxis\":  \"x2\",\r\n",
       "        \"name\":  \"Mass\",\r\n",
       "        \"y\":  [\r\n",
       "                  \"77\",\r\n",
       "                  \"75\",\r\n",
       "                  \"32\",\r\n",
       "                  \"136\",\r\n",
       "                  \"49\",\r\n",
       "                  \"120\",\r\n",
       "                  \"75\",\r\n",
       "                  \"32\",\r\n",
       "                  \"84\",\r\n",
       "                  \"77\"\r\n",
       "              ],\r\n",
       "        \"type\":  \"bar\",\r\n",
       "        \"marker\":  {\r\n",
       "                       \"color\":  \"rgb(26,118,225)\"\r\n",
       "                   },\r\n",
       "        \"x\":  [\r\n",
       "                  \"Luke Skywalker\",\r\n",
       "                  \"C-3PO\",\r\n",
       "                  \"R2-D2\",\r\n",
       "                  \"Darth Vader\",\r\n",
       "                  \"Leia Organa\",\r\n",
       "                  \"Owen Lars\",\r\n",
       "                  \"Beru Whitesun lars\",\r\n",
       "                  \"R5-D4\",\r\n",
       "                  \"Biggs Darklighter\",\r\n",
       "                  \"Obi-Wan Kenobi\"\r\n",
       "              ]\r\n",
       "    }\r\n",
       "], {\r\n",
       "    \"xaxis2\":  {\r\n",
       "                   \"overlaying\":  \"x\"\r\n",
       "               }\r\n",
       "})"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Show-Plotly @{\n",
    "    type = \"bar\"\n",
    "    x = $People.name\n",
    "    y = $People.height\n",
    "    name = \"Height\"\n",
    "\n",
    "    marker = @{ color = \"rgb(55, 83, 109)\" }\n",
    "},@{\n",
    "    type = \"bar\"\n",
    "    x = $People.name\n",
    "    y = $People.mass\n",
    "    name = \"Mass\"\n",
    "    \n",
    "    marker = @{ color = \"rgb(26,118,225)\" }\n",
    "    xaxis = \"x2\"\n",
    "} @{ \n",
    "    xaxis2 = @{ \n",
    "        overlaying = \"x\"\n",
    "    }\n",
    "}\n",
    "             "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernel_info": {
   "name": "powershell-full"
  },
  "kernelspec": {
   "display_name": "PowerShell (Full)",
   "language": "PowerShell",
   "name": "powershell-full"
  },
  "language_info": {
   "codemirror_mode": "powershell",
   "file_extension": ".ps1",
   "mimetype": "text/powershell",
   "name": "PowerShell",
   "nbconvert_exporter": null,
   "pygments_lexer": "powershell",
   "version": "6.0"
  },
  "nteract": {
   "version": "0.1.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}