How to embed DAGitty in your own webpage

The DAGitty javascript library can be used independent of the graphical user interface, and allows you to embed graphs into your own HTML pages. These graphs are manipulable using the standard mouse and keyboard interface as the DAGitty user interface.

Basic Procedure

Step 1: Include the DAGitty JavaScript library in the header of your page. Also include the Prototype.js library, which is e.g. hosted on Google.

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js">
<script type="text/javascript" src="http://www.dagitty.net/lib/dagitty-2.1.js">

Step 2: Include a "pre"-element in your page that has the "dagitty" class. Inside this element, include the DAGitty model code of the desired graph. Instead of a "pre" you may also try a regular "div" with "white-space: pre" but I had problems with that in Internet Explorer.

<pre class="dagitty">
  I 1 @0.423,0.755
  X E @-1.193,1.639
  Y O @1.053,1.639

  I Y
  X I Y
</pre>

Step 3: Run the function "DAGitty.setup()" after the document has loaded.

<body onload="DAGitty.setup()">

Examples

Also check out the more complex examples linked under "Tutorials" from the front page.