Recommend a site to share sample data with vega-editor to overcome the problem of "No 'Access-Control-Allow-Origin' header is present"?

Question

To demonstrate my problems, I'd share the sample data at a host, to make vega-lite specification more readable. I tried gist.github.com, and dropbox.com. But I always run into the issue of "Loading failed". Upon examination of the console output, I found the root cause is

"Access to fetch at https://gist.github.com from origin 'https://vega.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

I wonder if there is a site for public sharing/hosting temporarily my sample data that works with vega-editor?

I had wished that given vega-editor is hosted at github.io domain, it might be easier to address the issue.

EDIT: adding the sample specification with data url to gist.github.com It has the problem.

{
  "data": {"url": "https://gist.github.com/yubrshen/37479eb7637007e1ca9d703a5a56a479"},
  "mark": "line",
  "encoding": {
    "x": {"field": "estimating-date-time", "type": "temporal"},
    "y": {"field": "ETA-variance", "type": "quantitative"},
    "row": {"field": "PLATFORM"}
  }
}

EDIT1: try to expression the value to "url" appearing more like a file path:

{
  "data": {"url": "https://gist.github.com/yubrshen/37479eb7637007e1ca9d703a5a56a479?file=variances.json"},
  "mark": "line",
  "encoding": {
    "x": {"field": "estimating-date-time", "type": "temporal"},
    "y": {"field": "ETA-variance", "type": "quantitative"},
    "row": {"field": "PLATFORM"}
  }
}

but the issue is still the same.

user_2937831 · Answer

It appears that github pages is an option; for example the following works in the vega editor:

{
  "data": {
    "values": [
      {"x": 0.5, "y": 0.5, "img": "https://vega.github.io/vega-datasets/data/ffox.png"},
      {"x": 1.5, "y": 1.5, "img": "https://vega.github.io/vega-datasets/data/gimp.png"},
      {"x": 2.5, "y": 2.5, "img": "https://vega.github.io/vega-datasets/data/7zip.png"}
    ]
  },
  "mark": {"type": "image", "width": 50, "height": 50},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "url": {"field": "img", "type": "nominal"}
  }
}

Recommend a site to share sample data with vega-editor to overcome the problem of "No 'Access-Control-Allow-Origin' header is present"?

1 Answers