https://bl.ocks.org/erikaris/raw/9cecf1d856da7655d09662e9f82cc097/
xxxxxxxxxx<html lang="en"><head> <title>Root Error Solver</title> <!-- Required meta tags --> <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"> <!-- Font --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <!-- Themify Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css"> <!-- Owl carousel --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"> <!-- Main css --> <link href="style.css" rel="stylesheet"> <style> .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 60%; /* aspect ratio */ vertical-align: top; overflow: hidden; } .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><body data-spy="scroll" data-target="#navbar" data-offset="30"> <!-- Nav Menu --> <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> <!-- // end .section --> <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"> <!-- source: https://bootsnipp.com/snippets/jvQAO --> <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> <!-- // end .section --> <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> <!-- // end .section --> <div class="section" id="code-list"> <div class="container"> <div class="section-title"> <h3>Code List</h3> </div> <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> </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> </div> </div> <!-- Modal --> <!-- <div class="modal fade" id="modal_graph_rule" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div id="graph_rule_container" class="container svg-container"></div> </div> </div> </div> </div> --> <!-- jQuery and Bootstrap --> <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> <!-- Plugins JS --> <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> <!-- Custom JS --> <script src="script.js"></script> <script type="text/javascript"> var rule_graph_file = "graph_rule.json"; 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":["","","","",""],...} var records = []; for (v in var_vals_pair) { var vals = var_vals_pair[v]; vals.forEach(function(val, i) { if (records.length <= i) records.push({}); records[i][v] = val }); } // 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 validate_input(callback) { var val_inp_iter = 0; d3.selectAll(".node") .selectAll("circle") .filter(function(d) { if (d.id.startsWith("R")) return true; else return false; }) .each(function(d) { d.valid = false; }).each(function(d) { var str_value = d.input, val = Number(str_value), rule_val = Number(d.value); if (d.value == "NULL" && str_value == "NULL") d.valid = true; if (d.operator == "eq") { if (d.value.indexOf("-") !== -1) { var min_max = d.value.split("-"); try { var min = Number(min_max[0]), max = Number(min_max[1]); if (val >= min && val <= max) d.valid = true; } catch (err) {} } else if (d.value == str_value) d.valid = true; } if (val != NaN && rule_val != NaN) { if (d.operator == "g") { if (val > rule_val) d.valid = true; } else if (d.operator == "ge") { if (val >= rule_val) d.valid = true; } else if (d.operator == "l") { if (val < rule_val) d.valid = true; } else if (d.operator == "le") { if (val <= rule_val) d.valid = true; } } }).filter(function(d) { if (d.valid) return true; else false; }) .each(function(d) { d.color = "G"; val_inp_iter += 1; }).transition() .duration(500) .style("fill", function(d) { return color_map[d.color] }).delay(200) .each("end", function(d) { // Greenify the related group too d3.selectAll("." + d.group + "-in,." + d.group + "-out") .selectAll("circle") .each(function(d) { d.valid = true; d.color = "G"; }) .transition() .duration(500) .style("fill", function(d) { return color_map[d.color]; }) .delay(200) .each("end", function(d) {}); val_inp_iter -= 1; if (val_inp_iter == 0) { 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 candidate_nodes = d3.selectAll(".node") .selectAll("circle") .each(function(d) { d.candidate = -1; }) .filter(function(d) { if (max_centrality_nodes.includes(d.variable)) return true; else return false; }) .each(function(d) { d.candidate = candidate; candidate += 1; }); // 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