How to embed DAGitty in your own HTML file

The DAGitty javascript library can be used independently 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. You could use this, for example, to create interactive tutorials like the ones found on this site.

Basic Procedure

Step 1: Include the DAGitty JavaScript library in the header of your page.

<script src="http://www.dagitty.net/lib/dagitty-3.0.js"></script>

Step 2: Include a "div"-tag in your page that has the "dagitty" class. Inside this element, put the code of the DAG that you want to show initially. Use CSS to determine the size of the element.

<div class="dagitty" style="width:20em; height:20em">
  dag {
    I [pos="1,0"]
    X [exposure,pos="0,2"]
    Y [outcome,pos="2,2"]
    X -> { I -> Y }
  }
</div>

By default, the graph structure will not be editable – you will not be able to add or delete nodes or edges. If you want this to be possible, you need to add the attribute data-mutable="true" to the div tag.

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.