All examples By author By category About

erikaris

Full window Github gist

Root Error Finding in D3

See the full viz on :

https://bl.ocks.org/erikaris/raw/9cecf1d856da7655d09662e9f82cc097/

<!doctype html>
<html lang="en">

<head>
  <title>Root Error Solver</title>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Mobland - Mobile App Landing Page Template">
  <meta name="keywords" content="HTML5, bootstrap, mobile, app, landing, ios, android, responsive">

<link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
  
  <link href="style.css" rel="stylesheet">

.svg-content-responsive {
      display: inline-block;
      position: absolute;
      top: 10px;
      left: 0;
    }

div#canvas {
      background-color: white;
      border: 1px solid #999;
      border-radius: 5px;
      position: relative;
    }

div#canvas .description {
      color: #777;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #EEE;
      border-top: 1px solid #999;
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      padding: 5px;
    }

svg.rule {
      opacity: 1;
    }

.edge line {
      stroke: rgb(153, 153, 153);
      stroke-width: 1.5px;
      pointer-events: none;
    }

marker {
      fill: rgb(99, 99, 99);
      stroke: rgb(153, 153, 153);
    }

.node circle {
      stroke-width: 2;
      stroke: rgb(153, 153, 153);
      fill: rgb(153, 153, 153);
      cursor: pointer;
    }
  </style>
</head>

<div class="nav-menu fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-dark navbar-expand-lg">
                        <a class="navbar-brand" href="index.html">Indonesia's National Socio Economic Survey 2016</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false"
                          aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
                        <div class="collapse navbar-collapse" id="navbar">
                            <ul class="navbar-nav ml-auto">
                                <li class="nav-item"> <a class="nav-link active" href="#questionnaire">QUESTIONNAIRE <span class="sr-only">(current)</span></a> </li>
                                <li class="nav-item"> <a class="nav-link" href="#code-list">CODE LIST</a> </li>
                                <li class="nav-item"> <a class="nav-link" href="#visualization">VISUALIZATION</a> </li>
                                <li class="nav-item"> <a class="nav-link" href="#demo-video">DEMO VIDEO</a> </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

<div class="section light-bg">
        <div class="container" id="questionnaire">
            <div class="section-title">
                <small>Republic of Indonesia</small>
                <h3>National Socio Economic Survey 2016</h3>
            </div>

