title: How to output SVG in a Jupyter notebook using jsdom, D3 and IJavascript
body: <p>I'm not strong on frontend development but I have toyed around with a lot of Javascript and D3 recently. Being used to doing scientific analysis in Python using Jupyter Notebooks, I figured it should be possible to use a similar workflow for developing scientific visualizations with D3 using JS code in a Jupiter notebook with a JS kernel. I've looked at <a href="https://github.com/n-riesco" rel="nofollow noreferrer">n-riesco</a>'s <a href="https://github.com/n-riesco/ijavascript" rel="nofollow noreferrer">IJavascript project</a> and it seems promising, but when trying to import D3 the notebook throws an error:</p>
  <pre><code>// npm install d3
  var d3 = require('d3');
  </code></pre>
  <p>throws</p>
  <pre><code>ReferenceError: document is not defined
  </code></pre>
  <p>I'm guessing this is because there is no DOM in the Jupyter environment (<a href="https://github.com/d3/d3-request/issues/10" rel="nofollow noreferrer">because Mike Bostock says so</a>). In fact if I import <code>jsdom</code>, D3 will also import successfully. Awesome! However, now, I cannot select anything because, well... I'm guessing because there is nothing to select in the Jupyter environment.</p>
  <p>The things I would like to do is either something like:</p>
  <pre><code>$$svg$$ = &quot;&lt;svg&gt;&lt;rect width=1000 height=1000/&gt;&lt;/svg&gt;&quot;;
  var svg = d3.select(&quot;svg&quot;)
  // Beautiful D3 code
  </code></pre>
  <p>Or (less cool but also favorable), get a reference to the DOM of some local server, that I can then manipulate by executing code in the notebook.</p>
  <br>
  <h1>Update</h1>
  <p>With the introduction of <a href="https://beta.observablehq.com/" rel="nofollow noreferrer">Observable</a>, there is no longer any need to use JavaScript in Jupyter notebooks. Observable is an awesome JavaScript notebook environment that can pretty much do everything. For example, the thing I wanted to do when I asked this question, can be done as simply as:</p>
  <p><a href="https://i.stack.imgur.com/150YP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/150YP.png" alt="enter image description here" /></a></p>