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

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

Related

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

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).

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.

Text overlay in heatmap

Is it possible to overlay text in selectable heatmap
https://vega.github.io/editor/#/examples/vega-lite/selection_heatmap
If I plot a heatmap of actual vs predicted for binary in the selectable heatmap, can I overlay text as True Positives, FP, TN, FN with corresponding values
and turn off legend
Here full code
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
"data": {
"values": [
{"actual": "Good", "predicted": "Bad", "count": 6386},
{"actual": "Bad", "predicted": "Good", "count": 1261},
{"actual": "Bad", "predicted": "Bad", "count": 6386},
{"actual": "Good", "predicted": "Good", "count": 24030}
]
},
"mark": {"type": "rect", "strokeWidth": 2},
"encoding": {
"y": {
"field": "actual",
"type": "nominal"
},
"x": {
"field": "predicted",
"type": "nominal"
},
"fill": {
"field": "count",
"type": "quantitative"
},
"config": {
"scale": {
"bandPaddingInner": 0,
"bandPaddingOuter": 0
}
}
}
Output like
Is it possible to extract values from index and feed to count values
"url" : {
"%context%": true,
"index": "index",
"body": {
"size":1000,
"_source": ["modelMetrics"],
}
}
"format": {"property": "hits.hits"}
},
where index has
"_source" : {
"modelMetrics" : {
"TN" : 110868,
"FP" : 6386,
"FN" : 1261,
"TP" : 24030,
}
}
You can do this using a Layered chart construct. For example (view in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
"data": {
"values": [
{"actual": "Good", "predicted": "Bad", "label": "FP", "count": 6386},
{"actual": "Bad", "predicted": "Good", "label": "FN", "count": 1261},
{"actual": "Bad", "predicted": "Bad", "label": "TN", "count": 6386},
{"actual": "Good", "predicted": "Good", "label": "TP", "count": 24030}
]
},
"encoding": {
"y": {"field": "actual", "type": "nominal"},
"x": {"field": "predicted", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "rect", "strokeWidth": 2},
"encoding": {
"fill": {"field": "count", "type": "quantitative", "legend": null}
}
},
{
"mark": {"type": "text", "dy": -5},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {
"condition": {"test": "datum.count < 10000", "value": "black"},
"value": "white"
}
}
},
{
"mark": {"type": "text", "dy": 5},
"encoding": {
"text": {"field": "count", "type": "nominal"},
"color": {
"condition": {"test": "datum.count < 10000", "value": "black"},
"value": "white"
}
}
}
],
"width": 100,
"height": 100
}

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