<ul class="nav nav-tabs nav-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#demography">Block IV </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#education">Block V</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#travel-crime">Block VI </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="demography">
                    <div class="d-flex flex-column flex-lg-row">
                    
                      <div class="container">
                        <div class="row">
                            <h4 class="text-center">BLOCK IV. DEMOGRAPHY, BIRTH CERTIFICATE, AND EARLY CHILD EDUCATION</h4>
                            <div class="table-responsive">          
                                <table class="table table-bordered table-hover table-condensed">
                                <thead>
                                  <tr align="center" valign="middle !important">        
                                    <th rowspan="2"><label class="c-401">No</label></th>
                                    <th rowspan="2" >Household Members</th>
                                    <th rowspan="2" >Family relations </th>
                                    <th rowspan="2">Marital status: <br /> <br />1.single <br />2.married <br /> 3.widowed <br />4.divorced</th>
                                    <th rowspan="2">Gender: <br /><br /> 1.male <br />2.female</th>
                                    <th rowspan="2">Birth <br /> (MMYY)</th>
                                    <th rowspan="2">Age <br /> (write 97 <br /> if age <br /> >= 97)</th>
                                    <th rowspan="2">If 404=2,<br />does the <br />spouse live <br />in this <br /> household?: <br /><br />1.yes <br />5.no </th>
                                    <th rowspan="2">If 404= 2,3,4, <br />age at <br />first married? </th>
                                    <th colspan="2"> For person age 0 - 17 yo </th>
                                    <th colspan="2"> For person age 0 - 10 yo </th>
                                  </tr>
                                  <tr>
                                      <th>Have a <br />birth <br />certificate?</th>
                                      <th>If <br />410=5,<br /> why?</th>
                                      <th>Ever <br />attended <br />pre-school?</th>
                                      <th>if 412=1,2,3, what type of pre-school</th>
                                  </tr>
                                  <tr align="center" style="font-size: 80%">        
                                    <th>401</th>
                                    <th>402</th>
                                    <th>403</th>
                                    <th>404</th> 
                                    <th>405</th>
                                    <th>406</th>
                                    <th>407</th>
                                    <th>408</th> 
                                    <th>409</th>
                                    <th>410</th>
                                    <th>411</th>
                                    <th>412</th> 
                                    <th>413</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td><label id="flabel" name="R401">1</label></td>
                                    <td><input id="fname" name="R402" required="required" type="text"></td>
                                    <td><input id="fname" name="R403" required="required" type="text" class="c-403"></td>
                                    <td><input id="fname" name="R404" required="required" type="text" class="c-404"></td>
                                    <td><input id="fname" name="R405" required="required" type="text" class="c-405"></td>
                                    <td><input id="fname" name="R406" required="required" type="text" class="c-406"></td>
                                    <td><input id="fname" name="R407" required="required" type="text" class="c-407"></td>
                                    <td><input id="fname" name="R408" required="required" type="text" class="c-408"></td>
                                    <td><input id="fname" name="R409" required="required" type="text" class="c-409"</td>
                                    <td><input id="fname" name="R410" required="required" type="text" class="c-410"></td>
                                    <td><input id="fname" name="R411" required="required" type="text" class="c-411"></td>
                                    <td><input id="fname" name="R412" required="required" type="text" class="c-412"></td>
                                    <td><input id="fname" name="R413" required="required" type="text" class="c-413"></td>
                                  </tr>
                                  <tr>
                                   <td><label id="flabel" name="R401">2</label></td>
                                    <td><input id="fname" name="R402" required="required" type="text"></td>
                                    <td><input id="fname" name="R403" required="required" type="text" class="c-403"></td>
                                    <td><input id="fname" name="R404" required="required" type="text" class="c-404"></td>
                                    <td><input id="fname" name="R405" required="required" type="text" class="c-405"></td>
                                    <td><input id="fname" name="R406" required="required" type="text" class="c-406"></td>
                                    <td><input id="fname" name="R407" required="required" type="text" class="c-407"></td>
                                    <td><input id="fname" name="R408" required="required" type="text" class="c-408"></td>
                                    <td><input id="fname" name="R409" required="required" type="text" class="c-409"></td>
                                    <td><input id="fname" name="R410" required="required" type="text" class="c-410"></td>
                                    <td><input id="fname" name="R411" required="required" type="text" class="c-411"></td>
                                    <td><input id="fname" name="R412" required="required" type="text" class="c-412"></td>
                                    <td><input id="fname" name="R413" required="required" type="text" class="c-413"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R401">3</label></td>
                                    <td><input id="fname" name="R402" required="required" type="text"></td>
                                    <td><input id="fname" name="R403" required="required" type="text" class="c-403"></td>
                                    <td><input id="fname" name="R404" required="required" type="text" class="c-404"></td>
                                    <td><input id="fname" name="R405" required="required" type="text" class="c-405"></td>
                                    <td><input id="fname" name="R406" required="required" type="text" class="c-406"></td>
                                    <td><input id="fname" name="R407" required="required" type="text" class="c-407"></td>
                                    <td><input id="fname" name="R408" required="required" type="text" class="c-408"></td>
                                    <td><input id="fname" name="R409" required="required" type="text" class="c-409"></td>
                                    <td><input id="fname" name="R410" required="required" type="text" class="c-410"></td>
                                    <td><input id="fname" name="R411" required="required" type="text" class="c-411"></td>
                                    <td><input id="fname" name="R412" required="required" type="text" class="c-412"></td>
                                    <td><input id="fname" name="R413" required="required" type="text" class="c-413"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R401">4</label></td>
                                    <td><input id="fname" name="R402" required="required" type="text"></td>
                                    <td><input id="fname" name="R403" required="required" type="text" class="c-403"></td>
                                    <td><input id="fname" name="R404" required="required" type="text" class="c-404"></td>
                                    <td><input id="fname" name="R405" required="required" type="text" class="c-405"></td>
                                    <td><input id="fname" name="R406" required="required" type="text" class="c-406"></td>
                                    <td><input id="fname" name="R407" required="required" type="text" class="c-407"></td>
                                    <td><input id="fname" name="R408" required="required" type="text" class="c-408"></td>
                                    <td><input id="fname" name="R409" required="required" type="text" class="c-409"></td>
                                    <td><input id="fname" name="R410" required="required" type="text" class="c-410"></td>
                                    <td><input id="fname" name="R411" required="required" type="text" class="c-411"></td>
                                    <td><input id="fname" name="R412" required="required" type="text" class="c-412"></td>
                                    <td><input id="fname" name="R413" required="required" type="text" class="c-413"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R401">5</label></td>
                                    <td><input id="fname" name="R402" required="required" type="text"></td>
                                    <td><input id="fname" name="R403" required="required" type="text" class="c-403"></td>
                                    <td><input id="fname" name="R404" required="required" type="text" class="c-404"></td>
                                    <td><input id="fname" name="R405" required="required" type="text" class="c-405"></td>
                                    <td><input id="fname" name="R406" required="required" type="text" class="c-406"></td>
                                    <td><input id="fname" name="R407" required="required" type="text" class="c-407"></td>
                                    <td><input id="fname" name="R408" required="required" type="text" class="c-408"></td>
                                    <td><input id="fname" name="R409" required="required" type="text" class="c-409"></td>
                                    <td><input id="fname" name="R410" required="required" type="text" class="c-410"></td>
                                    <td><input id="fname" name="R411" required="required" type="text" class="c-411"></td>
                                    <td><input id="fname" name="R412" required="required" type="text" class="c-412"></td>
                                    <td><input id="fname" name="R413" required="required" type="text" class="c-413"></td>
                                  </tr>
                                </tbody>
                                </table>
                            </div>                            
                        </div>
                      </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="education">
                    <div class="d-flex flex-column flex-lg-row">
                      <div class="container">
                        <div class="row">
                            <h4 class="text-center">BLOCK V. EDUCATION</h4> 
                            <div class="table-responsive">          
                                <table class="table table-bordered table-hover" width="100%">
                                <thead>
                                  <tr>
                                      <th colspan="3"> Copy the answers from Block IV </th>
                                      <th colspan="9"> Only if age >= 5 yo</th>
                                      <th colspan="3"> Only if age 5-24 yo </th>
                                  </tr>
                                  <tr align="center">        
                                    <th rowspan="2">No</th>
                                    <th rowspan="2">Household Members</th>
                                    <th rowspan="2">Age </th>
                                    <th colspan="3">Literacy</th>
                                    <th rowspan="2">Attend any education?</th>
                                    <th rowspan="2">Highest level of education attended?</th>
                                    <th rowspan="2">Highest grade attended?</th>
                                    <th rowspan="2">Highest school certificate?</th>
                                    <th rowspan="2">The school location? <br /><br />(PPRRSSS) <br /><br />P=Province <br />R=Regency <br />S=Sub-district</th>
                                    <th rowspan="2" ="2"> If currently not in school (507=3), the year you quit the school? </th>
                                    <th colspan="3"> If ever attended a school (507=2 or 3) </th>
                                  </tr>
                                  <tr>
                                      <th>Latin Letters? <br /> 1. Yes <br /> 5. No</th>
                                      <th>Arabic Letters? <br /> 1. Yes <br /> 5. No</th>
                                      <th>Other Letters? <br /> 1. Yes <br /> 5. No</th>
                                      <th>Active student in the previous school year?</th>
                                      <th>If 513=2, what level of education did you attend?</th>
                                      <th>what grade were you in the previous school year?</th>
                                  </tr>
                                  <tr align="center" style="font-size: 80%">        
                                    <th>501</th>
                                    <th>502</th>
                                    <th>503</th>
                                    <th>504</th> 
                                    <th>505</th>
                                    <th>506</th>
                                    <th>507</th>
                                    <th>508</th> 
                                    <th>509</th>
                                    <th>510</th>
                                    <th>511</th>
                                    <th>512</th> 
                                    <th>513</th>
                                    <th>514</th> 
                                    <th>515</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td><label id="flabel" name="R501">1</label></td>
                                    <td><input id="fname" name="R502" required="required" type="text"></td>
                                    <td><input id="fname" name="R503" required="required" type="text" class="c-503"></td>
                                    <td><input id="fname" name="R504" required="required" type="text" class="c-504"></td>
                                    <td><input id="fname" name="R505" required="required" type="text" class="c-505"></td>
                                    <td><input id="fname" name="R506" required="required" type="text" class="c-506"></td>
                                    <td><input id="fname" name="R507" required="required" type="text" class="c-507"></td>
                                    <td><input id="fname" name="R508" required="required" type="text" class="c-508"></td>
                                    <td><input id="fname" name="R509" required="required" type="text" class="c-509"></td>
                                    <td><input id="fname" name="R510" required="required" type="text" class="c-510"></td>
                                    <td><input id="fname" name="R511" required="required" type="text" class="c-511"></td>
                                    <td><input id="fname" name="R512" required="required" type="text" class="c-512"></td>
                                    <td><input id="fname" name="R513" required="required" type="text" class="c-513"></td>
                                    <td><input id="fname" name="R514" required="required" type="text" class="c-514"></td>
                                    <td><input id="fname" name="R515" required="required" type="text" class="c-515"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R501">2</label></td>
                                    <td><input id="fname" name="R502" required="required" type="text"></td>
                                    <td><input id="fname" name="R503" required="required" type="text" class="c-503"></td>
                                    <td><input id="fname" name="R504" required="required" type="text" class="c-504"></td>
                                    <td><input id="fname" name="R505" required="required" type="text" class="c-505"></td>
                                    <td><input id="fname" name="R506" required="required" type="text" class="c-506"></td>
                                    <td><input id="fname" name="R507" required="required" type="text" class="c-507"></td>
                                    <td><input id="fname" name="R508" required="required" type="text" class="c-508"></td>
                                    <td><input id="fname" name="R509" required="required" type="text" class="c-509"></td>
                                    <td><input id="fname" name="R510" required="required" type="text" class="c-510"></td>
                                    <td><input id="fname" name="R511" required="required" type="text" class="c-511"></td>
                                    <td><input id="fname" name="R512" required="required" type="text" class="c-512"></td>
                                    <td><input id="fname" name="R513" required="required" type="text" class="c-513"></td>
                                    <td><input id="fname" name="R514" required="required" type="text" class="c-514"></td>
                                    <td><input id="fname" name="R515" required="required" type="text" class="c-515"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R501">3</label></td>
                                    <td><input id="fname" name="R502" required="required" type="text"></td>
                                    <td><input id="fname" name="R503" required="required" type="text" class="c-503"></td>
                                    <td><input id="fname" name="R504" required="required" type="text" class="c-504"></td>
                                    <td><input id="fname" name="R505" required="required" type="text" class="c-505"></td>
                                    <td><input id="fname" name="R506" required="required" type="text" class="c-506"></td>
                                    <td><input id="fname" name="R507" required="required" type="text" class="c-507"></td>
                                    <td><input id="fname" name="R508" required="required" type="text" class="c-508"></td>
                                    <td><input id="fname" name="R509" required="required" type="text" class="c-509"></td>
                                    <td><input id="fname" name="R510" required="required" type="text" class="c-510"></td>
                                    <td><input id="fname" name="R511" required="required" type="text" class="c-511"></td>
                                    <td><input id="fname" name="R512" required="required" type="text" class="c-512"></td>
                                    <td><input id="fname" name="R513" required="required" type="text" class="c-513"></td>
                                    <td><input id="fname" name="R514" required="required" type="text" class="c-514"></td>
                                    <td><input id="fname" name="R515" required="required" type="text" class="c-515"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R501">4</label></td>
                                    <td><input id="fname" name="R502" required="required" type="text"></td>
                                    <td><input id="fname" name="R503" required="required" type="text" class="c-503"></td>
                                    <td><input id="fname" name="R504" required="required" type="text" class="c-504"></td>
                                    <td><input id="fname" name="R505" required="required" type="text" class="c-505"></td>
                                    <td><input id="fname" name="R506" required="required" type="text" class="c-506"></td>
                                    <td><input id="fname" name="R507" required="required" type="text" class="c-507"></td>
                                    <td><input id="fname" name="R508" required="required" type="text" class="c-508"></td>
                                    <td><input id="fname" name="R509" required="required" type="text" class="c-509"></td>
                                    <td><input id="fname" name="R510" required="required" type="text" class="c-510"></td>
                                    <td><input id="fname" name="R511" required="required" type="text" class="c-511"></td>
                                    <td><input id="fname" name="R512" required="required" type="text" class="c-512"></td>
                                    <td><input id="fname" name="R513" required="required" type="text" class="c-513"></td>
                                    <td><input id="fname" name="R514" required="required" type="text" class="c-514"></td>
                                    <td><input id="fname" name="R515" required="required" type="text" class="c-515"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R501">5</label></td>
                                    <td><input id="fname" name="R502" required="required" type="text"></td>
                                    <td><input id="fname" name="R503" required="required" type="text" class="c-503"></td>
                                    <td><input id="fname" name="R504" required="required" type="text" class="c-504"></td>
                                    <td><input id="fname" name="R505" required="required" type="text" class="c-505"></td>
                                    <td><input id="fname" name="R506" required="required" type="text" class="c-506"></td>
                                    <td><input id="fname" name="R507" required="required" type="text" class="c-507"></td>
                                    <td><input id="fname" name="R508" required="required" type="text" class="c-508"></td>
                                    <td><input id="fname" name="R509" required="required" type="text" class="c-509"></td>
                                    <td><input id="fname" name="R510" required="required" type="text" class="c-510"></td>
                                    <td><input id="fname" name="R511" required="required" type="text" class="c-511"></td>
                                    <td><input id="fname" name="R512" required="required" type="text" class="c-512"></td>
                                    <td><input id="fname" name="R513" required="required" type="text" class="c-513"></td>
                                    <td><input id="fname" name="R514" required="required" type="text" class="c-514"></td>
                                    <td><input id="fname" name="R515" required="required" type="text" class="c-515"></td>
                                  </tr>
                                </tbody>
                                </table>
                            </div>                            
                        </div>
                      </div>
                        
                    </div>
                </div>
                <div class="tab-pane fade" id="travel-crime">
                    <div class="d-flex flex-column flex-lg-row">
                                              <div class="container">
                        <div class="row">
                            <h4 class="text-center">BLOCK VI. TRAVELLING AND CRIME INFORMATION</h4> 
                            <div class="table-responsive">          
                                <table class="table table-bordered table-hover" width="100%">
                                <thead>
                                  <tr align="center">
                                      <th colspan="2" rowspan="3"> Copy the answers from Block IV </th>
                                      <th rowspan="4"> Ever did <br /> a commercial <br />tourism/travelling <br />in the past <br />6 months? <br /><br />1.yes <br />5.no --> 608</th>
                                      <th colspan="2" rowspan="3"> Number of <br />vacations <br />taken </th>
                                      <th colspan="2" rowspan="3"> About the last trip </th>
                                      <th rowspan="4"> Between <br />March '15-<br />Feb '16:<br />ever be <br />a victim <br />of crime? <br /><br />1.yes <br />5.no</th>
                                      <th colspan="12"> If 608=1 </th>
                                  </tr>
                                  <tr align="center">
                                      <th colspan="10"> How many times and where did it happen? </th>
                                      <th rowspan="3"> Number of crimes reported to the police </th>
                                      <th rowspan="3"> If 619>0, Number of reported crimes investigated by the police? </th>
                                  </tr>
                                  <tr>
                                      <th colspan="2"> Theft </th>
                                      <th colspan="2"> Persecution/Violance</th>
                                      <th colspan="2"> Robbery </th>
                                      <th colspan="2"> Sexual Assault </th>
                                      <th colspan="2"> Others </th>
                                  </tr>
                                  <tr>
                                      <th> No. </th>
                                      <th> Household Members </th>
                                      <th> Sept-<br />Nov '15 </th>
                                      <th> Des '15-<br />Feb '16 </th>
                                      <th> Purpose </th>
                                      <th> Destination<br />Province </th>
                                      <th> Number </th>
                                      <th> Location </th>
                                      <th> Number </th>
                                      <th> Location </th>
                                      <th> Number </th>
                                      <th> Location </th>
                                      <th> Number </th>
                                      <th> Location </th>
                                      <th> Number </th>
                                      <th> Location </th>
                                  </tr>
                                  <tr align="center" style="font-size: 80%">        
                                    <th>601</th>
                                    <th>602</th>
                                    <th>603</th>
                                    <th>604</th> 
                                    <th>605</th>
                                    <th>606</th>
                                    <th>607</th>
                                    <th>608</th> 
                                    <th>609</th>
                                    <th>610</th>
                                    <th>611</th>
                                    <th>612</th> 
                                    <th>613</th>
                                    <th>614</th> 
                                    <th>615</th>
                                    <th>616</th>
                                    <th>617</th> 
                                    <th>618</th>
                                    <th>619</th> 
                                    <th>620</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td><label id="flabel" name="R601">1</label></td>
                                    <td><input id="fname" name="R602" required="required" type="text"></td>
                                    <td><input id="fname" name="R603" required="required" type="text" class="c-603"></td>
                                    <td><input id="fname" name="R604" required="required" type="text" class="c-604"></td>
                                    <td><input id="fname" name="R605" required="required" type="text" class="c-605"></td>
                                    <td><input id="fname" name="R606" required="required" type="text" class="c-606"></td>
                                    <td><input id="fname" name="R607" required="required" type="text" class="c-607"></td>
                                    <td><input id="fname" name="R608" required="required" type="text" class="c-608"></td>
                                    <td><input id="fname" name="R609" required="required" type="text" class="c-609"></td>
                                    <td><input id="fname" name="R610" required="required" type="text" class="c-610"></td>
                                    <td><input id="fname" name="R611" required="required" type="text" class="c-611"></td>
                                    <td><input id="fname" name="R612" required="required" type="text" class="c-612"></td>
                                    <td><input id="fname" name="R613" required="required" type="text" class="c-613"></td>
                                    <td><input id="fname" name="R614" required="required" type="text" class="c-614"></td>
                                    <td><input id="fname" name="R615" required="required" type="text" class="c-615"></td>
                                    <td><input id="fname" name="R616" required="required" type="text" class="c-616"></td>
                                    <td><input id="fname" name="R617" required="required" type="text" class="c-617"></td>
                                    <td><input id="fname" name="R618" required="required" type="text" class="c-618"></td>
                                    <td><input id="fname" name="R619" required="required" type="text" class="c-619"></td>
                                    <td><input id="fname" name="R620" required="required" type="text" class="c-620"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R601">2</label></td>
                                    <td><input id="fname" name="R602" required="required" type="text"></td>
                                    <td><input id="fname" name="R603" required="required" type="text" class="c-603"></td>
                                    <td><input id="fname" name="R604" required="required" type="text" class="c-604"></td>
                                    <td><input id="fname" name="R605" required="required" type="text" class="c-605"></td>
                                    <td><input id="fname" name="R606" required="required" type="text" class="c-606"></td>
                                    <td><input id="fname" name="R607" required="required" type="text" class="c-607"></td>
                                    <td><input id="fname" name="R608" required="required" type="text" class="c-608"></td>
                                    <td><input id="fname" name="R609" required="required" type="text" class="c-609"></td>
                                    <td><input id="fname" name="R610" required="required" type="text" class="c-610"></td>
                                    <td><input id="fname" name="R611" required="required" type="text" class="c-611"></td>
                                    <td><input id="fname" name="R612" required="required" type="text" class="c-612"></td>
                                    <td><input id="fname" name="R613" required="required" type="text" class="c-613"></td>
                                    <td><input id="fname" name="R614" required="required" type="text" class="c-614"></td>
                                    <td><input id="fname" name="R615" required="required" type="text" class="c-615"></td>
                                    <td><input id="fname" name="R616" required="required" type="text" class="c-616"></td>
                                    <td><input id="fname" name="R617" required="required" type="text" class="c-617"></td>
                                    <td><input id="fname" name="R618" required="required" type="text" class="c-618"></td>
                                    <td><input id="fname" name="R619" required="required" type="text" class="c-619"></td>
                                    <td><input id="fname" name="R620" required="required" type="text" class="c-620"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R601">3</label></td>
                                    <td><input id="fname" name="R602" required="required" type="text"></td>
                                    <td><input id="fname" name="R603" required="required" type="text" class="c-603"></td>
                                    <td><input id="fname" name="R604" required="required" type="text" class="c-604"></td>
                                    <td><input id="fname" name="R605" required="required" type="text" class="c-605"></td>
                                    <td><input id="fname" name="R606" required="required" type="text" class="c-606"></td>
                                    <td><input id="fname" name="R607" required="required" type="text" class="c-607"></td>
                                    <td><input id="fname" name="R608" required="required" type="text" class="c-608"></td>
                                    <td><input id="fname" name="R609" required="required" type="text" class="c-609"></td>
                                    <td><input id="fname" name="R610" required="required" type="text" class="c-610"></td>
                                    <td><input id="fname" name="R611" required="required" type="text" class="c-611"></td>
                                    <td><input id="fname" name="R612" required="required" type="text" class="c-612"></td>
                                    <td><input id="fname" name="R613" required="required" type="text" class="c-613"></td>
                                    <td><input id="fname" name="R614" required="required" type="text" class="c-614"></td>
                                    <td><input id="fname" name="R615" required="required" type="text" class="c-615"></td>
                                    <td><input id="fname" name="R616" required="required" type="text" class="c-616"></td>
                                    <td><input id="fname" name="R617" required="required" type="text" class="c-617"></td>
                                    <td><input id="fname" name="R618" required="required" type="text" class="c-618"></td>
                                    <td><input id="fname" name="R619" required="required" type="text" class="c-619"></td>
                                    <td><input id="fname" name="R620" required="required" type="text" class="c-620"></td>
                                  </tr>
                                  <tr>
                                    <td><label id="flabel" name="R601">4</label></td>
                                    <td><input id="fname" name="R602" required="required" type="text"></td>
                                    <td><input id="fname" name="R603" required="required" type="text" class="c-603"></td>
                                    <td><input id="fname" name="R604" required="required" type="text" class="c-604"></td>
                                    <td><input id="fname" name="R605" required="required" type="text" class="c-605"></td>
                                    <td><input id="fname" name="R606" required="required" type="text" class="c-606"></td>
                                    <td><input id="fname" name="R607" required="required" type="text" class="c-607"></td>
                                    <td><input id="fname" name="R608" required="required" type="text" class="c-608"></td>
                                    <td><input id="fname" name="R609" required="required" type="text" class="c-609"></td>
                                    <td><input id="fname" name="R610" required="required" type="text" class="c-610"></td>
                                    <td><input id="fname" name="R611" required="required" type="text" class="c-611"></td>
                                    <td><input id="fname" name="R612" required="required" type="text" class="c-612"></td>
                                    <td><input id="fname" name="R613" required="required" type="text" class="c-613"></td>
                                    <td><input id="fname" name="R614" required="required" type="text" class="c-614"></td>
                                    <td><input id="fname" name="R615" required="required" type="text" class="c-615"></td>
                                    <td><input id="fname" name="R616" required="required" type="text" class="c-616"></td>
                                    <td><input id="fname" name="R617" required="required" type="text" class="c-617"></td>
                                    <td><input id="fname" name="R618" required="required" type="text" class="c-618"></td>
                                    <td><input id="fname" name="R619" required="required" type="text" class="c-619"></td>
                                    <td><input id="fname" name="R620" required="required" type="text" class="c-620"></td>
                                  </tr>
                                 <tr>
                                    <td><label id="flabel" name="R601">5</label></td>
                                    <td><input id="fname" name="R602" required="required" type="text"></td>
                                    <td><input id="fname" name="R603" required="required" type="text" class="c-603"></td>
                                    <td><input id="fname" name="R604" required="required" type="text" class="c-604"></td>
                                    <td><input id="fname" name="R605" required="required" type="text" class="c-605"></td>
                                    <td><input id="fname" name="R606" required="required" type="text" class="c-606"></td>
                                    <td><input id="fname" name="R607" required="required" type="text" class="c-607"></td>
                                    <td><input id="fname" name="R608" required="required" type="text" class="c-608"></td>
                                    <td><input id="fname" name="R609" required="required" type="text" class="c-609"></td>
                                    <td><input id="fname" name="R610" required="required" type="text" class="c-610"></td>
                                    <td><input id="fname" name="R611" required="required" type="text" class="c-611"></td>
                                    <td><input id="fname" name="R612" required="required" type="text" class="c-612"></td>
                                    <td><input id="fname" name="R613" required="required" type="text" class="c-613"></td>
                                    <td><input id="fname" name="R614" required="required" type="text" class="c-614"></td>
                                    <td><input id="fname" name="R615" required="required" type="text" class="c-615"></td>
                                    <td><input id="fname" name="R616" required="required" type="text" class="c-616"></td>
                                    <td><input id="fname" name="R617" required="required" type="text" class="c-617"></td>
                                    <td><input id="fname" name="R618" required="required" type="text" class="c-618"></td>
                                    <td><input id="fname" name="R619" required="required" type="text" class="c-619"></td>
                                    <td><input id="fname" name="R620" required="required" type="text" class="c-620"></td>
                                  </tr>
                                </tbody>
                                </table>
                            </div>                            
                        </div>
                      </div>
                    </div>
                </div>
            </div>

