Vega-Lite chart from OECD API - json

I have an api which I would like to use directly within Vegalite, in order for the chart to update automatically.
https://stats.oecd.org/SDMX-JSON/data/REVGBR/TOTALTAX.NES/all?startTime=1965&endTime=2021&dimensionAtObservation=allDimensions
However the api doesn't seem to be in a pleasant format.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.2.json",
"data": {
"url": "https://stats.oecd.org/SDMX-JSON/data/REV/NES.TOTALTAX.TAXGDP.OAVG?contentType=json",
"format": {
"type": "json",
"property": "dataSets[0].series['0:0:0:0'].observations"
},
"transform": [
{
"type": "formula",
"as": "year",
"expr": "parseInt(datum.key)"
},
{
"type": "formula",
"as": "Tax_revenue",
"expr": "datum.value[0]"
}
]
},
"mark": "line",
"encoding": {
"x": {"field": "year", "type": "temporal"},
"y": {"field": "Tax_revenue", "type": "quantitative"}
}
}
When looking at the data viewer, all that is shown is the values, without the years.
The values however are not clean, e.g. [24.855,null]
Is it even possible to get this api to work within vegalite?

It is possible but you need to make assumptions. As you know the query to the API starts with 1965, you can use something like this assuming the years are continuous.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.2.json",
"data": {
"name": "api",
"url": "https://stats.oecd.org/SDMX-JSON/data/REV/NES.TOTALTAX.TAXGDP.OAVG?contentType=json",
"format": {
"type": "json",
"property": "dataSets[0].series['0:0:0:0'].observations"
}
},
"transform": [
{"fold": ["0", "1", "2", "3","4","5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55"]},
{"calculate": "parseInt( datum.key) + 1965", "as": "year"},
{"calculate": "datum.value[0]", "as": "Tax_revenue"}
],
"mark": "line",
"encoding": {
"x": {"field": "year", "type": "nominal"},
"y": {"field": "Tax_revenue", "type": "quantitative"}
}
}

Related

Vega-lite display data label in grouped bar chart with multiple measures

I am trying to customize below chart to add data lablel in bars. Can you please help?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/movies.json"
},
"repeat": {"layer": ["Worldwide Gross", "US Gross"]},
"spec": {
"mark": "bar",
"encoding": {
"x": {
"field": "Major Genre",
"type": "nominal"
},
"y": {
"aggregate": "sum",
"field": {"repeat": "layer"},
"type": "quantitative",
"title": "Total Gross"
},
"color": {"datum": {"repeat": "layer"}, "title": "Gross",
"scale": {"range": ["#2a9d8f", "#e76f51"]}},
"xOffset": {"datum": {"repeat": "layer"}}
}
},
"config": {
"mark": {"invalid": null}
}
}
Visualization
Link: https://vega.github.io/editor/#/examples/vega-lite/bar_grouped_repeated
I need to display data label to this grouped bar chart.
Add labels as follows:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category": "A", "group": "x", "value": 0.1},
{"category": "A", "group": "y", "value": 0.6},
{"category": "A", "group": "z", "value": 0.9},
{"category": "B", "group": "x", "value": 0.7},
{"category": "B", "group": "y", "value": 0.2},
{"category": "B", "group": "z", "value": 1.1},
{"category": "C", "group": "x", "value": 0.6},
{"category": "C", "group": "y", "value": 0.1},
{"category": "C", "group": "z", "value": 0.2}
]
},
"encoding": {
"x": {"field": "category"},
"y": {"field": "value", "type": "quantitative"},
"xOffset": {"field": "group"},
"color": {"field": "group"}
},
"layer": [
{"mark": "bar"},
{
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "value"}}
}
]
}

Slider for chloropeth map Vega-lite

