title: Plot multiple "columns" with VEGA-LITE and include a legend
body: <p>I have the following minimal data:</p>
  
  <pre class="lang-js prettyprint-override"><code>[
      {"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
      {"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
      {"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
      {"date": "2019-01-04", "foo": 1000,  "bar": 60, "goo": 20}
  ]
  </code></pre>
  
  <p>Which I plot using VEGA-LITE:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Embedding Vega-Lite&lt;/title&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vega@5.4.0"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="vis"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          var yourVlSpec = {
              "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
              "Title": "Insights stats",
              "description": "Overview of insights stats",
              "width": 1000,
              "height": 450,
              "data": {
                  "url": "./data.json"
              },
              "layer": [
                  {
                      "mark": "line",
                      "encoding": {
                          "x": {
                              "field": "date",
                              "type": "temporal",
                              "title": "Date"
                          },
                          "y": {
                              "field": "foo",
                              "type": "quantitative",
                              "title": "Some Foo"
                          }
                      }
                  },
                  {
                      "mark": {
                          "type": "line",
                          "stroke": "firebrick"
                      },
                      "encoding": {
                          "x": {
                              "field": "date",
                              "type": "temporal"
                          },
                          "y": {
                              "field": "bar",
                              "type": "quantitative",
                              "title": null,
                              "scale": { "domain": [0, 100] }
                          }
                      }
                  },
                  {
                      "mark": {
                          "type": "line",
                          "stroke": "red"
                      },
                      "encoding": {
                          "x": {
                              "field": "date",
                              "type": "temporal"
                          },
                          "y": {
                              "field": "goo",
                              "type": "quantitative",
                              "title": "Ratio (%)",
                              "scale": { "domain": [0, 100] }
                          }
                      }
                  }
              ],
              "resolve": { "scale": { "y": "independent" } }
          };
          vegaEmbed('#vis', yourVlSpec);
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I fail to have a proper legend for each line. What am I missing?</p>