Vega-lite responsive size for column encoding facet chart - vega-lite

I have a question on how might i ensure the width/height of facet chart? it seemed that the facet has limitation in following container height/width and doesn’t seem to allow for autosizing. I’m looking to implement a responsive, resizable facet chart
Here's my vega-lite config that im trying to make it responsive. So far setting width, or autosize wouldn't work.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"style": {
"cell": {
"stroke": "transparent"
}
}
},
"mark": {
"type": "bar",
"width": {
"band": 0.7
},
"tooltip": true,
"cornerRadiusEnd": 3,
"cursor": "pointer"
},
"encoding": {
"x": {
"field": "groupBy",
"type": "nominal",
"axis": null,
"sort": {
"encoding": "x",
"order": "ascending"
},
"scale": {
"paddingOuter": 0.5
}
},
"y": {
"field": "y",
"type": "quantitative",
"aggregate": "count",
"axis": {
"title": "Number"
}
},
"tooltip": [
{
"field": "x",
"title": "Pasted field 3"
},
{
"field": "y",
"type": "quantitative",
"aggregate": "count",
"title": "Number of records"
}
],
"color": {
"scale": {
"domain": [
"Office Supplies",
"Technology",
"Furniture",
null
],
"range": [
"rgb(207, 223, 255)",
"rgb(208, 240, 253)",
"rgb(194, 245, 233)",
"rgb(238, 238, 238)"
]
},
"field": "groupBy",
"title": "Pasted field 15",
"type": "nominal"
},
"column": {
"field": "x",
"axis": {
"title": "testing"
},
"type": "nominal",
"spacing": 0,
"header": {
"titleOrient": "bottom",
"labelOrient": "bottom"
}
}
},
"transform": [],
"data": {
"values": [
{
"x": "High",
"y": "recwvEUHpISbJqckL",
"groupBy": "Office Supplies"
},
{
"x": "High",
"y": "reckQZaPsli0YcpvJ",
"groupBy": "Office Supplies"
},
{
"x": "Low",
"y": "recZiThOpq7XVfN73",
"groupBy": "Office Supplies"
},
{
"x": "Medium",
"y": "recvjzdY3x8qbGF94",
"groupBy": "Office Supplies"
},
{
"x": "Critical",
"y": "recvkzoTPyG1XY5V1",
"groupBy": "Technology"
},
{
"x": "High",
"y": "recvlmkwSHXroRzqW",
"groupBy": "Technology"
},
{
"x": "Medium",
"y": "recvmnPqANnukXq59",
"groupBy": "Technology"
},
{
"x": "Not Specified",
"y": "recvmuosdhj24sFlE",
"groupBy": "Technology"
},
{
"x": "Medium",
"y": "recvmNkfVu2XjKs94",
"groupBy": "Office Supplies"
},
{
"x": "Not Specified",
"y": "recvRlJuppQLbjODM",
"groupBy": "Furniture"
},
{
"x": "Critical",
"y": "recvUd9XcD5OzZF4b",
"groupBy": "Technology"
},
{
"x": "Not Specified",
"y": "recvVHCgzxHXFVjG3",
"groupBy": "Office Supplies"
}
]
}
}

Related

How can I add a year slider to this Ranged Dot Plot in Vega Lite?