I am trying to add a slider for my chloropeth map of Europe in vega-lite, to filter the data by year. I currently have a map which just shows data from 2019 (colour coded), and I am trying to make a slider so I can change years and see how the colours have changed over time.
Here is my code so far:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 300,
"height": 300,
"data": {
"url": "https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson",
"format": {"type": "topojson", "feature": "europe"}
},
"transform": [
{
"lookup": "properties.NAME",
"from": {
"data": {
"url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
},
"key": "country",
"fields": ["percentage"]
}
}
],
"params": [
{
"name": "year",
"value": 2019,
"bind": {
"input": "range",
"min": 1985,
"max": 2019,
"step": 1,
"name": "Select the year:"
}
}
],
"projection": {"type": "naturalEarth1"},
"mark": "geoshape",
"encoding": {
"color": {
"field": "percentage",
"type": "quantitative"},
"tooltip": [
{"field": "properties.NAME", "type": "nominal", "title": "country"},
{"field": "percentage", "type": "quantitative"}
]
}
}
I have been able to do make a bar chart using the same data which updates as I move the slider.The {"filter": "datum.year==year"} is what makes my bar chart able to do this, however it does not work on my chloropeth map (I have tried to add this within the "transform" array in both, with success for my bar chart). Here is the code for my bar chart in case that helps.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "",
"title": {
"text": "Thisisatest",
"subtitle":
"hellohello Source: OurWorldInData",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"data": {
"url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
},
"height": 300,
"width": 350,
"mark": {"type": "bar", "color": "skyblue"},
"transform": [
{"filter": "datum.year==year"},
{"filter": {
"field": "country",
"oneOf": [
"United Kingdom", "Spain", "France", "Netherlands", "Portugal", "Italy", "Poland", "Albania", "Germany", "Belgium", "Austria", "Denmark"]}
}
],
"params": [
{
"name": "year",
"value": 2019,
"bind": {
"input": "range",
"min": 1985,
"max": 2019,
"step": 1,
"name": "Select the year:"
}
}
],
"encoding": {
"y": {
"field": "percentage",
"type": "quantitative",
"title": "Percentage of low carbon energy",
"axis": {"grid": false}
},
"x": {
"field": "country",
"type": "nominal",
"title": "",
"axis": {"grid": false, "labelAngle": 20},
"sort": "-y"
},
"tooltip": [
{"field": "country", "title": "Country"},
{"field": "percentage", "title": "percentage of low carbon energy"}
]
}
}
What am I am doing wrong? Would appreciate any help! :)
Thanks
It was almost correct but in your lookup transform you need to provide the fields which you are going to be required in your final data like year field. Since there was no year field the filter transform was not working.
Below is the modified config or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 300,
"height": 300,
"data": {
"url": "https://raw.githubusercontent.com//jamesjeffery77/jamesjeffery77.github.io/main/share-electricity-low-carbon_fullDataset.csv"
},
"transform": [
{
"lookup": "country",
"from": {
"data": {
"url": "https://raw.githubusercontent.com/leakyMirror/map-of-europe/master/TopoJSON/europe.topojson",
"format": {"type": "topojson", "feature": "europe"}
},
"key": "properties.NAME",
"fields": ["properties", "type", "geometry"]
}
},
{"filter": "datum.year==year"}
],
"params": [
{
"name": "year",
"value": 2019,
"bind": {
"input": "range",
"min": 1985,
"max": 2030,
"step": 1,
"name": "Select the year:"
}
}
],
"projection": {"type": "naturalEarth1"},
"mark": "geoshape",
"encoding": {
"color": {"field": "percentage", "type": "quantitative"},
"tooltip": [
{"field": "properties.NAME", "type": "nominal", "title": "country"},
{"field": "percentage", "type": "quantitative"}
]
}
}
Edit
I have inverted the main data and lookup data, which seems to bring all the years for your countries. Let me know if this works.

Arcs ordered by size in vega-lite pie chart

I'm trying to create a pie chart where the arcs are ordered by size (clockwise), but can't figure out how.
It seems that the "sort" argument in "theta" points to the default order of "color", for example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A pie chart",
"data": {
"values": [
{"category": "Category 1", "value": 4},
{"category": "Category 2", "value": 8},
{"category": "Category 4", "value": 25},
{"category": "Category 0", "value": 12}
]
},
"encoding": {
"color": {"field": "category", "type": "nominal"},
"theta": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 85}}
],
"view": {"stroke": null}
}
this is the result: arcs are ordered by reverse category name
I can sort the legend ("color") by "value", but no matter what I specify for "sort" of "theta", the arcs won't be sorted by "value" size.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A pie chart",
"data": {
"values": [
{"category": "Category 1", "value": 4},
{"category": "Category 2", "value": 8},
{"category": "Category 4", "value": 25},
{"category": "Category 0", "value": 12}
]
},
"encoding": {
"color": {"field": "category", "type": "nominal", "sort": {"field" :"value", "order": "ascending"}},
"theta": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 85}}
],
"view": {"stroke": null}
}
this is the result: legend is ordered, arcs still have the same order
It sounds like you want the order encoding. For example (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A pie chart",
"data": {
"values": [
{"category": "Category 1", "value": 4},
{"category": "Category 2", "value": 8},
{"category": "Category 4", "value": 25},
{"category": "Category 0", "value": 12}
]
},
"encoding": {
"color": {"field": "category", "type": "nominal"},
"theta": {"field": "value", "type": "quantitative", "stack": true},
"order": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 85}}
],
"view": {"stroke": null}
}

