D3 Examples - Arc Diagram III

Arc Diagram III

Like the previous example, but with the option to provide a custom string. The application relies on a server-side computation that uses Oliver Mader's code to compute the essential matching pairs.

The example shows the first 93 digits of PI.

A translucent white stroke has also been introduced to avoid mistaking palindrome repetition of matching subsequences with large subsequences (e.g. 793238 and 383279 on the left side of the visualization).

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Arc Diagram III</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <svg></svg>
  <div id="input_box">
    <label for="sequence_input">Sequence to be analyzed (press ENTER to redraw):</label>
    <input id="sequence_input" type="text" value="314159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534">
  </div>
  <script src="index.js"></script>
</body>
</html>
    