Animation in Vega/Lite - vega

I tried to implement an animation similar to the one showed in https://vimeo.com/177767802 (min 2:30)
My code is the following:
{
"data": {
"values": [
{"A": 2,"B": 3,"C": 4,"D": "a"},
{"A": 1,"B": 2,"C": 1,"D": "a"},
{"A": 4,"B": 5,"C": 15,"D": "b"},
{"A": 9,"B": 10,"C": 80,"D": "b"}
]
},
"mark": "circle",
"select": {"id": {"type": "point","on": "mauseover"}},
"encoding": {
"x": {"field": "A","type": "quantitative"},
"y": {"field": "B","type": "quantitative"},
"color": [
{"if": "id","field": "D","type": "nominal"},
{"value": "grey"}
],
"size": {"value": 100}
},
"config": {"mark": {"fillOpacity": 0.5}}
}
Essentially it is the same code as in the video, with the only difference that I used a smaller data set which (I took from H. Wickham.)
I tried to render the plot using the Vega-Lite editor (https://vega.github.io/vega-editor/?mode=vega-lite&renderer=svg). The resulting scatterplot is correct, the circles are grey (as they should be), but it does not display any animation and the legend is broken.
My question is whether there is something wrong with the code, something that I overlooked. In case the code is right, but the problem is that I used Vega-Lite 1.0 instead of Vega-Lite 2.0 is there a way to use a Vega-Lite 2.0 (fully understanding the risks of using an alfa version code) in the Vega-Lite editor?

It's now 2021, one may also check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts

You can try Vega 3 and Vega-Lite 2 with selections at https://vega.github.io/editor. We will keep updating the deployed versions.

Vega-lite does not currently support selection, though it will in the upcoming 2.0 release. This video is a preview of interactive functionality that will be available later this year.

Related

CosmosDB source returning DF-SYS-01

I've built some pipelines and had success importing data from most of my CosmosDB tables, but this one constantly gives me an error which I don't understand. I think it might be caused by table structure, but would highly appreciate second opinion and possible solutions.
Table item:
{
"id": "someGuid",
"name": "someString",
"pins": [
{
"type": "someString",
"latitude": 47.03923,
"longitude": -122.89136,
"name": "someString"
},
{
"type": "someString",
"latitude": 28.53823,
"longitude": -81.37739,
"name": "someString"
}
],
"_rid": "vj04AOrfr2s8CT0AAAAAAA==",
"_self": "dbs/vj04AA==/colls/vj04AOrfr2s=/docs/vj04AOrfr2s8CT0AAAAAAA==/",
"_etag": "\"ac00ddc8-0000-0700-0000-5e7428230000\"",
"_attachments": "attachments/",
"_ts": 1584670755
}
Columns are identified correct in Source.Projection Tab where pins are []string, but source can't be loaded ((
"{"message":"at : (StructType(StructField(area,StringType,true), StructField(date,StringType,true), StructField(resultType,StringType,true), StructField(results,ArrayType(StringType,true),true), StructField(test,StringType,true)),StringType) (of class scala.Tuple2). Details:at : (StructType(StructField(area,StringType,true), StructField(date,StringType,true), StructField(resultType,StringType,true), StructField(results,ArrayType(StringType,true),true), StructField(test,StringType,true)),StringType) (of class scala.Tuple2)","failureType":"UserError","target":"Pins","errorCode":"DFExecutorUserError"}"
Was able to solve it by : 1. restarting ADF session 2. Resetting schema for data source - it automatically picked correct schema. Hopefully this answer will help someone in the feature.

How to load a specific Topojson with Vega

I am new to Vega and I would like to load this topojson with Vega :
https://github.com/deldersveld/topojson/blob/master/countries/france/fr-departments.json
I have already followed the airport tutorial but I dont know what to write in the "projections" and "format" field to insert my topojson.
Thanks,
This is a late response but posting as it could be useful for others.
Here are the key attributes/changes for the map to work:
"feature": "FRA_adm2" in data[0].format. I picked this from the topojson's objects key
"field": "properties.ID_1". Important for scale, legend, map fill. I picked this from the topojson's objects.FRA_adm2.geometries[0].properties, assuming that's the unique sub-region key.
define a projection and use it the mark's transform attribute
...
"data": [{
"name": "table",
"url": "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/france/fr-departments.json",
"format": {"type": "topojson", "feature": "FRA_adm2"}
}],
...
"projections": [{
"name": "projection",
"size": {"signal": "[width, height]"},
"fit": {"signal": "data('table')"},
"type": "mercator"
}],
...
"marks": [{
...
"transform": [{"type": "geoshape", "projection": "projection"}]
}]
...
specification
Vega specification: link

Schema.org PriceSpecification with a sale price

I'm currently building a Schema.org template for an ecommerce website, for the purposes of generating a Google Shopping Feed.
I'm struggling to understand the correct way to define a sale price - i.e. a product which has a temporary reduced price.
The options I've considered areL
a single "Offer" with multiple "PriceSpecification" items
multiple "Offer" items with a single "PriceSpecification"
or maybe something else completely?
Single "Offer" with multiple "PriceSpecification" items
"offers": {
"#type": "Offer",
"url": "https://kx.com/url",
"itemCondition": "http://schema.org/UsedCondition",
"availability": "http://schema.org/InStock",
"PriceSpecification": [
{
"#type": "PriceSpecification",
"price": 15.00,
"priceCurrency": "USD"
},
{
"#type": "PriceSpecification",
"price": 15.00,
"priceCurrency": "USD",
"validFrom": "2020-01-01",
"validThrough": "2020-02-01",
}
],
},
Multiple "Offer" items with a single "PriceSpecification"
"offers": [
{
"#type": "Offer",
"url": "https://kx.com/url",
"itemCondition": "http://schema.org/UsedCondition",
"availability": "http://schema.org/InStock",
"PriceSpecification": [
{
"#type": "PriceSpecification",
"price": 15.00,
"priceCurrency": "USD"
}
],
},
{
"#type": "Offer",
"url": "https://kx.com/url",
"itemCondition": "http://schema.org/UsedCondition",
"availability": "http://schema.org/InStock",
"PriceSpecification": [
{
"#type": "PriceSpecification",
"price": 15.00,
"priceCurrency": "USD",
"validFrom": "2020-01-01",
"validThrough": "2020-02-01",
}
],
}
]
},
Or is it something completely different? I'm struggling to find any conclusive documentation around this.
I'd note that Google strongly recommends the priceValidUntil value on Offer. I also usually use the rule of thumb that your Structured Data should match what's in your markup, so I think the starting point of the sale is likely unnecessary, especially for a Google shopping feed.
If I were approaching this, I feel the safe route would be updating your Product structured data along with the content on the day of the sale, using the priceValidUntil field to note when that sale ends, then removing the attribute and updating the price once that date hits. You'd end up with something like:
"offers": {
"#type": "Offer",
"url": "https://kx.com/url",
"itemCondition": "http://schema.org/UsedCondition",
"availability": "http://schema.org/InStock",
"price": 15.00,
"priceCurrency": "USD",
"priceValidUntil": "2/1/2020"
}
In this example, on 2/1/2020 the priceValidUntil attribute would be removed and the price attribute would update, along with the content on the page.
Your first example does validate in the Structured Data Testing Tool, but I don't think it will do you any good. I can see where you might want to advertise a sale ahead of time, but as far as I know a Google Shopping Feed/Carousel does not announce sales that are going to happen - just prices that are happening.
A final note that while priceSpecification does validate on the testing tool and is applicable to a product, details around it seem a bit vague and I'd be hesitant in expecting it to provide much value. priceSpecification on schema.org has no example of it being used in a product (although again, not to say that means it is wrong).