<button id="btn_validate_questionnaire" class="btn btn-primary btn-lg btn-block">Validate</button>
        </div>
    </div>
    
  
    <div class="section" id="graph_rule_container">
    <div class="container">
      <div class="section-title">
        <small>THE RULE</small>
        <h3>Using Centrality Theory</h3>
      </div>

<div id="canvas">
        <span class="description">Rule Representation Graph</span>
        <svg class="jsnx rule"></svg>
      </div>
    </div>
  </div>

<div class="section" id="code-list">

<div class="row">
            <div class="col-12 col-lg-4">
                <div class="card features">
                    <div class="card-body">
                        <div class="media">
                            <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                            <div class="media-body">
                                <h4 class="card-title">403. Family Relations</h4>
                                <table class="mytable" border="1" rules="rows" style="border-top: none;border-bottom: none;border-left: none;border-right: none;">
                                    <tr>
                                        <td>1. head of household</td>
                                        <td>6. grandchild</td>
                                    </tr>
                                    <tr>
                                        <td>2. spouse</td>
                                        <td>7. parent/ in law</td>
                                    </tr>
                                    <tr>
                                        <td>3. biological/ step child</td>
                                        <td>8. servant/ driver</td>
                                    </tr>
                                    <tr>
                                        <td>4. adopted child</td>
                                        <td>9. others</td>
                                    </tr>
                                    <tr>
                                        <td>5. son/daughter in law</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card features">
                    <div class="card-body">
                        <div class="media">
                            <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                            <div class="media-body">
                                <h4 class="card-title">410. Birth Certificate</h4>
                                <table class="mytable" border="1" rules="rows" style="border-top: none;border-bottom: none;border-left: none;border-right: none;">
                                    <tr>
                                        <td>1. yes, can be shown</td>
                                    </tr>
                                    <tr>
                                        <td>2. yes, cannot be shown</td>
                                    </tr>
                                    <tr>
                                        <td>5. no</td>
                                    </tr>
                                    <tr>
                                        <td>8. do not know</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card features">
                    <div class="card-body">
                        <div class="media">
                            <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                            <div class="media-body">
                                <h4 class="card-title">411. The reason for not having birth certificate</h4>
                                <table class="mytable" border="1" rules="rows" style="border-top: none;border-bottom: none;border-left: none;border-right: none;">
                                    <tr>
                                        <td>1. has not been issued</td>
                                    </tr>
                                    <tr>
                                        <td>2. has no money for the registration fee </td>
                                    </tr>
                                    <tr>
                                        <td>3. the office is far away</td>
                                    </tr>
                                    <tr>
                                        <td>4. do not know that birth must be registered</td>
                                    </tr>
                                     <tr>
                                        <td>5. do not know how to register</td>
                                    </tr>
                                    <tr>
                                        <td>6. not necessary </td>
                                    </tr>
                                    <tr>
                                        <td>7. do not care</td>
                                    </tr>
                                    <tr>
                                        <td>8. others</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-12 col-lg-4">
                <div class="card features">
                    <div class="card-body">
                        <div class="media">
                            <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                            <div class="media-body">
                                <h4 class="card-title">412. Attending Pre-school?</h4>
                                <table class="mytable" border="1" rules="rows" style="border-top: none;border-bottom: none;border-left: none;border-right: none;">
                                    <tr>
                                        <td>1. Attending in this school year</td>
                                    </tr>
                                    <tr>
                                        <td>2. Attended in last school year </td>
                                    </tr>
                                    <tr>
                                        <td>3. Attended before last school year</td>
                                    </tr>
                                    <tr>
                                        <td>4. do not or never attended</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-12 col-lg-4">
                <div class="card features">
                    <div class="card-body">
                        <div class="media">
                            <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                            <div class="media-body">
                                <h4 class="card-title">413. Pre-school types?</h4>
                                <table class="mytable" border="1" rules="rows" style="border-top: none;border-bottom: none;border-left: none;border-right: none;">
                                    <tr>
                                        <td>1. kindergarten</td>
                                    </tr>
                                    <tr>
                                        <td>2. bustanul athfal, raudhatul athfal </td>
                                    </tr>
                                    <tr>
                                        <td>3. early childhood education (PAUD)</td>
                                    </tr>
                                    <tr>
                                        <td>4. play group</td>
                                    </tr>
                                    <tr>
                                        <td>5. day care</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-12 col-lg-4">
                <div class="card features">
                    <div class="card-body">
                        <div class="media">
                            <span class="ti-face-smile gradient-fill ti-3x mr-3"></span>
                            <div class="media-body">
                                <h4 class="card-title">610,612,614,616,618. Crime Scene?</h4>
                                <table class="mytable" border="1" rules="rows" style="border-top: none;border-bottom: none;border-left: none;border-right: none;">
                                    <tr>
                                        <td>0. None</td>
                                    </tr>
                                    <tr>
                                        <td>1. inside the house </td>
                                    </tr>
                                    <tr>
                                        <td>2. outside the house</td>
                                    </tr>
                                    <tr>
                                        <td>3. inside and outside the house</td>
                                    </tr>
                                    <tr>
                                        <td>8. don't know</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.2.1/owl.carousel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sortable/1.4.0/sortable.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="/emeeks/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js"></script>