I have a dataset with relevant values from 2000-2019, and when I load up the graph with this specification:
"data": {
"name": "chart6",
"url": "https://raw.githubusercontent.com/sebaconstable/sebaconstable.github.io/main/chart6data.csv"
},
"height": 300,
"width": 450,
"encoding": {
"x": {
"field": "average years in school",
"type": "quantitative",
"scale": {"domain": [0, 20]},
"title": "Average Years in School"
},
"y": {
"field": "Country",
"type": "nominal",
"axis": {"offset": 5, "ticks": false, "minExtent": 70, "domain": false}
}
},
"layer": [
{
"mark": "line",
"encoding": {
"detail": {"field": "Country", "type": "nominal"},
"color": {"value": "#BBBBBB"}
}
},
{
"mark": {"type": "point", "filled": true},
"encoding": {
"tooltip": [
{"field": "Country", "type": "nominal", "title": "Country"},
{"field": "QuintGap", "type": "quantitative", "title": "Difference between richest and poorest quintile"},
{"field": "Median % Pop", "type": "nominal", "title": "Median % of population in CCT programmes (2000-2019)"}
],
"color": {
"field": "Quintile",
"type": "nominal",
"title": null,
"scale": {"scheme": "inferno"}
},
"size": {
"field": "Median % Pop",
"type": "quantitative",
"legend":null,
"scale": {"range": [10, 100]}
},
"opacity": {"value": 1}
}
}
]
}
The points for every year appear on each country. I want to make it so it has a year slider and then only the two points for the selected year show.
I have tried many things. I added:
"transform": [
{"filter": {"field": "Quintile", "oneOf": ["Poorest Quintile", "Richest Quintile"]}},
{"filter": "datum.Year==selecta"}
],
"params": [
{
"name": "selecta",
"value": [{"year":2019}],
"bind": {
"input": "range",
"min": 2000,
"max": 2019,
"step": 1,
"name": "Select year:"
}
}
],
this code above the first encoding, and that successfully creates a slider (which filters to the relevant data correctly) however the rest of the chart disappears. I also tried adding a filter to "oneOf" the 20 years, however this made the visualisation dissapear.
I feel that I'm quite close to the solution but after several hours can't quite figure it out. Any help is much appreciated!
Here you go.
{
"data": {
"name": "chart6",
"url": "https://raw.githubusercontent.com/sebaconstable/sebaconstable.github.io/main/chart6data.csv"
},
"transform": [{"filter": "datum.Year==selecta"}],
"params": [
{
"name": "selecta",
"value": [2019],
"bind": {
"input": "range",
"min": 2000,
"max": 2019,
"step": 1,
"name": "Select year:"
}
}
],
"height": 300,
"width": 450,
"encoding": {
"x": {
"field": "average years in school",
"type": "quantitative",
"scale": {"domain": [0, 20]},
"title": "Average Years in School"
},
"y": {
"field": "Country",
"type": "nominal",
"axis": {"offset": 5, "ticks": false, "minExtent": 70, "domain": false}
}
},
"layer": [
{
"mark": "line",
"encoding": {
"detail": {"field": "Country", "type": "nominal"},
"color": {"value": "#BBBBBB"}
}
},
{
"mark": {"type": "point", "filled": true},
"encoding": {
"tooltip": [
{"field": "Country", "type": "nominal", "title": "Country"},
{
"field": "QuintGap",
"type": "quantitative",
"title": "Difference between richest and poorest quintile"
},
{
"field": "Median % Pop",
"type": "nominal",
"title": "Median % of population in CCT programmes (2000-2019)"
}
],
"color": {
"field": "Quintile",
"type": "nominal",
"title": null,
"scale": {"scheme": "inferno"}
},
"size": {
"field": "Median % Pop",
"type": "quantitative",
"legend": null,
"scale": {"range": [10, 100]}
},
"opacity": {"value": 1}
}
}
]
}

my picked_store on Vega-lite is not functioning. I'm wanting to select filter datapoints by year

