samples/notebooks/javascript/D3.js with import.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "source": [
    "# Load [D3.js](https://d3js.org/) using `import`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "dotnet_interactive": {
     "language": "html"
    },
    "polyglot_notebook": {
     "kernelName": "html"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<svg id=\"d3_target\"></svg>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "<svg id=\"d3_target\"></svg>"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "source": [
    "# Now, you can use `d3` to render an image."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "2b34b2fd",
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    },
    "polyglot_notebook": {
     "kernelName": "javascript"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "d3 = await import(\"https://cdn.jsdelivr.net/npm/d3@7/+esm\");\n",
    "\n",
    "const width = 400;\n",
    "const height = 400;\n",
    "const svg = d3.select(\"#d3_target\");\n",
    "\n",
    "svg\n",
    "  .attr(\"width\", width)\n",
    "  .attr(\"height\", 400)\n",
    "  .attr(\"viewBox\", [0, 0, width, height])\n",
    "  .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n",
    "\n",
    "svg\n",
    "  .append(\"circle\")\n",
    "  .attr(\"fill\", \"red\")\n",
    "  .attr(\"cx\", width/2)\n",
    "  .attr(\"cy\", height/2)\n",
    "  .attr(\"r\", \"100\");"
   ]
  }
 ],
 "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": [
       "frontend"
      ],
      "name": "vscode"
     },
     {
      "aliases": [
       "js"
      ],
      "languageName": "JavaScript",
      "name": "javascript"
     },
     {
      "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": [],
      "name": "webview"
     }
    ]
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}