<script src="script.js"></script>

var color_map = {
      "O": "rgb(255, 165, 0)",
      "P": "rgb(255, 192, 203)",
      "B": "rgb(0, 0, 255)",
      "W": "rgb(255, 255, 255)",
      "G": "rgb(0, 128, 0)",
      "R": "rgb(255, 0, 0)",
      "M": "rgb(255,0,255)",
      "C": "rgb(0,255,255)"
    }

var canvas_width = d3.select("#canvas").node().getBoundingClientRect().width,
      canvas_height = 500,
      svg_rule_width = 1.00 * canvas_width,
      svg_rule_height = canvas_height - 30.23;

jQuery(function($) {
      $(document).ready(function() {
        draw_rule_graph();

$("#btn_validate_questionnaire").on("click", function() {
          // $("#modal_graph_rule").modal();

$('html, body').animate({
              scrollTop: $("#graph_rule_container").offset().top
          }, 1000);

var records = get_questionaire_records(),
            idx = 0;
          process_record_wrapper(records, idx,
            variable_candidate_callback = function(variable) {
            // $('#modal_graph_rule').modal('hide');

$('html, body').animate({
                scrollTop: $("#questionnaire").offset().top
            }, 1000, function() {
              alert("Fix value in variable " + variable);

$($("#questionnaire input[name=" + variable + "]")[idx])
                .css("border-color", "red")
                .focus();
            });
          });
        });

// $('#modal_graph_rule').on('show.bs.modal', function(event) {
        //   var modal = $(this);
        //   // Move rule graph to modal
        //   $("#canvas svg").appendTo(modal.find('#graph_rule_container'));
        // });
        //
        // $('#modal_graph_rule').on('hide.bs.modal', function(event) {
        //   var modal = $(this);
        //   // Move back rule back to it's container
        //   modal.find('#graph_rule_container').find("svg").appendTo($("#canvas"));
        // });

// WARNING : TESTING ONLY
        d3.csv("data_error.csv", function(error, data_error) {
          data_error.forEach(function(record, idx) {
            var record = data_error[idx];
            for (v in record) {
              var val = record[v];
              $($("input[name=" + v + "]")[idx]).val(val);
            }
          });
        });
      });
    });