This element of my Vega-lite does not pick up on the desired data. Im wanting the selector to filter data, depending upon the net-zero year
Are my options in the wrong format? Is having a mix of integers and "No Target Selected" invalidating my picked_store?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Equal earth map depicting CO2 emissions per capita. Some countries did not produce any estimates.",
"title": {
"text": "Greenhouse Gas Emissions Against CCS Readiness",
"subtitle": "CO₂ emissions (metric tonne per capita). Source: Our World in Data",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "rgba(58, 59, 60)"
},
"height": 500,
"width": 545,
"background": null,
"data": {
"url": "https://raw.githubusercontent.com/jameseconnolly/jameseconnolly.github.io/main/Carbon_Capture_Requirement.csv",
"format": {"type": "csv"}
},
"layer": [
{
"selection": {
"picked": {
"empty": "none",
"bind": {
"Net-zero Target": {
"input": "select",
"options": [
"No Target Selected",
0,
2000,
2030,
2035,
2040,
2045,
2050,
2053,
2060,
2065,
2070
],
"name": "Net-zero Target:"
}
},
"type": "single",
"fields": ["Net-zero Target"]
},
"grid": {
"type": "interval",
"bind": "scales",
"on": "[mousedown, window:mouseup] > window:mousemove!",
"translate": "[mousedown, window:mouseup] > window:mousemove!",
"zoom": "wheel!",
"resolve": "global"
}
},
"mark": {"type": "point", "filled": true},
"encoding": {
"color": {
"value": "grey",
"condition": {
"field": "Cluster",
"selection": "picked",
"type": "nominal",
"legend": null
}
},
"size": {
"value": 60,
"condition": {"value": 120, "selection": "picked"}
},
"opacity": {
"value": 0.4,
"condition": {"value": 1, "selection": "picked"}
},
"x": {
"field": "Carbon Capture Requirement",
"scale": {"zero": false},
"type": "quantitative",
"title": null,
"axis": {
"grid": false,
"title": "Carbon Capture and Storage Readiness"
}
},
"y": {
"field": "log_GHG",
"scale": {"zero": false},
"type": "quantitative",
"axis": {
"grid": false,
"title": "Log Greenhouse Gas Emissions (MT CO2e)"
}
}
}
},
{
"data": {"values": [{"y": "17", "x": "0"}, {"y": "23", "x": "90"}]},
"mark": {"type": "line", "strokeDash": [9, 1], "color": "#ff0101"},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
},
{
"mark": {"type": "text", "x": 540, "align": "right", "y": 20, "size": 25},
"transform": [{"calculate": "0.1", "as": "R2"}],
"encoding": {"text": {"type": "nominal", "field": "R2"}}
}
]
}
Is the following what you want?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Equal earth map depicting CO2 emissions per capita. Some countries did not produce any estimates.",
"title": {
"text": "Greenhouse Gas Emissions Against CCS Readiness",
"subtitle": "CO₂ emissions (metric tonne per capita). Source: Our World in Data",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "rgba(58, 59, 60)"
},
"height": 500,
"width": 545,
"data": {
"url": "https://raw.githubusercontent.com/jameseconnolly/jameseconnolly.github.io/main/Carbon_Capture_Requirement.csv",
"format": {"type": "csv"}
},
"layer": [
{
"params": [
{
"name": "year",
"select": {"type": "point", "fields": ["Net-zero Target"]},
"bind": {
"input": "select",
"options": [
"",
"2000.0",
"2030.0",
"2050.0"
]
}
}
],
"mark": {"type": "point", "filled": true},
"encoding": {
"color": {
"condition": {
"param": "year",
"field": "Net-zero Target",
"type": "nominal"
},
"value": "grey"
},
"size": {"value": 60},
"opacity": {"value": 0.4},
"x": {
"field": "Carbon Capture Requirement",
"scale": {"zero": false},
"type": "quantitative",
"title": null,
"axis": {
"grid": false,
"title": "Carbon Capture and Storage Readiness"
}
},
"y": {
"field": "log_GHG",
"scale": {"zero": false},
"type": "quantitative",
"axis": {
"grid": false,
"title": "Log Greenhouse Gas Emissions (MT CO2e)"
}
}
}
},
{
"data": {"values": [{"y": "17", "x": "0"}, {"y": "23", "x": "90"}]},
"mark": {"type": "line", "strokeDash": [9, 1], "color": "#ff0101"},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
},
{
"mark": {"type": "text", "x": 540, "align": "right", "y": 20, "size": 25},
"transform": [{"calculate": "0.1", "as": "R2"}],
"encoding": {"text": {"type": "nominal", "field": "R2"}}
}
]
}

Error: Undefined data set name: "source_1" in Vega-Lite interactive charts

