title: How to get D3 working on a VSCODE webview?
body: <p>So I am trying to get D3 going on webviews and to that effect I am trying to follow the D3 tutorials, however, on the very first example I am already stuck. My code exists with error:</p>
  
  <p><code>ReferenceError: document is not defined</code></p>
  
  <p>I understand that this is because vscode has no concept of a document. The issue is, the document in question seems to be implicitly referenced by the tutorial I am following.</p>
  
  <p>My code:</p>
  
  <pre><code>"use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  const vscode = require("vscode");
  const d3 = require("d3");
  function activate(context) {
      // Create and show a new webview
      const panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally
      'Cat Coding', // Title of the panel displayed to the user
      vscode.ViewColumn.One, // Editor column to show the new webview panel in.
      {} // Webview options. More on these later.
      );
      panel.webview.html = getWebviewContent();
      context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () =&gt; {
          try {
              let data = [30, 86, 168, 281, 303, 365];
              d3.select("chart")
                  .selectAll("div")
                  .data(data)
                  .enter()
                  .append("div")
                  .style("width", function (d) { return d + "px"; })
                  .text(function (d) { return d; });
          }
          catch (e) {
              console.log(e);
          }
      }));
  }
  exports.activate = activate;
  function getWebviewContent() {
      return `&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;title&gt;Cat Coding&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /&gt;
        &lt;h1 id="lines-of-code-counter"&gt;0&lt;/h1&gt;
  
        &lt;script&gt;
            const counter = document.getElementById('lines-of-code-counter');
  
            let count = 0;
            setInterval(() =&gt; {
                counter.textContent = count++;
            }, 100);
        &lt;/script&gt;
        &lt;div class="chart"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;`;
  }
  // this method is called when your extension is deactivated
  function deactivate() { }
  exports.deactivate = deactivate;
  </code></pre>
  
  <p>I know it;s possible to use D3 inside vscode because multiple extensions do so I just haven;t been successful at reverse engineering them.</p>