function get_questionaire_records() {
      var $inputs = $("#questionnaire input");
      var $inputs = $.makeArray($inputs);

var var_vals_pair = $inputs.reduce(function(map, inp) {
        var $inp = $(inp);
        var name = $inp.attr("name");
        var value = $inp.val();

if (!(name in map)) map[name] = [];
        map[name].push(value);

return map;
      }, {});

// console.log(var_vals_pair)
      // // Output: {"R402":["","","","",""],"R403":["","","","",""],"R404":["","","","",""],...}

// console.log(records)
      // // Output : [{"R402":"1","R403":"",...},{"R402":"","R403":"",...},{"R402":"","R403":"",...},...]

return records;
    }

function draw_rule_graph() {
      d3.select("div#canvas")
        .style("height", canvas_height + 'px')
        .classed("svg-container", true)
        .select("svg.rule")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 " + svg_rule_width + " " + svg_rule_height + "")
        .classed("svg-content-responsive", true);

d3.json(rule_graph_file, function(error, graph) {
        if (error) throw error;

graph.nodes.forEach(function(n) {
          r = encode_rule(n.id);
          n.rule = r.rule;
          n.variable = r.variable;
          n.operator = r.operator;
          n.value = r.value;
        });

var nodeHash = graph.nodes.reduce(function(map, n) {
          map[n.id] = n;
          return map;
        }, {});

graph.links.forEach(function(e, i) {
          e.id = i;
          e.source = nodeHash[e.source];
          e.target = nodeHash[e.target];
          e.weight = 5;
        });

create_rule_network(graph.nodes, graph.links);
      });
    }

