title: How to define repeat and layer in vega-lite api
body: <p>I have a data which looks something like this:</p>
  <pre><code>student_name,d,e
  student1,0.1,0.7
  student2,0.2,0.3
  student3,0.3,0.4
  student4,0.25,0.2
  student5,0.4,0.15
  student6,0.6,0.2
  student7,0.15,0.5
  student8,0.7,0.13
  student9,0.56,0.22
  student10,0.35,0.2
  </code></pre>
  <p>I want to visualize this data with <a href="https://github.com/vega/vega-lite-api/" rel="nofollow noreferrer">vega-lite-api</a> such that X-axis will have students and there will be two line charts each for column <code>d</code> and <code>e</code>. I tried something like <a href="https://vizhub.com/Mahesha999/3f80d422fe574ccfba9550076d6faf62?edit=files&amp;file=viz.js" rel="nofollow noreferrer">this</a>:</p>
  <pre><code>vl
    .markLine() 
    .encode(
      vl.x().fieldN('student_name').sort('y'), 
      vl.y().fieldQ('d'),
    );
  </code></pre>
  <p>This correctly shows column <code>d</code> values on y axis against students on x axis:</p>
  <p><a href="https://i.stack.imgur.com/XzY5X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XzY5X.png" alt="enter image description here" /></a></p>
  <p>However, I am unable to guess how I can have column <code>e</code> values on y axis too.
  I guess I need to repeat and layer, something like <a href="https://vega.github.io/vega-lite/examples/repeat_layer.html" rel="nofollow noreferrer">this</a>:</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v5.json&quot;,
    &quot;data&quot;: {
      &quot;url&quot;: &quot;data/movies.json&quot;
    },
    &quot;repeat&quot;: {
      &quot;layer&quot;: [&quot;US Gross&quot;, &quot;Worldwide Gross&quot;]
    },
    &quot;spec&quot;: {
      &quot;mark&quot;: &quot;line&quot;,
      &quot;encoding&quot;: {
        &quot;x&quot;: {
          &quot;bin&quot;: true,
          &quot;field&quot;: &quot;IMDB Rating&quot;,
          &quot;type&quot;: &quot;quantitative&quot;
        },
        &quot;y&quot;: {
          &quot;aggregate&quot;: &quot;mean&quot;,
          &quot;field&quot;: {&quot;repeat&quot;: &quot;layer&quot;},
          &quot;type&quot;: &quot;quantitative&quot;,
          &quot;title&quot;: &quot;Mean of US and Worldwide Gross&quot;
        },
        &quot;color&quot;: {
          &quot;datum&quot;: {&quot;repeat&quot;: &quot;layer&quot;},
          &quot;type&quot;: &quot;nominal&quot;
        }
      }
    }
  }
  </code></pre>
  <p>which outputs:</p>
  <p><a href="https://i.stack.imgur.com/ZxYej.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZxYej.png" alt="enter image description here" /></a></p>
  <p>But I am unable to guess how can translate <code>repeat</code> and <code>layer</code> in above vega-lite grammar to vega-lite-api calls.</p>