Signal that filters the data not work correctly in Vega - vega

Question

I have a visualization that represents the cumulative total of accidents per month, that is, the difference between the accidents that occur and those that are resolved (closed). I start with some data for each claim that occurs (ID number, entry date, closing date and client who has the claim)
I am trying to put a signal that filters the data by clients, but it does not work correctly.
The problem occurs when I select the "Baukost" client, it joins the points well, but when I select "all" again it joins the lines wrong.
In the first photo I show the display that comes out by default (all)
In the second photo I show the visualization that comes out when I filter by "Baukost" client.
The third photo is where the problem that occurs when I reselect "all" is shown, which should be the same as the first image
Here I put the code that I have done and I ask you to please help me to see what I am failing. Thank you very much in advance.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 800,
"height": 300,
"padding": 10,
"signals": [
{ "name": "Customer", "value": "All",
"bind": {
"input": "select",
"name": "Customers",
"options": [
"All",
"Baukost",
"CatalanaOcc",
],
}
},
],
"data": [
{"name": "Accidents_source_load",
"values": [
{
"Number" : "0691328/AF21",
"EntryDay" : 1,
"EntryMonth" : 7,
"EntryYear" : 2021,
"CloseDay" : 2,
"CloseMonth" : 8,
"CloseYear" : 2021,
"Customer" : "Baukost",
},
{
"Number" : "9989037919",
"EntryDay" : 16,
"EntryMonth" : 7,
"EntryYear" : 2021,
"CloseDay" : 25,
"CloseMonth" : 8,
"CloseYear" : 2021,
"Customer" : "Baukost",
},
{
"Number" : "3157418 ",
"EntryDay" : 24,
"EntryMonth" : 2,
"EntryYear" : 2022,
"CloseDay" : null,
"CloseMonth" : null,
"CloseYear" : null,
"Customer" : "Baukost",
},
{
"Number" : "84032071",
"EntryDay" : 24,
"EntryMonth" : 2,
"EntryYear" : 2022,
"CloseDay" : null,
"CloseMonth" : null,
"CloseYear" : null,
"Customer" : "Baukost",
},
{
"Number" : "27800304",
"EntryDay" : 27,
"EntryMonth" : 5,
"EntryYear" : 2021,
"CloseDay" : 2,
"CloseMonth" : 6,
"CloseYear" : 2021,
"Customer" : "CatalanaOcc",
},
{
"Number" : "27802536",
"EntryDay" : 27,
"EntryMonth" : 5,
"EntryYear" : 2021,
"CloseDay" : 28,
"CloseMonth" : 5,
"CloseYear" : 2021,
"Customer" : "CatalanaOcc",
},
{
"Number" : "27808817",
"EntryDay" : 28,
"EntryMonth" : 5,
"EntryYear" : 2021,
"CloseDay" : 2,
"CloseMonth" : 6,
"CloseYear" : 2021,
"Customer" : "CatalanaOcc",
},
{
"Number" : "27821933","EntryDay" : 1,
"EntryMonth" : 6,
"EntryYear" : 2021,"CloseDay" : null,
"CloseMonth" : null,
"CloseYear" : null,"Customer" : "CatalanaOcc",
},
]
},
{ "name": "Accidents",
"source": "Accidents_source_load",
"transform": [
{ "type": "formula",
"expr": "datetime(datum.EntryYear, datum.EntryMonth-1,datum.EntryDay)",
"as":"EntryDate"
},
{ "type": "formula",
"expr": "if(datum.CloseMonth==null, null, datetime(datum.CloseYear, datum.CloseMonth-1,datum.CloseDay))",
"as":"CloseDate"
},
{
"type": "formula",
"expr": "if(datum.CloseMonth==null,'Entry Cabinet', 'Closed Cabinet')",
"as":"Type"
},
{ "type": "formula",
"expr": "if(Customer=='All'||datum.Customer==Customer,1,0)",
"as": "cond_Customer"
},
{ "type": "filter",
"expr": "datum.cond_Customer==1"
},
{ "type": "collect",
"sort":{
"field":["EntryDate"],
"order": ["ascending"]
}
},
]
},
{ "name": "Close_table",
"source": "Accidents",
"transform": [
{
"type": "filter",
"expr": "datum.Type=='Closed Cabinet'"
},
{
"type": "formula",
"expr": "datum.CloseDate",
"as": "Date"
},
{
"type": "aggregate",
"groupby":["Date"],
"fields":["Number"],
"ops":["count"],
"as":["Total"]
},
{
"type": "collect",
"sort":
{
"field": ["Date"],
"order": ["ascending"]
}
},
{
"type": "window",
"sort": {"field": "Date", "order": "ascending"},
"ops": ["sum"],
"fields": [ "Total"],
"as": [ "Cumulative"]
},
{
"type": "formula",
"expr": "datum.Cumulative*(-1)",
"as": "Cumulative"
},
{ "type": "collect",
"sort":{
"field":["Date"],
"order": ["ascending"]
}
},
]
},
{ "name": "Entry_table",
"source": "Accidents",
"transform": [
{
"type": "formula",
"expr": "datum.EntryDate",
"as": "Date"
},
{
"type": "aggregate",
"groupby":["Date"],
"fields":["Number"],
"ops":["count"],
"as":["Total"]
},
{
"type": "collect",
"sort":
{
"field": ["Date"],
"order": ["ascending"]
}
},
{
"type": "window",
"ops": ["sum"],
"fields": [ "Total"],
"as": [ "Cumulative"]
},
{ "type": "collect",
"sort":{
"field":["Date"],
"order": ["ascending"]
}
},
]
},
{ "name": "Entry_Close",
"source":["Entry_table","Close_table"],
"transform": [
{ "type": "collect",
"sort":{
"field":["Date"],
"order": ["ascending"]
}
},
{ "type": "aggregate",
"groupby": ["Date"],
"fields": ["Cumulative"],
"ops": ["sum"],
"as": ["Cumulative_Total"]
},
{ "type": "collect",
"sort":{
"field":["Date"],
"order": ["ascending"]
}
},
]
},
],
"scales": [
{ "name": "yscale",
"type": "linear",
"domain": {"data": "Entry_Close", "field": "Cumulative_Total"},
"range": "height"
},
{
"name": "xscale",
"type": "time",
"domain": {"data": "Entry_Close", "field":"Date","sort": true},
"range": "width",
},
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "line",
"from": {"data": "Entry_Close"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "Date"},
"y": {"scale": "yscale", "field": "Cumulative_Total"},
"stroke": {"value": "blue"},
"strokeWidth": {"value": 4},
"interpolate": {"value": "linear"},
"strokeOpacity": {"value": 1},
},
"hover": {
"strokeOpacity": {"value": 0.5}
}
}
},
{ "type": "symbol",
"style": ["point"],
"from": {"data": "Entry_Close"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "Date"},
"y": {"scale": "yscale", "field": "Cumulative_Total"},
"size": {"value": 60},
"fill": {"value": "green"},
"cursor": { "value": "pointer" },
"tooltip": {"signal": "{'title': 'Cumulative', 'Date': datum.Date,'Total': datum.Cumulative_Total}"}
}
}
},
],
} ```

Answer 1

You need to add a sort field to your mark. This should work for you.
Editor
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 800,
"height": 300,
"padding": 10,
"signals": [
{
"name": "Customer",
"value": "All",
"bind": {
"input": "select",
"name": "Customers",
"options": ["All", "Baukost", "CatalanaOcc"]
}
}
],
"data": [
{
"name": "Accidents_source_load",
"values": [
{
"Number": "0691328/AF21",
"EntryDay": 1,
"EntryMonth": 7,
"EntryYear": 2021,
"CloseDay": 2,
"CloseMonth": 8,
"CloseYear": 2021,
"Customer": "Baukost"
},
{
"Number": "9989037919",
"EntryDay": 16,
"EntryMonth": 7,
"EntryYear": 2021,
"CloseDay": 25,
"CloseMonth": 8,
"CloseYear": 2021,
"Customer": "Baukost"
},
{
"Number": "3157418 ",
"EntryDay": 24,
"EntryMonth": 2,
"EntryYear": 2022,
"CloseDay": null,
"CloseMonth": null,
"CloseYear": null,
"Customer": "Baukost"
},
{
"Number": "84032071",
"EntryDay": 24,
"EntryMonth": 2,
"EntryYear": 2022,
"CloseDay": null,
"CloseMonth": null,
"CloseYear": null,
"Customer": "Baukost"
},
{
"Number": "27800304",
"EntryDay": 27,
"EntryMonth": 5,
"EntryYear": 2021,
"CloseDay": 2,
"CloseMonth": 6,
"CloseYear": 2021,
"Customer": "CatalanaOcc"
},
{
"Number": "27802536",
"EntryDay": 27,
"EntryMonth": 5,
"EntryYear": 2021,
"CloseDay": 28,
"CloseMonth": 5,
"CloseYear": 2021,
"Customer": "CatalanaOcc"
},
{
"Number": "27808817",
"EntryDay": 28,
"EntryMonth": 5,
"EntryYear": 2021,
"CloseDay": 2,
"CloseMonth": 6,
"CloseYear": 2021,
"Customer": "CatalanaOcc"
},
{
"Number": "27821933",
"EntryDay": 1,
"EntryMonth": 6,
"EntryYear": 2021,
"CloseDay": null,
"CloseMonth": null,
"CloseYear": null,
"Customer": "CatalanaOcc"
}
]
},
{
"name": "Accidents",
"source": "Accidents_source_load",
"transform": [
{
"type": "formula",
"expr": "datetime(datum.EntryYear, datum.EntryMonth-1,datum.EntryDay)",
"as": "EntryDate"
},
{
"type": "formula",
"expr": "if(datum.CloseMonth==null, null, datetime(datum.CloseYear, datum.CloseMonth-1,datum.CloseDay))",
"as": "CloseDate"
},
{
"type": "formula",
"expr": "if(datum.CloseMonth==null,'Entry Cabinet', 'Closed Cabinet')",
"as": "Type"
},
{
"type": "formula",
"expr": "if(Customer=='All'||datum.Customer==Customer,1,0)",
"as": "cond_Customer"
},
{"type": "filter", "expr": "datum.cond_Customer==1"},
{
"type": "collect",
"sort": {"field": ["EntryDate"], "order": ["ascending"]}
}
]
},
{
"name": "Close_table",
"source": "Accidents",
"transform": [
{"type": "filter", "expr": "datum.Type=='Closed Cabinet'"},
{"type": "formula", "expr": "datum.CloseDate", "as": "Date"},
{
"type": "aggregate",
"groupby": ["Date"],
"fields": ["Number"],
"ops": ["count"],
"as": ["Total"]
},
{
"type": "collect",
"sort": {"field": ["Date"], "order": ["ascending"]}
},
{
"type": "window",
"sort": {"field": "Date", "order": "ascending"},
"ops": ["sum"],
"fields": ["Total"],
"as": ["Cumulative"]
},
{
"type": "formula",
"expr": "datum.Cumulative*(-1)",
"as": "Cumulative"
},
{"type": "collect", "sort": {"field": ["Date"], "order": ["ascending"]}}
]
},
{
"name": "Entry_table",
"source": "Accidents",
"transform": [
{"type": "formula", "expr": "datum.EntryDate", "as": "Date"},
{
"type": "aggregate",
"groupby": ["Date"],
"fields": ["Number"],
"ops": ["count"],
"as": ["Total"]
},
{
"type": "collect",
"sort": {"field": ["Date"], "order": ["ascending"]}
},
{
"type": "window",
"ops": ["sum"],
"fields": ["Total"],
"as": ["Cumulative"]
},
{"type": "collect", "sort": {"field": ["Date"], "order": ["ascending"]}}
]
},
{
"name": "Entry_Close",
"source": ["Entry_table", "Close_table"],
"transform": [
{
"type": "collect",
"sort": {"field": ["Date"], "order": ["ascending"]}
},
{
"type": "aggregate",
"groupby": ["Date"],
"fields": ["Cumulative"],
"ops": ["sum"],
"as": ["Cumulative_Total"]
},
{"type": "collect", "sort": {"field": ["Date"], "order": ["ascending"]}}
]
}
],
"scales": [
{
"name": "yscale",
"type": "linear",
"domain": {"data": "Entry_Close", "field": "Cumulative_Total"},
"range": "height"
},
{
"name": "xscale",
"type": "time",
"domain": {"data": "Entry_Close", "field": "Date", "sort": true},
"range": "width"
}
],
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "line",
"from": {"data": "Entry_Close"},
"sort": {"field": "datum.Date"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "Date"},
"y": {"scale": "yscale", "field": "Cumulative_Total"},
"stroke": {"value": "blue"},
"strokeWidth": {"value": 4},
"interpolate": {"value": "linear"},
"strokeOpacity": {"value": 1}
},
"hover": {"strokeOpacity": {"value": 0.5}}
}
},
{
"type": "symbol",
"style": ["point"],
"from": {"data": "Entry_Close"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "Date"},
"y": {"scale": "yscale", "field": "Cumulative_Total"},
"size": {"value": 60},
"fill": {"value": "green"},
"cursor": {"value": "pointer"},
"tooltip": {
"signal": "{'title': 'Cumulative', 'Date': datum.Date,'Total': datum.Cumulative_Total}"
}
}
}
}
]
}