I need to plot the state transition of different agents in a 24h span. I can visualize the transitions:
But I need this to be a 24h span (from 00:00 to 00:00 of the next day)
I tried adding scaling:
"timeUnit": "hours",
"scale": {"domain": [{"hours": 0}, {"hours": 24}]}
And now I see the time span in my X axis, but the visualization is broken:
This is my code in Vega Lite Editor
Thanks
I was missing the timeUnit in the x2 axis, also setting it to ucthours fixes the time difference.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A status timeline",
"data": {
"values": [
{
"agent": "sarah",
"start": "2023-01-13T10:36:53.937Z",
"status": "Transition",
"end": "2023-01-13T11:38:53.937Z"
},
{
"agent": "sarah",
"start": "2023-01-13T11:38:53.937Z",
"status": "Offline",
"end": "2023-01-13T15:39:53.937Z"
},
{
"agent": "sarah",
"start": "2023-01-13T15:39:53.937Z",
"status": "Online",
"end": "2023-01-13T16:40:26.637Z"
},
{
"agent": "sarah",
"start": "2023-01-13T16:40:26.637Z",
"status": "Training",
"end": "2023-01-13T18:45:26.637Z"
},
{
"agent": "gustavo",
"start": "2023-01-13T07:36:53.937Z",
"status": "Transition",
"end": "2023-01-13T08:38:53.937Z"
},
{
"agent": "gustavo",
"start": "2023-01-13T08:38:53.937Z",
"status": "Offline",
"end": "2023-01-13T10:39:53.937Z"
},
{
"agent": "gustavo",
"start": "2023-01-13T10:39:53.937Z",
"status": "Online",
"end": "2023-01-13T12:40:26.637Z"
},
{
"agent": "gustavo",
"start": "2023-01-13T12:40:26.637Z",
"status": "Training",
"end": "2023-01-13T14:45:26.637Z"
}
]
},
"mark": "rect",
"encoding": {
"y": {"field": "agent"},
"x": {
"axis": {"title": "Status Timeline"},
"field": "start",
"type": "temporal",
"timeUnit": "utchours",
"scale": {
"domain": [{"hours": 0}, {"hours": 24}],
"padding": 0
}
},
"x2": {"field": "end", "timeUnit": "utchours"},
"color": {"field": "status", "type": "nominal"}
}
}
Related
I have the following dashboard:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Domain Breakout Breakout",
"width": "container",
"title": {
"text": ["Build number by service name"],
"align": "center",
"dy": -10,
"fontWeight": "bold",
"color": "#4f597a",
"fontSize": 13,
"font": "Montserrat,sans-serif"
},
"config": {"axis": {"grid": true, "tickBand": "extent"}},
"data": {
"values": [
{
"service": "service1",
"build": 5555,
"env": "dev"
},
{
"service": "service2",
"build": 5555,
"env": "test"
},
{
"service": "service3",
"build": 5555,
"env": "staging"
},
{
"service": "service4",
"build": 5555,
"env": "prod"
},
{
"service": "service4",
"build": 5225,
"env": "prod"
}
]
},
"transform": [
{"pivot": "env", "value": "build", "groupby": ["env", "service","build"]}
],
"mark": "text",
"encoding": {
"x": {
"field": "env",
"type": "ordinal",
"sort": "descending",
"axis": {
"title": null,
"labelAngle": 0,
"labelFontWeight": "bold",
"labelColor": "#4f597a",
"labelFontSize": 20,
"labelPadding": 20,
"orient": "top"
}
},
"y": {
"field": "service",
"type": "ordinal",
"sort": {"field": "service", "order": "descending", "op": "sum"},
"axis": {
"title": null,
"labelAngle": 0,
"labelFontWeight": "bold",
"labelColor": "#4f597a",
"labelFontSize": 10,
"labelPadding": 5
}
}
},
"layer": [
{
"mark": "rect",
"width": 1000,
"encoding": {
"fill": {
"legend": null,
"field": "build",
"type": "quantitative",
"scale": {"range": ["#ecf9ff", "#c6efff", "#7ad9ff", "#42caff"]}
}
}
},
{
"mark": {
"type": "text",
"fontSize": 8,
"font": "Montserrat,sans-serif",
"align": "center"
},
"encoding": {"text": {"field": "build"}}
}
]
}
I have a use case in which new data is inserted with the same service name and env name but with a different build number. In this case:
{
"service": "service4",
"build": 5555,
"env": "prod"
},
{
"service": "service4",
"build": 5558,
"env": "prod"
}
The issue is the cell [service4][prod] has to layer the "old" value and the new value.
Is there an option in vega to get the last inseted value or something similar?
Link the dash: Link
You can use a combination of joinaggregate and filter transform to get the max of build number. i.e. it will filter out the lower values. e.g.
{
"joinaggregate": [{"op": "max", "field": "build", "as": "MaxBuild"}],
"groupby": ["service"]
},
{
"filter":"datum.build >= datum.MaxBuild"
}
Editor
I am using the following code to plot a bubble plot using vega-lite. I want to transform values as I change the year value using the slider. But it's not working.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Drag the sliders to highlight points.",
"data": {
"url": "https://raw.githubusercontent.com/shre2398/InformationVisualization/main/gapminder.tsv",
"format": {
"type": "tsv"
}
},
"title": {
"text": "Gapminder Global Indicators",
"anchor": "middle",
"fontSize": 16,
"fontWeight": 700
},
"config": {
"axis": {
"titleFontSize": 13,
"titleFontWeight": "bold"
}
},
"params": [{
"name": "CurrentYear",
"value": [{"year": 1977}],
"select": {"type": "point", "fields": ["year"]},
"bind": {
"year": {"input": "range", "min": 1952, "max": 2007, "step": 5}
}
},{
"name": "View",
"select": "interval",
"bind": "scales"
}],
"width": 650,
"height": 400,
"mark": {
"type": "circle",
"opacity": 0.8,
"stroke": "white",
"strokeWidth": 1
},
"encoding": {
"x": {
"field": "gdpPercap",
"type": "quantitative",
"axis": {"grid": false},
"scale": {
"type": "log",
"base": 10
}
},
"y": {
"field": "lifeExp",
"type": "quantitative",
"axis": {"title": ""}
},
"size": {
"field": "pop"
},
"color": {
"field": "continent"
}
}
}
If I add the following tranform block, it doesn't work.
"transform":[{"filter": {"param": "CurrentYear"}}]
I have already tried the following link :
https://vega.github.io/vega-lite/examples/interactive_query_widgets.html
It is because you are reading in your year column as strings, and then using a numerical selection to filter. You can see that the year values are strings in the "Data Viewer" tab. Reading in the data like this works with the transform filter you suggested above:
"data": {
"url": "https://raw.githubusercontent.com/shre2398/InformationVisualization/main/gapminder.tsv",
"format": {
"type": "tsv",
"parse": {"year": "number"}
}
}
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.
My graph isn't plotting in vega despite no error that i can see? Confused as to why this seems to be the case. I don't quite understand what I would've done wrong for the graph to not appear on the page. This is a template that I downloaded
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "My new Covid Chart",
"subtitle":"This is my new chart",
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start",
"color": "black"
},
"data": {
"url": "https://api.coronavirus.data.gov.uk/v2/data?areaType=overview&metric=newCasesBySpecimenDate&format=csv",
"format": {"type": "csv"}
},
"transform":[
{"filter": {
"field": "areaName",
"oneOf": ["Bristol, City of", "Bolton", "Glasgow City"]}
}
],
"height": 300,
"width": 310,
"mark": {"type": "line", "point": false},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": null,
"axis": {"grid": false}
},
"y": {
"field": "newCasesByPublishDateRollingRate",
"type": "quantitative",
"title": null,
"axis": {"grid": false}
},
"color": {
"field": "areaName",
"type": "nominal",
"scale": {"scheme": "set1"},
"title": "LEGEND TITLE",
"legend": {
"orient": "top-left",
"fillColor": "#FcFdFd"}
}
}
}
You had applied filter transform which was not satisfying the criteria and making the data empty. Also the newCasesByPublishDateRollingRate field for y-axis used was not present in your data, instead I tried the field newCasesBySpecimenDate which worked.
Adding the correct config below or refer the editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "My new Covid Chart",
"subtitle": "This is my new chart",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"data": {
"url": "https://api.coronavirus.data.gov.uk/v2/data?areaType=overview&metric=newCasesBySpecimenDate&format=csv",
"format": {"type": "csv"}
},
"height": 300,
"width": 310,
"mark": {"type": "line", "point": false},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": null,
"axis": {"grid": false}
},
"y": {
"field": "newCasesBySpecimenDate",
"type": "quantitative",
"title": null,
"axis": {"grid": false}
},
"color": {
"field": "areaName",
"type": "nominal",
"scale": {"scheme": "set1"},
"title": "LEGEND TITLE",
"legend": {"orient": "top-left", "fillColor": "#FcFdFd"}
}
}
}
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