samples/notebooks/javascript/Plotly with RequireJS.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "source": [
    "# Load [Plotly](https://plotly.com/javascript/) using [RequireJS](https://requirejs.org/)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7cbff5ac",
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    },
    "polyglot_notebook": {
     "kernelName": "javascript"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "plotlyloader = (require.config({\n",
    "    paths: {\n",
    "        d3: 'https://cdn.jsdelivr.net/npm/d3@7.4.4/dist/d3.min',\n",
    "        jquery: 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min',\n",
    "        plotly: 'https://cdn.plot.ly/plotly-2.14.0.min'\n",
    "    },\n",
    "\n",
    "    shim: {\n",
    "        plotly: {\n",
    "            deps: ['d3', 'jquery'],\n",
    "            exports: 'plotly'\n",
    "        }\n",
    "    }\n",
    "}) || require);"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "source": [
    "# Add a placeholder into the DOM.\n",
    "\n",
    "A plot can be rendered here afterward."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0f519d22",
   "metadata": {
    "dotnet_interactive": {
     "language": "html"
    },
    "polyglot_notebook": {
     "kernelName": "html"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "<div id=\"target\" style=\"height:400px\">placeholder</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "source": [
    "# Finally, render a plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2b34b2fd",
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    },
    "polyglot_notebook": {
     "kernelName": "javascript"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "plotlyloader(['d3', 'plotly'], function (d3, plotly) {\n",
    "    var trace1 = {\n",
    "        x: [1, 2, 3, 4],\n",
    "        y: [10, 15, 13, 17],\n",
    "        mode: 'markers',\n",
    "        type: 'scatter'\n",
    "      };\n",
    "      \n",
    "      var trace2 = {\n",
    "        x: [2, 3, 4, 5],\n",
    "        y: [16, 5, 11, 9],\n",
    "        mode: 'lines',\n",
    "        type: 'scatter'\n",
    "      };\n",
    "      \n",
    "      var trace3 = {\n",
    "        x: [1, 2, 3, 4],\n",
    "        y: [12, 9, 15, 12],\n",
    "        mode: 'lines+markers',\n",
    "        type: 'scatter'\n",
    "      };\n",
    "      \n",
    "      var data = [trace1, trace2, trace3];\n",
    "      \n",
    "      plotly.newPlot('target', data);\n",
    "    \n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    },
    "polyglot_notebook": {
     "kernelName": "javascript"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (C#)",
   "language": "C#",
   "name": ".net-csharp"
  },
  "polyglot_notebook": {
   "kernelInfo": {
    "defaultKernelName": "csharp",
    "items": [
     {
      "aliases": [
       "c#",
       "C#"
      ],
      "languageName": "C#",
      "name": "csharp"
     },
     {
      "aliases": [],
      "name": ".NET"
     },
     {
      "aliases": [
       "f#",
       "F#"
      ],
      "languageName": "F#",
      "name": "fsharp"
     },
     {
      "aliases": [],
      "languageName": "HTML",
      "name": "html"
     },
     {
      "aliases": [],
      "languageName": "KQL",
      "name": "kql"
     },
     {
      "aliases": [],
      "languageName": "Mermaid",
      "name": "mermaid"
     },
     {
      "aliases": [
       "powershell"
      ],
      "languageName": "PowerShell",
      "name": "pwsh"
     },
     {
      "aliases": [],
      "languageName": "SQL",
      "name": "sql"
     },
     {
      "aliases": [],
      "name": "value"
     },
     {
      "aliases": [
       "frontend"
      ],
      "name": "vscode"
     },
     {
      "aliases": [
       "js"
      ],
      "languageName": "JavaScript",
      "name": "javascript"
     },
     {
      "aliases": [],
      "name": "webview"
     },
     {
      "aliases": [],
      "languageName": null,
      "name": "sql-adventureworks"
     }
    ]
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}