I am making an interactive dashboard using Vega-Lite. The end graph has to look like this:
Vega-Lite Dashboard
The code I have so far works perfectly fine for the bar chart and map, but when I draw the histogram it gives following error:
Undefined data set name: "source_1"
This is the code I have so far:
"$schema": "https://vega.github.io/schema/vega-lite/v5.json"
"title": {
"text": "Exploring Irish",
"anchor": "middle",
"fontSize": 20,
"offset": 20,
"color": "brown"
},
"vconcat":[
{ "hconcat": [
{
"width": 500,
"height": 700,
"projection": {
"type": "conicConformal"
},
"layer": [
{
"data": {
"url": "https://gist.githubusercontent.com/carsonfarmer/9791524/raw/b27ca0d78d46a84664fe7ef709eed4f7621f7a25/irish-counties-segmentized.topojson",
"format": {
"type": "topojson",
"feature": "counties"
}
},
"transform": [{
"lookup": "id",
"from": {
"data": {"url": "https://raw.githubusercontent.com/colmr/vis_class/master/FakeAttractionDetails.csv"},
"key": "County",
"fields": ["Population"]
}
}],
"mark": {
"type": "geoshape",
"stroke": "white",
"fill":"#ccc"
}
},
{
"data": {
"url": "https://raw.githubusercontent.com/colmr/vis_class/master/FakeAttractionDetails.csv"
},
"mark": "circle",
"params": [{
"name": "Attrac",
"select": {"type": "point", "fields": ["Type"]},
"bind": "legend"
}],
"encoding": {
"longitude": {
"field": "Longitude",
"type": "quantitative"
},
"latitude": {
"field": "Latitude",
"type": "quantitative"
},
"color":{"field":"Type", "type":"nominal", "scale": {"range": ["#E69F00", "#0072B2", "#CC79A7","#009E73","#56B4E9"]}},
"size": {"value": 40},
"opacity": {"condition": {"param": "Attrac", "value": 1},
"value": 0},
"tooltip": [
{"field": "Name", "type": "nominal", "title": "Accommodation"},
{"field": "Type", "type": "nominal", "title": "Property Type"},
{"field": "Telephone", "type": "nominal", "title": "Contact"}
],
"href": {"field": "Url", "type": "nominal"}
}
}
]
},
{
"data": {
"url": "https://raw.githubusercontent.com/colmr/vis_class/master/FakeAttractionDetails.csv"
},
"width": 335,
"height": 700,
"mark": "bar",
"params": [{
"name": "Attrac",
"select": {"type": "point", "fields": ["Type"]},
"bind": "legend"
},
{ "name": "Attrac",
"select": {"type": "point", "encodings": ["y"]}
}
],
"encoding": {
"y": {
"field": "AddressRegion",
"type": "nominal",
"sort": {
"op": "count",
"field": "Type",
"order": "descending"
},
"axis":{"title":null, "labelFontSize": 15}
},
"x": {
"field": "Type",
"type": "nominal",
"aggregate":"count",
"axis":{"title":"Total Accommodations", "titleFontSize":15}
},
"color":{"field":"Type", "type":"nominal",
"scale": {"range": ["#E69F00", "#0072B2", "#CC79A7","#009E73","#56B4E9"]}
},
"opacity": {"condition": {"param": "Attrac", "value": 1},
"value": 0.05},
"order": {"aggregate": "count", "field": "Type", "type": "nominal", "sort": "descending"}
}
}
]
},
{
"data": {"url": "https://raw.githubusercontent.com/colmr/vis_class/master/FakeAttractionDetails.csv"},
"width": 950,
"height": 45,
"mark": "bar",
"params": [{
"name": "Attrac",
"select": {"type": "point", "fields": ["Type"]},
"bind": "legend"},
{ "name": "Attrac",
"select": {"type": "interval", "encodings": ["x"]}
}],
"encoding": {
"x": {
"field": "Popularity",
"bin": true,
"type": "quantitative"
},
"y": {"aggregate": "count"},
"color":{"field":"Type", "type":"nominal",
"scale": {"range": ["#E69F00", "#0072B2", "#CC79A7","#009E73","#56B4E9"]}},
"opacity": {"condition": {"param": "Attrac", "value": 1},
"value": 0.02}
}
}
],
"config": {
"legend": {
"orient":"top-left", "labelFontSize":15, "titleFontSize":15
}, "tick": {"thickness": 1.5, "bandSize": 18}
}
}
I tried making the histogram with another csv file and that worked fine. Any idea what is wrong with this dataset or this code?
It looks like there's some issue with specifying the same data URL in multiple places in the chart. If you move the data specification to the top level, it appears to work:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/colmr/vis_class/master/FakeAttractionDetails.csv"
},
...

Does anyone have an explanation as to why this graph is being made on vega?

