2

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.

Yu Shen
  • 2,770
  • 3
  • 33
  • 48

1 Answers1

1

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"}
  }
}

enter image description here

jakevdp
  • 77,104
  • 11
  • 125
  • 160
  • thanks for sharing your working example, I've added the failing specification. I wonder if the difference between vega.github.io and gist.github.com matters? – Yu Shen Dec 18 '21 at 16:57
  • Yes, I think the difference probably matters. But your example has other issues: it is a link to a gist containing JSON, not a link to a JSON file. The two are not interchangeable. – jakevdp Dec 18 '21 at 17:45
  • Oh, that's might be my problem. I haven't figured out how to express the path to the JSON from based the gist address. Do you know how to? – Yu Shen Dec 18 '21 at 19:38
  • According to https://stackoverflow.com/questions/14206307/how-do-i-embed-a-single-file-from-a-github-gist-with-the-new-gist-interface I change it to https://gist.github.com/yubrshen/37479eb7637007e1ca9d703a5a56a479?file=variances.json but still got the same error. – Yu Shen Dec 18 '21 at 19:49
  • 1
    What you need is the Raw URL (click `Raw` at the top of that page) but it suffers from the same CORS header issue that you originally asked about. You cannot use data hosted at github.com within vega-lite charts hosted at another domain. – jakevdp Dec 18 '21 at 20:19
  • I can confirm that GitHub pages works. You have to create a GitHub repository, then convert it to a GitHub pages site. You can then link to the data in vega-lite. Another option is to search for CORS proxy, which should let you proxy data from anywhere. – daviewales Dec 22 '21 at 04:41