function create_rule_network(nodes, edges) {
      var rule_force = d3.layout.force()
        .nodes(nodes)
        .links(edges)
        .size([svg_rule_width, svg_rule_height])
        .charge(-300)
        .chargeDistance(100)
        .gravity(0.05)
        .on("tick", update_rule_network)
        .on('end', function() {
          console.log('Layout finished.');
          // process_data_error(data_error_file, nodes, edges);
        });

var rule_drag = rule_force.drag(),
        svg = d3.select("svg.rule"),
        g = svg.append("g");

svg.append("svg:defs").selectAll("marker")
        .data(["end"])
        .enter().append("svg:marker")
        .attr("id", String)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 15)
        .attr("refY", -1.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("class", "arrow");

g.append("g").attr("class", "edges")
        .selectAll("g.edge")
        .data(edges, function(d) {
          return d.id
        })
        .enter()
        .append("g")
        .attr("class", "edge")
        .append("line")
        .attr("marker-end", "url(#end)");

var g_nodes = g.append("g").attr("class", "nodes")
        .selectAll("g.node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class", function(d) {
          return "node " + d.rule
        })
        .attr("variable", function(d) {
          return d.variable
        })
        .attr("operator", function(d) {
          return d.operator
        })
        .attr("value", function(d) {
          return d.value
        })
        .call(rule_drag);

g_nodes.append("circle")
        .attr("r", 6);

g_nodes.append("text")
        .style("text-anchor", "middle")
        .attr("y", 3)
        .style("stroke-width", "1px")
        .style("stroke-opacity", 0.75)
        .style("stroke", "white")
        .style("font-size", "8px")
        .text(function(d) {
          return d.id
        })
        .style("pointer-events", "none");

g_nodes.append("text")
        .style("text-anchor", "middle")
        .attr("y", 3)
        .style("font-size", "8px")
        .text(function(d) {
          return d.id
        })
        .style("pointer-events", "none");

rule_force.start();
    }