Am trying to make a graph in vegalite whereby i show the evolution of stock prices overtime. Intuitively this should be very easy however for some reason only two lines seem to get output and they aren't reflective of the stock prices at all. Is there something wrong with my data or am i missing something quite basic?
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Cases: UK nations",
"subtitle": [
"New cases by publish date, rolling rate"
],
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"background": "whitesmoke",
"width": 800,
"height": 600,
"data": {
"url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
"format": {"type": "csv"}},
"layer": [
{
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Open", "type": "quantitative"},
"color": {
"field":"Stockname",
"type": "nominal"
}
},
"layer": [
{"mark": "line"},
{
"params": [
{
"name": "label",
"select": {
"type": "point",
"encodings": ["x"],
"nearest": true,
"on": "mouseover"
}
}
],
"mark": "point",
"encoding": {
"opacity": {
"condition": {"param": "label", "empty": false, "value": 1},
"value": 0
}
}
}
]
},
{
"transform": [{"filter": {"param": "label", "empty": true}}],
"layer": [
{
"mark": {"type": "rule", "color": "grey"},
"encoding": {
"x": {"type": "temporal", "field": "Date", "aggregate": "min"}
}
},
{
"encoding": {
"text": {"type": "quantitative", "field": "Open"},
"x": {"type": "temporal", "field": "Date", "title": "Month"},
"y": {
"type": "quantitative",
"field": "Open",
"title": "Price"
}
},
"layer": [
{
"mark": {
"type": "text",
"stroke": "white",
"strokeWidth": 0.5,
"align": "left",
"dx": 5,
"dy": -5
}
},
{
"mark": {"type": "text", "align": "left", "dx": 5, "dy": -5},
"encoding": {"color": {"type": "quantitative"}}
}
]
}
]
}
],
"config": {}
}
Four of your stocks have identical data, so the lines are hidden below the last one drawn. You can see this by faceting your dataset:
{
"data": {
"url": "https://raw.githubusercontent.com/andrewsnowdon/andrewsnowdon.github.io/main/graph1megasheet.csv",
"format": {"type": "csv", "parse": {"Date": "date:'%d/%m/%Y'"}}
},
"mark": "line",
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Open", "type": "quantitative"},
"facet": {"field": "Stockname", "type": "nominal", "columns": 3}
}
}
Notice the parse argument to the data format; this is required for correct parsing of your date entries (as mentioned in https://stackoverflow.com/a/70658380/2937831).

How to highlight the zoomed in bar and know the details of that bar in vega-lite?

I am able to create the overview details bar graph and zoomed-in nicely when I select the range in the bottom graph. But I am having difficulty to highlight the bars in the zoomed-in graph and also know what bars have been selected.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"actions": false,
"data": {
"values": [
{ "created": 1595053277243 },
{ "created": 1595053277244 },
{ "created": 1595055277243 },
{ "created": 1594880606860 },
{ "created": 1594880604261 }
]
},
"vconcat": [{
"width": 1500,
"height": 300,
"selection": {
"highlight": {"type": "single", "empty": "none", "on": "mouseover"},
"select": {"type": "multi"}
},
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer"
},
"encoding": {
"x": {
"field": "created",
"type": "temporal",
"scale": {"domain": {"selection": "brush"}},
"axis": {"title": ""},
"timeUnit": "utcyearmonthdatehoursminutes",
"update": {
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"test": {
"and": [
{"selection": "select"},
"length(data(\"select_store\"))"
]
},
"value": 2
},
{"selection": "highlight", "value": 1}
],
"value": 0
}
}
},
"y": {
"field": "created",
"type": "quantitative",
"aggregate": "count"
}
},
"config": {
"scale": {
"bandPaddingInner": 0.2
}
}
}, {
"width": 1500,
"height": 100,
"padding": 10,
"mark": "bar",
"selection": {
"brush": {"type": "interval", "encodings": ["x"]}
},
"encoding": {
"x": {
"field": "created",
"type": "temporal",
"timeUnit": "utcyearmonthdatehours"
},
"y": {
"field": "created",
"type": "quantitative",
"aggregate": "count"
}
}
}]
}
I tried to put the fill-opacity and stroke-width in encoding but doesn't seem to work. I also tried to patch the compiled vega in vega-embed to listen to the bar click event but it doesn't listen to the top (zoomed in) graph.
Example of what I am trying to do
Vega-Lite encodings have no update property. You can specify the features directly in the encoding mapping:
"encoding": {
"x": {
"field": "created",
"type": "temporal",
"scale": {"domain": {"selection": "brush"}},
"axis": {"title": ""},
"timeUnit": "utcyearmonthdatehoursminutes"
},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"test": {
"and": [
{"selection": "select"},
"length(data(\"select_store\"))"
]
},
"value": 2
},
{"selection": "highlight", "value": 1}
],
"value": 0
},
"y": {"field": "created", "type": "quantitative", "aggregate": "count"}
}
Open the Chart in the Vega Editor