Latest one video uploaded in youtube channel

I need to show the thumbnail of the latest video on my youtube channel on my website and add a link to that video. While using the API parameter date it's showing the first video in that channel. Instead of that, I need the last published video details how to solve this
This is what I used as I require only one last video
https://www.googleapis.com/youtube/v3/search?key=[key]&channelId=[channel-id]&part=snippet,id&order=relevance&maxResults=1
(option 1)
You could try replacing order=relevance with order=date
try:
https://www.googleapis.com/youtube/v3/search?key=[key]&channelId=[channel-id]&part=snippet,id&order=date&maxResults=1
(option 2)
You could also try using publishedAfter command (which takes a year-month-day format).
Example: publishedAfter=2019-03-25T00:00:00Z (because yesterday was March 25th).
try:
https://www.googleapis.com/youtube/v3/search?key=[key]&channelId=[channel-id]&part=snippet,id&publishedAfter=2019-03-25T00:00:00Z&order=date&maxResults=1
(option 3)
Use your programming language to fetch / read the HTML source-code of the channel's uploads page. The first thumbnail listed after gridVideoRenderer is the latest, along with relevant URL.
Example steps:
1) Go to user's uploads page and use "view source" option to see the HTML text (source code).
This text is what your programming language should show you when you http request the link of the channel's uploads.
https://www.youtube.com/user/MARVEL/videos
2) After acquiring (or viewing) the source code
From there find position of the word gridVideoRenderer.
Then starting after position, now find the first occurence of word "url":".
That is the URL. Extract manually by hand or write code to do it automatically.
PS: Replace any unicode in the link, like \u0026 with &.
https://i.ytimg.com/vi/QuP7V2gKgPI/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDBeSfAIiCdLDKtA8h2G-AZqk-xhQ
I tried "option 1" with my own Key, and got the correct response as far as which "video" from the "Channel" - NO THUMBNAILs, just references to it/them, code follows:
{
"kind": "youtube#searchListResponse",
"etag": "EymHvUd1w4o13UcSUT0C9YINu3o",
"nextPageToken": "CAEQAA",
"regionCode": "US",
"pageInfo": {
"totalResults": 181,
"resultsPerPage": 1
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "23QGL4Y9Du8EXMntX5ZNdr1F7_k",
"id": {
"kind": "youtube#video",
"videoId": "RRQjUvoSuKU"
},
"snippet": {
"publishedAt": "2022-11-13T15:09:07Z",
"channelId": "UCbhMYK2QQXgHjgnMN3zegRQ",
"title": "All Things Closely",
"description": "Luke 1:1-4.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/RRQjUvoSuKU/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/RRQjUvoSuKU/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/RRQjUvoSuKU/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "Restoration Church Homestead",
"liveBroadcastContent": "none",
"publishTime": "2022-11-13T15:09:07Z"
}
}
]
}
THAT's all that showed on a browser page, no Thumbnails-just code, but could not figure out how to get any code in the string to PLAY that video ...
any ideas?
I would love to just have it as a LINK rather than any other scripts loaded on the server. I'm missing something, probably simple I bet, to get the returned video related to the data to play.

