visualgo.net

{
  "domain": "visualgo.net", 
  "alexa_rank": 442000, 
  "tags": [
    "http", 
    "https"
  ], 
  "443": {
    "https": {
      "tls": {
        "server_key_exchange": {
          "ecdh_params": {
            "curve_id": {
              "id": 23, 
              "name": "secp256r1"
            }
          }
        }, 
        "certificate": {
          "parsed": {
            "fingerprint_sha1": "378d9bf25672279ec43bf4b9f39d512a58b3e8b7", 
            "tbs_noct_fingerprint": "dc09e4d92298771e920dc26d6aa7a70b4dc10e66823af6a5d4c04b7d39dda0e5", 
            "subject_dn": "C=US, ST=CA, L=San Francisco, O=Cloudflare, Inc., CN=sni.cloudflaressl.com", 
            "issuer": {
              "common_name": [
                "Cloudflare Inc ECC CA-3"
              ], 
              "country": [
                "US"
              ], 
              "organization": [
                "Cloudflare, Inc."
              ]
            }, 
            "tbs_fingerprint": "e9560eb119aecacb9571ac1d71ae3e58a894bc57162dba07e6c7abd511cd1823", 
            "redacted": false, 
            "validation_level": "OV", 
            "issuer_dn": "C=US, O=Cloudflare, Inc., CN=Cloudflare Inc ECC CA-3", 
            "fingerprint_sha256": "c907fd2102bb57fdd373bbf004321812cd90cc2e6100598982c83ce7ec39de4f", 
            "version": 3, 
            "extensions": {
              "authority_key_id": "a5ce37eaebb0750e946788b445fad9241087961f", 
              "certificate_policies": [
                {
                  "cps": [
                    "https://www.digicert.com/CPS"
                  ], 
                  "id": "2.16.840.1.114412.1.1"
                }, 
                {
                  "id": "2.23.140.1.2.2"
                }
              ], 
              "authority_info_access": {
                "ocsp_urls": [
                  "http://ocsp.digicert.com"
                ], 
                "issuer_urls": [
                  "http://cacerts.digicert.com/CloudflareIncECCCA-3.crt"
                ]
              }, 
              "extended_key_usage": {
                "client_auth": true, 
                "server_auth": true
              }, 
              "subject_alt_name": {
                "dns_names": [
                  "*.visualgo.net", 
                  "sni.cloudflaressl.com", 
                  "visualgo.net"
                ]
              }, 
              "basic_constraints": {
                "is_ca": false
              }, 
              "crl_distribution_points": [
                "http://crl3.digicert.com/CloudflareIncECCCA-3.crl", 
                "http://crl4.digicert.com/CloudflareIncECCCA-3.crl"
              ], 
              "key_usage": {
                "digital_signature": true, 
                "value": 1
              }, 
              "signed_certificate_timestamps": [
                {
                  "log_id": "9lyUL9F3MCIUVBgIMJRWjuNNExkzv98MLyALzE7xZOM=", 
                  "timestamp": 1597475684, 
                  "version": 0, 
                  "signature": "BAMASDBGAiEAtiQU3E3r26gQAO4DVwYNBDKFfScBdkCdHTSxno5YZgwCIQD/78/jGIVtrZxqsQfWmXgGMZpJhLnadpoTVIl9fmeKpA=="
                }, 
                {
                  "log_id": "XNxDkv7mq0VEsV6a1FbmEDf71fpH3KFzlLJe5vbHDso=", 
                  "timestamp": 1597475684, 
                  "version": 0, 
                  "signature": "BAMARzBFAiAgizudIWl9wul6V+wJMP9aTjOtHE54RXeYKfzrORAz+AIhALKcbOJXEMW1t9tUX1Dc1ijUmk0V45Ls2JkvEtqqgpQy"
                }
              ], 
              "subject_key_id": "e439f790422701d89273495b68349730b5b5dc3a"
            }, 
            "names": [
              "*.visualgo.net", 
              "visualgo.net", 
              "sni.cloudflaressl.com"
            ], 
            "signature_algorithm": {
              "oid": "1.2.840.10045.4.3.2", 
              "name": "ECDSAWithSHA256"
            }, 
            "validity": {
              "start": "2020-08-15T00:00:00Z", 
              "length": 31579200, 
              "end": "2021-08-15T12:00:00Z"
            }, 
            "serial_number": "2424467879767986016672936339402514145", 
            "fingerprint_md5": "44a7f70cbbf8bddcc3206ef7c4c820d3", 
            "subject_key_info": {
              "fingerprint_sha256": "c253114160c2099f93ffc4dbafb221dff01ab54ad3092f0d2f56de951071fa52", 
              "key_algorithm": {
                "name": "ECDSA"
              }, 
              "ecdsa_public_key": {
                "b": "WsY12Ko6k+ez671VdpiGvGUdBrDMU7D2O848PifSYEs=", 
                "curve": "P-256", 
                "gy": "T+NC4v4af5uO5+tKfA+eFivOM1drMV7Oy7ZAaDe/UfU=", 
                "n": "/////wAAAAD//////////7zm+q2nF56E87nKwvxjJVE=", 
                "p": "/////wAAAAEAAAAAAAAAAAAAAAD///////////////8=", 
                "length": 256, 
                "pub": "BKHk5Hf3LtZ2cq1C2hTprIbDd5BSOA17qBv2kz3U04KFez9qcAMjC5tUUQVKsmI6ley89qZ5uzSLuwROrLOsVFw=", 
                "y": "ez9qcAMjC5tUUQVKsmI6ley89qZ5uzSLuwROrLOsVFw=", 
                "x": "oeTkd/cu1nZyrULaFOmshsN3kFI4DXuoG/aTPdTTgoU=", 
                "gx": "axfR8uEsQkf4vOblY6RA8ncDfYEt6zOg9KE5RdiYwpY="
              }
            }, 
            "signature": {
              "self_signed": false, 
              "valid": true, 
              "value": "MEUCIQC6tLpkJ4rADn11SxW/6XiToEGDNzZR6MiWloj3FH579gIgCk8uQbk5Q2lJ1pyBwHfQv9tL5cGldJVFHc/qpvcTQPM=", 
              "signature_algorithm": {
                "oid": "1.2.840.10045.4.3.2", 
                "name": "ECDSAWithSHA256"
              }
            }, 
            "spki_subject_fingerprint": "9355b6f99ccc3b2fea57274e2cd24b75d52056cb40cce83b07669d02a2f77daf", 
            "subject": {
              "common_name": [
                "sni.cloudflaressl.com"
              ], 
              "country": [
                "US"
              ], 
              "locality": [
                "San Francisco"
              ], 
              "province": [
                "CA"
              ], 
              "organization": [
                "Cloudflare, Inc."
              ]
            }
          }
        }, 
        "chain": [
          {
            "parsed": {
              "fingerprint_sha1": "b3dd7606d2b5a8b4a13771dbecc9ee1cecafa38a", 
              "tbs_noct_fingerprint": "9cbba0fc962f7a2b31c62b1b175a2de4c50a8395727e30b626a80009a780e3d8", 
              "subject_dn": "C=US, O=Cloudflare, Inc., CN=Cloudflare Inc ECC CA-3", 
              "issuer": {
                "common_name": [
                  "Baltimore CyberTrust Root"
                ], 
                "country": [
                  "IE"
                ], 
                "organizational_unit": [
                  "CyberTrust"
                ], 
                "organization": [
                  "Baltimore"
                ]
              }, 
              "tbs_fingerprint": "9cbba0fc962f7a2b31c62b1b175a2de4c50a8395727e30b626a80009a780e3d8", 
              "redacted": false, 
              "validation_level": "OV", 
              "issuer_dn": "C=IE, O=Baltimore, OU=CyberTrust, CN=Baltimore CyberTrust Root", 
              "fingerprint_sha256": "3abbe63daf756c5016b6b85f52015fd8e8acbe277c5087b127a60563a841ed8a", 
              "version": 3, 
              "extensions": {
                "authority_key_id": "e59d5930824758ccacfa085436867b3ab5044df0", 
                "certificate_policies": [
                  {
                    "cps": [
                      "https://www.digicert.com/CPS"
                    ], 
                    "id": "2.16.840.1.114412.1.1"
                  }, 
                  {
                    "id": "2.16.840.1.114412.1.2"
                  }, 
                  {
                    "id": "2.23.140.1.2.1"
                  }, 
                  {
                    "id": "2.23.140.1.2.2"
                  }, 
                  {
                    "id": "2.23.140.1.2.3"
                  }
                ], 
                "extended_key_usage": {
                  "client_auth": true, 
                  "server_auth": true
                }, 
                "authority_info_access": {
                  "ocsp_urls": [
                    "http://ocsp.digicert.com"
                  ]
                }, 
                "basic_constraints": {
                  "max_path_len": 0, 
                  "is_ca": true
                }, 
                "crl_distribution_points": [
                  "http://crl3.digicert.com/Omniroot2025.crl"
                ], 
                "key_usage": {
                  "certificate_sign": true, 
                  "crl_sign": true, 
                  "digital_signature": true, 
                  "value": 97
                }, 
                "subject_key_id": "a5ce37eaebb0750e946788b445fad9241087961f"
              }, 
              "validity": {
                "start": "2020-01-27T12:48:08Z", 
                "length": 155560311, 
                "end": "2024-12-31T23:59:59Z"
              }, 
              "signature_algorithm": {
                "oid": "1.2.840.113549.1.1.11", 
                "name": "SHA256WithRSA"
              }, 
              "serial_number": "13580602362388610137601344763287833660", 
              "fingerprint_md5": "3416ca751517b8391cd759fabb8ec919", 
              "subject_key_info": {
                "fingerprint_sha256": "144cd5394a78745de02346553d126115b48955747eb9098c1fae7186cd60947e", 
                "key_algorithm": {
                  "name": "ECDSA"
                }, 
                "ecdsa_public_key": {
                  "b": "WsY12Ko6k+ez671VdpiGvGUdBrDMU7D2O848PifSYEs=", 
                  "curve": "P-256", 
                  "gy": "T+NC4v4af5uO5+tKfA+eFivOM1drMV7Oy7ZAaDe/UfU=", 
                  "n": "/////wAAAAD//////////7zm+q2nF56E87nKwvxjJVE=", 
                  "p": "/////wAAAAEAAAAAAAAAAAAAAAD///////////////8=", 
                  "length": 256, 
                  "pub": "BLmtTWaZFAtG7B+B0SpQHp0DFS80En0tlriIOJuFX4+/u03vYUbEyXPUJE/g7hzObLNRcS9q7kwFCXfTcmKkm9c=", 
                  "y": "u03vYUbEyXPUJE/g7hzObLNRcS9q7kwFCXfTcmKkm9c=", 
                  "x": "ua1NZpkUC0bsH4HRKlAenQMVLzQSfS2WuIg4m4Vfj78=", 
                  "gx": "axfR8uEsQkf4vOblY6RA8ncDfYEt6zOg9KE5RdiYwpY="
                }
              }, 
              "signature": {
                "self_signed": false, 
                "valid": true, 
                "value": "BSQd3RuwKuuY1oXjOU1ea1edglf86+gxoleQZQW+FkQ4WncCuc8QQsbhkqTjRSf4AEcsaKhWmVNUj62eQMHQD7bXDQs4SGxQLEmQBltkHYvMSDAu3gjim0kiwJIMEV6WkpTV/CDcVmzlkpO/ehzAN+OFSRX6K+F0ORgPt9rzoldYYE/MjpQA/EZ7NDE+TUeCgTrL9IldDu9NDW6cG4Ik3TIlXRF4URA9oDUjBC9lb5zB0UPX0B7zMWdZJ91r0nUJkxEkJBTPKb7mI8O4j3I/6QfIJERTerO5YWWhTA7GSADJdWMFh3BFUoPTlZ1F6vDoMR1+CR8K/j7dqjxedNKssQ==", 
                "signature_algorithm": {
                  "oid": "1.2.840.113549.1.1.11", 
                  "name": "SHA256WithRSA"
                }
              }, 
              "spki_subject_fingerprint": "9130237db3ae3de80eb923c9b9a799eb66a288533672e23e2b4326970f46847a", 
              "subject": {
                "common_name": [
                  "Cloudflare Inc ECC CA-3"
                ], 
                "country": [
                  "US"
                ], 
                "organization": [
                  "Cloudflare, Inc."
                ]
              }
            }
          }
        ], 
        "metadata": {}, 
        "cipher_suite": {
          "id": "0xC02B", 
          "name": "TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256"
        }, 
        "version": "TLSv1.2", 
        "session_ticket": {
          "length": 176, 
          "lifetime_hint": 64800
        }, 
        "signature": {
          "hash_algorithm": "sha256", 
          "valid": true, 
          "signature_algorithm": "ecdsa"
        }, 
        "validation": {
          "matches_domain": true, 
          "browser_trusted": true
        }, 
        "ocsp_stapling": true
      }, 
      "dhe_export": {
        "support": false, 
        "metadata": {}
      }, 
      "get": {
        "body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"description\" content=\"VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace. Together with his students from the National University of Singapore, a series of visualisations were developed and consolidated, from simple sorting algorithms to complex graph data structures. Though specifically designed for the use of NUS students taking various data structure and algorithm classes (CS1010, CS1020, CS2010, CS2020, and CS3233), as advocators of online learning, we hope that curious minds around the world will find these visualisations useful as well.\">\n<meta name=\"keywords\" content=\"VisuAlgo Data Structure Algorithm Visualization Animation Online Learning Tutorial Lecture\">\n \n<meta name=\"csrf-token\" content=\"bkYfgSA7vEbxB6rjWQ07o6j0DFuPN8WdqsDXZVR8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EDGE\">\n<meta property=\"og:image\" content=\"https://visualgo.net/img/png.png\">\n<title>VisuAlgo - visualising data structures and algorithms through animation</title>\n<link rel=\"icon\" href=\"https://visualgo.net/img/favicon.png\" type=\"image/x-icon\">\n<link rel=\"shortcut icon\" href=\"https://visualgo.net/img/favicon.png\" type=\"image/x-icon\">\n<link rel=\"apple-touch-icon\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://visualgo.net/fonts/silkscreen/stylesheet.css\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://visualgo.net/css/common.css\">\n<style>\[email protected]  \"utf-8\";\n\nh1 {\n  text-align: center; \n  font-family: 'SilkscreenNormal';\n  font-size: 36px;\n  margin-top: 50px;\n}\n\nh2 {\n  text-align: center;\n  font-style: italic;\n  margin-bottom: 30px;\n  font-size: 15px;\n}\n\n#searchbar { text-align: center; }\n#search {\n  width: 250px;\n  padding: 7px 10px;\n  box-shadow: 0px 0px 3px #929292 inset;\n  background: white;\n  color: #888888;\n  font-size: 14px;\n}\n\n#show-filters {\n  cursor: pointer;\n  color: white;\n  padding: 7px 11px 6px;\n  margin-left: -1px;\n  display: inline-block;\n}\n#show-filters img { display: inline-block; vertical-align: 2px; }\n\n#active-tags { text-align: center; margin-left: -10px; }\n.active-tag {\n  display: inline-block;\n  position: relative;\n  background: #aaaaaa;\n  color: white;\n  padding: 4px 34px 4px 8px;\n  margin-top: 20px;\n  margin-left: 10px;\n  font-size: 14px;\n}\n.active-tag span { /*the cross*/\n  background: #444444;\n  display: inline-block;\n  padding: 3px;\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  cursor: pointer;\n}\n.rotateRight {\n  transform: rotate(180deg);\n  -ms-transform: rotate(180deg); /* IE 9 */\n  -webkit-transform: rotate(180deg); /* Safari and Chrome */\n  -o-transform: rotate(180deg); /* Opera */\n  -moz-transform: rotate(180deg); /* Firefox */\n  \n  /* if you want to do this move with animate use transition */\n  transition: .5s;\n  -moz-transition: .5s; /* Firefox 4 */\n  -webkit-transition: .5s; /* Safari and Chrome */\n  -o-transition: .5s; /* Opera */ \n}\n  \n.line { height: 1px; background: #cccccc; margin: 0px 30px;}\n#emptySearchMsg { text-align: center; font-size: 15px; margin-top: 20px; }\n#filters { padding: 20px 60px 12px 22px; overflow: auto; }\n  .filter {\n    color: white;\n    padding: 3px 8px;\n    margin: 0px 0px 8px 8px;\n    cursor: pointer;\n    border-radius: 2px;\n    float: left;\n  }\n\n.list { width: 100%; clear: both;}\n.list li {\n  display: block;\n  float: left;\n  width: 100%;\n}\n.list li .li-wrapper {\n  background: white;\n  padding-top: 10px;\n  padding-right: 10px;\n  padding-bottom: 10px;\n  margin-left: 20px;  \n  margin-bottom: 20px;\n  box-shadow: 0px 0px 3px #dddddd;\n}\n.list li .li-wrapper:hover {\n  box-shadow: 0px 0px 3px #aaaaaa;\n}\n.list li a.thumbnail {\n  display: block;\n  position: relative;\n  margin: 0px 0px 10px 10px;\n  cursor: pointer;\n}\n.list li a.thumbnail .overlay {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  text-align: center;\n}\n.list li a.thumbnail img { width: 100%; }\n.list li a.thumbnail img.static { width: 100%; position: absolute; top: 0px; }\n.list li a.thumbnail div { width: 100%; }\n.list li a.thumbnail div.static { width: 100%; position: absolute; top: 0px; }\n    \n.list li .info { margin: 0px 0px 0px 10px; }\n.list li .info h3 {\n  font-size: 13px;\n  font-weight: bold;\n  color: #000000;\n  margin-bottom: 8px;\n}\n.list li .info h3:hover { color: #999999; }\n.list li .info .indv-viz-filters { margin-left: -8px; height: 23px; float: none; overflow: hidden; }\n    \n#noexist {\n  display: block;\n  font-size: 18px;\n  font-weight: bold;\n  padding: 20px;\n}\n\n#topleft {\n  border: 1px solid grey;\n  border-radius: 5px;\n  margin: 10px;\n  padding: 2px;\n  max-height: 200px;\n}\n\n#topright {\n  position: absolute;\n  top: 60px;\n  left: 1000px;\n  width: 90px;\n  height: 175px;\n  display: none;\n}\n\[email protected] (min-width: 320px) { /* 320-480px */\n  #topleft {\n    top: 20px;\n    width: 100%-; /* the - is to take into account the potential vertical scroll bar? */\n    position: relative;\n  }\n}\n\[email protected] (min-width: 480px) { /* 480-768px */\n  h1 { font-size: 50px; }\n  .line { margin: 0px 50px; }\n  #filters { padding: 20px 60px 12px 42px; }\n  .list li { width: 50%; }\n}\n\[email protected] (min-width: 768px) { /* 768-1024px */\n  .line { margin: 0px 60px; }\n  #filters { padding: 20px 60px 12px 52px; }\n  .list li { width: 33.33%; }\n}\n\[email protected] (min-width: 1024px) { /* more than 1024px */\n  .list li { width: 25%; }\n  #topleft {\n    top: 40px; \n    width: 25%;\n    position: absolute;\n  }\n}\n\[email protected] (min-width: 1400px) { /* more than 1400px */\n  .list li { width: 20%; }\n}\n\n.static {\n  background-repeat: no-repeat;\n  background-size: 100% 100%;\n  display: inline-block;\n  height: 100%;\n  width: 300px;\n  opacity: 1;\n  backface-visibility: hidden;\n}\n\n/*.container {\n  position: relative;\n  width: 50%;\n}\n*/\n/*.image {\n  opacity: 1;\n  display: block;\n  width: 100%;\n  height: auto;\n  transition: .5s ease;\n  backface-visibility: hidden;\n}\n*/\n.middle {\n  transition: .5s ease;\n  opacity: 0;\n  position: absolute;\n  top: 7%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%)\n}\n\n.li-wrapper:hover .static {\n  opacity: 0.3;\n}\n\n.li-wrapper:hover .middle {\n  opacity: 1;\n}\n\n.message {\n  font-size: 150%;\n  text-align: center;\n}\n\n\n\n#notloggedin {\n  background-color: black;\n  color: white;\n  border: 1px solid;\n  border-radius: 5px;\n  position: absolute;\n  width: 280px;\n  top: 50px;\n  right: 10px;\n  padding: 7px;\n  z-index: 1;\n}\n\n#notloggedin::after {\n  content: \"\";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: 110px;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent transparent black transparent;\n}\n</style>\n<link rel='alternate' hreflang='en' href='https://visualgo.net'>\n<link rel='alternate' hreflang='zh' href='https://visualgo.net/zh'>\n<link rel='alternate' hreflang='es' href='https://visualgo.net/es'>\n<link rel='alternate' hreflang='pt' href='https://visualgo.net/pt'>\n<link rel='alternate' hreflang='ru' href='https://visualgo.net/ru'>\n<link rel='alternate' hreflang='id' href='https://visualgo.net/id'>\n<link rel='alternate' hreflang='de' href='https://visualgo.net/de'>\n<link rel='alternate' hreflang='bn' href='https://visualgo.net/bn'>\n<link rel='alternate' hreflang='ja' href='https://visualgo.net/ja'>\n<link rel='alternate' hreflang='ko' href='https://visualgo.net/ko'>\n<link rel='alternate' hreflang='vi' href='https://visualgo.net/vi'>\n<script>\n      function changeURL() {\n        var URL = window.location.href.split('/');\n        var val = document.getElementById(\"Language\").value;\n        URL[3] = val;\n        window.location.assign(URL.join('/'));\n      }\n    </script>\n</head>\n<body>\n<div id=\"top-bar\">\n<a href=\"http://www.comp.nus.edu.sg/~stevenha\"><span class=\"colour\" style=\"border: 1px solid green; border-radius: 25px;\">7</span></a>&nbsp;&nbsp;&nbsp;\n<a id=\"home\" href=\"/\">Visu<span class=\"colour\">Algo</span><span style=\"font-size: 40%\">.net</span></a>\n/\n<select id=\"Language\" onchange=\"changeURL()\">\n<option value=\"en\" selected>en</option>\n<option value=\"zh\">zh</option>\n<option value=\"es\">es</option>\n<option value=\"pt\">pt</option>\n<option value=\"ru\">ru</option>\n<option value=\"id\">id</option>\n<option value=\"de\">de</option>\n<option value=\"bn\">bn</option>\n<option value=\"ja\">ja</option>\n<option value=\"ko\">ko</option>\n<option value=\"vi\">vi</option>\n</select>\n<span class=\"right-links\" id=\"useraccount\">Login</span>\n<a class=\"right-links\" id=\"translation-link\" href=\"translation\">Translation</a>\n<a class=\"right-links\" id=\"training-link\" href=\"training\">Training</a>\n</div>\n<div id=\"dark-overlay\"></div>\n\n<h1>Visu<span class=\"colour\">Algo</span><span style=\"font-size:25%\">.net/en</span></h1>\n<h2 id=\"subtitle\">visualising data structures and algorithms through animation\n</h2>\n<form id=\"searchbar\">\n<input id=\"search\" type=\"text\" autocomplete=\"off\" placeholder=\"Search...\"><div id=\"show-filters\" title=\"show/hide filters\">&#9663;</div>\n</form>\n<center><p><br><a href=\"https://www.comp.nus.edu.sg/news/features/2020stevenhalim/\" target=\"_blank\"><u>Featured story: Visualizing Algorithms with a Click</u></a>\n</p>\n</center>\n<div id=\"active-tags\"></div>\n<div id=\"emptySearchMsg\" style=\"display: none;\">No result were found.></div>\n<div id=\"filters-and-lines\" style=\"display: none;\">\n<div class=\"line\" style=\"margin-top: 20px;\"></div>\n<div id=\"filters\"></div>\n<div class=\"line\"></div>\n</div>\n<div id=\"topleft\">\n<p style=\"margin-bottom: 8px;\"><b>Do You Know?</b> <a class=\"links\" onclick=\"nextTip()\">Next Random Tip</a></p>\n<p id=\"msg\" style=\"text-align: justify;\"></p>\n</div>\n<div id=\"topright\">\n<a href=\"https://cpbook.net\" target=\"_blank\"><img src=\"https://cpbook.net/img/cp4.jpg\" style=\"height: 130px;\" alt=\"CPbook\"></a><br>\n<a href=\"https://www.lulu.com/spotlight/stevenhalimatgmaildotcom\" target=\"_blank\"><img src=\"https://visualgo.net/img/blue.png\" alt=\"lulu\"></a>\n\n</div>\n<p hidden id='msg_list0'>This is the English (default) interface for <a href=\"https://visualgo.net\" target=\"_blank\"><u>https://visualgo.net</u></a>. VisuAlgo will gradually grow into a multilingual site. Try visiting the other versions of VisuAlgo, e.g. <a href=\"./zh\"><u>Chinese</u></a>;&nbsp;<a href=\"https://visualgo.net/id\"><u>Indonesian</u></a>;&nbsp;<a href=\"https://visualgo.net/ru\"><u>Russian</u></a>; etc (see <a href=\"/statistics\"><u>statistics page</u></a>).</p>\n<p hidden id='msg_list1'>In VisuAlgo, you can use <i>your own input</i> for any algorithm instead of the sample inputs. Try graph drawing feature in these 6 graph-related visualizations: <a href=\"./en/graphds\"><u>Graph DS</u></a>, <a href=\"./en/dfsbfs\"><u>DFS/BFS</u></a>, <a href=\"./en/mst\"><u>MST</u></a>, <a href=\"./en/sssp\"><u>SSSP</u></a>, <a href=\"./en/maxflow\"><u>Max Flow</u></a>, and <a href=\"./en/matching\"><u>Matching</u></a>. You can also click tag <i>&#39;graph&#39;</i> in any of these 6 graph-related visualization boxes or type in <i>&#39;graph&#39;</i> in the search box.</p>\n<p hidden id='msg_list2'>To compare 2 related algorithms, e.g. <a href=\"./en/mst\"><u>Kruskal&#39;s vs Prim&#39;s</u></a> on the same graph, open 2 VisuAlgo pages in 2 windows and juxtapose them. Click <a href=\"img/kruskalprim.png\" target=\"_blank\"><u>here</u></a> to see the screenshot.</p>\n<p hidden id='msg_list3'>You can visualize the recursion tree (or DAG, if there are overlapping subproblems and Dynamic Programming (DP) is applicable) of <b>ANY</b> valid <a href=\"./en/recursion\"><u>recursive function</u></a> that can be written in JavaScript. Click <a href=\"img/recursion_treedag.png\" target=\"_blank\"><u>here</u></a> to see the screenshot.</p>\n<p hidden id='msg_list4'>VisuAlgo loads fast for first time visitors, but it loads &#39;almost instantly&#39; for returning visitors as we cache lots of static content of VisuAlgo :) (please do not use incognito or private browsing mode to keep the cache). Moreover, if you have registered a VisuAlgo account, we will load VisuAlgo according to your preferences after you <a href=\"/login\"><u>login</u></a>.</p>\n<p hidden id='msg_list5'>Each visualization page has an &#39;e-Lecture Mode&#39; that is accessible from that page&#39;s top right corner that explains the data structure and/or algorithm being visualized. This e-Lecture mode is automatically shown to first time (or non logged-in) visitors to showcase the data structure and/or the algorithm being visualized. The quality of e-Lecture Mode will gradually be made to reach the lecture standard of algorithm classes in National University of Singapore :).</p>\n<p hidden id='msg_list6'>Please check four newest features of VisuAlgo: 1). Multi-lingual capability (you don&#39;t have to rely on /en language at all times if you are not native English speaker), 2). User accounts (there are interesting perks and customizations available for loyal users, please <a href=\"/register\"><u>register a free account now</u></a>), 3). Much more powerful e-Lecture mode to reach \"NUS standard\", and 4). Visualizations of NP-hard problems (currently MVC, TSP, and Steiner Tree).</p>\n<p hidden id='msg_list7'>VisuAlgo has two main components: The visualization pages (currently 23) and the Online Quiz component (currently 12 and will be 23 too in the near future). We do not script any of the questions in Online Quiz :O and all answers will be graded almost instantly :). You can try the online quiz at <a href=\"./training\"><u>our training page</u></a> or by clicking the &#39;Training&#39; button on the visualization module.</p>\n<p hidden id='msg_list8'>Search the term <a href=\"https://www.google.com/search?q=algorithm+visualization\" target=\"_blank\"><u>&#39;algorithm visualization&#39;</u></a> in your favorite Search Engine, do you see VisuAlgo in the first page of the search result :)? Next level: Search that term again, but in your native language (if it is not English). Is VisuAlgo still listed in the first page? :). And get ready to be surprised: Search the name of your favorite data structure or algorithm without mentioning the keyword &#39;animation&#39; or &#39;visualization&#39;. Is VisuAlgo still listed in the first page? :):).</p>\n<p hidden id='msg_list9'>VisuAlgo currently receives about ~3000 hits/day from various Computer Science students and teachers worldwide. Although this is a good number, we will keep improving VisuAlgo so that it can be even more useful for much more (new) CS students worldwide annually. Please spread the word if you are our returning visitors (<a href=\"/register\"><u>register a free VisuAlgo account</u></a> so that we can know who you are) and like this tool :).</p>\n<div id=\"main\">\n<ul class=\"list\">\n<li class='viz' id='sorting'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/sorting' data-anim='sorting'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/sorting.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='sortingtext' href='en/sorting'>Sorting</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=sorting'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>array</span>\n<span class='filter'>algorithm</span>\n<span class='filter'>bubble</span>\n<span class='filter'>select</span>\n<span class='filter'>insert</span>\n<span class='filter'>selection</span>\n<span class='filter'>insertion</span>\n<span class='filter'>merge</span>\n<span class='filter'>quick</span>\n<span class='filter'>randomized quick</span>\n<span class='filter'>counting</span>\n<span class='filter'>radix</span>\n<span class='filter'>sort</span>\n<span class='filter'>cs1010</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3230</span>\n<span class='filter'>list</span>\n<span class='filter'>data structure</span>\n<span class='filter'>sorting</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='bitmask'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/bitmask' data-anim='bitmask'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/bitmask.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='bitmasktext' href='en/bitmask'>Bitmask</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=bitmask'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>bit manipulation</span>\n<span class='filter'>set</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>array</span>\n<span class='filter'>list</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>bitmask</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='list'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/list' data-anim='list'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/list.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='listtext' href='en/list'>Linked List</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=list'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>stack</span>\n<span class='filter'>queue</span>\n<span class='filter'>doubly</span>\n<span class='filter'>deque</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>array</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>linked</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='hashtable'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/hashtable' data-anim='hashtable'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/hashtable.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='hashtabletext' href='en/hashtable'>Hash Table</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=hashtable'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>open addressing</span>\n<span class='filter'>linear</span>\n<span class='filter'>quadratic</span>\n<span class='filter'>probing</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='heap'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/heap' data-anim='heap'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/heap.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='heaptext' href='en/heap'>Binary Heap</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=heap'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>priority queue</span>\n<span class='filter'>recursive</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>recursion</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>binary</span>\n<span class='filter'>heap</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='bst'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/bst' data-anim='bst'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/bst.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='bsttext' href='en/bst'>Binary Search Tree</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=bst'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>adelson velskii landis</span>\n<span class='filter'>set</span>\n<span class='filter'>table</span>\n<span class='filter'>avl</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>recursion</span>\n<span class='filter'>recursive</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>set</span>\n<span class='filter'>bst</span>\n<span class='filter'>binary</span>\n<span class='filter'>search</span>\n<span class='filter'>tree</span>\n<span class='filter'>priority</span>\n<span class='filter'>queue</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='graphds'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/graphds' data-anim='graphds'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/graphds.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='graphdstext' href='en/graphds'>Graph Structures</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=graphds'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>tree</span>\n<span class='filter'>complete</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>dag</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>graph</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='ufds'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/ufds' data-anim='ufds'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/ufds.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='ufdstext' href='en/ufds'>Union-Find DS</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=ufds'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>path compression</span>\n<span class='filter'>disjoint</span>\n<span class='filter'>set</span>\n<span class='filter'>data structure</span>\n<span class='filter'>union by rank</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>array</span>\n<span class='filter'>tree</span>\n<span class='filter'>find</span>\n<span class='filter'>ds</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='segmenttree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/segmenttree' data-anim='segmenttree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/segmenttree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='segmenttreetext' href='en/segmenttree'>Segment Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>dynamic</span>\n<span class='filter'>range</span>\n<span class='filter'>sum</span>\n<span class='filter'>min</span>\n<span class='filter'>max</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>segment</span>\n<span class='filter'>tree</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='fenwicktree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/fenwicktree' data-anim='fenwicktree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/fenwicktree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='fenwicktreetext' href='en/fenwicktree'>Fenwick Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>binary indexed tree</span>\n<span class='filter'>bit</span>\n<span class='filter'>dynamic</span>\n<span class='filter'>fenwick</span>\n<span class='filter'>range</span>\n<span class='filter'>sum</span>\n<span class='filter'>point</span>\n<span class='filter'>update</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>binary</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='recursion'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/recursion' data-anim='recursion'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/recursion.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='recursiontext' href='en/recursion'>Recursion Tree/DAG</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=recursion'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>dynamic programming</span>\n<span class='filter'>dp</span>\n<span class='filter'>generic</span>\n<span class='filter'>cs1010</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>recursive</span>\n<span class='filter'>algorithm</span>\n<span class='filter'>recursion</span>\n<span class='filter'>tree</span>\n<span class='filter'>dag</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='dfsbfs'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/dfsbfs' data-anim='dfsbfs'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/dfsbfs.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='dfsbfstext' href='en/dfsbfs'>Graph Traversal</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=dfsbfs'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>bfs</span>\n<span class='filter'>dfs</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>scc</span>\n<span class='filter'>cut vertex</span>\n<span class='filter'>articulation point</span>\n<span class='filter'>bridge</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>graph</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='mst'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/mst' data-anim='mst'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/mst.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='msttext' href='en/mst'>Min Spanning Tree</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=mst'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>mst</span>\n<span class='filter'>prim</span>\n<span class='filter'>kruskal</span>\n<span class='filter'>graph</span>\n<span class='filter'>min</span>\n<span class='filter'>spanning</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>tree</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='sssp'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/sssp' data-anim='sssp'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/sssp.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='sssptext' href='en/sssp'>SS Shortest Paths</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=sssp'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>sssp</span>\n<span class='filter'>single-source</span>\n<span class='filter'>bfs</span>\n<span class='filter'>dijkstra</span>\n<span class='filter'>bellman ford</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>single source</span>\n<span class='filter'>shortest path</span>\n<span class='filter'>graph</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='maxflow'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/maxflow' data-anim='maxflow'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/maxflow.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='maxflowtext' href='en/maxflow'>Network Flow</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>max flow</span>\n<span class='filter'>edmonds karp</span>\n<span class='filter'>min cut</span>\n<span class='filter'>dinic</span>\n<span class='filter'>ford fulkerson</span>\n<span class='filter'>graph</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='matching'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/matching' data-anim='matching'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/matching.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='matchingtext' href='en/matching'>Graph Matching</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>augmenting path</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>graph</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>matching</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='cyclefinding'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/cyclefinding' data-anim='cyclefinding'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/cyclefinding.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='cyclefindingtext' href='en/cyclefinding'>Cycle Finding</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>floyd</span>\n<span class='filter'>tortoise-hare</span>\n<span class='filter'>math</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='suffixtree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/suffixtree' data-anim='suffixtree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/suffixtree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='suffixtreetext' href='en/suffixtree'>Suffix Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>string</span>\n<span class='filter'>matching</span>\n<span class='filter'>lrs</span>\n<span class='filter'>lcs</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>suffix</span>\n<span class='filter'>tree</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='suffixarray'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/suffixarray' data-anim='suffixarray'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/suffixarray.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='suffixarraytext' href='en/suffixarray'>Suffix Array</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>lcp</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>matching</span>\n<span class='filter'>lrs</span>\n<span class='filter'>lcs</span>\n<span class='filter'>suffix</span>\n<span class='filter'>array</span>\n<span class='filter'>string</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='polygon'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/polygon' data-anim='polygon'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/polygon.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='polygontext' href='en/polygon'>Geometry (Polygon)</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>convex</span>\n<span class='filter'>cut</span>\n<span class='filter'>winding</span>\n<span class='filter'>concave</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>computational</span>\n<span class='filter'>geometry</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='convexhull'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/convexhull' data-anim='convexhull'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/convexhull.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='convexhulltext' href='en/convexhull'>Convex Hull</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>andrew</span>\n<span class='filter'>monotone chain</span>\n<span class='filter'>graham</span>\n<span class='filter'>scan</span>\n<span class='filter'>jarvis</span>\n<span class='filter'>march</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>computational</span>\n<span class='filter'>geometry</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='mvc'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/mvc' data-anim='mvc'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/mvc.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='mvctext' href='en/mvc'>Min Vertex Cover</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>tree</span>\n<span class='filter'>tree</span>\n<span class='filter'>dp</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>matching</span>\n<span class='filter'>max flow</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='tsp'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/tsp' data-anim='tsp'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/tsp.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='tsptext' href='en/tsp'>Traveling Salesman</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>dp</span>\n<span class='filter'>mst</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='steinertree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/steinertree' data-anim='steinertree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/steinertree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='steinertreetext' href='en/steinertree'>Steiner Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>mst</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n</ul>\n</div>\n<div id=\"bottom-bar\">\n<a id=\"trigger-about\">About</a>\n<a id=\"trigger-team\">Team</a>\n<a id=\"trigger-terms\">Terms of use</a>\n</div>\n<div id=\"about\" class=\"overlays\">\n<h4>About</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace.</p><p>VisuAlgo contains many advanced algorithms that are discussed in Dr Steven Halim&#39;s book (&#39;Competitive Programming&#39;, co-authored with his brother Dr Felix Halim) and beyond. Today, some of these advanced algorithms visualization/animation can only be found in VisuAlgo.</p><p>Though specifically designed for National University of Singapore (NUS) students taking various data structure and algorithm classes (e.g. CS1010, CS1020, CS2010, CS2020, CS3230, and CS3230), as advocators of online learning, we hope that curious minds around the world will find these visualisations useful too.</p><p>VisuAlgo is not designed to work well on small touch screens (e.g. smartphones) from the outset due to the need to cater for many complex algorithm visualizations that require lots of pixels and click-and-drag gestures for interaction. The minimum screen resolution for a respectable user experience is 1024x768 and only the landing page is relatively mobile-friendly.</p><p>VisuAlgo is an ongoing project and more complex visualisations are still being developed.</p><p>The most exciting development is the automated question generator and verifier (the online quiz system) that allows students to test their knowledge of basic data structures and algorithms. The questions are randomly generated via some rules and students&#39; answers are instantly and automatically graded upon submission to our grading server. This online quiz system, when it is adopted by more CS instructors worldwide, should technically eliminate manual basic data structure and algorithm questions from typical Computer Science examinations in many Universities. By setting a small (but non-zero) weightage on passing the online quiz, a CS instructor can (significantly) increase his/her students mastery on these basic questions as the students have virtually infinite number of training questions that can be verified instantly before they take the online quiz. The training mode currently contains questions for 12 visualization modules. We will soon add the remaining 8 visualization modules so that every visualization module in VisuAlgo have online quiz component.</p><p>Another active branch of development is the internationalization sub-project of VisuAlgo. We want to prepare a database of CS terminologies for all English text that ever appear in VisuAlgo system. This is a big task and requires crowdsourcing. Once the system is ready, we will invite VisuAlgo visitors to contribute, especially if you are not a native English speaker. Currently, we have also written public notes about VisuAlgo in various languages:\n<a href=\"https://weibo.com/p/230418436e9ee80102v4rk\" target='_blank'><u>zh</u></a>, <a href='https://www.facebook.com/notes/steven-halim/httpidvisualgonet-visualisasi-struktur-data-dan-algoritma-dengan-animasi/10153236934439689' target='_blank'><u>id</u></a>, <a href=\"https://blog.naver.com/visualgo_nus\" target='_blank'><u>kr</u></a>, <a href='https://www.facebook.com/groups/163215593699283/permalink/824003417620494/' target='_blank'><u>vn</u></a>, <a href='http://pantip.com/topic/32736343' target='_blank'><u>th</u></a>.</p>\n</div>\n </div>\n<div id=\"team\" class=\"overlays\">\n<h4>Team</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>\n<strong><span style='line-height: 150%;'>Project Leader &amp; Advisor (Jul 2011-present)</span></strong><br>\n<a href='http://www.comp.nus.edu.sg/~stevenha/' target='_blank'>Dr Steven Halim</a>, Senior Lecturer, School of Computing (SoC), National University of Singapore (NUS)<br>\n<a href='http://felix-halim.net/' target='_blank'>Dr Felix Halim</a>, Software Engineer, Google (Mountain View)\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Undergraduate Student Researchers 1 (Jul 2011-Apr 2012)</span></strong><br>\nKoh Zi Chun, <a href='http://roticv.rantx.com/' target='_blank'>Victor Loh Bo Huai</a>\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 1 (Jul 2012-Dec 2013)</span></strong><br>\nPhan Thi Quynh Trang, Peter Phandi, Albert Millardo Tjindradinata, Nguyen Hoang Duy\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 2 (Jun 2013-Apr 2014)</span></strong><br>\n<a href='http://www.rosemarietan.com/' target='_blank'>Rose Marie Tan Zhao Yun</a>, Ivan Reinaldo\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Undergraduate Student Researchers 2 (May 2014-Jul 2014)</span></strong><br>\nJonathan Irvin Gunawan, Nathan Azaria, Ian Leow Tze Wei, Nguyen Viet Dung, Nguyen Khac Tung, Steven Kester Yuwono, Cao Shengze, Mohan Jishnu\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 3 (Jun 2014-Apr 2015)</span></strong><br>\nErin Teo Yi Ling, Wang Zi\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 4 (Jun 2016-Dec 2017)</span></strong><br>\nTruong Ngoc Khanh, John Kevin Tjahjadi, Gabriella Michelle, Muhammad Rais Fathin Mudzakir\n</p>\n<p>\nList of translators who have contributed &ge;100 translations can be found at <a href=\"https://visualgo.net/statistics\">statistics</a> page.\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Acknowledgements</span></strong><br>\nThis project is made possible by the generous <a href=\"http://www.cdtl.nus.edu.sg/teg/\" target=\"_blank\">Teaching Enhancement Grant</a> from NUS Centre for Development of Teaching and Learning (CDTL).\n</p>\n</div>\n</div>\n<div id=\"termsofuse\" class=\"overlays\">\n<h4>Terms of use</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>VisuAlgo is free of charge for Computer Science community on earth. If you like VisuAlgo, the only payment that we ask of you is for you to <b>tell the existence of VisuAlgo to other Computer Science students/instructors</b> that you know =) via Facebook, Twitter, course webpage, blog review, email, etc.</p> <p>If you are a data structure and algorithm <b>student/instructor</b>, you are allowed to use this website directly for your classes. If you take screen shots (videos) from this website, you can use the screen shots (videos) elsewhere as long as you cite the URL of this website (http://visualgo.net) and/or list of publications below as reference. However, you are <b>NOT</b> allowed to download VisuAlgo (client-side) files and <b>host it</b> on your own website as it is <b>plagiarism</b>. As of now, we do <b>NOT</b> allow other people to fork this project and create variants of VisuAlgo. Using the offline copy of (client-side) VisuAlgo for your personal usage is fine.</p> <p>Note that VisuAlgo&#39;s online quiz component is by nature has heavy server-side component and there is no easy way to save the server-side scripts and databases locally. Currently, the general public can only use the &#39;training mode&#39; to access these online quiz system. Currently the &#39;test mode&#39; is a more controlled environment for using these randomly generated questions and automatic verification for a <b>real</b> examination in NUS. Other interested CS instructor should contact Steven if you want to try such &#39;test mode&#39;.</p> <p><strong><span style=\"line-height: 200%;\">List of Publications</span></strong></p> <p>This work has been presented briefly at the CLI Workshop at the ACM ICPC World Finals 2012 (Poland, Warsaw) and at the IOI Conference at IOI 2012 (Sirmione-Montichiari, Italy). You can click <a href=\"http://www.ioinformatics.org/oi/shtm/INFOL099.shtml\" target=\"_blank\">this link</a> to read our 2012 paper about this system (it was not yet called VisuAlgo back in 2012).</p><p>This work is done mostly by my past students. The most recent final reports are here: <a href=\"fyp/erin-report.pdf\" target=\"_blank\">Erin</a>, <a href=\"fyp/wangzi-report.pdf\" target=\"_blank\">Wang Zi</a>, <a href=\"fyp/rose-report.pdf\" target=\"_blank\">Rose</a>, <a href=\"fyp/ivan-report.pdf\" target=\"_blank\">Ivan</a>.</p> <p><strong><span style=\"line-height: 200%;\">Bug Reports or Request for New Features</span></strong></p> <p>VisuAlgo is not a finished project. Dr Steven Halim is still actively improving VisuAlgo. If you are using VisuAlgo and spot a bug in any of our visualization page/online quiz tool or if you want to request for new features, please contact Dr Steven Halim. His contact is the concatenation of his name and add gmail dot com.</p>\n</div>\n</div>\n\n<script src=\"https://visualgo.net/js/jquery-3.3.1.min.js\"></script>\n<script>\n      var PHP_DOMAIN = \"\";\n\n      // surprise colour!\n      // Referenced to in  home.js and viz.js also\n      var colourArray = [\"#52bc69\", \"#d65775\"/*\"#ed5a7d\"*/, \"#2ebbd1\", \"#d9513c\", \"#fec515\", \"#4b65ba\", \"#ff8a27\", \"#a7d41e\"]; // green, pink, blue, red, yellow, indigo, orange, lime\n\n      function disableScroll() { $('html').css('overflow', 'hidden'); }\n\n      function enableScroll() { $('html').css('overflow', 'visible'); }\n\n      function replaceAll(find, replace, str) { return str.replace(new RegExp(find, 'g'), replace); }\n\n      function getColours() {\n        var generatedColours = new Array();\n        while (generatedColours.length < 4) {\n          var n = (Math.floor(Math.random() * colourArray.length));\n          if ($.inArray(n, generatedColours) == -1)\n            generatedColours.push(n);\n        }\n        return generatedColours;\n      }\n\n      function isOn(value, position) {\n        return (value>>position) & 1 === 1;\n      }\n\n      function customAlert(msg) {\n        $('#custom-alert p').html(msg);\n        var m = -1 * ($('#custom-alert').outerHeight()/2);\n        $('#custom-alert').css('margin-top', m+'px');\n        $('#dark-overlay').fadeIn(function() {\n          $('#custom-alert').fadeIn(function() {\n            setTimeout(function() {\n              $('#custom-alert').fadeOut(function() {\n                $('#dark-overlay').fadeOut();\n              });\n            }, 1000);\n          });\n        });\n      }\n\n      function showLoadingScreen() {\n        $('#loading-overlay').show();\n        $('#loading-message').show();\n      }\n\n      function hideLoadingScreen() {\n        $('#loading-overlay').hide();\n      }\n\n      function commonAction(retval, msg) {\n        //setTimeout(function() {\n          if (retval) { // mode == \"exploration\" && // now not only for exploration mode, but check if this opens other problems\n            $('#current-action').show();\n            $('#current-action').html(mode == \"exploration\" ? msg : (\"e-Lecture Example (auto play until done)<br>\" + msg));\n            $('#progress-bar').slider(\"option\", \"max\", gw.getTotalIteration()-1);\n            triggerRightPanels();\n            isPlaying = true;\n          }\n        //}, 500);\n      }\n\n      function getQueryVariable(variable) {\n        var query = window.location.search.substring(1);\n        var vars = query.split('&');\n        for (var i = 0; i < vars.length; i++) {\n          var pair = vars[i].split('=');\n          if (decodeURIComponent(pair[0]) == variable)\n            return decodeURIComponent(pair[1]);\n        }\n        return \"\";\n      }\n\n      var generatedColours = getColours();\n      var surpriseColour = colourArray[generatedColours[0]];\n      var colourTheSecond = colourArray[generatedColours[1]];\n      var colourTheThird = colourArray[generatedColours[2]];\n      var colourTheFourth = colourArray[generatedColours[3]];\n\n      $(function() {\n        $('.links').css('background', surpriseColour);\n        $('.right-links').css('background', surpriseColour);\n        $('#login-go').css('background', surpriseColour);\n\n        $('.colour').css(\"color\", surpriseColour); // name\n        $('h4').css(\"background-color\", surpriseColour); // about, contact us etc. button background\n\n        // title\n        $('#title a').click(function() {\n          $('#title a').removeClass('selected-viz');\n          $(this).addClass('selected-viz');\n          // temporary quick fix for Google Chrome Aug 2016 issue...\n          setTimeout(function(){ document.body.style.zoom = \"100.1%\"; }, 100); // force resize/redraw...\n          setTimeout(function(){ document.body.style.zoom = \"100%\"; }, 600);\n        });\n\n        // overlays stuffs\n        $('#trigger-about').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#about').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('#trigger-team').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#team').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('#trigger-terms').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#termsofuse').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('.close-overlay').click(function() {\n          $('.overlays').fadeOut(function() {\n            $('#dark-overlay').fadeOut();\n          });\n        });\n\n        $('#dark-overlay').click(function() {\n          $('.overlays').fadeOut();\n          $('#dark-overlay').fadeOut();\n        });\n\n        $.get('/isloggedin', function(data) {\n          var isLoggedIn = data['isloggedin'] == '1';\n          var element;\n          if (isLoggedIn) {\n            // element = '<a onclick=\"verifyLogout()\">Logout</a>';\n            element = '<a href=\"https://visualgo.net/profile\">Profile</a>'; \n          }\n          else {\n            element = '<a href=\"https://visualgo.net/login\">Login</a>'\n          }\n          $('#useraccount').html(element);\n        });\n      });\n\n      function verifyLogout() {\n        // Steven's remarks: use a better 'confirm' than the default :(\n        var doesLogout = confirm('Are you sure to logout?');\n        if (doesLogout == true) {\n          window.location = \"https://visualgo.net/logout\";\n        }\n      }\n\n      function checkLogin() {\n        $.get('/checklogin', function(data) {\n          var url = data['url'];\n          window.location.href = '/' + url;\n        });\n      }\n\n      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n      ga('create', 'UA-1566631-4', 'auto');\n      ga('send', 'pageview');\n    </script>\n<script>\nvar seen = 0; // all have not been seen\nvar timer;\n\nfunction nextTip() { // note to self: now I think I can increase the number of tips...\n  if (seen == (1<<10)-1) seen = 0;\n\n  var cur;\n  do {\n    cur = Math.floor(Math.random()*10);\n  }\n  while ((seen & (1<<cur)) != 0);\n\n  seen |= (1<<cur);\n  $(\"#msg\").html($(\"#msg_list\"+cur).html()).fadeIn();\n  clearTimeout(timer); // reset timer\n  timer = setTimeout(function() {\n    $(\"#msg\").fadeOut(200, nextTip); // auto-rotate tip per 15s (current average 2h:25m, 10 tips so far)\n  }, 15000);\n}\n\n$(function() {\n  nextTip();\n\n  function showhide() {\n    if ($(window).width() < 700) {\n      $(\"#subtitle\").html(\"this tool looks better on larger screen :)\");\n      $(\"#topright\").hide();\n      \n    }\n    else {\n      $(\"#subtitle\").html(\"visualising data structures and algorithms through animation\");\n      $(\"#topright\").css(\"left\", $(window).width()-190); // always on the right\n      $(\"#topright\").show();\n      \n    }\n\n    if ($(window).width() < 500) {\n      $(\"#training-link\").hide(); // too hard to train on small screen\n      $(\"#translation-link\").hide(); // impossible to translate on such small screen\n    }\n    else {\n      $(\"#training-link\").show();\n      $(\"#translation-link\").show();\n    }\n\n    \n  }\n\n  $(\"#notloggedin\").delay(15000).fadeOut();\n\n  $(window).resize(function() {\n    showhide();\n  });\n  showhide();\n\n  // thumbnail image animation on hover\n  $('a.thumbnail').hover(function() {\n    $(this).children('img').attr('src', 'img/gif/' + $(this).attr('data-anim') + '.gif');\n    $(this).children('img').attr('width', $(this).children('div.static').css('width')); \n    $(this).children('img').attr('height', $(this).children('div.static').css('height'));\n    $(this).children('div.static').hide();\n  }, function() {\n    $(this).children('div.static').show();\n  });\n\n  // tags\n  var allViz = new Array(\n    new Array(\n    'sorting',\n    'sorting',\n    'array',\n    'algorithm',\n    'bubble',\n    'select',\n    'insert',\n    'selection',\n    'insertion',\n    'merge',\n    'quick',\n    'randomized quick',\n    'counting',\n    'radix',\n    'sort',\n    'cs1010',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'cs3230',\n    'list',\n    'data structure',\n    'sorting'\n    ),\n    new Array(\n    'bitmask',\n    'bitmask',\n    'bit manipulation',\n    'set',\n    'cs3233',\n    'array',\n    'list',\n    'ds',\n    'data structure',\n    'bitmask'\n    ),\n    new Array(\n    'list',\n    'linked list',\n    'stack',\n    'queue',\n    'doubly',\n    'deque',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'array',\n    'ds',\n    'data structure',\n    'linked'\n    ),\n    new Array(\n    'hashtable',\n    'hash table',\n    'open addressing',\n    'linear',\n    'quadratic',\n    'probing',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'heap',\n    'binary heap',\n    'priority queue',\n    'recursive',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'recursion',\n    'ds',\n    'data structure',\n    'binary',\n    'heap'\n    ),\n    new Array(\n    'bst',\n    'binary search tree',\n    'adelson velskii landis',\n    'set',\n    'table',\n    'avl',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'recursion',\n    'recursive',\n    'ds',\n    'data structure',\n    'set',\n    'bst',\n    'binary',\n    'search',\n    'tree',\n    'priority',\n    'queue'\n    ),\n    new Array(\n    'graphds',\n    'graph structures',\n    'tree',\n    'complete',\n    'bipartite',\n    'dag',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'graph',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'ufds',\n    'union-find ds',\n    'path compression',\n    'disjoint',\n    'set',\n    'data structure',\n    'union by rank',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'cs3233',\n    'array',\n    'tree',\n    'find',\n    'ds'\n    ),\n    new Array(\n    'segmenttree',\n    'segment tree',\n    'dynamic',\n    'range',\n    'sum',\n    'min',\n    'max',\n    'cs3233',\n    'segment',\n    'tree',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'fenwicktree',\n    'fenwick tree',\n    'binary indexed tree',\n    'bit',\n    'dynamic',\n    'fenwick',\n    'range',\n    'sum',\n    'point',\n    'update',\n    'cs3233',\n    'binary',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'recursion',\n    'recursion tree/dag',\n    'dynamic programming',\n    'dp',\n    'generic',\n    'cs1010',\n    'cs1020',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'cs3233',\n    'cs4234',\n    'recursive',\n    'algorithm',\n    'recursion',\n    'tree',\n    'dag'\n    ),\n    new Array(\n    'dfsbfs',\n    'graph traversal',\n    'bfs',\n    'dfs',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'bipartite',\n    'scc',\n    'cut vertex',\n    'articulation point',\n    'bridge',\n    'cs2020',\n    'graph',\n    'algorithm'\n    ),\n    new Array(\n    'mst',\n    'min spanning tree',\n    'mst',\n    'prim',\n    'kruskal',\n    'graph',\n    'min',\n    'spanning',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'tree',\n    'algorithm'\n    ),\n    new Array(\n    'sssp',\n    'ss shortest paths',\n    'sssp',\n    'single-source',\n    'bfs',\n    'dijkstra',\n    'bellman ford',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'single source',\n    'shortest path',\n    'graph',\n    'algorithm'\n    ),\n    new Array(\n    'maxflow',\n    'network flow',\n    'max flow',\n    'edmonds karp',\n    'min cut',\n    'dinic',\n    'ford fulkerson',\n    'graph',\n    'cs3233',\n    'cs4234',\n    'algorithm'\n    ),\n    new Array(\n    'matching',\n    'graph matching',\n    'augmenting path',\n    'bipartite',\n    'graph',\n    'cs3233',\n    'cs4234',\n    'matching',\n    'algorithm'\n    ),\n    new Array(\n    'cyclefinding',\n    'cycle finding',\n    'floyd',\n    'tortoise-hare',\n    'math',\n    'cs3233',\n    'algorithm'\n    ),\n    new Array(\n    'suffixtree',\n    'suffix tree',\n    'string',\n    'matching',\n    'lrs',\n    'lcs',\n    'cs3233',\n    'suffix',\n    'tree',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'suffixarray',\n    'suffix array',\n    'lcp',\n    'cs3233',\n    'matching',\n    'lrs',\n    'lcs',\n    'suffix',\n    'array',\n    'string',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'polygon',\n    'geometry (polygon)',\n    'convex',\n    'cut',\n    'winding',\n    'concave',\n    'cs3233',\n    'computational',\n    'geometry',\n    'algorithm'\n    ),\n    new Array(\n    'convexhull',\n    'convex hull',\n    'andrew',\n    'monotone chain',\n    'graham',\n    'scan',\n    'jarvis',\n    'march',\n    'cs3233',\n    'computational',\n    'geometry',\n    'algorithm'\n    ),\n    new Array(\n    'mvc',\n    'min vertex cover',\n    'np-hard',\n    'graph',\n    'bipartite',\n    'tree',\n    'tree',\n    'dp',\n    'bipartite',\n    'matching',\n    'max flow',\n    'cs3233',\n    'cs4234'\n    ),\n    new Array(\n    'tsp',\n    'traveling salesman',\n    'np-hard',\n    'graph',\n    'dp',\n    'mst',\n    'cs3233',\n    'cs4234'\n    ),\n    new Array(\n    'steinertree',\n    'steiner tree',\n    'np-hard',\n    'graph',\n    'mst',\n    'cs4234'\n    )\n  );\n\n  // generate tags\n  function createFilters() {\n    var filterList = new Array();\n    for (var i = 0; i < allViz.length; i++) {\n      var thisVizTags = allViz[i];\n      for (var j = 1; j < thisVizTags.length; j++)\n        if ($.inArray(thisVizTags[j], filterList) == -1)\n          filterList.push(thisVizTags[j]);\n    }\n    filterList.sort();\n    for (var i = 0; i < filterList.length; i++)\n      // if (i>0 && filterList[i]!=filterList[i-1]) // avoid duplicates\n      $('#filters').append(\"<span class='filter'>\" + filterList[i] + \"</span>\");\n  }\n  createFilters();\n\n  // tag and search mechanism\n  $('#filters-and-lines').hide();\n  $('#emptySearchMsg').hide();\n  var isEmptySearch = true;\n  var searchTerm = new Array(\"\"); // index 0 is the value from the search bar. Indices 1+ are values from tags.\n\n  // search/unsearch from tag filters\n  $('.filter').click(function() {\n    // add value to search\n    searchTerm[searchTerm.length] = $(this).html();\n    showResults();\n    $('#active-tags').append('<div class=\"active-tag\">' + $(this).html() + '<span>&#x2715;</span></div>');\n    $('.active-tag span').unbind('click').bind('click', function() {\n      // remove value from search\n      var indexToRemove = searchTerm.indexOf($(this).parent().text());\n      searchTerm.splice(indexToRemove, 1);\n      showResults();\n      $(this).parent().remove(); // visual\n    });\n  });            \n\n  // instant search from search bar \n  $('#search').each(function() {               \n    // Save current value of element\n    $(this).data('oldVal', $(this));                  \n\n    // Look for changes in the value\n    $(this).bind(\"propertychange keyup input paste\", function(event) {\n      // If value has changed...\n      if ($(this).data('oldVal') != $(this).val()) {\n        // Updated stored value\n        $(this).data('oldVal', $(this).val());\n        searchTerm[0] = $(this).val();\n        showResults();\n      }\n    });\n  });\n  $('#searchbar').submit(function() {\n    return false;\n  });\n\n  // find vizs with tag searchTerm\n  function showResults() {    \n    isEmptySearch = true;\n    $('#emptySearchMsg').hide();\n    $('.viz').hide();\n    for (var i = 0; i < allViz.length; i++) { // for each visualisation\n      var thisVizTags = allViz[i]; // array of the tags this visualisation has\n      var foundAll = true;\n      for (var j = 0; j < searchTerm.length; j++) // for each search term\n        foundAll = foundAll && findOneTag(searchTerm[j], thisVizTags);\n        if (foundAll) {\n          $('#'+thisVizTags[0]).show();\n          isEmptySearch = false;\n        }\n    }                 \n    if (isEmptySearch)\n      $('#emptySearchMsg').show();\n  }\n\n  function findOneTag(tag, vizArr) {\n    var found = false;                       \n    for (var i = 0; i < vizArr.length; i++) {\n      var patt = new RegExp(tag, \"i\");              \n      if (patt.test(vizArr[i]))\n        found = true;\n    }\n    return found;\n  }\n\n  // styling - arrow rotation, show filters-and-lines\n  $(\"#show-filters\").click(function() {\n    if ($(\"#filters-and-lines\").is(\":hidden\"))\n      showFilters();\n    else\n      hideFilters();             \n  });\n  function showFilters() {       \n    $(\"#filters-and-lines\").slideDown(\"slow\");\n    $(\"#show-filters\").html('&#9653;'); // ^\n  }\n  function hideFilters() {\n    $(\"#filters-and-lines\").slideUp(\"slow\");\n    $(\"#show-filters\").html('&#9663;'); // v\n  }\n\n  // styling - surprise colour stuff\n  $('#search').focus(function() { // search inset box-shadow\n    $(this).css(\"box-shadow\", \"0px 0px 3px \" + surpriseColour + \" inset\");\n    $(this).css(\"color\", \"black\");\n  });\n  $('#search').focusout(function() {  \n    if ($(this).val().trim() == \"\") {\n      $(this).css(\"box-shadow\", \"0px 0px 3px #929292 inset\");\n      $(this).css(\"color\", \"#888888\");\n    }                                        \n  });\n  $('#show-filters').css(\"background-color\", surpriseColour); // search filter button background\n  $('#temp a').css(\"background-color\", surpriseColour); // link to old site button\n  $('.filter').css(\"background-color\", \"#aaaaaa\"); // filter tags on hover\n  $('.filter').hover(function() {\n    $(this).css(\"background-color\", surpriseColour);\n  }, function() {  \n    $(this).css(\"background-color\", \"#aaaaaa\");\n  });\n});\n</script>\n</body>\n</html>\n", 
        "title": "VisuAlgo - visualising data structures and algorithms through animation", 
        "status_code": 200, 
        "status_line": "200 OK", 
        "headers": {
          "unknown": [
            {
              "key": "nel", 
              "value": "{\"report_to\":\"cf-nel\",\"max_age\":604800}"
            }, 
            {
              "key": "cf_cache_status", 
              "value": "DYNAMIC"
            }, 
            {
              "key": "cf_ray", 
              "value": "64dafa7538bd30f2-ORD"
            }, 
            {
              "key": "date", 
              "value": "Tue, 11 May 2021 11:13:30 GMT"
            }, 
            {
              "key": "cf_request_id", 
              "value": "09fcbadd3f000030f2f0119000000001"
            }, 
            {
              "key": "report_to", 
              "value": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report?s=YzY4ViexAwDpjfo5FUVqnhIbR4kNtSJQ0xY3M5b%2B4sbDsJpdNtLE9VK3t6PlRZXpXerQBIPo1in%2B%2Bt5WDgzRwgZOH%2FEAFGAR9sQ12g0%3D\"}],\"group\":\"cf-nel\",\"max_age\":604800}"
            }, 
            {
              "key": "expect_ct", 
              "value": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\""
            }
          ], 
          "vary": "Accept-Encoding", 
          "server": "cloudflare", 
          "connection": "keep-alive", 
          "alt_svc": "h3-27=\":443\"; ma=86400, h3-28=\":443\"; ma=86400, h3-29=\":443\"; ma=86400", 
          "content_type": "text/html; charset=UTF-8", 
          "cache_control": "no-cache, private"
        }, 
        "body_sha256": "0d0bd31d383cece98fc62f0f6c6092f13faf1510e8562db23f803f893408258a", 
        "metadata": {
          "product": "cloudflare", 
          "description": "cloudflare"
        }
      }, 
      "dhe": {
        "support": false, 
        "metadata": {}
      }, 
      "heartbleed": {
        "heartbeat_enabled": false, 
        "heartbleed_vulnerable": false, 
        "metadata": {}
      }, 
      "rsa_export": {
        "support": false, 
        "metadata": {}
      }
    }, 
    "https_www": {
      "tls": {
        "server_key_exchange": {
          "ecdh_params": {
            "curve_id": {
              "id": 23, 
              "name": "secp256r1"
            }
          }
        }, 
        "certificate": {
          "parsed": {
            "fingerprint_sha1": "378d9bf25672279ec43bf4b9f39d512a58b3e8b7", 
            "tbs_noct_fingerprint": "dc09e4d92298771e920dc26d6aa7a70b4dc10e66823af6a5d4c04b7d39dda0e5", 
            "subject_dn": "C=US, ST=CA, L=San Francisco, O=Cloudflare, Inc., CN=sni.cloudflaressl.com", 
            "issuer": {
              "common_name": [
                "Cloudflare Inc ECC CA-3"
              ], 
              "country": [
                "US"
              ], 
              "organization": [
                "Cloudflare, Inc."
              ]
            }, 
            "tbs_fingerprint": "e9560eb119aecacb9571ac1d71ae3e58a894bc57162dba07e6c7abd511cd1823", 
            "redacted": false, 
            "validation_level": "OV", 
            "issuer_dn": "C=US, O=Cloudflare, Inc., CN=Cloudflare Inc ECC CA-3", 
            "fingerprint_sha256": "c907fd2102bb57fdd373bbf004321812cd90cc2e6100598982c83ce7ec39de4f", 
            "version": 3, 
            "extensions": {
              "authority_key_id": "a5ce37eaebb0750e946788b445fad9241087961f", 
              "certificate_policies": [
                {
                  "cps": [
                    "https://www.digicert.com/CPS"
                  ], 
                  "id": "2.16.840.1.114412.1.1"
                }, 
                {
                  "id": "2.23.140.1.2.2"
                }
              ], 
              "authority_info_access": {
                "ocsp_urls": [
                  "http://ocsp.digicert.com"
                ], 
                "issuer_urls": [
                  "http://cacerts.digicert.com/CloudflareIncECCCA-3.crt"
                ]
              }, 
              "extended_key_usage": {
                "client_auth": true, 
                "server_auth": true
              }, 
              "subject_alt_name": {
                "dns_names": [
                  "*.visualgo.net", 
                  "sni.cloudflaressl.com", 
                  "visualgo.net"
                ]
              }, 
              "basic_constraints": {
                "is_ca": false
              }, 
              "crl_distribution_points": [
                "http://crl3.digicert.com/CloudflareIncECCCA-3.crl", 
                "http://crl4.digicert.com/CloudflareIncECCCA-3.crl"
              ], 
              "key_usage": {
                "digital_signature": true, 
                "value": 1
              }, 
              "signed_certificate_timestamps": [
                {
                  "log_id": "9lyUL9F3MCIUVBgIMJRWjuNNExkzv98MLyALzE7xZOM=", 
                  "timestamp": 1597475684, 
                  "version": 0, 
                  "signature": "BAMASDBGAiEAtiQU3E3r26gQAO4DVwYNBDKFfScBdkCdHTSxno5YZgwCIQD/78/jGIVtrZxqsQfWmXgGMZpJhLnadpoTVIl9fmeKpA=="
                }, 
                {
                  "log_id": "XNxDkv7mq0VEsV6a1FbmEDf71fpH3KFzlLJe5vbHDso=", 
                  "timestamp": 1597475684, 
                  "version": 0, 
                  "signature": "BAMARzBFAiAgizudIWl9wul6V+wJMP9aTjOtHE54RXeYKfzrORAz+AIhALKcbOJXEMW1t9tUX1Dc1ijUmk0V45Ls2JkvEtqqgpQy"
                }
              ], 
              "subject_key_id": "e439f790422701d89273495b68349730b5b5dc3a"
            }, 
            "names": [
              "visualgo.net", 
              "sni.cloudflaressl.com", 
              "*.visualgo.net"
            ], 
            "signature_algorithm": {
              "oid": "1.2.840.10045.4.3.2", 
              "name": "ECDSAWithSHA256"
            }, 
            "validity": {
              "start": "2020-08-15T00:00:00Z", 
              "length": 31579200, 
              "end": "2021-08-15T12:00:00Z"
            }, 
            "serial_number": "2424467879767986016672936339402514145", 
            "fingerprint_md5": "44a7f70cbbf8bddcc3206ef7c4c820d3", 
            "subject_key_info": {
              "fingerprint_sha256": "c253114160c2099f93ffc4dbafb221dff01ab54ad3092f0d2f56de951071fa52", 
              "key_algorithm": {
                "name": "ECDSA"
              }, 
              "ecdsa_public_key": {
                "b": "WsY12Ko6k+ez671VdpiGvGUdBrDMU7D2O848PifSYEs=", 
                "curve": "P-256", 
                "gy": "T+NC4v4af5uO5+tKfA+eFivOM1drMV7Oy7ZAaDe/UfU=", 
                "n": "/////wAAAAD//////////7zm+q2nF56E87nKwvxjJVE=", 
                "p": "/////wAAAAEAAAAAAAAAAAAAAAD///////////////8=", 
                "length": 256, 
                "pub": "BKHk5Hf3LtZ2cq1C2hTprIbDd5BSOA17qBv2kz3U04KFez9qcAMjC5tUUQVKsmI6ley89qZ5uzSLuwROrLOsVFw=", 
                "y": "ez9qcAMjC5tUUQVKsmI6ley89qZ5uzSLuwROrLOsVFw=", 
                "x": "oeTkd/cu1nZyrULaFOmshsN3kFI4DXuoG/aTPdTTgoU=", 
                "gx": "axfR8uEsQkf4vOblY6RA8ncDfYEt6zOg9KE5RdiYwpY="
              }
            }, 
            "signature": {
              "self_signed": false, 
              "valid": true, 
              "value": "MEUCIQC6tLpkJ4rADn11SxW/6XiToEGDNzZR6MiWloj3FH579gIgCk8uQbk5Q2lJ1pyBwHfQv9tL5cGldJVFHc/qpvcTQPM=", 
              "signature_algorithm": {
                "oid": "1.2.840.10045.4.3.2", 
                "name": "ECDSAWithSHA256"
              }
            }, 
            "spki_subject_fingerprint": "9355b6f99ccc3b2fea57274e2cd24b75d52056cb40cce83b07669d02a2f77daf", 
            "subject": {
              "common_name": [
                "sni.cloudflaressl.com"
              ], 
              "country": [
                "US"
              ], 
              "locality": [
                "San Francisco"
              ], 
              "province": [
                "CA"
              ], 
              "organization": [
                "Cloudflare, Inc."
              ]
            }
          }
        }, 
        "chain": [
          {
            "parsed": {
              "fingerprint_sha1": "b3dd7606d2b5a8b4a13771dbecc9ee1cecafa38a", 
              "tbs_noct_fingerprint": "9cbba0fc962f7a2b31c62b1b175a2de4c50a8395727e30b626a80009a780e3d8", 
              "subject_dn": "C=US, O=Cloudflare, Inc., CN=Cloudflare Inc ECC CA-3", 
              "issuer": {
                "common_name": [
                  "Baltimore CyberTrust Root"
                ], 
                "country": [
                  "IE"
                ], 
                "organizational_unit": [
                  "CyberTrust"
                ], 
                "organization": [
                  "Baltimore"
                ]
              }, 
              "tbs_fingerprint": "9cbba0fc962f7a2b31c62b1b175a2de4c50a8395727e30b626a80009a780e3d8", 
              "redacted": false, 
              "validation_level": "OV", 
              "issuer_dn": "C=IE, O=Baltimore, OU=CyberTrust, CN=Baltimore CyberTrust Root", 
              "fingerprint_sha256": "3abbe63daf756c5016b6b85f52015fd8e8acbe277c5087b127a60563a841ed8a", 
              "version": 3, 
              "extensions": {
                "authority_key_id": "e59d5930824758ccacfa085436867b3ab5044df0", 
                "certificate_policies": [
                  {
                    "cps": [
                      "https://www.digicert.com/CPS"
                    ], 
                    "id": "2.16.840.1.114412.1.1"
                  }, 
                  {
                    "id": "2.16.840.1.114412.1.2"
                  }, 
                  {
                    "id": "2.23.140.1.2.1"
                  }, 
                  {
                    "id": "2.23.140.1.2.2"
                  }, 
                  {
                    "id": "2.23.140.1.2.3"
                  }
                ], 
                "extended_key_usage": {
                  "client_auth": true, 
                  "server_auth": true
                }, 
                "authority_info_access": {
                  "ocsp_urls": [
                    "http://ocsp.digicert.com"
                  ]
                }, 
                "basic_constraints": {
                  "max_path_len": 0, 
                  "is_ca": true
                }, 
                "crl_distribution_points": [
                  "http://crl3.digicert.com/Omniroot2025.crl"
                ], 
                "key_usage": {
                  "certificate_sign": true, 
                  "crl_sign": true, 
                  "digital_signature": true, 
                  "value": 97
                }, 
                "subject_key_id": "a5ce37eaebb0750e946788b445fad9241087961f"
              }, 
              "validity": {
                "start": "2020-01-27T12:48:08Z", 
                "length": 155560311, 
                "end": "2024-12-31T23:59:59Z"
              }, 
              "signature_algorithm": {
                "oid": "1.2.840.113549.1.1.11", 
                "name": "SHA256WithRSA"
              }, 
              "serial_number": "13580602362388610137601344763287833660", 
              "fingerprint_md5": "3416ca751517b8391cd759fabb8ec919", 
              "subject_key_info": {
                "fingerprint_sha256": "144cd5394a78745de02346553d126115b48955747eb9098c1fae7186cd60947e", 
                "key_algorithm": {
                  "name": "ECDSA"
                }, 
                "ecdsa_public_key": {
                  "b": "WsY12Ko6k+ez671VdpiGvGUdBrDMU7D2O848PifSYEs=", 
                  "curve": "P-256", 
                  "gy": "T+NC4v4af5uO5+tKfA+eFivOM1drMV7Oy7ZAaDe/UfU=", 
                  "n": "/////wAAAAD//////////7zm+q2nF56E87nKwvxjJVE=", 
                  "p": "/////wAAAAEAAAAAAAAAAAAAAAD///////////////8=", 
                  "length": 256, 
                  "pub": "BLmtTWaZFAtG7B+B0SpQHp0DFS80En0tlriIOJuFX4+/u03vYUbEyXPUJE/g7hzObLNRcS9q7kwFCXfTcmKkm9c=", 
                  "y": "u03vYUbEyXPUJE/g7hzObLNRcS9q7kwFCXfTcmKkm9c=", 
                  "x": "ua1NZpkUC0bsH4HRKlAenQMVLzQSfS2WuIg4m4Vfj78=", 
                  "gx": "axfR8uEsQkf4vOblY6RA8ncDfYEt6zOg9KE5RdiYwpY="
                }
              }, 
              "signature": {
                "self_signed": false, 
                "valid": true, 
                "value": "BSQd3RuwKuuY1oXjOU1ea1edglf86+gxoleQZQW+FkQ4WncCuc8QQsbhkqTjRSf4AEcsaKhWmVNUj62eQMHQD7bXDQs4SGxQLEmQBltkHYvMSDAu3gjim0kiwJIMEV6WkpTV/CDcVmzlkpO/ehzAN+OFSRX6K+F0ORgPt9rzoldYYE/MjpQA/EZ7NDE+TUeCgTrL9IldDu9NDW6cG4Ik3TIlXRF4URA9oDUjBC9lb5zB0UPX0B7zMWdZJ91r0nUJkxEkJBTPKb7mI8O4j3I/6QfIJERTerO5YWWhTA7GSADJdWMFh3BFUoPTlZ1F6vDoMR1+CR8K/j7dqjxedNKssQ==", 
                "signature_algorithm": {
                  "oid": "1.2.840.113549.1.1.11", 
                  "name": "SHA256WithRSA"
                }
              }, 
              "spki_subject_fingerprint": "9130237db3ae3de80eb923c9b9a799eb66a288533672e23e2b4326970f46847a", 
              "subject": {
                "common_name": [
                  "Cloudflare Inc ECC CA-3"
                ], 
                "country": [
                  "US"
                ], 
                "organization": [
                  "Cloudflare, Inc."
                ]
              }
            }
          }
        ], 
        "metadata": {}, 
        "cipher_suite": {
          "id": "0xC02B", 
          "name": "TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256"
        }, 
        "version": "TLSv1.2", 
        "session_ticket": {
          "length": 176, 
          "lifetime_hint": 64800
        }, 
        "signature": {
          "hash_algorithm": "sha256", 
          "valid": true, 
          "signature_algorithm": "ecdsa"
        }, 
        "validation": {
          "matches_domain": true, 
          "browser_trusted": true
        }, 
        "ocsp_stapling": true
      }
    }
  }, 
  "updated_at": "2021-05-11T15:47:27+00:00", 
  "0": {
    "lookup": {
      "axfr": {
        "support": false, 
        "truncated": false, 
        "servers": [
          {
            "status": "ERROR", 
            "error": "dns: bad xfr rcode: 1", 
            "server": "173.245.59.200"
          }, 
          {
            "status": "ERROR", 
            "error": "dns: bad xfr rcode: 1", 
            "server": "108.162.192.198"
          }
        ]
      }
    }
  }, 
  "80": {
    "http": {
      "get": {
        "body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"description\" content=\"VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace. Together with his students from the National University of Singapore, a series of visualisations were developed and consolidated, from simple sorting algorithms to complex graph data structures. Though specifically designed for the use of NUS students taking various data structure and algorithm classes (CS1010, CS1020, CS2010, CS2020, and CS3233), as advocators of online learning, we hope that curious minds around the world will find these visualisations useful as well.\">\n<meta name=\"keywords\" content=\"VisuAlgo Data Structure Algorithm Visualization Animation Online Learning Tutorial Lecture\">\n \n<meta name=\"csrf-token\" content=\"u18j6C2neHrTpBOzVb5WrXQmT3iEocaF5Mu9Tle8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EDGE\">\n<meta property=\"og:image\" content=\"https://visualgo.net/img/png.png\">\n<title>VisuAlgo - visualising data structures and algorithms through animation</title>\n<link rel=\"icon\" href=\"https://visualgo.net/img/favicon.png\" type=\"image/x-icon\">\n<link rel=\"shortcut icon\" href=\"https://visualgo.net/img/favicon.png\" type=\"image/x-icon\">\n<link rel=\"apple-touch-icon\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://visualgo.net/fonts/silkscreen/stylesheet.css\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://visualgo.net/css/common.css\">\n<style>\[email protected]  \"utf-8\";\n\nh1 {\n  text-align: center; \n  font-family: 'SilkscreenNormal';\n  font-size: 36px;\n  margin-top: 50px;\n}\n\nh2 {\n  text-align: center;\n  font-style: italic;\n  margin-bottom: 30px;\n  font-size: 15px;\n}\n\n#searchbar { text-align: center; }\n#search {\n  width: 250px;\n  padding: 7px 10px;\n  box-shadow: 0px 0px 3px #929292 inset;\n  background: white;\n  color: #888888;\n  font-size: 14px;\n}\n\n#show-filters {\n  cursor: pointer;\n  color: white;\n  padding: 7px 11px 6px;\n  margin-left: -1px;\n  display: inline-block;\n}\n#show-filters img { display: inline-block; vertical-align: 2px; }\n\n#active-tags { text-align: center; margin-left: -10px; }\n.active-tag {\n  display: inline-block;\n  position: relative;\n  background: #aaaaaa;\n  color: white;\n  padding: 4px 34px 4px 8px;\n  margin-top: 20px;\n  margin-left: 10px;\n  font-size: 14px;\n}\n.active-tag span { /*the cross*/\n  background: #444444;\n  display: inline-block;\n  padding: 3px;\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  cursor: pointer;\n}\n.rotateRight {\n  transform: rotate(180deg);\n  -ms-transform: rotate(180deg); /* IE 9 */\n  -webkit-transform: rotate(180deg); /* Safari and Chrome */\n  -o-transform: rotate(180deg); /* Opera */\n  -moz-transform: rotate(180deg); /* Firefox */\n  \n  /* if you want to do this move with animate use transition */\n  transition: .5s;\n  -moz-transition: .5s; /* Firefox 4 */\n  -webkit-transition: .5s; /* Safari and Chrome */\n  -o-transition: .5s; /* Opera */ \n}\n  \n.line { height: 1px; background: #cccccc; margin: 0px 30px;}\n#emptySearchMsg { text-align: center; font-size: 15px; margin-top: 20px; }\n#filters { padding: 20px 60px 12px 22px; overflow: auto; }\n  .filter {\n    color: white;\n    padding: 3px 8px;\n    margin: 0px 0px 8px 8px;\n    cursor: pointer;\n    border-radius: 2px;\n    float: left;\n  }\n\n.list { width: 100%; clear: both;}\n.list li {\n  display: block;\n  float: left;\n  width: 100%;\n}\n.list li .li-wrapper {\n  background: white;\n  padding-top: 10px;\n  padding-right: 10px;\n  padding-bottom: 10px;\n  margin-left: 20px;  \n  margin-bottom: 20px;\n  box-shadow: 0px 0px 3px #dddddd;\n}\n.list li .li-wrapper:hover {\n  box-shadow: 0px 0px 3px #aaaaaa;\n}\n.list li a.thumbnail {\n  display: block;\n  position: relative;\n  margin: 0px 0px 10px 10px;\n  cursor: pointer;\n}\n.list li a.thumbnail .overlay {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  text-align: center;\n}\n.list li a.thumbnail img { width: 100%; }\n.list li a.thumbnail img.static { width: 100%; position: absolute; top: 0px; }\n.list li a.thumbnail div { width: 100%; }\n.list li a.thumbnail div.static { width: 100%; position: absolute; top: 0px; }\n    \n.list li .info { margin: 0px 0px 0px 10px; }\n.list li .info h3 {\n  font-size: 13px;\n  font-weight: bold;\n  color: #000000;\n  margin-bottom: 8px;\n}\n.list li .info h3:hover { color: #999999; }\n.list li .info .indv-viz-filters { margin-left: -8px; height: 23px; float: none; overflow: hidden; }\n    \n#noexist {\n  display: block;\n  font-size: 18px;\n  font-weight: bold;\n  padding: 20px;\n}\n\n#topleft {\n  border: 1px solid grey;\n  border-radius: 5px;\n  margin: 10px;\n  padding: 2px;\n  max-height: 200px;\n}\n\n#topright {\n  position: absolute;\n  top: 60px;\n  left: 1000px;\n  width: 90px;\n  height: 175px;\n  display: none;\n}\n\[email protected] (min-width: 320px) { /* 320-480px */\n  #topleft {\n    top: 20px;\n    width: 100%-; /* the - is to take into account the potential vertical scroll bar? */\n    position: relative;\n  }\n}\n\[email protected] (min-width: 480px) { /* 480-768px */\n  h1 { font-size: 50px; }\n  .line { margin: 0px 50px; }\n  #filters { padding: 20px 60px 12px 42px; }\n  .list li { width: 50%; }\n}\n\[email protected] (min-width: 768px) { /* 768-1024px */\n  .line { margin: 0px 60px; }\n  #filters { padding: 20px 60px 12px 52px; }\n  .list li { width: 33.33%; }\n}\n\[email protected] (min-width: 1024px) { /* more than 1024px */\n  .list li { width: 25%; }\n  #topleft {\n    top: 40px; \n    width: 25%;\n    position: absolute;\n  }\n}\n\[email protected] (min-width: 1400px) { /* more than 1400px */\n  .list li { width: 20%; }\n}\n\n.static {\n  background-repeat: no-repeat;\n  background-size: 100% 100%;\n  display: inline-block;\n  height: 100%;\n  width: 300px;\n  opacity: 1;\n  backface-visibility: hidden;\n}\n\n/*.container {\n  position: relative;\n  width: 50%;\n}\n*/\n/*.image {\n  opacity: 1;\n  display: block;\n  width: 100%;\n  height: auto;\n  transition: .5s ease;\n  backface-visibility: hidden;\n}\n*/\n.middle {\n  transition: .5s ease;\n  opacity: 0;\n  position: absolute;\n  top: 7%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%)\n}\n\n.li-wrapper:hover .static {\n  opacity: 0.3;\n}\n\n.li-wrapper:hover .middle {\n  opacity: 1;\n}\n\n.message {\n  font-size: 150%;\n  text-align: center;\n}\n\n\n\n#notloggedin {\n  background-color: black;\n  color: white;\n  border: 1px solid;\n  border-radius: 5px;\n  position: absolute;\n  width: 280px;\n  top: 50px;\n  right: 10px;\n  padding: 7px;\n  z-index: 1;\n}\n\n#notloggedin::after {\n  content: \"\";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: 110px;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent transparent black transparent;\n}\n</style>\n<link rel='alternate' hreflang='en' href='https://visualgo.net'>\n<link rel='alternate' hreflang='zh' href='https://visualgo.net/zh'>\n<link rel='alternate' hreflang='es' href='https://visualgo.net/es'>\n<link rel='alternate' hreflang='pt' href='https://visualgo.net/pt'>\n<link rel='alternate' hreflang='ru' href='https://visualgo.net/ru'>\n<link rel='alternate' hreflang='id' href='https://visualgo.net/id'>\n<link rel='alternate' hreflang='de' href='https://visualgo.net/de'>\n<link rel='alternate' hreflang='bn' href='https://visualgo.net/bn'>\n<link rel='alternate' hreflang='ja' href='https://visualgo.net/ja'>\n<link rel='alternate' hreflang='ko' href='https://visualgo.net/ko'>\n<link rel='alternate' hreflang='vi' href='https://visualgo.net/vi'>\n<script>\n      function changeURL() {\n        var URL = window.location.href.split('/');\n        var val = document.getElementById(\"Language\").value;\n        URL[3] = val;\n        window.location.assign(URL.join('/'));\n      }\n    </script>\n</head>\n<body>\n<div id=\"top-bar\">\n<a href=\"http://www.comp.nus.edu.sg/~stevenha\"><span class=\"colour\" style=\"border: 1px solid green; border-radius: 25px;\">7</span></a>&nbsp;&nbsp;&nbsp;\n<a id=\"home\" href=\"/\">Visu<span class=\"colour\">Algo</span><span style=\"font-size: 40%\">.net</span></a>\n/\n<select id=\"Language\" onchange=\"changeURL()\">\n<option value=\"en\" selected>en</option>\n<option value=\"zh\">zh</option>\n<option value=\"es\">es</option>\n<option value=\"pt\">pt</option>\n<option value=\"ru\">ru</option>\n<option value=\"id\">id</option>\n<option value=\"de\">de</option>\n<option value=\"bn\">bn</option>\n<option value=\"ja\">ja</option>\n<option value=\"ko\">ko</option>\n<option value=\"vi\">vi</option>\n</select>\n<span class=\"right-links\" id=\"useraccount\">Login</span>\n<a class=\"right-links\" id=\"translation-link\" href=\"translation\">Translation</a>\n<a class=\"right-links\" id=\"training-link\" href=\"training\">Training</a>\n</div>\n<div id=\"dark-overlay\"></div>\n\n<h1>Visu<span class=\"colour\">Algo</span><span style=\"font-size:25%\">.net/en</span></h1>\n<h2 id=\"subtitle\">visualising data structures and algorithms through animation\n</h2>\n<form id=\"searchbar\">\n<input id=\"search\" type=\"text\" autocomplete=\"off\" placeholder=\"Search...\"><div id=\"show-filters\" title=\"show/hide filters\">&#9663;</div>\n</form>\n<center><p><br><a href=\"https://www.comp.nus.edu.sg/news/features/2020stevenhalim/\" target=\"_blank\"><u>Featured story: Visualizing Algorithms with a Click</u></a>\n</p>\n</center>\n<div id=\"active-tags\"></div>\n<div id=\"emptySearchMsg\" style=\"display: none;\">No result were found.></div>\n<div id=\"filters-and-lines\" style=\"display: none;\">\n<div class=\"line\" style=\"margin-top: 20px;\"></div>\n<div id=\"filters\"></div>\n<div class=\"line\"></div>\n</div>\n<div id=\"topleft\">\n<p style=\"margin-bottom: 8px;\"><b>Do You Know?</b> <a class=\"links\" onclick=\"nextTip()\">Next Random Tip</a></p>\n<p id=\"msg\" style=\"text-align: justify;\"></p>\n</div>\n<div id=\"topright\">\n<a href=\"https://cpbook.net\" target=\"_blank\"><img src=\"https://cpbook.net/img/cp4.jpg\" style=\"height: 130px;\" alt=\"CPbook\"></a><br>\n<a href=\"https://www.lulu.com/spotlight/stevenhalimatgmaildotcom\" target=\"_blank\"><img src=\"https://visualgo.net/img/blue.png\" alt=\"lulu\"></a>\n\n</div>\n<p hidden id='msg_list0'>This is the English (default) interface for <a href=\"https://visualgo.net\" target=\"_blank\"><u>https://visualgo.net</u></a>. VisuAlgo will gradually grow into a multilingual site. Try visiting the other versions of VisuAlgo, e.g. <a href=\"./zh\"><u>Chinese</u></a>;&nbsp;<a href=\"https://visualgo.net/id\"><u>Indonesian</u></a>;&nbsp;<a href=\"https://visualgo.net/ru\"><u>Russian</u></a>; etc (see <a href=\"/statistics\"><u>statistics page</u></a>).</p>\n<p hidden id='msg_list1'>In VisuAlgo, you can use <i>your own input</i> for any algorithm instead of the sample inputs. Try graph drawing feature in these 6 graph-related visualizations: <a href=\"./en/graphds\"><u>Graph DS</u></a>, <a href=\"./en/dfsbfs\"><u>DFS/BFS</u></a>, <a href=\"./en/mst\"><u>MST</u></a>, <a href=\"./en/sssp\"><u>SSSP</u></a>, <a href=\"./en/maxflow\"><u>Max Flow</u></a>, and <a href=\"./en/matching\"><u>Matching</u></a>. You can also click tag <i>&#39;graph&#39;</i> in any of these 6 graph-related visualization boxes or type in <i>&#39;graph&#39;</i> in the search box.</p>\n<p hidden id='msg_list2'>To compare 2 related algorithms, e.g. <a href=\"./en/mst\"><u>Kruskal&#39;s vs Prim&#39;s</u></a> on the same graph, open 2 VisuAlgo pages in 2 windows and juxtapose them. Click <a href=\"img/kruskalprim.png\" target=\"_blank\"><u>here</u></a> to see the screenshot.</p>\n<p hidden id='msg_list3'>You can visualize the recursion tree (or DAG, if there are overlapping subproblems and Dynamic Programming (DP) is applicable) of <b>ANY</b> valid <a href=\"./en/recursion\"><u>recursive function</u></a> that can be written in JavaScript. Click <a href=\"img/recursion_treedag.png\" target=\"_blank\"><u>here</u></a> to see the screenshot.</p>\n<p hidden id='msg_list4'>VisuAlgo loads fast for first time visitors, but it loads &#39;almost instantly&#39; for returning visitors as we cache lots of static content of VisuAlgo :) (please do not use incognito or private browsing mode to keep the cache). Moreover, if you have registered a VisuAlgo account, we will load VisuAlgo according to your preferences after you <a href=\"/login\"><u>login</u></a>.</p>\n<p hidden id='msg_list5'>Each visualization page has an &#39;e-Lecture Mode&#39; that is accessible from that page&#39;s top right corner that explains the data structure and/or algorithm being visualized. This e-Lecture mode is automatically shown to first time (or non logged-in) visitors to showcase the data structure and/or the algorithm being visualized. The quality of e-Lecture Mode will gradually be made to reach the lecture standard of algorithm classes in National University of Singapore :).</p>\n<p hidden id='msg_list6'>Please check four newest features of VisuAlgo: 1). Multi-lingual capability (you don&#39;t have to rely on /en language at all times if you are not native English speaker), 2). User accounts (there are interesting perks and customizations available for loyal users, please <a href=\"/register\"><u>register a free account now</u></a>), 3). Much more powerful e-Lecture mode to reach \"NUS standard\", and 4). Visualizations of NP-hard problems (currently MVC, TSP, and Steiner Tree).</p>\n<p hidden id='msg_list7'>VisuAlgo has two main components: The visualization pages (currently 23) and the Online Quiz component (currently 12 and will be 23 too in the near future). We do not script any of the questions in Online Quiz :O and all answers will be graded almost instantly :). You can try the online quiz at <a href=\"./training\"><u>our training page</u></a> or by clicking the &#39;Training&#39; button on the visualization module.</p>\n<p hidden id='msg_list8'>Search the term <a href=\"https://www.google.com/search?q=algorithm+visualization\" target=\"_blank\"><u>&#39;algorithm visualization&#39;</u></a> in your favorite Search Engine, do you see VisuAlgo in the first page of the search result :)? Next level: Search that term again, but in your native language (if it is not English). Is VisuAlgo still listed in the first page? :). And get ready to be surprised: Search the name of your favorite data structure or algorithm without mentioning the keyword &#39;animation&#39; or &#39;visualization&#39;. Is VisuAlgo still listed in the first page? :):).</p>\n<p hidden id='msg_list9'>VisuAlgo currently receives about ~3000 hits/day from various Computer Science students and teachers worldwide. Although this is a good number, we will keep improving VisuAlgo so that it can be even more useful for much more (new) CS students worldwide annually. Please spread the word if you are our returning visitors (<a href=\"/register\"><u>register a free VisuAlgo account</u></a> so that we can know who you are) and like this tool :).</p>\n<div id=\"main\">\n<ul class=\"list\">\n<li class='viz' id='sorting'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/sorting' data-anim='sorting'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/sorting.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='sortingtext' href='en/sorting'>Sorting</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=sorting'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>array</span>\n<span class='filter'>algorithm</span>\n<span class='filter'>bubble</span>\n<span class='filter'>select</span>\n<span class='filter'>insert</span>\n<span class='filter'>selection</span>\n<span class='filter'>insertion</span>\n<span class='filter'>merge</span>\n<span class='filter'>quick</span>\n<span class='filter'>randomized quick</span>\n<span class='filter'>counting</span>\n<span class='filter'>radix</span>\n<span class='filter'>sort</span>\n<span class='filter'>cs1010</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3230</span>\n<span class='filter'>list</span>\n<span class='filter'>data structure</span>\n<span class='filter'>sorting</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='bitmask'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/bitmask' data-anim='bitmask'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/bitmask.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='bitmasktext' href='en/bitmask'>Bitmask</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=bitmask'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>bit manipulation</span>\n<span class='filter'>set</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>array</span>\n<span class='filter'>list</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>bitmask</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='list'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/list' data-anim='list'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/list.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='listtext' href='en/list'>Linked List</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=list'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>stack</span>\n<span class='filter'>queue</span>\n<span class='filter'>doubly</span>\n<span class='filter'>deque</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>array</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>linked</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='hashtable'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/hashtable' data-anim='hashtable'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/hashtable.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='hashtabletext' href='en/hashtable'>Hash Table</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=hashtable'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>open addressing</span>\n<span class='filter'>linear</span>\n<span class='filter'>quadratic</span>\n<span class='filter'>probing</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='heap'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/heap' data-anim='heap'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/heap.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='heaptext' href='en/heap'>Binary Heap</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=heap'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>priority queue</span>\n<span class='filter'>recursive</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>recursion</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>binary</span>\n<span class='filter'>heap</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='bst'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/bst' data-anim='bst'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/bst.png');\"></div>\n <div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='bsttext' href='en/bst'>Binary Search Tree</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=bst'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>adelson velskii landis</span>\n<span class='filter'>set</span>\n<span class='filter'>table</span>\n<span class='filter'>avl</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>recursion</span>\n<span class='filter'>recursive</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>set</span>\n<span class='filter'>bst</span>\n<span class='filter'>binary</span>\n<span class='filter'>search</span>\n<span class='filter'>tree</span>\n<span class='filter'>priority</span>\n<span class='filter'>queue</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='graphds'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/graphds' data-anim='graphds'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/graphds.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='graphdstext' href='en/graphds'>Graph Structures</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=graphds'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>tree</span>\n<span class='filter'>complete</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>dag</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>graph</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='ufds'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/ufds' data-anim='ufds'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/ufds.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='ufdstext' href='en/ufds'>Union-Find DS</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=ufds'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>path compression</span>\n<span class='filter'>disjoint</span>\n<span class='filter'>set</span>\n<span class='filter'>data structure</span>\n<span class='filter'>union by rank</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>array</span>\n<span class='filter'>tree</span>\n<span class='filter'>find</span>\n<span class='filter'>ds</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='segmenttree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/segmenttree' data-anim='segmenttree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/segmenttree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='segmenttreetext' href='en/segmenttree'>Segment Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>dynamic</span>\n<span class='filter'>range</span>\n<span class='filter'>sum</span>\n<span class='filter'>min</span>\n<span class='filter'>max</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>segment</span>\n<span class='filter'>tree</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='fenwicktree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/fenwicktree' data-anim='fenwicktree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/fenwicktree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='fenwicktreetext' href='en/fenwicktree'>Fenwick Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>binary indexed tree</span>\n<span class='filter'>bit</span>\n<span class='filter'>dynamic</span>\n<span class='filter'>fenwick</span>\n<span class='filter'>range</span>\n<span class='filter'>sum</span>\n<span class='filter'>point</span>\n<span class='filter'>update</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>binary</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='recursion'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/recursion' data-anim='recursion'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/recursion.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='recursiontext' href='en/recursion'>Recursion Tree/DAG</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=recursion'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>dynamic programming</span>\n<span class='filter'>dp</span>\n<span class='filter'>generic</span>\n<span class='filter'>cs1010</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>recursive</span>\n<span class='filter'>algorithm</span>\n<span class='filter'>recursion</span>\n<span class='filter'>tree</span>\n<span class='filter'>dag</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='dfsbfs'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/dfsbfs' data-anim='dfsbfs'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/dfsbfs.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='dfsbfstext' href='en/dfsbfs'>Graph Traversal</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=dfsbfs'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>bfs</span>\n<span class='filter'>dfs</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>scc</span>\n<span class='filter'>cut vertex</span>\n<span class='filter'>articulation point</span>\n<span class='filter'>bridge</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>graph</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='mst'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/mst' data-anim='mst'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/mst.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='msttext' href='en/mst'>Min Spanning Tree</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=mst'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>mst</span>\n<span class='filter'>prim</span>\n<span class='filter'>kruskal</span>\n<span class='filter'>graph</span>\n<span class='filter'>min</span>\n<span class='filter'>spanning</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>tree</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='sssp'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/sssp' data-anim='sssp'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/sssp.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='sssptext' href='en/sssp'>SS Shortest Paths</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=sssp'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>sssp</span>\n<span class='filter'>single-source</span>\n<span class='filter'>bfs</span>\n<span class='filter'>dijkstra</span>\n<span class='filter'>bellman ford</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>single source</span>\n<span class='filter'>shortest path</span>\n<span class='filter'>graph</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='maxflow'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/maxflow' data-anim='maxflow'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/maxflow.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='maxflowtext' href='en/maxflow'>Network Flow</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>max flow</span>\n<span class='filter'>edmonds karp</span>\n<span class='filter'>min cut</span>\n<span class='filter'>dinic</span>\n<span class='filter'>ford fulkerson</span>\n<span class='filter'>graph</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='matching'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/matching' data-anim='matching'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/matching.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='matchingtext' href='en/matching'>Graph Matching</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>augmenting path</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>graph</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>matching</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='cyclefinding'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/cyclefinding' data-anim='cyclefinding'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/cyclefinding.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='cyclefindingtext' href='en/cyclefinding'>Cycle Finding</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>floyd</span>\n<span class='filter'>tortoise-hare</span>\n<span class='filter'>math</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='suffixtree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/suffixtree' data-anim='suffixtree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/suffixtree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='suffixtreetext' href='en/suffixtree'>Suffix Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>string</span>\n<span class='filter'>matching</span>\n<span class='filter'>lrs</span>\n<span class='filter'>lcs</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>suffix</span>\n<span class='filter'>tree</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='suffixarray'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/suffixarray' data-anim='suffixarray'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/suffixarray.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='suffixarraytext' href='en/suffixarray'>Suffix Array</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>lcp</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>matching</span>\n<span class='filter'>lrs</span>\n<span class='filter'>lcs</span>\n<span class='filter'>suffix</span>\n<span class='filter'>array</span>\n<span class='filter'>string</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='polygon'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/polygon' data-anim='polygon'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/polygon.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='polygontext' href='en/polygon'>Geometry (Polygon)</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>convex</span>\n<span class='filter'>cut</span>\n<span class='filter'>winding</span>\n<span class='filter'>concave</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>computational</span>\n<span class='filter'>geometry</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='convexhull'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/convexhull' data-anim='convexhull'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/convexhull.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='convexhulltext' href='en/convexhull'>Convex Hull</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>andrew</span>\n<span class='filter'>monotone chain</span>\n<span class='filter'>graham</span>\n<span class='filter'>scan</span>\n<span class='filter'>jarvis</span>\n<span class='filter'>march</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>computational</span>\n<span class='filter'>geometry</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='mvc'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/mvc' data-anim='mvc'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/mvc.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='mvctext' href='en/mvc'>Min Vertex Cover</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>tree</span>\n<span class='filter'>tree</span>\n<span class='filter'>dp</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>matching</span>\n<span class='filter'>max flow</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='tsp'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/tsp' data-anim='tsp'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/tsp.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='tsptext' href='en/tsp'>Traveling Salesman</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>dp</span>\n<span class='filter'>mst</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='steinertree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/steinertree' data-anim='steinertree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/steinertree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='steinertreetext' href='en/steinertree'>Steiner Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>mst</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n</ul>\n</div>\n<div id=\"bottom-bar\">\n<a id=\"trigger-about\">About</a>\n<a id=\"trigger-team\">Team</a>\n<a id=\"trigger-terms\">Terms of use</a>\n</div>\n<div id=\"about\" class=\"overlays\">\n<h4>About</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace.</p><p>VisuAlgo contains many advanced algorithms that are discussed in Dr Steven Halim&#39;s book (&#39;Competitive Programming&#39;, co-authored with his brother Dr Felix Halim) and beyond. Today, some of these advanced algorithms visualization/animation can only be found in VisuAlgo.</p><p>Though specifically designed for National University of Singapore (NUS) students taking various data structure and algorithm classes (e.g. CS1010, CS1020, CS2010, CS2020, CS3230, and CS3230), as advocators of online learning, we hope that curious minds around the world will find these visualisations useful too.</p><p>VisuAlgo is not designed to work well on small touch screens (e.g. smartphones) from the outset due to the need to cater for many complex algorithm visualizations that require lots of pixels and click-and-drag gestures for interaction. The minimum screen resolution for a respectable user experience is 1024x768 and only the landing page is relatively mobile-friendly.</p><p>VisuAlgo is an ongoing project and more complex visualisations are still being developed.</p><p>The most exciting development is the automated question generator and verifier (the online quiz system) that allows students to test their knowledge of basic data structures and algorithms. The questions are randomly generated via some rules and students&#39; answers are instantly and automatically graded upon submission to our grading server. This online quiz system, when it is adopted by more CS instructors worldwide, should technically eliminate manual basic data structure and algorithm questions from typical Computer Science examinations in many Universities. By setting a small (but non-zero) weightage on passing the online quiz, a CS instructor can (significantly) increase his/her students mastery on these basic questions as the students have virtually infinite number of training questions that can be verified instantly before they take the online quiz. The training mode currently contains questions for 12 visualization modules. We will soon add the remaining 8 visualization modules so that every visualization module in VisuAlgo have online quiz component.</p><p>Another active branch of development is the internationalization sub-project of VisuAlgo. We want to prepare a database of CS terminologies for all English text that ever appear in VisuAlgo system. This is a big task and requires crowdsourcing. Once the system is ready, we will invite VisuAlgo visitors to contribute, especially if you are not a native English speaker. Currently, we have also written public notes about VisuAlgo in various languages:\n<a href=\"https://weibo.com/p/230418436e9ee80102v4rk\" target='_blank'><u>zh</u></a>, <a href='https://www.facebook.com/notes/steven-halim/httpidvisualgonet-visualisasi-struktur-data-dan-algoritma-dengan-animasi/10153236934439689' target='_blank'><u>id</u></a>, <a href=\"https://blog.naver.com/visualgo_nus\" target='_blank'><u>kr</u></a>, <a href='https://www.facebook.com/groups/163215593699283/permalink/824003417620494/' target='_blank'><u>vn</u></a>, <a href='http://pantip.com/topic/32736343' target='_blank'><u>th</u></a>.</p>\n</div>\n</div>\n<div id=\"team\" class=\"overlays\">\n<h4>Team</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>\n<strong><span style='line-height: 150%;'>Project Leader &amp; Advisor (Jul 2011-present)</span></strong><br>\n<a href='http://www.comp.nus.edu.sg/~stevenha/' target='_blank'>Dr Steven Halim</a>, Senior Lecturer, School of Computing (SoC), National University of Singapore (NUS)<br>\n<a href='http://felix-halim.net/' target='_blank'>Dr Felix Halim</a>, Software Engineer, Google (Mountain View)\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Undergraduate Student Researchers 1 (Jul 2011-Apr 2012)</span></strong><br>\nKoh Zi Chun, <a href='http://roticv.rantx.com/' target='_blank'>Victor Loh Bo Huai</a>\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 1 (Jul 2012-Dec 2013)</span></strong><br>\nPhan Thi Quynh Trang, Peter Phandi, Albert Millardo Tjindradinata, Nguyen Hoang Duy\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 2 (Jun 2013-Apr 2014)</span></strong><br>\n<a href='http://www.rosemarietan.com/' target='_blank'>Rose Marie Tan Zhao Yun</a>, Ivan Reinaldo\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Undergraduate Student Researchers 2 (May 2014-Jul 2014)</span></strong><br>\nJonathan Irvin Gunawan, Nathan Azaria, Ian Leow Tze Wei, Nguyen Viet Dung, Nguyen Khac Tung, Steven Kester Yuwono, Cao Shengze, Mohan Jishnu\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 3 (Jun 2014-Apr 2015)</span></strong><br>\nErin Teo Yi Ling, Wang Zi\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 4 (Jun 2016-Dec 2017)</span></strong><br>\nTruong Ngoc Khanh, John Kevin Tjahjadi, Gabriella Michelle, Muhammad Rais Fathin Mudzakir\n</p>\n<p>\nList of translators who have contributed &ge;100 translations can be found at <a href=\"https://visualgo.net/statistics\">statistics</a> page.\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Acknowledgements</span></strong><br>\nThis project is made possible by the generous <a href=\"http://www.cdtl.nus.edu.sg/teg/\" target=\"_blank\">Teaching Enhancement Grant</a> from NUS Centre for Development of Teaching and Learning (CDTL).\n</p>\n</div>\n</div>\n<div id=\"termsofuse\" class=\"overlays\">\n<h4>Terms of use</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>VisuAlgo is free of charge for Computer Science community on earth. If you like VisuAlgo, the only payment that we ask of you is for you to <b>tell the existence of VisuAlgo to other Computer Science students/instructors</b> that you know =) via Facebook, Twitter, course webpage, blog review, email, etc.</p> <p>If you are a data structure and algorithm <b>student/instructor</b>, you are allowed to use this website directly for your classes. If you take screen shots (videos) from this website, you can use the screen shots (videos) elsewhere as long as you cite the URL of this website (http://visualgo.net) and/or list of publications below as reference. However, you are <b>NOT</b> allowed to download VisuAlgo (client-side) files and <b>host it</b> on your own website as it is <b>plagiarism</b>. As of now, we do <b>NOT</b> allow other people to fork this project and create variants of VisuAlgo. Using the offline copy of (client-side) VisuAlgo for your personal usage is fine.</p> <p>Note that VisuAlgo&#39;s online quiz component is by nature has heavy server-side component and there is no easy way to save the server-side scripts and databases locally. Currently, the general public can only use the &#39;training mode&#39; to access these online quiz system. Currently the &#39;test mode&#39; is a more controlled environment for using these randomly generated questions and automatic verification for a <b>real</b> examination in NUS. Other interested CS instructor should contact Steven if you want to try such &#39;test mode&#39;.</p> <p><strong><span style=\"line-height: 200%;\">List of Publications</span></strong></p> <p>This work has been presented briefly at the CLI Workshop at the ACM ICPC World Finals 2012 (Poland, Warsaw) and at the IOI Conference at IOI 2012 (Sirmione-Montichiari, Italy). You can click <a href=\"http://www.ioinformatics.org/oi/shtm/INFOL099.shtml\" target=\"_blank\">this link</a> to read our 2012 paper about this system (it was not yet called VisuAlgo back in 2012).</p><p>This work is done mostly by my past students. The most recent final reports are here: <a href=\"fyp/erin-report.pdf\" target=\"_blank\">Erin</a>, <a href=\"fyp/wangzi-report.pdf\" target=\"_blank\">Wang Zi</a>, <a href=\"fyp/rose-report.pdf\" target=\"_blank\">Rose</a>, <a href=\"fyp/ivan-report.pdf\" target=\"_blank\">Ivan</a>.</p> <p><strong><span style=\"line-height: 200%;\">Bug Reports or Request for New Features</span></strong></p> <p>VisuAlgo is not a finished project. Dr Steven Halim is still actively improving VisuAlgo. If you are using VisuAlgo and spot a bug in any of our visualization page/online quiz tool or if you want to request for new features, please contact Dr Steven Halim. His contact is the concatenation of his name and add gmail dot com.</p>\n</div>\n</div>\n\n<script src=\"https://visualgo.net/js/jquery-3.3.1.min.js\"></script>\n<script>\n      var PHP_DOMAIN = \"\";\n\n      // surprise colour!\n      // Referenced to in  home.js and viz.js also\n      var colourArray = [\"#52bc69\", \"#d65775\"/*\"#ed5a7d\"*/, \"#2ebbd1\", \"#d9513c\", \"#fec515\", \"#4b65ba\", \"#ff8a27\", \"#a7d41e\"]; // green, pink, blue, red, yellow, indigo, orange, lime\n\n      function disableScroll() { $('html').css('overflow', 'hidden'); }\n\n      function enableScroll() { $('html').css('overflow', 'visible'); }\n\n      function replaceAll(find, replace, str) { return str.replace(new RegExp(find, 'g'), replace); }\n\n      function getColours() {\n        var generatedColours = new Array();\n        while (generatedColours.length < 4) {\n          var n = (Math.floor(Math.random() * colourArray.length));\n          if ($.inArray(n, generatedColours) == -1)\n            generatedColours.push(n);\n        }\n        return generatedColours;\n      }\n\n      function isOn(value, position) {\n        return (value>>position) & 1 === 1;\n      }\n\n      function customAlert(msg) {\n        $('#custom-alert p').html(msg);\n        var m = -1 * ($('#custom-alert').outerHeight()/2);\n        $('#custom-alert').css('margin-top', m+'px');\n        $('#dark-overlay').fadeIn(function() {\n          $('#custom-alert').fadeIn(function() {\n            setTimeout(function() {\n              $('#custom-alert').fadeOut(function() {\n                $('#dark-overlay').fadeOut();\n              });\n            }, 1000);\n          });\n        });\n      }\n\n      function showLoadingScreen() {\n        $('#loading-overlay').show();\n        $('#loading-message').show();\n      }\n\n      function hideLoadingScreen() {\n        $('#loading-overlay').hide();\n      }\n\n      function commonAction(retval, msg) {\n        //setTimeout(function() {\n          if (retval) { // mode == \"exploration\" && // now not only for exploration mode, but check if this opens other problems\n            $('#current-action').show();\n            $('#current-action').html(mode == \"exploration\" ? msg : (\"e-Lecture Example (auto play until done)<br>\" + msg));\n            $('#progress-bar').slider(\"option\", \"max\", gw.getTotalIteration()-1);\n            triggerRightPanels();\n            isPlaying = true;\n          }\n        //}, 500);\n      }\n\n      function getQueryVariable(variable) {\n        var query = window.location.search.substring(1);\n        var vars = query.split('&');\n        for (var i = 0; i < vars.length; i++) {\n          var pair = vars[i].split('=');\n          if (decodeURIComponent(pair[0]) == variable)\n            return decodeURIComponent(pair[1]);\n        }\n        return \"\";\n      }\n\n      var generatedColours = getColours();\n      var surpriseColour = colourArray[generatedColours[0]];\n      var colourTheSecond = colourArray[generatedColours[1]];\n      var colourTheThird = colourArray[generatedColours[2]];\n      var colourTheFourth = colourArray[generatedColours[3]];\n\n      $(function() {\n        $('.links').css('background', surpriseColour);\n        $('.right-links').css('background', surpriseColour);\n        $('#login-go').css('background', surpriseColour);\n\n        $('.colour').css(\"color\", surpriseColour); // name\n        $('h4').css(\"background-color\", surpriseColour); // about, contact us etc. button background\n\n        // title\n        $('#title a').click(function() {\n          $('#title a').removeClass('selected-viz');\n          $(this).addClass('selected-viz');\n          // temporary quick fix for Google Chrome Aug 2016 issue...\n          setTimeout(function(){ document.body.style.zoom = \"100.1%\"; }, 100); // force resize/redraw...\n          setTimeout(function(){ document.body.style.zoom = \"100%\"; }, 600);\n        });\n\n        // overlays stuffs\n        $('#trigger-about').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#about').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('#trigger-team').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#team').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('#trigger-terms').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#termsofuse').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('.close-overlay').click(function() {\n          $('.overlays').fadeOut(function() {\n            $('#dark-overlay').fadeOut();\n          });\n        });\n\n        $('#dark-overlay').click(function() {\n          $('.overlays').fadeOut();\n          $('#dark-overlay').fadeOut();\n        });\n\n        $.get('/isloggedin', function(data) {\n          var isLoggedIn = data['isloggedin'] == '1';\n          var element;\n          if (isLoggedIn) {\n            // element = '<a onclick=\"verifyLogout()\">Logout</a>';\n            element = '<a href=\"https://visualgo.net/profile\">Profile</a>'; \n          }\n          else {\n            element = '<a href=\"https://visualgo.net/login\">Login</a>'\n          }\n          $('#useraccount').html(element);\n        });\n      });\n\n      function verifyLogout() {\n        // Steven's remarks: use a better 'confirm' than the default :(\n        var doesLogout = confirm('Are you sure to logout?');\n        if (doesLogout == true) {\n          window.location = \"https://visualgo.net/logout\";\n        }\n      }\n\n      function checkLogin() {\n        $.get('/checklogin', function(data) {\n          var url = data['url'];\n          window.location.href = '/' + url;\n        });\n      }\n\n      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n      ga('create', 'UA-1566631-4', 'auto');\n      ga('send', 'pageview');\n    </script>\n<script>\nvar seen = 0; // all have not been seen\nvar timer;\n\nfunction nextTip() { // note to self: now I think I can increase the number of tips...\n  if (seen == (1<<10)-1) seen = 0;\n\n  var cur;\n  do {\n    cur = Math.floor(Math.random()*10);\n  }\n  while ((seen & (1<<cur)) != 0);\n\n  seen |= (1<<cur);\n  $(\"#msg\").html($(\"#msg_list\"+cur).html()).fadeIn();\n  clearTimeout(timer); // reset timer\n  timer = setTimeout(function() {\n    $(\"#msg\").fadeOut(200, nextTip); // auto-rotate tip per 15s (current average 2h:25m, 10 tips so far)\n  }, 15000);\n}\n\n$(function() {\n  nextTip();\n\n  function showhide() {\n    if ($(window).width() < 700) {\n      $(\"#subtitle\").html(\"this tool looks better on larger screen :)\");\n      $(\"#topright\").hide();\n      \n    }\n    else {\n      $(\"#subtitle\").html(\"visualising data structures and algorithms through animation\");\n      $(\"#topright\").css(\"left\", $(window).width()-190); // always on the right\n      $(\"#topright\").show();\n      \n    }\n\n    if ($(window).width() < 500) {\n      $(\"#training-link\").hide(); // too hard to train on small screen\n      $(\"#translation-link\").hide(); // impossible to translate on such small screen\n    }\n    else {\n      $(\"#training-link\").show();\n      $(\"#translation-link\").show();\n    }\n\n    \n  }\n\n  $(\"#notloggedin\").delay(15000).fadeOut();\n\n  $(window).resize(function() {\n    showhide();\n  });\n  showhide();\n\n  // thumbnail image animation on hover\n  $('a.thumbnail').hover(function() {\n    $(this).children('img').attr('src', 'img/gif/' + $(this).attr('data-anim') + '.gif');\n    $(this).children('img').attr('width', $(this).children('div.static').css('width')); \n    $(this).children('img').attr('height', $(this).children('div.static').css('height'));\n    $(this).children('div.static').hide();\n  }, function() {\n    $(this).children('div.static').show();\n  });\n\n  // tags\n  var allViz = new Array(\n    new Array(\n    'sorting',\n    'sorting',\n    'array',\n    'algorithm',\n    'bubble',\n    'select',\n    'insert',\n    'selection',\n    'insertion',\n    'merge',\n    'quick',\n    'randomized quick',\n    'counting',\n    'radix',\n    'sort',\n    'cs1010',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'cs3230',\n    'list',\n    'data structure',\n    'sorting'\n    ),\n    new Array(\n    'bitmask',\n    'bitmask',\n    'bit manipulation',\n    'set',\n    'cs3233',\n    'array',\n    'list',\n    'ds',\n    'data structure',\n    'bitmask'\n    ),\n    new Array(\n    'list',\n    'linked list',\n    'stack',\n    'queue',\n    'doubly',\n    'deque',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'array',\n    'ds',\n    'data structure',\n    'linked'\n    ),\n    new Array(\n    'hashtable',\n    'hash table',\n    'open addressing',\n    'linear',\n    'quadratic',\n    'probing',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'heap',\n    'binary heap',\n    'priority queue',\n    'recursive',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'recursion',\n    'ds',\n    'data structure',\n    'binary',\n    'heap'\n    ),\n    new Array(\n    'bst',\n    'binary search tree',\n    'adelson velskii landis',\n    'set',\n    'table',\n    'avl',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'recursion',\n    'recursive',\n    'ds',\n    'data structure',\n    'set',\n    'bst',\n    'binary',\n    'search',\n    'tree',\n    'priority',\n    'queue'\n    ),\n    new Array(\n    'graphds',\n    'graph structures',\n    'tree',\n    'complete',\n    'bipartite',\n    'dag',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'graph',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'ufds',\n    'union-find ds',\n    'path compression',\n    'disjoint',\n    'set',\n    'data structure',\n    'union by rank',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'cs3233',\n    'array',\n    'tree',\n    'find',\n    'ds'\n    ),\n    new Array(\n    'segmenttree',\n    'segment tree',\n    'dynamic',\n    'range',\n    'sum',\n    'min',\n    'max',\n    'cs3233',\n    'segment',\n    'tree',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'fenwicktree',\n    'fenwick tree',\n    'binary indexed tree',\n    'bit',\n    'dynamic',\n    'fenwick',\n    'range',\n    'sum',\n    'point',\n    'update',\n    'cs3233',\n    'binary',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'recursion',\n    'recursion tree/dag',\n    'dynamic programming',\n    'dp',\n    'generic',\n    'cs1010',\n    'cs1020',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'cs3233',\n    'cs4234',\n    'recursive',\n    'algorithm',\n    'recursion',\n    'tree',\n    'dag'\n    ),\n    new Array(\n    'dfsbfs',\n    'graph traversal',\n    'bfs',\n    'dfs',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'bipartite',\n    'scc',\n    'cut vertex',\n    'articulation point',\n    'bridge',\n    'cs2020',\n    'graph',\n    'algorithm'\n    ),\n    new Array(\n    'mst',\n    'min spanning tree',\n    'mst',\n    'prim',\n    'kruskal',\n    'graph',\n    'min',\n    'spanning',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'tree',\n    'algorithm'\n    ),\n    new Array(\n    'sssp',\n    'ss shortest paths',\n    'sssp',\n    'single-source',\n    'bfs',\n    'dijkstra',\n    'bellman ford',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'single source',\n    'shortest path',\n    'graph',\n    'algorithm'\n    ),\n    new Array(\n    'maxflow',\n    'network flow',\n    'max flow',\n    'edmonds karp',\n    'min cut',\n    'dinic',\n    'ford fulkerson',\n    'graph',\n    'cs3233',\n    'cs4234',\n    'algorithm'\n    ),\n    new Array(\n    'matching',\n    'graph matching',\n    'augmenting path',\n    'bipartite',\n    'graph',\n    'cs3233',\n    'cs4234',\n    'matching',\n    'algorithm'\n    ),\n    new Array(\n    'cyclefinding',\n    'cycle finding',\n    'floyd',\n    'tortoise-hare',\n    'math',\n    'cs3233',\n    'algorithm'\n    ),\n    new Array(\n    'suffixtree',\n    'suffix tree',\n    'string',\n    'matching',\n    'lrs',\n    'lcs',\n    'cs3233',\n    'suffix',\n    'tree',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'suffixarray',\n    'suffix array',\n    'lcp',\n    'cs3233',\n    'matching',\n    'lrs',\n    'lcs',\n    'suffix',\n    'array',\n    'string',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'polygon',\n    'geometry (polygon)',\n    'convex',\n    'cut',\n    'winding',\n    'concave',\n    'cs3233',\n    'computational',\n    'geometry',\n    'algorithm'\n    ),\n    new Array(\n    'convexhull',\n    'convex hull',\n    'andrew',\n    'monotone chain',\n    'graham',\n    'scan',\n    'jarvis',\n    'march',\n    'cs3233',\n    'computational',\n    'geometry',\n    'algorithm'\n    ),\n    new Array(\n    'mvc',\n    'min vertex cover',\n    'np-hard',\n    'graph',\n    'bipartite',\n    'tree',\n    'tree',\n    'dp',\n    'bipartite',\n    'matching',\n    'max flow',\n    'cs3233',\n    'cs4234'\n    ),\n    new Array(\n    'tsp',\n    'traveling salesman',\n    'np-hard',\n    'graph',\n    'dp',\n    'mst',\n    'cs3233',\n    'cs4234'\n    ),\n    new Array(\n    'steinertree',\n    'steiner tree',\n    'np-hard',\n    'graph',\n    'mst',\n    'cs4234'\n    )\n  );\n\n  // generate tags\n  function createFilters() {\n    var filterList = new Array();\n    for (var i = 0; i < allViz.length; i++) {\n      var thisVizTags = allViz[i];\n      for (var j = 1; j < thisVizTags.length; j++)\n        if ($.inArray(thisVizTags[j], filterList) == -1)\n          filterList.push(thisVizTags[j]);\n    }\n    filterList.sort();\n    for (var i = 0; i < filterList.length; i++)\n      // if (i>0 && filterList[i]!=filterList[i-1]) // avoid duplicates\n      $('#filters').append(\"<span class='filter'>\" + filterList[i] + \"</span>\");\n  }\n  createFilters();\n\n  // tag and search mechanism\n  $('#filters-and-lines').hide();\n  $('#emptySearchMsg').hide();\n  var isEmptySearch = true;\n  var searchTerm = new Array(\"\"); // index 0 is the value from the search bar. Indices 1+ are values from tags.\n\n  // search/unsearch from tag filters\n  $('.filter').click(function() {\n    // add value to search\n    searchTerm[searchTerm.length] = $(this).html();\n    showResults();\n    $('#active-tags').append('<div class=\"active-tag\">' + $(this).html() + '<span>&#x2715;</span></div>');\n    $('.active-tag span').unbind('click').bind('click', function() {\n      // remove value from search\n      var indexToRemove = searchTerm.indexOf($(this).parent().text());\n      searchTerm.splice(indexToRemove, 1);\n      showResults();\n      $(this).parent().remove(); // visual\n    });\n  });            \n\n  // instant search from search bar \n  $('#search').each(function() {               \n    // Save current value of element\n    $(this).data('oldVal', $(this));                  \n\n    // Look for changes in the value\n    $(this).bind(\"propertychange keyup input paste\", function(event) {\n      // If value has changed...\n      if ($(this).data('oldVal') != $(this).val()) {\n        // Updated stored value\n        $(this).data('oldVal', $(this).val());\n        searchTerm[0] = $(this).val();\n        showResults();\n      }\n    });\n  });\n  $('#searchbar').submit(function() {\n    return false;\n  });\n\n  // find vizs with tag searchTerm\n  function showResults() {    \n    isEmptySearch = true;\n    $('#emptySearchMsg').hide();\n    $('.viz').hide();\n    for (var i = 0; i < allViz.length; i++) { // for each visualisation\n      var thisVizTags = allViz[i]; // array of the tags this visualisation has\n      var foundAll = true;\n      for (var j = 0; j < searchTerm.length; j++) // for each search term\n        foundAll = foundAll && findOneTag(searchTerm[j], thisVizTags);\n        if (foundAll) {\n          $('#'+thisVizTags[0]).show();\n          isEmptySearch = false;\n        }\n    }                 \n    if (isEmptySearch)\n      $('#emptySearchMsg').show();\n  }\n\n  function findOneTag(tag, vizArr) {\n    var found = false;                       \n    for (var i = 0; i < vizArr.length; i++) {\n      var patt = new RegExp(tag, \"i\");              \n      if (patt.test(vizArr[i]))\n        found = true;\n    }\n    return found;\n  }\n\n  // styling - arrow rotation, show filters-and-lines\n  $(\"#show-filters\").click(function() {\n    if ($(\"#filters-and-lines\").is(\":hidden\"))\n      showFilters();\n    else\n      hideFilters();             \n  });\n  function showFilters() {       \n    $(\"#filters-and-lines\").slideDown(\"slow\");\n    $(\"#show-filters\").html('&#9653;'); // ^\n  }\n  function hideFilters() {\n    $(\"#filters-and-lines\").slideUp(\"slow\");\n    $(\"#show-filters\").html('&#9663;'); // v\n  }\n\n  // styling - surprise colour stuff\n  $('#search').focus(function() { // search inset box-shadow\n    $(this).css(\"box-shadow\", \"0px 0px 3px \" + surpriseColour + \" inset\");\n    $(this).css(\"color\", \"black\");\n  });\n  $('#search').focusout(function() {  \n    if ($(this).val().trim() == \"\") {\n      $(this).css(\"box-shadow\", \"0px 0px 3px #929292 inset\");\n      $(this).css(\"color\", \"#888888\");\n    }                                        \n  });\n  $('#show-filters').css(\"background-color\", surpriseColour); // search filter button background\n  $('#temp a').css(\"background-color\", surpriseColour); // link to old site button\n  $('.filter').css(\"background-color\", \"#aaaaaa\"); // filter tags on hover\n  $('.filter').hover(function() {\n    $(this).css(\"background-color\", surpriseColour);\n  }, function() {  \n    $(this).css(\"background-color\", \"#aaaaaa\");\n  });\n});\n</script>\n</body>\n</html>\n", 
        "title": "VisuAlgo - visualising data structures and algorithms through animation", 
        "status_code": 200, 
        "status_line": "200 OK", 
        "headers": {
          "unknown": [
            {
              "key": "cf_cache_status", 
              "value": "DYNAMIC"
            }, 
            {
              "key": "report_to", 
              "value": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report?s=qKw79kkspM8vGyGWFw6YZhs%2BxOsW0eE%2FvOFMBDDuKRjn%2F1hv%2BWNMMrZt3ICTtoEv6MPviLT9H4n%2BJLPHhx2cb2XCkI8w3QgT9IdnJAY%3D\"}],\"group\":\"cf-nel\",\"max_age\":604800}"
            }, 
            {
              "key": "date", 
              "value": "Tue, 11 May 2021 12:05:51 GMT"
            }, 
            {
              "key": "expect_ct", 
              "value": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\""
            }, 
            {
              "key": "cf_ray", 
              "value": "64db4724bd33302b-ORD"
            }, 
            {
              "key": "cf_request_id", 
              "value": "09fceacaee0000302bda054000000001"
            }, 
            {
              "key": "nel", 
              "value": "{\"report_to\":\"cf-nel\",\"max_age\":604800}"
            }
          ], 
          "vary": "Accept-Encoding", 
          "server": "cloudflare", 
          "connection": "keep-alive", 
          "alt_svc": "h3-27=\":443\"; ma=86400, h3-28=\":443\"; ma=86400, h3-29=\":443\"; ma=86400", 
          "content_type": "text/html; charset=UTF-8", 
          "cache_control": "no-cache, private"
        }, 
        "body_sha256": "7240b3c0e95bf382da71598c2197e6f444b27a37e519acdc37eca7426c08866a", 
        "metadata": {
          "product": "cloudflare", 
          "description": "cloudflare"
        }
      }
    }, 
    "http_www": {
      "get": {
        "body": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"description\" content=\"VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace. Together with his students from the National University of Singapore, a series of visualisations were developed and consolidated, from simple sorting algorithms to complex graph data structures. Though specifically designed for the use of NUS students taking various data structure and algorithm classes (CS1010, CS1020, CS2010, CS2020, and CS3233), as advocators of online learning, we hope that curious minds around the world will find these visualisations useful as well.\">\n<meta name=\"keywords\" content=\"VisuAlgo Data Structure Algorithm Visualization Animation Online Learning Tutorial Lecture\">\n \n<meta name=\"csrf-token\" content=\"QfqvG4VgiQLcSbmPi6mEyx0SSqISgYlmFfPi1OSv\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EDGE\">\n<meta property=\"og:image\" content=\"https://visualgo.net/img/png.png\">\n<title>VisuAlgo - visualising data structures and algorithms through animation</title>\n<link rel=\"icon\" href=\"https://visualgo.net/img/favicon.png\" type=\"image/x-icon\">\n<link rel=\"shortcut icon\" href=\"https://visualgo.net/img/favicon.png\" type=\"image/x-icon\">\n<link rel=\"apple-touch-icon\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"https://visualgo.net/img/favicon.png\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://visualgo.net/fonts/silkscreen/stylesheet.css\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://visualgo.net/css/common.css\">\n<style>\[email protected]  \"utf-8\";\n\nh1 {\n  text-align: center; \n  font-family: 'SilkscreenNormal';\n  font-size: 36px;\n  margin-top: 50px;\n}\n\nh2 {\n  text-align: center;\n  font-style: italic;\n  margin-bottom: 30px;\n  font-size: 15px;\n}\n\n#searchbar { text-align: center; }\n#search {\n  width: 250px;\n  padding: 7px 10px;\n  box-shadow: 0px 0px 3px #929292 inset;\n  background: white;\n  color: #888888;\n  font-size: 14px;\n}\n\n#show-filters {\n  cursor: pointer;\n  color: white;\n  padding: 7px 11px 6px;\n  margin-left: -1px;\n  display: inline-block;\n}\n#show-filters img { display: inline-block; vertical-align: 2px; }\n\n#active-tags { text-align: center; margin-left: -10px; }\n.active-tag {\n  display: inline-block;\n  position: relative;\n  background: #aaaaaa;\n  color: white;\n  padding: 4px 34px 4px 8px;\n  margin-top: 20px;\n  margin-left: 10px;\n  font-size: 14px;\n}\n.active-tag span { /*the cross*/\n  background: #444444;\n  display: inline-block;\n  padding: 3px;\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  cursor: pointer;\n}\n.rotateRight {\n  transform: rotate(180deg);\n  -ms-transform: rotate(180deg); /* IE 9 */\n  -webkit-transform: rotate(180deg); /* Safari and Chrome */\n  -o-transform: rotate(180deg); /* Opera */\n  -moz-transform: rotate(180deg); /* Firefox */\n  \n  /* if you want to do this move with animate use transition */\n  transition: .5s;\n  -moz-transition: .5s; /* Firefox 4 */\n  -webkit-transition: .5s; /* Safari and Chrome */\n  -o-transition: .5s; /* Opera */ \n}\n  \n.line { height: 1px; background: #cccccc; margin: 0px 30px;}\n#emptySearchMsg { text-align: center; font-size: 15px; margin-top: 20px; }\n#filters { padding: 20px 60px 12px 22px; overflow: auto; }\n  .filter {\n    color: white;\n    padding: 3px 8px;\n    margin: 0px 0px 8px 8px;\n    cursor: pointer;\n    border-radius: 2px;\n    float: left;\n  }\n\n.list { width: 100%; clear: both;}\n.list li {\n  display: block;\n  float: left;\n  width: 100%;\n}\n.list li .li-wrapper {\n  background: white;\n  padding-top: 10px;\n  padding-right: 10px;\n  padding-bottom: 10px;\n  margin-left: 20px;  \n  margin-bottom: 20px;\n  box-shadow: 0px 0px 3px #dddddd;\n}\n.list li .li-wrapper:hover {\n  box-shadow: 0px 0px 3px #aaaaaa;\n}\n.list li a.thumbnail {\n  display: block;\n  position: relative;\n  margin: 0px 0px 10px 10px;\n  cursor: pointer;\n}\n.list li a.thumbnail .overlay {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  text-align: center;\n}\n.list li a.thumbnail img { width: 100%; }\n.list li a.thumbnail img.static { width: 100%; position: absolute; top: 0px; }\n.list li a.thumbnail div { width: 100%; }\n.list li a.thumbnail div.static { width: 100%; position: absolute; top: 0px; }\n    \n.list li .info { margin: 0px 0px 0px 10px; }\n.list li .info h3 {\n  font-size: 13px;\n  font-weight: bold;\n  color: #000000;\n  margin-bottom: 8px;\n}\n.list li .info h3:hover { color: #999999; }\n.list li .info .indv-viz-filters { margin-left: -8px; height: 23px; float: none; overflow: hidden; }\n    \n#noexist {\n  display: block;\n  font-size: 18px;\n  font-weight: bold;\n  padding: 20px;\n}\n\n#topleft {\n  border: 1px solid grey;\n  border-radius: 5px;\n  margin: 10px;\n  padding: 2px;\n  max-height: 200px;\n}\n\n#topright {\n  position: absolute;\n  top: 60px;\n  left: 1000px;\n  width: 90px;\n  height: 175px;\n  display: none;\n}\n\[email protected] (min-width: 320px) { /* 320-480px */\n  #topleft {\n    top: 20px;\n    width: 100%-; /* the - is to take into account the potential vertical scroll bar? */\n    position: relative;\n  }\n}\n\[email protected] (min-width: 480px) { /* 480-768px */\n  h1 { font-size: 50px; }\n  .line { margin: 0px 50px; }\n  #filters { padding: 20px 60px 12px 42px; }\n  .list li { width: 50%; }\n}\n\[email protected] (min-width: 768px) { /* 768-1024px */\n  .line { margin: 0px 60px; }\n  #filters { padding: 20px 60px 12px 52px; }\n  .list li { width: 33.33%; }\n}\n\[email protected] (min-width: 1024px) { /* more than 1024px */\n  .list li { width: 25%; }\n  #topleft {\n    top: 40px; \n    width: 25%;\n    position: absolute;\n  }\n}\n\[email protected] (min-width: 1400px) { /* more than 1400px */\n  .list li { width: 20%; }\n}\n\n.static {\n  background-repeat: no-repeat;\n  background-size: 100% 100%;\n  display: inline-block;\n  height: 100%;\n  width: 300px;\n  opacity: 1;\n  backface-visibility: hidden;\n}\n\n/*.container {\n  position: relative;\n  width: 50%;\n}\n*/\n/*.image {\n  opacity: 1;\n  display: block;\n  width: 100%;\n  height: auto;\n  transition: .5s ease;\n  backface-visibility: hidden;\n}\n*/\n.middle {\n  transition: .5s ease;\n  opacity: 0;\n  position: absolute;\n  top: 7%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%)\n}\n\n.li-wrapper:hover .static {\n  opacity: 0.3;\n}\n\n.li-wrapper:hover .middle {\n  opacity: 1;\n}\n\n.message {\n  font-size: 150%;\n  text-align: center;\n}\n\n\n\n#notloggedin {\n  background-color: black;\n  color: white;\n  border: 1px solid;\n  border-radius: 5px;\n  position: absolute;\n  width: 280px;\n  top: 50px;\n  right: 10px;\n  padding: 7px;\n  z-index: 1;\n}\n\n#notloggedin::after {\n  content: \"\";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: 110px;\n  border-width: 10px;\n  border-style: solid;\n  border-color: transparent transparent black transparent;\n}\n</style>\n<link rel='alternate' hreflang='en' href='https://visualgo.net'>\n<link rel='alternate' hreflang='zh' href='https://visualgo.net/zh'>\n<link rel='alternate' hreflang='es' href='https://visualgo.net/es'>\n<link rel='alternate' hreflang='pt' href='https://visualgo.net/pt'>\n<link rel='alternate' hreflang='ru' href='https://visualgo.net/ru'>\n<link rel='alternate' hreflang='id' href='https://visualgo.net/id'>\n<link rel='alternate' hreflang='de' href='https://visualgo.net/de'>\n<link rel='alternate' hreflang='bn' href='https://visualgo.net/bn'>\n<link rel='alternate' hreflang='ja' href='https://visualgo.net/ja'>\n<link rel='alternate' hreflang='ko' href='https://visualgo.net/ko'>\n<link rel='alternate' hreflang='vi' href='https://visualgo.net/vi'>\n<script>\n      function changeURL() {\n        var URL = window.location.href.split('/');\n        var val = document.getElementById(\"Language\").value;\n        URL[3] = val;\n        window.location.assign(URL.join('/'));\n      }\n    </script>\n</head>\n<body>\n<div id=\"top-bar\">\n<a href=\"http://www.comp.nus.edu.sg/~stevenha\"><span class=\"colour\" style=\"border: 1px solid green; border-radius: 25px;\">7</span></a>&nbsp;&nbsp;&nbsp;\n<a id=\"home\" href=\"/\">Visu<span class=\"colour\">Algo</span><span style=\"font-size: 40%\">.net</span></a>\n/\n<select id=\"Language\" onchange=\"changeURL()\">\n<option value=\"en\" selected>en</option>\n<option value=\"zh\">zh</option>\n<option value=\"es\">es</option>\n<option value=\"pt\">pt</option>\n<option value=\"ru\">ru</option>\n<option value=\"id\">id</option>\n<option value=\"de\">de</option>\n<option value=\"bn\">bn</option>\n<option value=\"ja\">ja</option>\n<option value=\"ko\">ko</option>\n<option value=\"vi\">vi</option>\n</select>\n<span class=\"right-links\" id=\"useraccount\">Login</span>\n<a class=\"right-links\" id=\"translation-link\" href=\"translation\">Translation</a>\n<a class=\"right-links\" id=\"training-link\" href=\"training\">Training</a>\n</div>\n<div id=\"dark-overlay\"></div>\n\n<h1>Visu<span class=\"colour\">Algo</span><span style=\"font-size:25%\">.net/en</span></h1>\n<h2 id=\"subtitle\">visualising data structures and algorithms through animation\n</h2>\n<form id=\"searchbar\">\n<input id=\"search\" type=\"text\" autocomplete=\"off\" placeholder=\"Search...\"><div id=\"show-filters\" title=\"show/hide filters\">&#9663;</div>\n</form>\n<center><p><br><a href=\"https://www.comp.nus.edu.sg/news/features/2020stevenhalim/\" target=\"_blank\"><u>Featured story: Visualizing Algorithms with a Click</u></a>\n</p>\n</center>\n<div id=\"active-tags\"></div>\n<div id=\"emptySearchMsg\" style=\"display: none;\">No result were found.></div>\n<div id=\"filters-and-lines\" style=\"display: none;\">\n<div class=\"line\" style=\"margin-top: 20px;\"></div>\n<div id=\"filters\"></div>\n<div class=\"line\"></div>\n</div>\n<div id=\"topleft\">\n<p style=\"margin-bottom: 8px;\"><b>Do You Know?</b> <a class=\"links\" onclick=\"nextTip()\">Next Random Tip</a></p>\n<p id=\"msg\" style=\"text-align: justify;\"></p>\n</div>\n<div id=\"topright\">\n<a href=\"https://cpbook.net\" target=\"_blank\"><img src=\"https://cpbook.net/img/cp4.jpg\" style=\"height: 130px;\" alt=\"CPbook\"></a><br>\n<a href=\"https://www.lulu.com/spotlight/stevenhalimatgmaildotcom\" target=\"_blank\"><img src=\"https://visualgo.net/img/blue.png\" alt=\"lulu\"></a>\n\n</div>\n<p hidden id='msg_list0'>This is the English (default) interface for <a href=\"https://visualgo.net\" target=\"_blank\"><u>https://visualgo.net</u></a>. VisuAlgo will gradually grow into a multilingual site. Try visiting the other versions of VisuAlgo, e.g. <a href=\"./zh\"><u>Chinese</u></a>;&nbsp;<a href=\"https://visualgo.net/id\"><u>Indonesian</u></a>;&nbsp;<a href=\"https://visualgo.net/ru\"><u>Russian</u></a>; etc (see <a href=\"/statistics\"><u>statistics page</u></a>).</p>\n<p hidden id='msg_list1'>In VisuAlgo, you can use <i>your own input</i> for any algorithm instead of the sample inputs. Try graph drawing feature in these 6 graph-related visualizations: <a href=\"./en/graphds\"><u>Graph DS</u></a>, <a href=\"./en/dfsbfs\"><u>DFS/BFS</u></a>, <a href=\"./en/mst\"><u>MST</u></a>, <a href=\"./en/sssp\"><u>SSSP</u></a>, <a href=\"./en/maxflow\"><u>Max Flow</u></a>, and <a href=\"./en/matching\"><u>Matching</u></a>. You can also click tag <i>&#39;graph&#39;</i> in any of these 6 graph-related visualization boxes or type in <i>&#39;graph&#39;</i> in the search box.</p>\n<p hidden id='msg_list2'>To compare 2 related algorithms, e.g. <a href=\"./en/mst\"><u>Kruskal&#39;s vs Prim&#39;s</u></a> on the same graph, open 2 VisuAlgo pages in 2 windows and juxtapose them. Click <a href=\"img/kruskalprim.png\" target=\"_blank\"><u>here</u></a> to see the screenshot.</p>\n<p hidden id='msg_list3'>You can visualize the recursion tree (or DAG, if there are overlapping subproblems and Dynamic Programming (DP) is applicable) of <b>ANY</b> valid <a href=\"./en/recursion\"><u>recursive function</u></a> that can be written in JavaScript. Click <a href=\"img/recursion_treedag.png\" target=\"_blank\"><u>here</u></a> to see the screenshot.</p>\n<p hidden id='msg_list4'>VisuAlgo loads fast for first time visitors, but it loads &#39;almost instantly&#39; for returning visitors as we cache lots of static content of VisuAlgo :) (please do not use incognito or private browsing mode to keep the cache). Moreover, if you have registered a VisuAlgo account, we will load VisuAlgo according to your preferences after you <a href=\"/login\"><u>login</u></a>.</p>\n<p hidden id='msg_list5'>Each visualization page has an &#39;e-Lecture Mode&#39; that is accessible from that page&#39;s top right corner that explains the data structure and/or algorithm being visualized. This e-Lecture mode is automatically shown to first time (or non logged-in) visitors to showcase the data structure and/or the algorithm being visualized. The quality of e-Lecture Mode will gradually be made to reach the lecture standard of algorithm classes in National University of Singapore :).</p>\n<p hidden id='msg_list6'>Please check four newest features of VisuAlgo: 1). Multi-lingual capability (you don&#39;t have to rely on /en language at all times if you are not native English speaker), 2). User accounts (there are interesting perks and customizations available for loyal users, please <a href=\"/register\"><u>register a free account now</u></a>), 3). Much more powerful e-Lecture mode to reach \"NUS standard\", and 4). Visualizations of NP-hard problems (currently MVC, TSP, and Steiner Tree).</p>\n<p hidden id='msg_list7'>VisuAlgo has two main components: The visualization pages (currently 23) and the Online Quiz component (currently 12 and will be 23 too in the near future). We do not script any of the questions in Online Quiz :O and all answers will be graded almost instantly :). You can try the online quiz at <a href=\"./training\"><u>our training page</u></a> or by clicking the &#39;Training&#39; button on the visualization module.</p>\n<p hidden id='msg_list8'>Search the term <a href=\"https://www.google.com/search?q=algorithm+visualization\" target=\"_blank\"><u>&#39;algorithm visualization&#39;</u></a> in your favorite Search Engine, do you see VisuAlgo in the first page of the search result :)? Next level: Search that term again, but in your native language (if it is not English). Is VisuAlgo still listed in the first page? :). And get ready to be surprised: Search the name of your favorite data structure or algorithm without mentioning the keyword &#39;animation&#39; or &#39;visualization&#39;. Is VisuAlgo still listed in the first page? :):).</p>\n<p hidden id='msg_list9'>VisuAlgo currently receives about ~3000 hits/day from various Computer Science students and teachers worldwide. Although this is a good number, we will keep improving VisuAlgo so that it can be even more useful for much more (new) CS students worldwide annually. Please spread the word if you are our returning visitors (<a href=\"/register\"><u>register a free VisuAlgo account</u></a> so that we can know who you are) and like this tool :).</p>\n<div id=\"main\">\n<ul class=\"list\">\n<li class='viz' id='sorting'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/sorting' data-anim='sorting'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/sorting.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='sortingtext' href='en/sorting'>Sorting</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=sorting'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>array</span>\n<span class='filter'>algorithm</span>\n<span class='filter'>bubble</span>\n<span class='filter'>select</span>\n<span class='filter'>insert</span>\n <span class='filter'>selection</span>\n<span class='filter'>insertion</span>\n<span class='filter'>merge</span>\n<span class='filter'>quick</span>\n<span class='filter'>randomized quick</span>\n<span class='filter'>counting</span>\n<span class='filter'>radix</span>\n<span class='filter'>sort</span>\n<span class='filter'>cs1010</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3230</span>\n<span class='filter'>list</span>\n<span class='filter'>data structure</span>\n<span class='filter'>sorting</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='bitmask'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/bitmask' data-anim='bitmask'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/bitmask.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='bitmasktext' href='en/bitmask'>Bitmask</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=bitmask'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>bit manipulation</span>\n<span class='filter'>set</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>array</span>\n<span class='filter'>list</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>bitmask</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='list'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/list' data-anim='list'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/list.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='listtext' href='en/list'>Linked List</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=list'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>stack</span>\n<span class='filter'>queue</span>\n<span class='filter'>doubly</span>\n<span class='filter'>deque</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>array</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>linked</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='hashtable'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/hashtable' data-anim='hashtable'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/hashtable.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='hashtabletext' href='en/hashtable'>Hash Table</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=hashtable'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>open addressing</span>\n<span class='filter'>linear</span>\n<span class='filter'>quadratic</span>\n<span class='filter'>probing</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='heap'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/heap' data-anim='heap'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/heap.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='heaptext' href='en/heap'>Binary Heap</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=heap'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>priority queue</span>\n<span class='filter'>recursive</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>recursion</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>binary</span>\n<span class='filter'>heap</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='bst'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/bst' data-anim='bst'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/bst.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='bsttext' href='en/bst'>Binary Search Tree</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=bst'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>adelson velskii landis</span>\n<span class='filter'>set</span>\n<span class='filter'>table</span>\n<span class='filter'>avl</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>recursion</span>\n<span class='filter'>recursive</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n<span class='filter'>set</span>\n<span class='filter'>bst</span>\n<span class='filter'>binary</span>\n<span class='filter'>search</span>\n<span class='filter'>tree</span>\n<span class='filter'>priority</span>\n<span class='filter'>queue</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='graphds'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/graphds' data-anim='graphds'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/graphds.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='graphdstext' href='en/graphds'>Graph Structures</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=graphds'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>tree</span>\n<span class='filter'>complete</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>dag</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>graph</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='ufds'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/ufds' data-anim='ufds'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/ufds.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='ufdstext' href='en/ufds'>Union-Find DS</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=ufds'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>path compression</span>\n<span class='filter'>disjoint</span>\n<span class='filter'>set</span>\n<span class='filter'>data structure</span>\n<span class='filter'>union by rank</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>array</span>\n<span class='filter'>tree</span>\n<span class='filter'>find</span>\n<span class='filter'>ds</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='segmenttree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/segmenttree' data-anim='segmenttree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/segmenttree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='segmenttreetext' href='en/segmenttree'>Segment Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>dynamic</span>\n<span class='filter'>range</span>\n<span class='filter'>sum</span>\n<span class='filter'>min</span>\n<span class='filter'>max</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>segment</span>\n<span class='filter'>tree</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='fenwicktree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/fenwicktree' data-anim='fenwicktree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/fenwicktree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='fenwicktreetext' href='en/fenwicktree'>Fenwick Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>binary indexed tree</span>\n<span class='filter'>bit</span>\n<span class='filter'>dynamic</span>\n<span class='filter'>fenwick</span>\n<span class='filter'>range</span>\n<span class='filter'>sum</span>\n<span class='filter'>point</span>\n<span class='filter'>update</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>binary</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='recursion'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/recursion' data-anim='recursion'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/recursion.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='recursiontext' href='en/recursion'>Recursion Tree/DAG</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=recursion'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>dynamic programming</span>\n<span class='filter'>dp</span>\n<span class='filter'>generic</span>\n<span class='filter'>cs1010</span>\n<span class='filter'>cs1020</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>recursive</span>\n<span class='filter'>algorithm</span>\n<span class='filter'>recursion</span>\n<span class='filter'>tree</span>\n<span class='filter'>dag</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='dfsbfs'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/dfsbfs' data-anim='dfsbfs'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/dfsbfs.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='dfsbfstext' href='en/dfsbfs'>Graph Traversal</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=dfsbfs'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>bfs</span>\n<span class='filter'>dfs</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>scc</span>\n<span class='filter'>cut vertex</span>\n<span class='filter'>articulation point</span>\n<span class='filter'>bridge</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>graph</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='mst'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/mst' data-anim='mst'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/mst.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='msttext' href='en/mst'>Min Spanning Tree</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=mst'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>mst</span>\n<span class='filter'>prim</span>\n<span class='filter'>kruskal</span>\n<span class='filter'>graph</span>\n<span class='filter'>min</span>\n<span class='filter'>spanning</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>tree</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='sssp'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/sssp' data-anim='sssp'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/sssp.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='sssptext' href='en/sssp'>SS Shortest Paths</a><a class='links' href='training?diff=Medium&n=7&tl=0&module=sssp'>Training</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>sssp</span>\n<span class='filter'>single-source</span>\n<span class='filter'>bfs</span>\n<span class='filter'>dijkstra</span>\n<span class='filter'>bellman ford</span>\n<span class='filter'>cs2010</span>\n<span class='filter'>cs2020</span>\n<span class='filter'>cs2040</span>\n<span class='filter'>single source</span>\n<span class='filter'>shortest path</span>\n<span class='filter'>graph</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='maxflow'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/maxflow' data-anim='maxflow'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/maxflow.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='maxflowtext' href='en/maxflow'>Network Flow</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>max flow</span>\n<span class='filter'>edmonds karp</span>\n<span class='filter'>min cut</span>\n<span class='filter'>dinic</span>\n<span class='filter'>ford fulkerson</span>\n<span class='filter'>graph</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='matching'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/matching' data-anim='matching'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/matching.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='matchingtext' href='en/matching'>Graph Matching</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>augmenting path</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>graph</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n<span class='filter'>matching</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='cyclefinding'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/cyclefinding' data-anim='cyclefinding'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/cyclefinding.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='cyclefindingtext' href='en/cyclefinding'>Cycle Finding</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>floyd</span>\n<span class='filter'>tortoise-hare</span>\n<span class='filter'>math</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='suffixtree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/suffixtree' data-anim='suffixtree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/suffixtree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='suffixtreetext' href='en/suffixtree'>Suffix Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>string</span>\n<span class='filter'>matching</span>\n<span class='filter'>lrs</span>\n<span class='filter'>lcs</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>suffix</span>\n<span class='filter'>tree</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='suffixarray'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/suffixarray' data-anim='suffixarray'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/suffixarray.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='suffixarraytext' href='en/suffixarray'>Suffix Array</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>lcp</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>matching</span>\n<span class='filter'>lrs</span>\n<span class='filter'>lcs</span>\n<span class='filter'>suffix</span>\n<span class='filter'>array</span>\n<span class='filter'>string</span>\n<span class='filter'>ds</span>\n<span class='filter'>data structure</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='polygon'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/polygon' data-anim='polygon'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/polygon.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='polygontext' href='en/polygon'>Geometry (Polygon)</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>convex</span>\n<span class='filter'>cut</span>\n<span class='filter'>winding</span>\n<span class='filter'>concave</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>computational</span>\n<span class='filter'>geometry</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='convexhull'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/convexhull' data-anim='convexhull'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/convexhull.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='convexhulltext' href='en/convexhull'>Convex Hull</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>andrew</span>\n<span class='filter'>monotone chain</span>\n<span class='filter'>graham</span>\n<span class='filter'>scan</span>\n<span class='filter'>jarvis</span>\n<span class='filter'>march</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>computational</span>\n<span class='filter'>geometry</span>\n<span class='filter'>algorithm</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='mvc'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/mvc' data-anim='mvc'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/mvc.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='mvctext' href='en/mvc'>Min Vertex Cover</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>tree</span>\n<span class='filter'>tree</span>\n<span class='filter'>dp</span>\n<span class='filter'>bipartite</span>\n<span class='filter'>matching</span>\n<span class='filter'>max flow</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='tsp'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/tsp' data-anim='tsp'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/tsp.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='tsptext' href='en/tsp'>Traveling Salesman</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>dp</span>\n<span class='filter'>mst</span>\n<span class='filter'>cs3233</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n<li class='viz' id='steinertree'>\n<div class='li-wrapper' style=\"background-color: lightblue;\">\n<a class='thumbnail' href='en/steinertree' data-anim='steinertree'>\n<img src='img/dummy.gif' alt=\"please wait\">\n<div class='static' style=\"background-image: url('img/png/steinertree.png');\"></div>\n<div class=\"middle\">\n<div class=\"message\">Try This New Module</div>\n</div>\n</a>\n<div class='info'>\n<h3><a id='steinertreetext' href='en/steinertree'>Steiner Tree</a></h3>\n<div class='indv-viz-filters'>\n<span class='filter'>np-hard</span>\n<span class='filter'>graph</span>\n<span class='filter'>mst</span>\n<span class='filter'>cs4234</span>\n</div>\n</div>\n</div>\n</li>\n</ul>\n</div>\n<div id=\"bottom-bar\">\n<a id=\"trigger-about\">About</a>\n <a id=\"trigger-team\">Team</a>\n<a id=\"trigger-terms\">Terms of use</a>\n</div>\n<div id=\"about\" class=\"overlays\">\n<h4>About</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace.</p><p>VisuAlgo contains many advanced algorithms that are discussed in Dr Steven Halim&#39;s book (&#39;Competitive Programming&#39;, co-authored with his brother Dr Felix Halim) and beyond. Today, some of these advanced algorithms visualization/animation can only be found in VisuAlgo.</p><p>Though specifically designed for National University of Singapore (NUS) students taking various data structure and algorithm classes (e.g. CS1010, CS1020, CS2010, CS2020, CS3230, and CS3230), as advocators of online learning, we hope that curious minds around the world will find these visualisations useful too.</p><p>VisuAlgo is not designed to work well on small touch screens (e.g. smartphones) from the outset due to the need to cater for many complex algorithm visualizations that require lots of pixels and click-and-drag gestures for interaction. The minimum screen resolution for a respectable user experience is 1024x768 and only the landing page is relatively mobile-friendly.</p><p>VisuAlgo is an ongoing project and more complex visualisations are still being developed.</p><p>The most exciting development is the automated question generator and verifier (the online quiz system) that allows students to test their knowledge of basic data structures and algorithms. The questions are randomly generated via some rules and students&#39; answers are instantly and automatically graded upon submission to our grading server. This online quiz system, when it is adopted by more CS instructors worldwide, should technically eliminate manual basic data structure and algorithm questions from typical Computer Science examinations in many Universities. By setting a small (but non-zero) weightage on passing the online quiz, a CS instructor can (significantly) increase his/her students mastery on these basic questions as the students have virtually infinite number of training questions that can be verified instantly before they take the online quiz. The training mode currently contains questions for 12 visualization modules. We will soon add the remaining 8 visualization modules so that every visualization module in VisuAlgo have online quiz component.</p><p>Another active branch of development is the internationalization sub-project of VisuAlgo. We want to prepare a database of CS terminologies for all English text that ever appear in VisuAlgo system. This is a big task and requires crowdsourcing. Once the system is ready, we will invite VisuAlgo visitors to contribute, especially if you are not a native English speaker. Currently, we have also written public notes about VisuAlgo in various languages:\n<a href=\"https://weibo.com/p/230418436e9ee80102v4rk\" target='_blank'><u>zh</u></a>, <a href='https://www.facebook.com/notes/steven-halim/httpidvisualgonet-visualisasi-struktur-data-dan-algoritma-dengan-animasi/10153236934439689' target='_blank'><u>id</u></a>, <a href=\"https://blog.naver.com/visualgo_nus\" target='_blank'><u>kr</u></a>, <a href='https://www.facebook.com/groups/163215593699283/permalink/824003417620494/' target='_blank'><u>vn</u></a>, <a href='http://pantip.com/topic/32736343' target='_blank'><u>th</u></a>.</p>\n</div>\n</div>\n<div id=\"team\" class=\"overlays\">\n<h4>Team</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>\n<strong><span style='line-height: 150%;'>Project Leader &amp; Advisor (Jul 2011-present)</span></strong><br>\n<a href='http://www.comp.nus.edu.sg/~stevenha/' target='_blank'>Dr Steven Halim</a>, Senior Lecturer, School of Computing (SoC), National University of Singapore (NUS)<br>\n<a href='http://felix-halim.net/' target='_blank'>Dr Felix Halim</a>, Software Engineer, Google (Mountain View)\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Undergraduate Student Researchers 1 (Jul 2011-Apr 2012)</span></strong><br>\nKoh Zi Chun, <a href='http://roticv.rantx.com/' target='_blank'>Victor Loh Bo Huai</a>\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 1 (Jul 2012-Dec 2013)</span></strong><br>\nPhan Thi Quynh Trang, Peter Phandi, Albert Millardo Tjindradinata, Nguyen Hoang Duy\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 2 (Jun 2013-Apr 2014)</span></strong><br>\n<a href='http://www.rosemarietan.com/' target='_blank'>Rose Marie Tan Zhao Yun</a>, Ivan Reinaldo\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Undergraduate Student Researchers 2 (May 2014-Jul 2014)</span></strong><br>\nJonathan Irvin Gunawan, Nathan Azaria, Ian Leow Tze Wei, Nguyen Viet Dung, Nguyen Khac Tung, Steven Kester Yuwono, Cao Shengze, Mohan Jishnu\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 3 (Jun 2014-Apr 2015)</span></strong><br>\nErin Teo Yi Ling, Wang Zi\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Final Year Project/UROP students 4 (Jun 2016-Dec 2017)</span></strong><br>\nTruong Ngoc Khanh, John Kevin Tjahjadi, Gabriella Michelle, Muhammad Rais Fathin Mudzakir\n</p>\n<p>\nList of translators who have contributed &ge;100 translations can be found at <a href=\"https://visualgo.net/statistics\">statistics</a> page.\n</p>\n<p>\n<strong><span style='line-height: 150%;'>Acknowledgements</span></strong><br>\nThis project is made possible by the generous <a href=\"http://www.cdtl.nus.edu.sg/teg/\" target=\"_blank\">Teaching Enhancement Grant</a> from NUS Centre for Development of Teaching and Learning (CDTL).\n</p>\n</div>\n</div>\n<div id=\"termsofuse\" class=\"overlays\">\n<h4>Terms of use</h4><span class='close-overlay'>&#x2715;</span>\n<div class='content'>\n<p>VisuAlgo is free of charge for Computer Science community on earth. If you like VisuAlgo, the only payment that we ask of you is for you to <b>tell the existence of VisuAlgo to other Computer Science students/instructors</b> that you know =) via Facebook, Twitter, course webpage, blog review, email, etc.</p> <p>If you are a data structure and algorithm <b>student/instructor</b>, you are allowed to use this website directly for your classes. If you take screen shots (videos) from this website, you can use the screen shots (videos) elsewhere as long as you cite the URL of this website (http://visualgo.net) and/or list of publications below as reference. However, you are <b>NOT</b> allowed to download VisuAlgo (client-side) files and <b>host it</b> on your own website as it is <b>plagiarism</b>. As of now, we do <b>NOT</b> allow other people to fork this project and create variants of VisuAlgo. Using the offline copy of (client-side) VisuAlgo for your personal usage is fine.</p> <p>Note that VisuAlgo&#39;s online quiz component is by nature has heavy server-side component and there is no easy way to save the server-side scripts and databases locally. Currently, the general public can only use the &#39;training mode&#39; to access these online quiz system. Currently the &#39;test mode&#39; is a more controlled environment for using these randomly generated questions and automatic verification for a <b>real</b> examination in NUS. Other interested CS instructor should contact Steven if you want to try such &#39;test mode&#39;.</p> <p><strong><span style=\"line-height: 200%;\">List of Publications</span></strong></p> <p>This work has been presented briefly at the CLI Workshop at the ACM ICPC World Finals 2012 (Poland, Warsaw) and at the IOI Conference at IOI 2012 (Sirmione-Montichiari, Italy). You can click <a href=\"http://www.ioinformatics.org/oi/shtm/INFOL099.shtml\" target=\"_blank\">this link</a> to read our 2012 paper about this system (it was not yet called VisuAlgo back in 2012).</p><p>This work is done mostly by my past students. The most recent final reports are here: <a href=\"fyp/erin-report.pdf\" target=\"_blank\">Erin</a>, <a href=\"fyp/wangzi-report.pdf\" target=\"_blank\">Wang Zi</a>, <a href=\"fyp/rose-report.pdf\" target=\"_blank\">Rose</a>, <a href=\"fyp/ivan-report.pdf\" target=\"_blank\">Ivan</a>.</p> <p><strong><span style=\"line-height: 200%;\">Bug Reports or Request for New Features</span></strong></p> <p>VisuAlgo is not a finished project. Dr Steven Halim is still actively improving VisuAlgo. If you are using VisuAlgo and spot a bug in any of our visualization page/online quiz tool or if you want to request for new features, please contact Dr Steven Halim. His contact is the concatenation of his name and add gmail dot com.</p>\n </div>\n</div>\n\n<script src=\"https://visualgo.net/js/jquery-3.3.1.min.js\"></script>\n<script>\n      var PHP_DOMAIN = \"\";\n\n      // surprise colour!\n      // Referenced to in  home.js and viz.js also\n      var colourArray = [\"#52bc69\", \"#d65775\"/*\"#ed5a7d\"*/, \"#2ebbd1\", \"#d9513c\", \"#fec515\", \"#4b65ba\", \"#ff8a27\", \"#a7d41e\"]; // green, pink, blue, red, yellow, indigo, orange, lime\n\n      function disableScroll() { $('html').css('overflow', 'hidden'); }\n\n      function enableScroll() { $('html').css('overflow', 'visible'); }\n\n      function replaceAll(find, replace, str) { return str.replace(new RegExp(find, 'g'), replace); }\n\n      function getColours() {\n        var generatedColours = new Array();\n        while (generatedColours.length < 4) {\n          var n = (Math.floor(Math.random() * colourArray.length));\n          if ($.inArray(n, generatedColours) == -1)\n            generatedColours.push(n);\n        }\n        return generatedColours;\n      }\n\n      function isOn(value, position) {\n        return (value>>position) & 1 === 1;\n      }\n\n      function customAlert(msg) {\n        $('#custom-alert p').html(msg);\n        var m = -1 * ($('#custom-alert').outerHeight()/2);\n        $('#custom-alert').css('margin-top', m+'px');\n        $('#dark-overlay').fadeIn(function() {\n          $('#custom-alert').fadeIn(function() {\n            setTimeout(function() {\n              $('#custom-alert').fadeOut(function() {\n                $('#dark-overlay').fadeOut();\n              });\n            }, 1000);\n          });\n        });\n      }\n\n      function showLoadingScreen() {\n        $('#loading-overlay').show();\n        $('#loading-message').show();\n      }\n\n      function hideLoadingScreen() {\n        $('#loading-overlay').hide();\n      }\n\n      function commonAction(retval, msg) {\n        //setTimeout(function() {\n          if (retval) { // mode == \"exploration\" && // now not only for exploration mode, but check if this opens other problems\n            $('#current-action').show();\n            $('#current-action').html(mode == \"exploration\" ? msg : (\"e-Lecture Example (auto play until done)<br>\" + msg));\n            $('#progress-bar').slider(\"option\", \"max\", gw.getTotalIteration()-1);\n            triggerRightPanels();\n            isPlaying = true;\n          }\n        //}, 500);\n      }\n\n      function getQueryVariable(variable) {\n        var query = window.location.search.substring(1);\n        var vars = query.split('&');\n        for (var i = 0; i < vars.length; i++) {\n          var pair = vars[i].split('=');\n          if (decodeURIComponent(pair[0]) == variable)\n            return decodeURIComponent(pair[1]);\n        }\n        return \"\";\n      }\n\n      var generatedColours = getColours();\n      var surpriseColour = colourArray[generatedColours[0]];\n      var colourTheSecond = colourArray[generatedColours[1]];\n      var colourTheThird = colourArray[generatedColours[2]];\n      var colourTheFourth = colourArray[generatedColours[3]];\n\n      $(function() {\n        $('.links').css('background', surpriseColour);\n        $('.right-links').css('background', surpriseColour);\n        $('#login-go').css('background', surpriseColour);\n\n        $('.colour').css(\"color\", surpriseColour); // name\n        $('h4').css(\"background-color\", surpriseColour); // about, contact us etc. button background\n\n        // title\n        $('#title a').click(function() {\n          $('#title a').removeClass('selected-viz');\n          $(this).addClass('selected-viz');\n          // temporary quick fix for Google Chrome Aug 2016 issue...\n          setTimeout(function(){ document.body.style.zoom = \"100.1%\"; }, 100); // force resize/redraw...\n          setTimeout(function(){ document.body.style.zoom = \"100%\"; }, 600);\n        });\n\n        // overlays stuffs\n        $('#trigger-about').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#about').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('#trigger-team').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#team').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('#trigger-terms').click(function() {\n          if ($(window).width() > 600) {\n            $('#dark-overlay').fadeIn(function() {\n              $('#termsofuse').fadeIn();\n            });\n          }\n          else\n            alert('Sorry, this dialog is too big. Please load it on bigger screen');\n        });\n\n        $('.close-overlay').click(function() {\n          $('.overlays').fadeOut(function() {\n            $('#dark-overlay').fadeOut();\n          });\n        });\n\n        $('#dark-overlay').click(function() {\n          $('.overlays').fadeOut();\n          $('#dark-overlay').fadeOut();\n        });\n\n        $.get('/isloggedin', function(data) {\n          var isLoggedIn = data['isloggedin'] == '1';\n          var element;\n          if (isLoggedIn) {\n            // element = '<a onclick=\"verifyLogout()\">Logout</a>';\n            element = '<a href=\"https://visualgo.net/profile\">Profile</a>'; \n          }\n          else {\n            element = '<a href=\"https://visualgo.net/login\">Login</a>'\n          }\n          $('#useraccount').html(element);\n        });\n      });\n\n      function verifyLogout() {\n        // Steven's remarks: use a better 'confirm' than the default :(\n        var doesLogout = confirm('Are you sure to logout?');\n        if (doesLogout == true) {\n          window.location = \"https://visualgo.net/logout\";\n        }\n      }\n\n      function checkLogin() {\n        $.get('/checklogin', function(data) {\n          var url = data['url'];\n          window.location.href = '/' + url;\n        });\n      }\n\n      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');\n\n      ga('create', 'UA-1566631-4', 'auto');\n      ga('send', 'pageview');\n    </script>\n<script>\nvar seen = 0; // all have not been seen\nvar timer;\n\nfunction nextTip() { // note to self: now I think I can increase the number of tips...\n  if (seen == (1<<10)-1) seen = 0;\n\n  var cur;\n  do {\n    cur = Math.floor(Math.random()*10);\n  }\n  while ((seen & (1<<cur)) != 0);\n\n  seen |= (1<<cur);\n  $(\"#msg\").html($(\"#msg_list\"+cur).html()).fadeIn();\n  clearTimeout(timer); // reset timer\n  timer = setTimeout(function() {\n    $(\"#msg\").fadeOut(200, nextTip); // auto-rotate tip per 15s (current average 2h:25m, 10 tips so far)\n  }, 15000);\n}\n\n$(function() {\n  nextTip();\n\n  function showhide() {\n    if ($(window).width() < 700) {\n      $(\"#subtitle\").html(\"this tool looks better on larger screen :)\");\n      $(\"#topright\").hide();\n      \n    }\n    else {\n      $(\"#subtitle\").html(\"visualising data structures and algorithms through animation\");\n      $(\"#topright\").css(\"left\", $(window).width()-190); // always on the right\n      $(\"#topright\").show();\n      \n    }\n\n    if ($(window).width() < 500) {\n      $(\"#training-link\").hide(); // too hard to train on small screen\n      $(\"#translation-link\").hide(); // impossible to translate on such small screen\n    }\n    else {\n      $(\"#training-link\").show();\n      $(\"#translation-link\").show();\n    }\n\n    \n  }\n\n  $(\"#notloggedin\").delay(15000).fadeOut();\n\n  $(window).resize(function() {\n    showhide();\n  });\n  showhide();\n\n  // thumbnail image animation on hover\n  $('a.thumbnail').hover(function() {\n    $(this).children('img').attr('src', 'img/gif/' + $(this).attr('data-anim') + '.gif');\n    $(this).children('img').attr('width', $(this).children('div.static').css('width')); \n    $(this).children('img').attr('height', $(this).children('div.static').css('height'));\n    $(this).children('div.static').hide();\n  }, function() {\n    $(this).children('div.static').show();\n  });\n\n  // tags\n  var allViz = new Array(\n    new Array(\n    'sorting',\n    'sorting',\n    'array',\n    'algorithm',\n    'bubble',\n    'select',\n    'insert',\n    'selection',\n    'insertion',\n    'merge',\n    'quick',\n    'randomized quick',\n    'counting',\n    'radix',\n    'sort',\n    'cs1010',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'cs3230',\n    'list',\n    'data structure',\n    'sorting'\n    ),\n    new Array(\n    'bitmask',\n    'bitmask',\n    'bit manipulation',\n    'set',\n    'cs3233',\n    'array',\n    'list',\n    'ds',\n    'data structure',\n    'bitmask'\n    ),\n    new Array(\n    'list',\n    'linked list',\n    'stack',\n    'queue',\n    'doubly',\n    'deque',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'array',\n    'ds',\n    'data structure',\n    'linked'\n    ),\n    new Array(\n    'hashtable',\n    'hash table',\n    'open addressing',\n    'linear',\n    'quadratic',\n    'probing',\n    'cs1020',\n    'cs2020',\n    'cs2040',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'heap',\n    'binary heap',\n    'priority queue',\n    'recursive',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'recursion',\n    'ds',\n    'data structure',\n    'binary',\n    'heap'\n    ),\n    new Array(\n    'bst',\n    'binary search tree',\n    'adelson velskii landis',\n    'set',\n    'table',\n    'avl',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'recursion',\n    'recursive',\n    'ds',\n    'data structure',\n    'set',\n    'bst',\n    'binary',\n    'search',\n    'tree',\n    'priority',\n    'queue'\n    ),\n    new Array(\n    'graphds',\n    'graph structures',\n    'tree',\n    'complete',\n    'bipartite',\n    'dag',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'graph',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'ufds',\n    'union-find ds',\n    'path compression',\n    'disjoint',\n    'set',\n    'data structure',\n    'union by rank',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'cs3233',\n    'array',\n    'tree',\n    'find',\n    'ds'\n    ),\n    new Array(\n    'segmenttree',\n    'segment tree',\n    'dynamic',\n    'range',\n    'sum',\n    'min',\n    'max',\n    'cs3233',\n    'segment',\n    'tree',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'fenwicktree',\n    'fenwick tree',\n    'binary indexed tree',\n    'bit',\n    'dynamic',\n    'fenwick',\n    'range',\n    'sum',\n    'point',\n    'update',\n    'cs3233',\n    'binary',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'recursion',\n    'recursion tree/dag',\n    'dynamic programming',\n    'dp',\n    'generic',\n    'cs1010',\n    'cs1020',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'cs3233',\n    'cs4234',\n    'recursive',\n    'algorithm',\n    'recursion',\n    'tree',\n    'dag'\n    ),\n    new Array(\n    'dfsbfs',\n    'graph traversal',\n    'bfs',\n    'dfs',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'bipartite',\n    'scc',\n    'cut vertex',\n    'articulation point',\n    'bridge',\n    'cs2020',\n    'graph',\n    'algorithm'\n    ),\n    new Array(\n    'mst',\n    'min spanning tree',\n    'mst',\n    'prim',\n    'kruskal',\n    'graph',\n    'min',\n    'spanning',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'tree',\n    'algorithm'\n    ),\n    new Array(\n    'sssp',\n    'ss shortest paths',\n    'sssp',\n    'single-source',\n    'bfs',\n    'dijkstra',\n    'bellman ford',\n    'cs2010',\n    'cs2020',\n    'cs2040',\n    'single source',\n    'shortest path',\n    'graph',\n    'algorithm'\n    ),\n    new Array(\n    'maxflow',\n    'network flow',\n    'max flow',\n    'edmonds karp',\n    'min cut',\n    'dinic',\n    'ford fulkerson',\n    'graph',\n    'cs3233',\n    'cs4234',\n    'algorithm'\n    ),\n    new Array(\n    'matching',\n    'graph matching',\n    'augmenting path',\n    'bipartite',\n    'graph',\n    'cs3233',\n    'cs4234',\n    'matching',\n    'algorithm'\n    ),\n    new Array(\n    'cyclefinding',\n    'cycle finding',\n    'floyd',\n    'tortoise-hare',\n    'math',\n    'cs3233',\n    'algorithm'\n    ),\n    new Array(\n    'suffixtree',\n    'suffix tree',\n    'string',\n    'matching',\n    'lrs',\n    'lcs',\n    'cs3233',\n    'suffix',\n    'tree',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'suffixarray',\n    'suffix array',\n    'lcp',\n    'cs3233',\n    'matching',\n    'lrs',\n    'lcs',\n    'suffix',\n    'array',\n    'string',\n    'ds',\n    'data structure'\n    ),\n    new Array(\n    'polygon',\n    'geometry (polygon)',\n    'convex',\n    'cut',\n    'winding',\n    'concave',\n    'cs3233',\n    'computational',\n    'geometry',\n    'algorithm'\n    ),\n    new Array(\n    'convexhull',\n    'convex hull',\n    'andrew',\n    'monotone chain',\n    'graham',\n    'scan',\n    'jarvis',\n    'march',\n    'cs3233',\n    'computational',\n    'geometry',\n    'algorithm'\n    ),\n    new Array(\n    'mvc',\n    'min vertex cover',\n    'np-hard',\n    'graph',\n    'bipartite',\n    'tree',\n    'tree',\n    'dp',\n    'bipartite',\n    'matching',\n    'max flow',\n    'cs3233',\n    'cs4234'\n    ),\n    new Array(\n    'tsp',\n    'traveling salesman',\n    'np-hard',\n    'graph',\n    'dp',\n    'mst',\n    'cs3233',\n    'cs4234'\n    ),\n    new Array(\n    'steinertree',\n    'steiner tree',\n    'np-hard',\n    'graph',\n    'mst',\n    'cs4234'\n    )\n  );\n\n  // generate tags\n  function createFilters() {\n    var filterList = new Array();\n    for (var i = 0; i < allViz.length; i++) {\n      var thisVizTags = allViz[i];\n      for (var j = 1; j < thisVizTags.length; j++)\n        if ($.inArray(thisVizTags[j], filterList) == -1)\n          filterList.push(thisVizTags[j]);\n    }\n    filterList.sort();\n    for (var i = 0; i < filterList.length; i++)\n      // if (i>0 && filterList[i]!=filterList[i-1]) // avoid duplicates\n      $('#filters').append(\"<span class='filter'>\" + filterList[i] + \"</span>\");\n  }\n  createFilters();\n\n  // tag and search mechanism\n  $('#filters-and-lines').hide();\n  $('#emptySearchMsg').hide();\n  var isEmptySearch = true;\n  var searchTerm = new Array(\"\"); // index 0 is the value from the search bar. Indices 1+ are values from tags.\n\n  // search/unsearch from tag filters\n  $('.filter').click(function() {\n    // add value to search\n    searchTerm[searchTerm.length] = $(this).html();\n    showResults();\n    $('#active-tags').append('<div class=\"active-tag\">' + $(this).html() + '<span>&#x2715;</span></div>');\n    $('.active-tag span').unbind('click').bind('click', function() {\n      // remove value from search\n      var indexToRemove = searchTerm.indexOf($(this).parent().text());\n      searchTerm.splice(indexToRemove, 1);\n      showResults();\n      $(this).parent().remove(); // visual\n    });\n  });            \n\n  // instant search from search bar \n  $('#search').each(function() {               \n    // Save current value of element\n    $(this).data('oldVal', $(this));                  \n\n    // Look for changes in the value\n    $(this).bind(\"propertychange keyup input paste\", function(event) {\n      // If value has changed...\n      if ($(this).data('oldVal') != $(this).val()) {\n        // Updated stored value\n        $(this).data('oldVal', $(this).val());\n        searchTerm[0] = $(this).val();\n        showResults();\n      }\n    });\n  });\n  $('#searchbar').submit(function() {\n    return false;\n  });\n\n  // find vizs with tag searchTerm\n  function showResults() {    \n    isEmptySearch = true;\n    $('#emptySearchMsg').hide();\n    $('.viz').hide();\n    for (var i = 0; i < allViz.length; i++) { // for each visualisation\n      var thisVizTags = allViz[i]; // array of the tags this visualisation has\n      var foundAll = true;\n      for (var j = 0; j < searchTerm.length; j++) // for each search term\n        foundAll = foundAll && findOneTag(searchTerm[j], thisVizTags);\n        if (foundAll) {\n          $('#'+thisVizTags[0]).show();\n          isEmptySearch = false;\n        }\n    }                 \n    if (isEmptySearch)\n      $('#emptySearchMsg').show();\n  }\n\n  function findOneTag(tag, vizArr) {\n    var found = false;                       \n    for (var i = 0; i < vizArr.length; i++) {\n      var patt = new RegExp(tag, \"i\");              \n      if (patt.test(vizArr[i]))\n        found = true;\n    }\n    return found;\n  }\n\n  // styling - arrow rotation, show filters-and-lines\n  $(\"#show-filters\").click(function() {\n    if ($(\"#filters-and-lines\").is(\":hidden\"))\n      showFilters();\n    else\n      hideFilters();             \n  });\n  function showFilters() {       \n    $(\"#filters-and-lines\").slideDown(\"slow\");\n    $(\"#show-filters\").html('&#9653;'); // ^\n  }\n  function hideFilters() {\n    $(\"#filters-and-lines\").slideUp(\"slow\");\n    $(\"#show-filters\").html('&#9663;'); // v\n  }\n\n  // styling - surprise colour stuff\n  $('#search').focus(function() { // search inset box-shadow\n    $(this).css(\"box-shadow\", \"0px 0px 3px \" + surpriseColour + \" inset\");\n    $(this).css(\"color\", \"black\");\n  });\n  $('#search').focusout(function() {  \n    if ($(this).val().trim() == \"\") {\n      $(this).css(\"box-shadow\", \"0px 0px 3px #929292 inset\");\n      $(this).css(\"color\", \"#888888\");\n    }                                        \n  });\n  $('#show-filters').css(\"background-color\", surpriseColour); // search filter button background\n  $('#temp a').css(\"background-color\", surpriseColour); // link to old site button\n  $('.filter').css(\"background-color\", \"#aaaaaa\"); // filter tags on hover\n  $('.filter').hover(function() {\n    $(this).css(\"background-color\", surpriseColour);\n  }, function() {  \n    $(this).css(\"background-color\", \"#aaaaaa\");\n  });\n});\n</script>\n</body>\n</html>\n", 
        "title": "VisuAlgo - visualising data structures and algorithms through animation", 
        "status_code": 200, 
        "status_line": "200 OK", 
        "headers": {
          "unknown": [
            {
              "key": "date", 
              "value": "Tue, 11 May 2021 14:43:06 GMT"
            }, 
            {
              "key": "cf_request_id", 
              "value": "09fd7ac2f800009dd146129000000001"
            }, 
            {
              "key": "expect_ct", 
              "value": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\""
            }, 
            {
              "key": "report_to", 
              "value": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report?s=f9EfQpBh7qk170Ib5gH%2BP3IYGtIz0f1EMdRz0W4J0x9N0CWmU8x5qAzK2ydt26x0SesBAgRebvzsfoAlQ5Qm1x4pPkZF77GTKUZRHSI%3D\"}],\"group\":\"cf-nel\",\"max_age\":604800}"
            }, 
            {
              "key": "cf_ray", 
              "value": "64dc2d7e5dfa9dd1-ORD"
            }, 
            {
              "key": "nel", 
              "value": "{\"report_to\":\"cf-nel\",\"max_age\":604800}"
            }, 
            {
              "key": "cf_cache_status", 
              "value": "DYNAMIC"
            }
          ], 
          "vary": "Accept-Encoding", 
          "server": "cloudflare", 
          "connection": "keep-alive", 
          "alt_svc": "h3-27=\":443\"; ma=86400, h3-28=\":443\"; ma=86400, h3-29=\":443\"; ma=86400", 
          "content_type": "text/html; charset=UTF-8", 
          "cache_control": "no-cache, private"
        }, 
        "body_sha256": "dd8162524069f1aa72cfe3c038498eb1f83d30d78ade43124a208328822ade14", 
        "metadata": {}
      }
    }
  }, 
  "ports": [
    80, 
    443
  ], 
  "protocols": [
    "443/https_www", 
    "443/https", 
    "80/http_www", 
    "80/http"
  ]
}