d3.json vega covid-19

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@4"></script>    
  </head>
  <body>
    <h1>covid-19</h1>
    <div id="vis"></div>
    <script src="lib/script.js"></script>
  </body>
</html>

/* Add your styles here */



var url = "https://covid19-japan-web-api.now.sh/api/v1/total?predict=true";

d3.json(url, function(data) {
  var values = [];
  for (var i = 0; i < data.length; i++)
  {
    values.push({
      x: i,
      //x: data[i]["date"],
      y: data[i]["positive"],
      z: data[i]["death"]
    });
  }
  const spec = {
    '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
    'width': 300,
    'height': 300,
    'data': {
      'values': values
    },
    'layer': [{
      'mark': 'point',
      'encoding': {
        'x': {
          'field': 'x', 
          'type': 'quantitative'
        },
        'y': {
          'field': 'y', 
          'type': 'quantitative'
        }
      }
    }, {
      'mark': 'line',
      'encoding': {
        'x': {
          'field': 'x', 
          'type': 'quantitative'
        },
        'y': {
          'field': 'z', 
          'type': 'quantitative'
        },
        'color': {
          'value': 'tomato'
        }
      }
    }]
  };
  vegaEmbed('#vis', spec);
});