Is it possible to have columns of donut chart with gray arc indicating the missing part?

Currently, the donut chart assumed that the max value is 100%. What I would like is for the category Chinese to have a percentage of 50% with gray arc indicating the missing 50%. The two other donut charts will behave similarly in their respective column.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple donut chart with embedded data.",
"data": {
"values": [
{"category": "English", "value": 4},
{"category": "Malay", "value": 6},
{"category": "Chinese", "value": 10}
]
},
"mark": {"type": "arc", "innerRadius": 80},
"encoding": {
"column": {"field": "category"},
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal"}
},
"view": {"stroke": null}
}
It's a bit more complex, but one way to do this is to use a transform to calculate the total, and then a layer chart to plot that total in the background.
Here is an example (open in editor):
{
"data": {
"values": [
{"category": "English", "value": 4},
{"category": "Malay", "value": 6},
{"category": "Chinese", "value": 10}
]
},
"transform": [
{"joinaggregate": [{"op": "sum", "field": "value", "as": "total"}]}
],
"facet": {"column": {"field": "category"}},
"spec": {
"layer": [
{
"mark": {"type": "arc", "innerRadius": 80, "color": "lightgray"},
"encoding": {"theta": {"field": "total", "type": "quantitative"}}
},
{
"mark": {"type": "arc", "innerRadius": 80},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category"}
}
}
],
"view": {"stroke": null}
}
}

Filter by selection from referenced table

I have a single data source within datasets that I use in two concatenated charts. Now when I click on a bar in the left chart I would like to filter the right chart. See animated gif:
But is doesn't.
Click here to open in the vega-editor.
Or check the spec here::
{
"config": {"view": {"width": 400, "height": 300}},
"hconcat": [
{
"width": 100,
"selection": {"SELECT": {"type": "single", "resolve": "global"}},
"data": {"name": "table_data"},
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "Major_Genre"},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {"type": "nominal", "field": "Major_Genre"},
"fillOpacity": {
"condition": {"selection": "SELECT", "value": 1},
"value": 0.3
}
}
},
{
"width": 100,
"data": {"name": "table_data"},
"transform": [{"filter": {"selection": "SELECT"}}],
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "Major_Genre"},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {"type": "nominal", "field": "Major_Genre"}
}
}
],
"datasets": {
"table_data": [
{
"Title": "Cidade de Deus",
"Major_Genre": "Drama",
"Country_Origin": "Brazil"
},
{
"Title": "Chocolate: Deep Dark Secrets",
"Major_Genre": "Thriller/Suspense",
"Country_Origin": "India"
},
{"Title": "Fiza", "Major_Genre": "Drama", "Country_Origin": "India"},
{
"Title": "First Love, Last Rites",
"Major_Genre": "Drama",
"Country_Origin": "United States"
},
{
"Title": "Foolish",
"Major_Genre": "Comedy",
"Country_Origin": "United States"
},
{
"Title": "I Married a Strange Person",
"Major_Genre": "Comedy",
"Country_Origin": "United States"
}
]
}
}
When your selections refer to groups of points rather than single points, you need to provide an explicit fields or encodings argument to specify what points are included in the selection.
In this case, the chart will behave as expected if you specify your selection in one of the following ways:
"selection": {"SELECT": {"type": "single", "fields": ["Major_Genre"], "resolve": "global"}}
"selection": {"SELECT": {"type": "single", "encodings": ["color"], "resolve": "global"}}
"selection": {"SELECT": {"type": "single", "encodings": ["x"], "resolve": "global"}}
Here's the working chart in action: (vega editor link).