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

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.

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

Related

Vega-Lite v4 - Pivot example (and my code) throwing errors

So I am working with vega-lite-v4 (that's the version our businesses airtable extension uses) and the answer to my previous post was that I need to use the pivot transform
But any time I try and use it as it is explained in the v4 documentation (https://vega.github.io/vega-lite-v4/docs/pivot.html) it throws an error as if the pivoted field does not exist
I've used the following test data:
Airtable test data
With the following test code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Table 2",
"transform": [{
"pivot": "type",
"value": "calls",
"groupby": ["Month"]
}],
"mark": "bar",
"encoding": {
"x": {"field": "Month", "type": "nominal"},
"y": {"field": "Total", "type": "quantitative"}
}
}
And I still get the same error:
Total is not a valid transform name, inline data name, or field name from the Table 2 table:
"y": {
"field": "Total",
------------^
"type": "quantitative"
}
Even when I copy and paste the examples from the above documentation into the widget, it comes up with this error like pivot isn't making these fields
Can anyone help me figure out why this isn't working, or what to use instead?
EDIT:
So, a weird solution/workaround I found is to calculate the field as itself:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Table 2",
"transform": [{
"pivot": "type",
"value": "calls",
"groupby": ["Month"]
},
{"calculate" : "datum.Total", "as" : "newTotal"}
],
"mark": "bar",
"encoding": {
"x": {"field": "Month", "type": "nominal"},
"y": {"field": "newTotal", "type": "quantitative"}
}
}
This makes the graph behave completely as normal. I can use this for now, but it means I have to hard code each field name with a calculate transform, does this help anyone understand what's going on with this transform?
First of all, Vega and Vega-lite field names are case-sensitive, so "Month" is not the same as "month".
In your first code sample, "month" is incorrect and should be "Month":
"x": {"field": "month", "type": "nominal"},
but in the second code sample that was changed to "Month" which is correct:
"x": {"field": "Month", "type": "nominal"},
Try just correcting field name "Month" in the first code sample without calculating "newTotal":
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Table 2",
"transform": [{
"pivot": "type",
"value": "calls",
"groupby": ["Month"]
}],
"mark": "bar",
"encoding": {
"x": {"field": "Month", "type": "nominal"},
"y": {"field": "Total", "type": "quantitative"}
}
}
[EDIT: added following]
Here is a working example using your example data with pivot transform and rendered as bar chart by Vega-lite v5.2.0 with no errors.
Try using Vega-lite v5.2.0 instead of v4.
View in Vega on-line editor

How to position image on top left corner?

I am trying to position an overlayed image in the top left corner of my chart.
To that end, I am using the aggregate transform directly in the encoding of channels x, and y of the image, as it can be seen in this example.
Here is the specific code snippet of the image mark:
{
"mark": {"type":"image", "width":50, "align":"left"},
"encoding": {
"x": {"aggregate": "min", "field":"months", "type":"temporal"},
"y": {"aggregate": "max", "field":"price", "type":"quantitative"},
"url": {"value": "data/ffox.png"}
}
}
The image, is still appearing at around the middle of the y axis, and not at the top:
Image in the middle, not top
How can I place it at the top left corner?
The image is not getting displayed in top because height is not provided for that image mark. Because of that image is getting displayed in center, if you inspect your image you will see some default height. Image for default height
To bring your image on top left, just provide height as done below:
{
"mark": {"type": "image", "width": 50, "align": "left", "height": 40},
"encoding": {
"x": {"aggregate": "min", "field": "months", "type": "temporal"},
"y": {"aggregate": "max", "field": "price", "type": "quantitative"},
"url": {"value": "data/ffox.png"}
}
}
But with the aggregation specified, your image might slighly go outside the chart view, so you can provide the following way as well where you provide hardcoded x and y value for the image mark. Which will always show appropriate position for your image. Below is the code and editor url:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.1.0.json",
"width": "container",
"data": {"url": "data/sp500.csv"},
"transform": [{"timeUnit": "utcyearmonth", "field": "date", "as": "months"}],
"layer": [
{
"encoding": {
"x": {"field": "months", "type": "temporal", "title": null},
"y": {"field": "price", "type": "quantitative", "title": "Price"}
},
"layer": [
{
"mark": {
"type": "area",
"color": "#3873b9",
"fillOpacity": 0.7,
"tooltip": true
}
},
{"mark": {"type": "line", "color": "#4883c9"}}
]
},
{
"mark": {"type": "image", "width": 50, "height": 40, "align": "left"},
"encoding": {
"x": {
"datum": 0,
"type": "quantitative",
"scale": {"domain": [0, 1]},
"axis": null
},
"y": {
"datum": 0.8,
"type": "quantitative",
"scale": {"domain": [0, 1]},
"axis": null
},
"url": {"value": "data/ffox.png"}
}
}
],
"resolve": {
"axis": {"x": "independent", "y": "independent"},
"scale": {"x": "independent", "y": "independent"}
}
}
As wahab memon mentioned, the image went middle due to the missing of height property.
Simply adding back "height": 50, "baseline": "alphabetic" to mark can fix the position and the overshoot issue as well. (no need for hard coding)
Last but not least, the original code has redundant nested layers, please see the complete code below:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.1.0.json",
"width": "container",
"data": {"url": "data/sp500.csv"},
"transform": [{"timeUnit": "utcyearmonth", "field": "date", "as": "months"}],
"encoding": {
"x": {"field": "months", "type": "temporal", "title": null},
"y": {"field": "price", "type": "quantitative", "title": "Price"}
},
"layer": [
{
"mark": {
"type": "area",
"color": "#3873b9",
"fillOpacity": 0.7,
"tooltip": true
}
},
{"mark": {"type": "line", "color": "#4883c9"}},
{
"mark": {"type": "image", "width": 50, "align": "left", "height": 50, "baseline": "alphabetic"},
"encoding": {
"x": {"aggregate": "min", "field": "months", "type": "temporal"},
"y": {"aggregate": "max", "field": "price", "type": "quantitative"},
"url": {"value": "data/ffox.png"}
}
}
]
}
Vega Editor