function update_rule_network(e) {
      d3.select("svg.rule").selectAll("line")
        .attr("x1", function(d) {
          return d.source.x
        })
        .attr("y1", function(d) {
          return d.source.y
        })
        .attr("x2", function(d) {
          return d.target.x
        })
        .attr("y2", function(d) {
          return d.target.y
        });

d3.select("svg.rule").selectAll("g.node")
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
    }

function process_record_wrapper(records, idx, vc_callback) {
      if (idx >= records.length) return;

// if (!$('#modal_graph_rule').hasClass('in')) {
      //   $('#modal_graph_rule').modal('show');
      // }

$("#questionnaire input").css("border-color", "initial");

process_record(records[idx], vc_callback,
        clean_callback = function() {
          // $('#modal_graph_rule').modal('hide');

idx += 1;
          process_record_wrapper(records, idx);
        });
    }

function process_record(data, var_callback, clean_callback) {
      var nodes_el = d3.selectAll(".node")
        .each(function(d) {
          d.input = data[d.variable];
          if (d.input == null || d.input == "") d.input = "NULL";
        });

init_color(
        init_color_finished_cb = function() {
          console.log("=> Color initialized");

validate_input(
            validate_input_cb = function() {
              console.log("=> Set valid rule(s) to " + color_map["G"]);

calculate_max_centrality_err_rules(
                error_rules_cb = function(error_rules) {
                  console.log("=> Set error rule(s): " + error_rules.join(", ") + " to " + color_map["M"]);
                  if (error_rules.length == 0) clean_callback();
                },

max_centrality_nodes_cb = function(max_centrality_nodes) {
                  console.log("=> Max centrality rule(s): " + max_centrality_nodes.join(", "));
                },

selected_variable_cb = function(variable) {
                  console.log("=> Variable to be fixed: " + variable);
                  // $("input[name=" + variable + "]").css("border-color", "red").focus();
                  var_callback(variable);
                });
            });
        });
    }

function init_color(finish_callback) {
      var init_color_it = 0;

d3.selectAll(".node")
        .selectAll("circle")
        .each(function(d) {
          if (d.id.startsWith("G") && d.id.endsWith("-in")) {
            d.color = "P";
          } else if (d.id.startsWith("G") && d.id.endsWith("-out")) {
            d.color = "B";
          } else if (d.id.startsWith("C")) {
            d.color = "W";
          } else {
            d.color = "O";
          }
          init_color_it += 1;
        })
        .transition()
        .duration(200)
        .style("fill", function(d) {
          return color_map[d.color]
        })
        .delay(100)
        .each("end", function(d) {
          init_color_it -= 1;
          if (init_color_it == 0) {
            finish_callback();
          }
        });
    }

