<commit_before><!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>AnCUI [Demo]</title>
  <link href="styles.css" media="all" rel="stylesheet" />
  <link href="visuals.css" media="all" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>
  <script src="../lib/utils.js"></script>
  <script src="../lib/ancui-core.js"></script>
  <script src="../lib/ancui-data.js"></script>
  <script src="../lib/ancui-intents.js"></script>
  <script src="../lib/ancui-pipeline.js"></script>
  <script src="../lib/ancui-visuals.js"></script>

  <div class="menu">
    <h1>Examples</h1>
    <ul>
      <li><a href="#ex1" target="_parent">Bars 1</a></li>
      <li><a href="#ex2" target="_parent">Bars 2</a></li>
      <li><a href="#ex3a" target="_parent">Bars 3-a</a></li>
      <li><a href="#ex3b" target="_parent">Bars 3-b</a></li>
      <li><a href="#ex4" target="_parent">Ellipses</a></li>
      <li><a href="#ex5" target="_parent">Concentric Ellipse</a></li>
      <li><a href="#ex6" target="_parent">Advanced</a></li>
    </ul>
  </div>

  <ul>
    <li>
      <h2><a name="ex1"></a>Example 1: Bars</h2>
      <div id="example-1" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $yOffset(30), $width(150)])
  }, $id("example-1"));</pre>
    </li>

    <li>
      <h2><a name="ex2"></a>Example 2: Bars</h2>
      <div id="example-2" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $yOffset(30), $xOffset(30), $width(150)])
  }, $id("example-2"));</pre>
    </li>

    <li>
      <h2><a name="ex3a"></a>Example 3-a: Bars</h2>
      <div id="example-3a" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $xOffset(30), $width(15)])
  }, $id("example-3a"));</pre>
    </li>

    <li>
      <h2><a name="ex3b"></a>Example 3-b: Bars</h2>
      <div id="example-3b" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $xOffset(30), $width(15)])
  }, $id("example-3b"));</pre>
    </li>

    <li>
      <h2><a name="ex4"></a>Example 4: Ellipses</h2><commit_msg>[chore] update documentation<commit_after><!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>AnCUI [Demo]</title>
  <link href="styles.css" media="all" rel="stylesheet" />
  <link href="visuals.css" media="all" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>
  <script src="../lib/utils.js"></script>
  <script src="../lib/ancui-core.js"></script>
  <script src="../lib/ancui-data.js"></script>
  <script src="../lib/ancui-intents.js"></script>
  <script src="../lib/ancui-pipeline.js"></script>
  <script src="../lib/ancui-visuals.js"></script>

  <div class="menu">
    <h1>Examples</h1>
    <ul>
      <li><a href="#ex1" target="_parent">Bars 1</a></li>
      <li><a href="#ex2" target="_parent">Bars 2</a></li>
      <li><a href="#ex3a" target="_parent">Bars 3-a</a></li>
      <li><a href="#ex3b" target="_parent">Bars 3-b (align bottom)</a></li>
      <li><a href="#ex4" target="_parent">Ellipses</a></li>
      <li><a href="#ex5" target="_parent">Concentric Ellipse</a></li>
      <li><a href="#ex6" target="_parent">Advanced</a></li>
    </ul>
  </div>

  <ul>
    <li>
      <h2><a name="ex1"></a>Example 1: Bars</h2>
      <div id="example-1" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $yOffset(30), $width(150)])
  }, $id("example-1"));</pre>
    </li>

    <li>
      <h2><a name="ex2"></a>Example 2: Bars</h2>
      <div id="example-2" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $yOffset(30), $xOffset(30), $width(150)])
  }, $id("example-2"));</pre>
    </li>

    <li>
      <h2><a name="ex3a"></a>Example 3-a: Bars</h2>
      <div id="example-3a" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $xOffset(30), $width(15)])
  }, $id("example-3a"));</pre>
    </li>

    <li>
      <h2><a name="ex3b"></a>Example 3-b: Bars with vertical alignment </h2>
      <div id="example-3b" class="container"></div>
      <pre class="code-example">
  container("c4", _ => {
    _.bars(barsData, [$maxHeight(50), $alignBottom(100), $xOffset(30), $width(15)])
  }, $id("example-3b"));</pre>
    </li>

    <li>
      <h2><a name="ex4"></a>Example 4: Ellipses</h2>
{'fraction_non_alphanumeric': 0.265740338688667, 'fraction_numerical': 0.032783326096396004, 'mean_word_length': 3.5433925049309667, 'pattern_counts': {'":': 0, '<': 211, '<?xml version=': 0, '>': 219, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1159060', 'n_tokens_mistral': 1887, 'n_tokens_neox': 1793, 'n_words': 288}