1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 5 <!-- 6 DAGitty - a graphical tool for analyzing causal diagrams 7 Copyright (C) 2010-2023 Johannes Textor, Benito van der Zander 8 9 This program is free software; you can redistribute it and/or 10 modify it under the terms of the GNU General Public License 11 as published by the Free Software Foundation; either version 2 12 of the License, or (at your option) any later version. 13 14 This program is distributed in the hope that it will be useful, 15 but WITHOUT ANY WARRANTY; without even the implied warranty of 16 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 17 GNU General Public License for more details. 18 19 You should have received a copy of the GNU General Public License 20 along with this program; if not, write to the Free Software 21 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 22 --> 23 24 <title>DAGitty v3.1</title> 25 <link rel="stylesheet" type="text/css" href="dags.css" /> 26 27
27<script src="js/dagitty.js"></script>
27 28
28<script src="js/example-dags.js"></script>
28 29 30
30<script src="js/styles/semlike.js"></script>
30 31
31<script src="js/styles/original.js"></script>
31 32 33
33<script src="js/main.js?v=2023-12-13"></script>
33 34
34<script src="js/base64.js"></script>
34 35 36 <meta name="viewport" content="width=device-width, initial-scale=1" /> 37 38
38<script> 39 var redraw; 40 var renderer; 41 var layouter; 42 var height = 300; 43 var width = 600; 44 var mouse_on_canvas; 45 var resize_timeout; 46 var mouse_x = 0; 47 var mouse_y = 0; 48 49 var Model = { 50 dag : null, 51 dag_active_bias_graph : null, 52 dag_ancestor_moral_graph : null, 53 dag_ancestor_pair_graph : null, 54 dag_model_text_data : null 55 }; 56 57 var DAGittyControl; 58 59 function initialize(){ 60 61 62 DAGitty.setup({autofocus:true}); 63 DAGittyControl = DAGitty.controllers[0]; 64 65 GUI.menus = ["model","examples","howto","layout","help"] 66 _.each(GUI.menus,function(t){ 67 document.getElementById("menu_"+t+"_title").addEventListener( 'click', 68 function(){menuToggle(t)} ); 69 }); 70 71 DAGittyControl.observe( 'graphchange', 72 function(g){ 73 Model.dag = g; 74 document.getElementById("adj_matrix").value = g.toString(); 75 // if previously highlighted variable no longer exists, fold up this menu 76 if( !g.getVertex(document.getElementById("variable_id").value) ){ 77 document.getElementById("variable_id").value = '' 78 } 79 displayImplicationInfo( false ) 80 causalEffectEstimates( document.getElementById("causal_effect_kind").value ) 81 displayGeneralInfo() 82 GUI.refresh_variable_status() 83 } 84 ); 85 86 DAGittyControl.observe( 'graphlayoutchange', 87 function(g){ 88 document.getElementById("adj_matrix").value = g.toString(); 89 } 90 ); 91 92 DAGittyControl.observe( 'vertex_marked', 93 function( v ){ 94 if( v ){ 95 displayShow( 'variable' ) 96 document.getElementById("variable_id").value = v.id 97 GUI.refresh_variable_status() 98 } else { 99 if( !Model.dag.getVertex(document.getElementById("variable_id").value) ){ 100 displayHide( 'variable' ) 101 } 102 } 103 } 104 ); 105 106 var getid = (function(){ 107 var regexS = "[\\?&]id=([^&#]*)"; 108 var regex = new RegExp(regexS); 109 var results = regex.exec(window.location.search); 110 if(results == null) 111 return ""; 112 else 113 return decodeURIComponent(results[1].replace(/\+/g, " ")); 114 })(); 115 116 if( getid ){ 117 // load user-supplied model 118 loadOnline( "dagitty.net/m"+getid ); 119 } else { 120 DAGittyControl.graphChanged(); 121 } 122 123 document.onkeydown = function(e){ 124 if( e.keyCode == 27 ){ 125 DAGittyControl.getView().getImplementation().stopMousemove() 126 DAGittyControl.getView().closeDialog() 127 } 128 } 129 } 130 window.onload = initialize; 131 </script>
131 132 133</head> 134<body> 135 136<main> 137 138 <ul id="menu"> 139 <li><a href="javascript:void(0)" id="menu_model_title">Model</a> 140 <ul id="menu_model" style="z-Index:15"> 141 <li><a href="#" onclick="newModel();displayHide('menu_model')">New model</a></li> 142 <li><a href="#" onclick="loadOnlineForm();displayHide('menu_model')">Load from dagitty.net</a></li> 143 <li><a href="#" onclick="exportPNG();displayHide('menu_model')">Export as PNG</a></li> 144 <li><a href="#" onclick="exportJPEG();displayHide('menu_model')">Export as JPEG</a></li> 145 <!--<li><a href="#" onclick="exportSVG();displayHide('menu_model')">Export as SVG</a></li>--> 146 <li><a href="#" onclick="saveOnlineForm();displayHide('menu_model')">Publish on dagitty.net</a></li> 147 148
148<script> 149 if( false && document.location.protocol == "https:" ){ 150 document.write('<li><a href="#" onclick="saveOnlineForm();displayHide(\'menu_model\')">Publish on dagitty.net</a></li>'); 151 document.write('<li><a href="#" onclick="updateOnlineForm();displayHide(\'menu_model\')">Update on dagitty.net</a></li>'); 152 document.write('<li><a href="#" onclick="deleteOnlineForm();displayHide(\'menu_model\')">Delete on dagitty.net</a></li>'); 153 } 154 155 if( false && supportsSVG() ){ 156 document.write( '<li><a href="#" onclick="exportPDF();displayHide(\'menu_model\')">Export as PDF</a></li>' ); 157 } 158 </script>
158 159 <li><a href="#" onclick="exportTikzCode();displayHide('menu_model')">Export LaTeX code</a></li> 160 </ul> 161 </li> 162 <li><a href="javascript:void(0)" id="menu_examples_title">Examples</a> 163 <ul id="menu_examples" style="z-Index:14"> 164
164<script> 165 for( var i = 0 ; i < examples.length ; i++ ){ 166 document.write( "<li><a href=\"#\" onclick=\"loadExample("+i+");displayHide('menu_examples')\">"+examples[i].l+"</a></li>" ); 167 } 168 </script>
168 169 </ul> 170 </li> 171 <li><a href="javascript:void(0)" id="menu_howto_title">How to ...</a> 172 <ul id="menu_howto" style="z-Index:13"> 173 <li><a href="#" onclick="how('To add a new variable, click/tap on the canvas.')">Add a variable</a></li> 174 <li><a href="#" onclick="how('To rename a variable, click/tap it and click/tap "rename" in the "variable" tab, or move the mouse over it and press the "r" key on your keyboard.')">Rename a variable</a></li> 175 <li><a href="#" onclick="how('To add a new connection, click/tap on the start variable and then on the end variable.')">Add a connection</a></li> 176 <li><a href="#" onclick="how('To delete a variable, click/tap it and then clik/tap "delete" in the "variable" tab, or move the mouse over it and press the "delete" or the "d" key on your keyboard.')">Delete a variable</a></li> 177 <li><a href="#" onclick="how('To delete a connection, click/tap on the start variable and then on the end variable.')">Delete a connection</a></li> 178 <li><a href="#" onclick="how('To save the model, copy-paste the content of the "model code" into your favourite text editor (e.g. "Word").')">Save a model</a></li> 179 <li><a href="#" onclick="how('To set the exposure variable, click/tap it and check "exposure" in the "variable" tab, or move the mouse over it and press the "e" key on your keyboard.')">Set exposure variable</a></li> 180 <li><a href="#" onclick="how('To set the outcome variable, click/tap it and check "outcome" in the "variable" tab, or move the mouse over it and press the "o" key on your keyboard.')">Set outcome variable</a></li> 181 <li><a href="#" onclick="how('To toggle adjustment for a variable, click/tap it and check "adjusted" in the "variable" tab, or move the mouse over it and press the "a" key on your keyboard.')">Adjust for variable</a></li> 182 <li><a href="#" onclick="how('To toggle selection status for a variable, click/tap it and check "selected" in the "variable" tab, or move the mouse over it and press the "s" key on your keyboard.')">Define a selection variable</a></li> 183 <li><a href="#" onclick="how('To toggle observed status for a variable, click/tap it and check "unobserved" in the "variable" tab, or move the mouse over it and press the "u" key on your keyboard.')">Make a variable unobserved (latent)</a></li> 184 </ul> 185 </li> 186 <li><a href="javascript:void(0)" id="menu_layout_title">Layout</a> 187 <ul id="menu_layout" style="z-Index:12"> 188 <li><a href="#" onclick="generateSpringLayout();displayHide('menu_layout');return false">Generate layout automatically</a></li> 189 </ul> 190 </li> 191 <li style="border-right:none"><a href="javascript:void(0)" id="menu_help_title">Help</a> 192 <ul id="menu_help" style="z-Index:11"> 193 <li><a href="manual-3.x.pdf" target="_blank" onclick="displayHide('menu_help')">Manual</a></li> 194 <li><a href="https://dagitty.net/learn/" target="_blank" onclick="displayHide('menu_help')">Other Resources</a></li> 195 </ul> 196 </li> 197 <li style="float:none; overflow: hidden; border-right: none;"> </li> 198 </ul> 199 200 <div id="canvas" class="dagitty" data-mutable="true"> 201A [selected,pos="-2.200,-1.520"] 202B [pos="1.400,-1.460"] 203D [outcome,pos="1.400,1.621"] 204E [exposure,pos="-2.200,1.597"] 205Z [adjusted,pos="-0.300,-0.082"] 206A -> E 207A -> Z [pos="-0.791,-1.045"] 208B -> D 209B -> Z [pos="0.680,-0.496"] 210E -> D 211 </div> 212 213</main> 214 215<aside> 216 217 <div id="llegend"> 218 219 <h3 onclick="displayToggle('variable')"><img src="images/arrow-down.png" alt="" id="a_variable"> 220 Variable</h3> 221 <div id="variable" style="display:block"> 222 223 <form autocomplete="off"> 224 <p>
225 <span id="variable_label" style="font-weight:bold"></span> 226 </p> 227 <p><input type="checkbox" checked="checked" id="variable_exposure" 228 onclick="GUI.set_variable_status('source',this.checked)" /> 229 <label for="variable_exposure">exposure</label></p> 230 <p><input type="checkbox" checked="checked" id="variable_outcome" 231 onclick="GUI.set_variable_status('target',this.checked)" /> 232 <label for="variable_outcome">outcome</label></p> 233 <p><input type="checkbox" checked="checked" id="variable_adjusted" 234 onclick="GUI.set_variable_status('adjustedNode',this.checked)" /> 235 <label for="variable_adjusted">adjusted</label></p> 236 <p><input type="checkbox" checked="checked" id="variable_selected" 237 onclick="GUI.set_variable_status('selectedNode',this.checked)" /> 238 <label for="variable_selected">selected</label></p> 239 <p><input type="checkbox" checked="checked" id="variable_unobserved" 240 onclick="GUI.set_variable_status('latentNode',this.checked)" /> 241 <label for="variable_unobserved">unobserved</label></p> 242 243 <input type="hidden" id="variable_id" value=""> 244 245 <p> 246 <button type="button" onclick="DAGittyControl.deleteVertex(document.getElementById('variable_id').value)">delete</button> 247 <button type="button" onclick="DAGittyControl.getView().renameVertexDialog(document.getElementById('variable_id').value)">rename</button> 248 </p> 249 250 </form> 251 252 253 254 </div> 255 256 257 <h3 onclick="displayToggle('viewmode')"><img src="images/arrow-down.png" alt="" id="a_view"> 258 View mode</h3> 259 <div id="viewmode" style="display:block"> 260 261 <form autocomplete="off"> 262 <p><input type="radio" checked="checked" id="dagview_normal" name="dagview" 263 onclick="GUI.set_view_mode(this.value)" value="normal" /> 264 <label for="dagview_normal">normal</label></p> 265 <p><input type="radio" name="dagview" id="dagview_moral" 266 onclick="GUI.set_view_mode(this.value)" value="moral"/> 267 <label for="dagview_moral">moral graph</label></p> 268 <p><input type="radio" name="dagview" id="dagview_dependency" 269 onclick="GUI.set_view_mode(this.value)" value="dependency"/> 270 <label for="dagview_dependency">correlation graph</label></p> 271 <p><input type="radio" name="dagview" id="dagview_equivalence" 272 onclick="GUI.set_view_mode(this.value)" value="equivalence"/> 273 <label for="dagview_equivalence">equivalence class</label></p> 274 </form> 275 276 </div> 277 278 <h3 onclick="displayToggle('effects')"><img src="images/arrow-down.png" alt="" id="a_effects"> Effect analysis</h3> 279 <div id="effects" style="display:block"> 280 <form autocomplete="off"> 281 <p><input type="checkbox" id="highlight_puredirect" 282 onclick="GUI.set_highlight_puredirect(this.checked)"/> 283 <label for="highlight_puredirect">atomic direct effects</label></p> 284 </form> 285 </div> 286 287 <h3 onclick="displayToggle('dagstyle')"><img src="images/arrow-down.png" alt="" id="a_dagstyle"> 288 Diagram style</h3> 289 <div id="dagstyle" style="display:block"> 290 <form autocomplete="off"> 291 <p><input type="radio" checked="checked" id="dagstyle_original" name="dagstyle" 292 onclick="GUI.set_style('original')" /> 293 <label for="dagstyle_original">classic</label></p> 294 <p><input type="radio" name="dagstyle" id="dagstyle_semlike" 295 onclick="GUI.set_style('semlike')"/> 296 <label for="dagstyle_semlike">SEM-like</label></p> 297 </form> 298 </div> 299 300 <h3 onclick="displayToggle('coloring')"><img src="images/arrow-down.png" alt="" id="a_coloring"> Coloring</h3> 301 <div id="coloring" style="display:block"> 302 <form autocomplete="off"> 303 <p><input type="checkbox" checked="checked" id="highlight_causal" 304 onclick="GUI.set_highlight_causal(this.checked)" /> 305 <label for="highlight_causal">causal paths</label></p> 306 <p><input type="checkbox" checked="checked" id="highlight_biasing" 307 onclick="GUI.set_highlight_biasing(this.checked)"/> 308 <label for="highlight_biasing">biasing paths</label></p> 309 <p><input type="checkbox" checked="checked" id="highlight_ancestral" 310 onclick="GUI.set_highlight_ancestors(this.checked)"/> 311 <label for="highlight_ancestral">ancestral structure</label></p> 312 </form> 313 </div> 314 315 316 317 <h3 onclick="displayToggle('legend')"><img src="images/arrow-down.png" alt="" id="a_legend"> Legend</h3> 318 <div id="legend" style="display:block"> 319 <p>
320 <img id="liexposure" src="images/legend/original/exposure.png" alt="" /> 321 exposure 322 </p> 323 <p> 324 <img id="lioutcome" src="images/legend/original/outcome.png" alt="" /> 325 outcome 326 </p> 327 <div id="legend_ancestors"> 328 <p> 329 <img id="lilnode" src="images/legend/original/lnode.png" alt="" /> 330 ancestor of exposure 331 </p> 332 <p> 333 <img id="lirnode" src="images/legend/original/rnode.png" alt="" /> 334 ancestor of outcome 335 </p> 336 <p> 337 <img id="limnode" src="images/legend/original/mnode.png" alt="" /> 338 ancestor of exposure <em>and</em> outcome 339 </p> 340 </div> 341 <p> 342 <img id="liadjustednode" src="images/legend/original/adjustednode.png" alt="" /> 343 adjusted variable 344 </p> 345 <p> 346 <img id="lilatentnode" src="images/legend/original/latentnode.png" alt="" /> 347 unobserved (latent) 348 </p> 349 <p> 350 <img id="liother" src="images/legend/original/other.png" alt="" /> 351 other variable 352 </p> 353 <p id="legend_causal"> 354 <img id="licausalpath" src="images/legend/original/causalpath.png" alt="" /> 355 causal path 356 </p> 357 <p id="legend_biasing"> 358 <img id="libiasingpath" src="images/legend/original/biasingpath.png" alt="" /> 359 biasing path 360 </p> 361 </div> 362 363 </div> 364 365 366 <div id="rlegend"> 367 <h3 onclick="displayToggle('causal_effect_block')"> 368 <img src="images/arrow-down.png" alt="" id="a_causal_effect" /> 369 Causal effect identification 370 </h3> 371 372 <div id="causal_effect_block"> 373 <p> 374 <select id="causal_effect_kind" onchange="causalEffectEstimates(this.value)"> 375 <option value="adj_total">Adjustment (total effect)</option> 376 <option value="adj_causalodds">Adjustment (causal odds ratio)</option> 377 <option value="adj_direct">Adjustment (direct effect)</option> 378 <option value="instrument">Instrumental variable</option> 379 <!--<option value="treeid">TreeId</option>--> 380 </select> 381 </p> 382 <div id="causal_effect" style="display:block"> 383 384 </div> 385 </div> 386 387 <h3 onclick="displayToggle('testable_implications')"><img src="images/arrow-down.png" alt="" id="a_testable_implications" /> Testable implications</h3> 388 389 <div id="testable_implications" style="display:block"> 390 391 </div> 392 393 <h3 onclick="displayToggle('model_data')"><img src="images/arrow-down.png" alt="" id="a_model_data" /> Model code</h3> 394 <div id="model_data" style="display:block"> 395 <form name="model_data_frm"> 396 <textarea rows="10" cols="35" name="adj_matrix" id="adj_matrix" 397 onkeydown="if(this.value != Model.dag_model_text_data){ displayShow('model_refresh');this.style.backgroundColor='#fec'; }"></textarea> 398 </form> 399 <p id="model_refresh" style="display:none">You have modified the model code. To 400 draw the modified model, click here: <button onclick="loadDAGFromTextData()">Update DAG</button></p> 401 </div> 402 403 <h3 onclick="displayToggle('summary')"><img src="images/arrow-down.png" alt="" id="a_summary"> Summary</h3> 404 <div id="summary" style="display:block"> 405 <div id="info_cycle"> </div> 406 <table id="info_summary"> 407 <tr><td>exposure(s)</td><td class="info" id="info_exposure">not set</td></tr> 408 <tr><td>outcome(s)</td><td class="info" id="info_outcome">not set</td></tr> 409 <tr><td>covariates</td><td class="info" id="info_covariates">0</td></tr> 410 <tr><td>causal paths</td><td class="info" id="info_frontdoor">0</td></tr> 411 </table> 412 </div> 413 414 </div> 415 416</aside> 417 418</body> 419</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.