Sencha touch 2, printing nested JSON array using xtemplate

I am developing a simple movie listing app.
I am using rotten tomatoes api. following is the json :
movies": [{
"id": "771310572",
"title": "Cloud Atlas",
"year": 2012,
"mpaa_rating": "R",
"runtime": 163,
"release_dates": {
"theater": "2012-10-26"
},
"ratings": {
"critics_rating": "Fresh",
"critics_score": 80,
"audience_score": 98
},
"synopsis": "Cloud Atlas explores how the actions and consequences of individual lives impact one another throughout the past, the present and the future. Action, mystery and romance weave dramatically through the story as one soul is shaped from a killer into a hero and a single act of kindness ripples across centuries to inspire a revolution in the distant future. Each member of the ensemble appears in multiple roles as the stories move through time. -- (C) Warner Bros.",
"posters": {
"thumbnail": "http://content6.flixster.com/movie/11/16/71/11167192_mob.jpg",
"profile": "http://content6.flixster.com/movie/11/16/71/11167192_pro.jpg",
"detailed": "http://content6.flixster.com/movie/11/16/71/11167192_det.jpg",
"original": "http://content6.flixster.com/movie/11/16/71/11167192_ori.jpg"
},
"abridged_cast": [{
"name": "Tom Hanks",
"id": "162655641",
"characters": ["Dermot 'Duster' Hoggins", "Dr. Henry Goose", "Isaac Sachs", "Valleysman Zachry"]
}, {
"name": "Halle Berry",
"id": "162652386",
"characters": ["Jocasta Ayrs", "Luisa Rey", "Meronym"]
}, {
"name": "Jim Broadbent",
"id": "162653369",
"characters": ["Vyvyan Ayrs"]
}, {
"name": "Hugo Weaving",
"id": "162709905",
"characters": ["Bill Smoke", "Nurse Noakes", "Old Georgie"]
}, {
"name": "Jim Sturgess",
"id": "563717190",
"characters": ["Adam Ewing", "Hae-Joo Im"]
}]
I am able to get the first list view showing the list of movies and ontap on movie list item, I am able to load the next view to show the movie details.
I am stuck in displaying abridged_cast in the xtemplate. if I use {abridged_cast} the page displays object, Object.
I am unable to find any functions which will extract the values from this array and display.
How to display the array content in the template?
Thanks.