Vega-Lite: Is it possible to have images as labels in a line chart?

I want to have images as my axis labels. I tried to use the image mark, but that did not work and that is kind of expected. Label expression is also something I tried, but that did not work if I want it to be an image. What else could I tried or is it possible at all?
Line chart example
Using the same technique in another answer, an image axis can be added via an extra layer:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"x": 0.5, "y": 0.5, "img": "data/ffox.png"},
{"x": 1.5, "y": 1.5, "img": "data/gimp.png"},
{"x": 2.5, "y": 2.5, "img": "data/7zip.png"}
]
},
"layer": [{
"mark": {"type": "image", "width": 50, "height": 50},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"},
"url": {"field": "img", "type": "nominal"}
}
}, {
"transform": [{"calculate": "-.2", "as": "axis"}],
"mark": {"type": "image", "width": 25, "height": 25},
"encoding": {
"x": {"field": "x", "type": "quantitative", "axis":{"labelExpr": "", "title": null}},
"y": {"field": "axis", "type": "quantitative", "scale": {"domain": [0, 2.5]}},
"url": {"field": "img", "type": "nominal"}
}
}],
"resolve": {"scale": {"y": "shared"}}
}
Vega Editor
===== 2021-07-20 =====
Your BarChart's x encoding uses the x field which is not evenly distributed, so it is misaligned.
If you do have the a field shown in your editor, simplest way is to replace the encoding as "x": {"field": "a", "type": "ordinal", "axis": null}
Vega Editor
Even the a field was not there, you may wanna add such a field for aligning, or even ordering, the image axis.
The last resort I can think of is window transform which is an overkill, but adds no extra value as well:
Vega Editor

Is there a way to know that Vega-lite is loading?

I am using Vega-lite to load a fairly big .csv file, so it usually take a while and nothing is displayed.
I am wondering if there is a way to know that vega-lite is currently loading, so I can embed a loading.gif to the plot before its loaded.
In this pie chart for example:
var PiChart = {
"width": 200,
"height": 200,
"description": "Donut chart with embedded data.",
"data": {"url": "tweets.csv"},
"mark": {"type": "arc", "innerRadius": 30},
"encoding": {
"theta": {"aggregate": "count", "field": "sentiment"},
"color": {
"field": "sentiment",
"type": "nominal",
"scale": {
"domain": ["VERY_NEGATIVE", "NEGATIVE", "NEUTRAL", "POSITIVE", "VERY_POSITIVE", "NOT_UNDERSTOOD"],
"range": ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600", "#c7c7c7"]
},
},
"tooltip": [{"aggregate":"count", "field": "sentiment", "type": "quantitative"}, {"field": "sentiment", "type": "ordinal"}]
},
"view": {"stroke": null}
};

How to bottom middle align a legend in Vega Lite?

In Vega Lite, I am trying to align my legend to the middle of this chart. I need something like an anchor parameter for the legend, but I can only find titleAnchor.
Chart with Legend
"legend": {
"title": "Signed NDA",
"orient": "bottom",
"titleAnchor": "middle"
}
This is how my legend looks right now. Anyone know how to do this?
This is actually possible within Vega 5.0, legend layout property, by setting the anchor property to "middle", in the legend's layout config.
Providing layout doesn't seem to be directly supported by Vega-Lite yet, but it is possible to propagate a layout definition from Vega-Lite to Vega.
Following Jake's answer, in Vega-Lite editor:
{
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {"field": "Origin", "type": "nominal"}
},
"height": 300,
"width": 400,
"config": {
"legend": {"orient": "bottom", "layout": {"bottom": {"anchor": "middle"}}}
}
}
Specifying the config at the end basically allows you to customize how the orient "bottom" should look.
There is no option to anchor the legend in the bottom center, but you can set orient: "none" and use the legendX and legendY properties to locate it exactly where you would like. For example (vega editor):
{
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"field": "Origin",
"type": "nominal",
"legend": {
"orient": "none",
"direction": "horizontal",
"legendX": 120,
"legendY": 340,
"title": null
}
}
},
"height": 300,
"width": 400
}