function calculate_max_centrality_err_rules(err_callback, cent_callback, cdt_callback) {
      var hyper_edges = {},
        error_rules = [],
        rule_error_iter = 0;

var err_nodes = d3.selectAll(".node")
        .selectAll("circle")
        .filter(function(d) {
          if (d.id.startsWith("C")) return true;
          else return false;
        }).each(function(d) {
          var source_variables = [],
            target_variables = [],
            is_target_error = false;

in_edges = d3.selectAll(".edge")
            .filter(function(e) {
              if (e.target.id == d.id) return true;
              else return false;
            }).each(function(f) {
              // console.log(d.variable, f.source.id, f.source.color)
              if (f.source.color == "G") {
                if (f.source.rule.startsWith("G")) {
                  d3.selectAll(".edge")
                    .filter(function(e) {
                      if (e.target.id == f.source.id) return true;
                      return false;
                    })
                    .each(function(g) {
                      source_variables.push(g.source.variable);
                    });
                } else {
                  source_variables.push(f.source.variable);
                }
              }
            });

out_edges = d3.selectAll(".edge")
            .filter(function(e) {
              if (e.source.id == d.id) return true;
              else return false;
            }).each(function(d) {
              if (d.target.rule.startsWith("G")) {
                d3.selectAll(".edge")
                  .filter(function(e) {
                    if (e.source.id == d.target.id) return true;
                    return false;
                  })
                  .each(function(d) {
                    target_variables.push(d.target.variable);
                  });
              } else {
                target_variables.push(d.target.variable);
              }

if (d.target.color == "G") is_target_error = true;
            });

// console.log(d.rule, source_variables, target_variables)

d.source_variables = source_variables;
          d.target_variables = target_variables;

if (source_variables.length != 0 && !is_target_error) {
            d.error = true;
            d.color = "M";
          } else {
            d.error = false;
          }
        })
        .each(function(d) {
          var hyper_edge = [];

if (d.error) {
            d.source_variables.forEach(function(sv) {
              d.target_variables.forEach(function(tv) {
                if (!hyper_edge.includes(sv)) {
                  hyper_edge.push(sv);
                }
                if (!hyper_edge.includes(tv)) {
                  hyper_edge.push(tv);
                }
              });
            });
            // console.log("Hyperedges : ", d.rule, hyper_edge);
            d.hyper_edge = hyper_edge;
            hyper_edges[d.rule] = hyper_edge;
            error_rules.push(d.id);;
          }
        })
        .filter(function(d) {
          return d.error;
        })
        .each(function(d) {
          rule_error_iter += 1;
        })
        .transition()
        .duration(1000)
        .attr("r", 12)
        .style("fill", function(d) {
          return color_map[d.color];
        })
        .delay(200)
        .each("end", function(d) {
          d3.select(this)
            .transition()
            .duration(1000)
            .attr("r", 6);

rule_error_iter -= 1;
          if (rule_error_iter == 0) {
            err_callback(error_rules);

var max_centrality_nodes = [],
              c_hyper_edges = JSON.parse(JSON.stringify(hyper_edges));

while (Object.keys(hyper_edges).length > 0) {
              var key = Object.keys(hyper_edges)[0],
                hyper_edge = hyper_edges[key],
                keys_to_remove = [];

hyper_edge.forEach(function(n) {
                if (!(max_centrality_nodes.includes(n))) {
                  max_centrality_nodes.push(n);
                }

Object.keys(hyper_edges).forEach(function(k) {
                  var he = hyper_edges[k];
                  if (he.includes(n)) {
                    if (!(keys_to_remove.includes(k))) {
                      keys_to_remove.push(k);
                    }
                  }
                });
              });

keys_to_remove.forEach(function(k) {
                delete hyper_edges[k]
              });
            }

var max = -1,
              selected_nodes = [];

max_centrality_nodes.forEach(function(n) {
              var count = 0;
              Object.keys(c_hyper_edges).forEach(function(k) {
                var he = c_hyper_edges[k];
                if (he.includes(n)) {
                  count += 1;
                }
              });

// console.log(n, count)

if (count > max) {
                selected_nodes = [];
                selected_nodes.push(n);
                max = count;
              } else if (count == max) {
                selected_nodes.push(n);
              }
            });

max_centrality_nodes = selected_nodes;
            cent_callback(max_centrality_nodes)

var revision_iter = 0,
              candidate = 0;

// var sel_cdt_idx = random_int(0, candidate - 1);
            var sel_cdt_idx = 1;

candidate_nodes.filter(function(d) {
                if (d.candidate == sel_cdt_idx) {
                  d.color = "R";
                  return true;
                }
                return false;
              })
              .each(function() {
                revision_iter += 1;
              })
              .transition()
              .duration(1000)
              .attr("r", 12)
              .style("fill", function(d) {
                return color_map[d.color];
              })
              .delay(200)
              .each("end", function(d) {
                d3.select(this)
                  .transition()
                  .duration(1000)
                  .attr("r", 6)
                  .delay(200)
                  .each("end", function(e) {
                    cdt_callback(e.variable)
                  });
              });
          }
        });
    }

function encode_rule(rule) {
      rule = rule.replace("==", "_eq_");
      rule = rule.replace("!=", "_neq_");
      rule = rule.replace(">", "_g_");
      rule = rule.replace(">=", "_ge_");
      rule = rule.replace("<", "_l_");
      rule = rule.replace("<=", "_le_");
      vov = rule.split("_");
      return {
        'rule': rule,
        'variable': vov[0],
        'operator': vov[1],
        'value': vov[2]
      };
    }

function random_int(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>

</body>

</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js to https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.2.1/owl.carousel.min.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.0/Sortable.min.js to https://cdnjs.cloudflare.com/ajax/libs/sortable/1.4.0/sortable.min.js

Updated missing url https://bl.ocks.org/emeeks/raw/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js to /emeeks/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js

Updated missing url https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js to https://cdn.jsdelivr.net/gh/eligrey/canvas-toblob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toblob.js

Updated missing url https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js to https://cdn.jsdelivr.net/gh/eligrey/filesaver.js/e9d941381475b5df8b7d7691013401e171014e89/filesaver.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js

https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.0/Sortable.min.js

https://d3js.org/d3.v3.min.js

https://bl.ocks.org/emeeks/raw/9915de8989e2a5c34652/7d22d8e4f05e944ced10408ae64579beff3c0858/jsnetworkx.js

https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js

https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js