title: Vega Lite: Color scale for bar chart
body: <p>I have this bar chart in vega lite in my <a href="https://observablehq.com/@reneelempert/quasar-sketch" rel="nofollow noreferrer">Observable notebook</a></p>
  <p>But I want to add a color scale to the bars so that the smallest numbers are red and the largest numbers are green and the numbers in between are yellow.</p>
  <p>In order to do this -- I was thinking of setting up an ordinal scale with the domain as <code>[0,5]</code> since the numbers range from 0 to 5. The range of that scale would be <code>[&quot;red&quot;, &quot;yellow&quot;, &quot;green&quot;]</code>. But I'm just not sure how to apply that ordinal color scale to a vega lite chart.  My code is below</p>
  <p><a href="https://i.stack.imgur.com/1SBkd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1SBkd.png" alt="enter image description here" /></a></p>
  <pre><code>barchart = vegalite ({
    &quot;data&quot;: {&quot;values&quot;: barChartData},
    &quot;height&quot;: {&quot;step&quot;: 17},
    &quot;title&quot;: &quot;Gold&quot;,
    &quot;encoding&quot;: {
      &quot;y&quot;: {
        &quot;field&quot;: &quot;program&quot;,
        &quot;type&quot;: &quot;ordinal&quot;,
        &quot;sort&quot;: &quot;-x&quot;
      },
      &quot;x&quot;: {
        &quot;aggregate&quot;: &quot;sum&quot;,
        &quot;field&quot;: &quot;index&quot;,
        &quot;title&quot;: &quot;Gold&quot;,
        &quot;axis&quot;: null
      }
    },
    &quot;layer&quot;: [{
      &quot;mark&quot;: &quot;bar&quot;
    }, {
      &quot;mark&quot;: {
        &quot;type&quot;: &quot;text&quot;,
        &quot;align&quot;: &quot;left&quot;,
        &quot;baseline&quot;: &quot;middle&quot;,
        &quot;dx&quot;: 3
      },
      &quot;encoding&quot;: {
        &quot;text&quot;: {&quot;field&quot;: &quot;index&quot;, &quot;type&quot;: &quot;quantitative&quot;}
      }
    }]
  })
  </code></pre>