I'm rendering a chart with the attached JSON. While doing it in the Vega editor everything is fine but while rendering SVG with a code, an extra right padding is added to the legend element. Take a look at bellow screenshots:
Here is a very simple code:
const vega = require('vega');
module.exports = async function (context, req) {
try {
const vview = await new vega.View(vega.parse(req.body), { renderer: 'none' });
let svg = await vview.toSVG();
context.res = {
body: svg,
contentType: 'image/svg+xml'
};
}
catch (error) {
context.log(`Error during rendering vega chart: ${error}.`);
throw error;
}
}
The req.body contains JSON with a chart definition. Are there any settings with which I could control that padding?
I tried all options from the documentation without luck.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Sample",
"width": 600,
"height": 300,
"autosize":
{
"type": "fit",
"contains": "padding"
},
"padding": 10,
"data": [
{
"name": "table",
"values": [
{
"category": "Portfolio",
"year": 2020,
"section" : "vor 1900",
"volume": 0.04
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1900-1950",
"volume": 0.07
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1950-1970",
"volume": 0.13
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1990-2010",
"volume": 0.24
},
{
"category": "Portfolio",
"year": 2020,
"section" : "nach 2010",
"volume": 0.33
},
{
"category": "Portfolio",
"year": 2021,
"section" : "vor 1900",
"volume": 0.03
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1900-1950",
"volume": 0.06
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1950-1970",
"volume": 0.11
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Portfolio",
"year": 2021,
"section" : "nach 2010",
"volume": 0.36
},
{
"category": "Benchmark",
"year": 2020,
"section" : "vor 1900",
"volume": 0.06
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1950-1970",
"volume": 0.15
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1970-1990",
"volume": 0.23
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2020,
"section" : "nach 2010",
"volume": 0.22
},
{
"category": "Benchmark",
"year": 2021,
"section" : "vor 1900",
"volume": 0.05
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1950-1970",
"volume": 0.14
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1970-1990",
"volume": 0.24
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2021,
"section" : "nach 2010",
"volume": 0.23
}
],
"transform": [
{
"type": "stack",
"groupby": ["category","year"],
"field": "volume"
},
{
"type": "formula",
"as": "colorParam",
"expr": "datum.section+' '+datum.category"
},
{
"type": "formula",
"as": "volumePerc",
"expr": "format(datum.volume,'.0%')"
}
]
}
],
"signals": [
{ "name": "sfont", "value" : "Arial Narrow, serif"},
{ "name": "sfontBold", "value" : "Arial Black, serif"},
{ "name": "sfontSize", "value" : 16},
{ "name": "sfontColor", "value" : "#595959"}
],
"scales": [
{
"name": "xCategoryScale",
"type": "band",
"domain": {
"data": "table",
"field": "category"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": [0,1],
"range": "height",
"nice": true
},
{
"name": "colorScale",
"type": "ordinal",
"domain": {
"data": "table",
"field": "colorParam"
},
"range": [
"#172431",
"#426990",
"#638EB9",
"#8BABCB",
"#BFD1E3",
"#D7E2ED",
"#322B22",
"#6F5F4D",
"#958069",
"#AE9D8B",
"#D3C9BF",
"#F1EEEB"
]
},
{
"name": "legendColorScale",
"type": "ordinal",
"domain": [
"nach 2010",
"1990-2010",
"1970-1990",
"1950-1970",
"1900-1950",
"vor 1900"
],
"range": [
"#d9d9d9",
"#bfbfbf",
"#a6a6a6",
"#7f7f7f",
"#595959",
"#262626"
]
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickCount": 6,
"grid": true,
"title": "m²EBF-%",
"titleX":-40,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"text": {"signal": "format(datum.value, '.0%')"}
}
}
}
},
{
"orient": "bottom",
"scale": "xCategoryScale",
"tickBand": "extent",
"tickSize": 50,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy": {
"value": -20
}
}
}
}
}
],
"legends": [
{
"type": "symbol",
"fill": "legendColorScale",
"symbolType": "square",
"orient":"right",
"legendX": {"signal": "width", "offset": 20},
"legendY": {"signal": "height / 2", "offset":-40},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"}
}
],
"marks": [
{
"name": "categories",
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "perCategory",
"groupby": "category"
}
},
"encode": {
"enter": {
"x": {
"scale": "xCategoryScale",
"field": "category"
},
"width": {
"scale": "xYearScale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "volume"
},
"y2": {
"scale": "yscale",
"value": 0
}
}
},
"signals": [
{
"name": "width",
"update": "bandwidth('xCategoryScale')"
}
],
"scales": [
{
"name": "xYearScale",
"type": "band",
"range": "width",
"domain": {
"data": "perCategory",
"field": "year"
},
"padding": 0.06
}
],
"axes": [
{
"orient": "bottom",
"scale": "xYearScale",
"zindex": 1,
"offset": {"signal": "height"},
"tickSize":{"value": 0},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy" : {"value": 5}
}
}
}
}
],
"marks": [
{
"name": "volumeBars",
"from": { "data": "perCategory"},
"type": "rect",
"encode": {
"enter": {
"x": {
"scale": "xYearScale",
"field": "year",
"band": 0.3
},
"width": {
"scale": "xYearScale",
"band": 0.4
},
"y": {
"scale": "yscale",
"field": "y0"
},
"y2": {
"scale": "yscale",
"field": "y1"
},
"fill": {
"scale": "colorScale",
"signal": "datum.colorParam"
}
}
}
},
{
"name": "barLabel",
"type": "text",
"from": {
"data": "volumeBars"
},
"encode": {
"enter": {
"y": {
"field": "y",
"offset": {
"field": "height",
"mult":0.5
}
},
"x": {
"field": "x",
"offset": {
"field": "width",
"mult": 0.5
}
},
"stroke":{"value": "white"},
"strokeWidth":{"value": 0.4},
"fontSize": {"signal": "sfontSize"},
"font": {"signal": "sfontBold"},
"color":{"signal": "sfontColor"},
"baseline":{"value": "middle"},
"fill":{"value": "black"},
"align": [
{
"test": "indexof(data('volumeBars'), datum) % 2 == 0",
"value": "right"
},
{
"value": "left"
}
],
"text": {
"field": "datum.volumePerc"
}
}
}
}
]
}
]
}
See how the legend is now clipped with a negative right padding below.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Sample",
"width": 600,
"height": 300,
"autosize":
{
"type": "fit",
"contains": "padding"
},
"padding": {"left": 5, "top": 5, "right": -15, "bottom": 5},
"data": [
{
"name": "table",
"values": [
{
"category": "Portfolio",
"year": 2020,
"section" : "vor 1900",
"volume": 0.04
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1900-1950",
"volume": 0.07
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1950-1970",
"volume": 0.13
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2020,
"section" : "1990-2010",
"volume": 0.24
},
{
"category": "Portfolio",
"year": 2020,
"section" : "nach 2010",
"volume": 0.33
},
{
"category": "Portfolio",
"year": 2021,
"section" : "vor 1900",
"volume": 0.03
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1900-1950",
"volume": 0.06
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1950-1970",
"volume": 0.11
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1970-1990",
"volume": 0.19
},
{
"category": "Portfolio",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Portfolio",
"year": 2021,
"section" : "nach 2010",
"volume": 0.36
},
{
"category": "Benchmark",
"year": 2020,
"section" : "vor 1900",
"volume": 0.06
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1950-1970",
"volume": 0.15
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1970-1990",
"volume": 0.23
},
{
"category": "Benchmark",
"year": 2020,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2020,
"section" : "nach 2010",
"volume": 0.22
},
{
"category": "Benchmark",
"year": 2021,
"section" : "vor 1900",
"volume": 0.05
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1900-1950",
"volume": 0.09
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1950-1970",
"volume": 0.14
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1970-1990",
"volume": 0.24
},
{
"category": "Benchmark",
"year": 2021,
"section" : "1990-2010",
"volume": 0.25
},
{
"category": "Benchmark",
"year": 2021,
"section" : "nach 2010",
"volume": 0.23
}
],
"transform": [
{
"type": "stack",
"groupby": ["category","year"],
"field": "volume"
},
{
"type": "formula",
"as": "colorParam",
"expr": "datum.section+' '+datum.category"
},
{
"type": "formula",
"as": "volumePerc",
"expr": "format(datum.volume,'.0%')"
}
]
}
],
"signals": [
{ "name": "sfont", "value" : "Arial Narrow, serif"},
{ "name": "sfontBold", "value" : "Arial Black, serif"},
{ "name": "sfontSize", "value" : 16},
{ "name": "sfontColor", "value" : "#595959"}
],
"scales": [
{
"name": "xCategoryScale",
"type": "band",
"domain": {
"data": "table",
"field": "category"
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": [0,1],
"range": "height",
"nice": true
},
{
"name": "colorScale",
"type": "ordinal",
"domain": {
"data": "table",
"field": "colorParam"
},
"range": [
"#172431",
"#426990",
"#638EB9",
"#8BABCB",
"#BFD1E3",
"#D7E2ED",
"#322B22",
"#6F5F4D",
"#958069",
"#AE9D8B",
"#D3C9BF",
"#F1EEEB"
]
},
{
"name": "legendColorScale",
"type": "ordinal",
"domain": [
"nach 2010",
"1990-2010",
"1970-1990",
"1950-1970",
"1900-1950",
"vor 1900"
],
"range": [
"#d9d9d9",
"#bfbfbf",
"#a6a6a6",
"#7f7f7f",
"#595959",
"#262626"
]
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickCount": 6,
"grid": true,
"title": "m²EBF-%",
"titleX":-40,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"text": {"signal": "format(datum.value, '.0%')"}
}
}
}
},
{
"orient": "bottom",
"scale": "xCategoryScale",
"tickBand": "extent",
"tickSize": 50,
"titleFontSize": {"signal": "sfontSize"},
"titleFont": {"signal": "sfont"},
"titleColor":{"signal": "sfontColor"},
"titleFontWeight": "normal",
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy": {
"value": -20
}
}
}
}
}
],
"legends": [
{
"type": "symbol",
"fill": "legendColorScale",
"symbolType": "square",
"orient":"right",
"legendX": {"signal": "width", "offset": 20},
"legendY": {"signal": "height / 2", "offset":-40},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"}
}
],
"marks": [
{
"name": "categories",
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "perCategory",
"groupby": "category"
}
},
"encode": {
"enter": {
"x": {
"scale": "xCategoryScale",
"field": "category"
},
"width": {
"scale": "xYearScale",
"band": 1
},
"y": {
"scale": "yscale",
"field": "volume"
},
"y2": {
"scale": "yscale",
"value": 0
}
}
},
"signals": [
{
"name": "width",
"update": "bandwidth('xCategoryScale')"
}
],
"scales": [
{
"name": "xYearScale",
"type": "band",
"range": "width",
"domain": {
"data": "perCategory",
"field": "year"
},
"padding": 0.06
}
],
"axes": [
{
"orient": "bottom",
"scale": "xYearScale",
"zindex": 1,
"offset": {"signal": "height"},
"tickSize":{"value": 0},
"labelFontSize": {"signal": "sfontSize"},
"labelFont": {"signal": "sfont"},
"labelColor":{"signal": "sfontColor"},
"encode": {
"labels": {
"update": {
"dy" : {"value": 5}
}
}
}
}
],
"marks": [
{
"name": "volumeBars",
"from": { "data": "perCategory"},
"type": "rect",
"encode": {
"enter": {
"x": {
"scale": "xYearScale",
"field": "year",
"band": 0.3
},
"width": {
"scale": "xYearScale",
"band": 0.4
},
"y": {
"scale": "yscale",
"field": "y0"
},
"y2": {
"scale": "yscale",
"field": "y1"
},
"fill": {
"scale": "colorScale",
"signal": "datum.colorParam"
}
}
}
},
{
"name": "barLabel",
"type": "text",
"from": {
"data": "volumeBars"
},
"encode": {
"enter": {
"y": {
"field": "y",
"offset": {
"field": "height",
"mult":0.5
}
},
"x": {
"field": "x",
"offset": {
"field": "width",
"mult": 0.5
}
},
"stroke":{"value": "white"},
"strokeWidth":{"value": 0.4},
"fontSize": {"signal": "sfontSize"},
"font": {"signal": "sfontBold"},
"color":{"signal": "sfontColor"},
"baseline":{"value": "middle"},
"fill":{"value": "black"},
"align": [
{
"test": "indexof(data('volumeBars'), datum) % 2 == 0",
"value": "right"
},
{
"value": "left"
}
],
"text": {
"field": "datum.volumePerc"
}
}
}
}
]
}
]
}
Related
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}"}
}
}
},
],
} ```
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}"
}
}
}
}
]
}
I'm trying to swap the axes on the violin plot example provided by the Vega documentation here. When attempting this myself (link here) I seem successful in swapping the axes, and the rectangles seem to render fine. However the area chart (the actual violin) is completely absent. I'm completely at a loss on this. Any help would be much appriciated.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A violin plot example showing distributions for pengiun body mass.",
"width": 800,
"height": 600,
"padding": 5,
"config": {
"axisBand": {"bandPosition": 1, "tickExtra": true, "tickOffset": 0}
},
"signals": [
{"name": "plotWidth", "update": "(width - 30)/3"},
{"name": "height", "update": "height * 1"},
{"name": "trim", "value": true, "bind": {"input": "checkbox"}},
{
"name": "bandwidth",
"value": 0,
"bind": {"input": "range", "min": 0, "max": 200, "step": 1}
}
],
"data": [
{
"name": "penguins",
"url": "data/penguins.json",
"transform": [
{
"type": "filter",
"expr": "datum.Species != null && datum['Body Mass (g)'] != null"
}
]
},
{
"name": "density",
"source": "penguins",
"transform": [
{
"type": "kde",
"field": "Body Mass (g)",
"groupby": ["Species"],
"bandwidth": {"signal": "bandwidth"},
"extent": {"signal": "trim ? null : [2000, 6500]"}
}
]
},
{
"name": "stats",
"source": "penguins",
"transform": [
{
"type": "aggregate",
"groupby": ["Species"],
"fields": ["Body Mass (g)", "Body Mass (g)", "Body Mass (g)"],
"ops": ["q1", "median", "q3"],
"as": ["q1", "median", "q3"]
}
]
}
],
"scales": [
{
"name": "layout",
"type": "band",
"range": "width",
"domain": {"data": "penguins", "field": "Species"}
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"round": true,
"domain": {"data": "penguins", "field": "Body Mass (g)"},
"domainMin": 0,
"zero": false,
"nice": true
},
{
"name": "hscale",
"type": "linear",
"range": [0, {"signal": "plotWidth"}],
"domain": {"data": "density", "field": "density"}
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "penguins", "field": "Species"},
"range": "category"
}
],
"axes": [
{"orient": "bottom", "scale": "layout", "zindex": 1},
{"orient": "left", "scale": "yscale", "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {
"facet": {"data": "density", "name": "violin", "groupby": "Species"}
},
"encode": {
"enter": {
"xc": {"scale": "layout", "field": "Species", "band": 0.5},
"width": {"signal": "plotWidth"},
"height": {"signal": "height"}
}
},
"data": [
{
"name": "summary",
"source": "stats",
"transform": [
{"type": "filter", "expr": "datum.Species === parent.Species"}
]
}
],
"marks": [
{
"type": "area",
"from": {"data": "violin"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": {"parent": "Species"}}
},
"update": {
"y": {"scale": "yscale", "field": "value"},
"xc": {"signal": "plotWidth / 2"},
"width": {"scale": "hscale", "field": "density"}
}
}
},
{
"type": "rect",
"from": {"data": "summary"},
"encode": {
"enter": {"fill": {"value": "black"}, "width": {"value": 2}},
"update": {
"y": {"scale": "yscale", "field": "q1"},
"y2": {"scale": "yscale", "field": "q3"},
"xc": {"signal": "plotWidth / 2"}
}
}
},
{
"type": "rect",
"from": {"data": "summary"},
"encode": {
"enter": {
"fill": {"value": "black"},
"height": {"value": 2},
"width": {"value": 8}
},
"update": {
"y": {"scale": "yscale", "field": "median"},
"xc": {"signal": "plotWidth / 2"}
}
}
}
]
}
]
}
Chart Image
Was able to figure this out, required an "orient" parameter in the encoding of the area mark.
"marks": [
{
"type": "area",
"from": {"data": "violin"},
"encode": {
"enter": {
"orient": {"value":"horizontal"},
"fill": {"scale": "color", "field": {"parent": "Species"}}
},
"update": {
"y": {"field":"value", "scale":"yscale"},
"xc": {"signal": "plotWidth / 2"},
"width": {"scale": "hscale", "field": "density"}
}
}
},
Example Here
What I have tried:
I included a range slider. This range slider is meant to change the way the data is filtered (see transform). (Almost like in this example https://vega.github.io/vega/examples/population-pyramid/)
The Issue:
When I change the slider's position on the graph, there is no change in the graph's input.
Question:
How could I change the code, so that my input parameters are changed through the user's interaction with the range slider?
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 20,
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
},
{
"name": "Y_Value",
"bind":{"input": "range", "min": 0, "max": 100, "step": 1},
"value": 100
}
],
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
},
{
"name": "range",
"source": "table",
"transform": [
{"type": "filter", "expr": "datum.amount <= Y_Value"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"encode": {
"labels": {
"interactive": true,
"update": {
"tooltip": {"signal": "datum.label"}
}
}
}
},
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
After some time I have figured this:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 20,
"title": {"text":"A title", "anchor":"middle"},
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
},
{
"name": "Threshold",
"bind":{"input": "range", "min": 0, "max": 100, "step": 1},
"value": 0
}
],
"data": [
{
"name": "table",
"values": [
{"category": "Mon", "amount": 28},
{"category": "Tue", "amount": 55},
{"category": "wed", "amount": 43},
{"category": "Thu", "amount": 91},
{"category": "Fri", "amount": 81},
{"category": "Sat", "amount": 53},
{"category": "Sun", "amount": 19}
]
},
{
"name": "range",
"source": "table",
"transform": [
{"type": "filter", "expr": "datum.amount >= Threshold"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"encode": {
"labels": {
"interactive": true,
"update": {
"tooltip": {"signal": "datum.label"}
}
}
}
},
{ "orient": "left", "scale": "yscale", "title": "Y Title" }
],
"marks": [
{
"type": "rect",
"from": {"data":"range"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
],
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
}
}
}
]
}
I'm working with vega charts (parallel coordinates). How do I change the color of the lines with respect to scheme colors (w.r.t 'name' field).
Here is my code
I tried changing the stroke property with color scale but there is no effect on line stroke.
Can anyone point out what am I doing wrong.
I'm using Vega Version 4
Thanks
vikky
Because the colors need to be by column "name", transform the input dataset to have repeated name rows. In other words, input dataset must be of 3 columns (name, quarter, value)
Then, change "group" type mark to use facet dataset grouped by column "name"
"name": "marks_group_lines",
"type": "group",
"from": {
"facet": {
"name": "cars_by_name",
"data": "cars",
"groupby": "name"
}
},
Use the cars_by_name as dataset to render "line" type mark.
tip: Instead of defining quarter dataset for 4 axes for each qarter and scales for these axes, "line" type mark which has point scale for "x" property can be used.
Full code for reference:
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 700,
"height": 400,
"padding": 5,
"config": {
"axisY": {
"titleX": -2,
"titleY": 410,
"titleAngle": 0,
"titleAlign": "right",
"titleBaseline": "top"
}
},
"data": [
{
"name": "cars",
"values": [
{
"name": "A",
"quarter": "Q1",
"value": 51
},
{
"name": "A",
"quarter": "Q2",
"value": 47
},
{
"name": "A",
"quarter": "Q3",
"value": 45
},
{
"name": "A",
"quarter": "Q4",
"value": 30
},
{
"name": "B",
"quarter": "Q1",
"value": 42
},
{
"name": "B",
"quarter": "Q2",
"value": 57
},
{
"name": "B",
"quarter": "Q3",
"value": 72
},
{
"name": "B",
"quarter": "Q4",
"value": 41
},
{
"name": "C",
"quarter": "Q1",
"value": 25
},
{
"name": "C",
"quarter": "Q2",
"value": 37
},
{
"name": "C",
"quarter": "Q3",
"value": 60
},
{
"name": "C",
"quarter": "Q4",
"value": 25
},
{
"name": "D",
"quarter": "Q1",
"value": 22
},
{
"name": "D",
"quarter": "Q2",
"value": 25
},
{
"name": "D",
"quarter": "Q3",
"value": 51
},
{
"name": "D",
"quarter": "Q4",
"value": 42
}
]
},
{
"name": "fields",
"values": [
"Q1",
"Q2",
"Q3",
"Q4"
]
}
],
"scales": [
{
"name": "name_to_xaxis",
"type": "point",
"domain": {
"data": "cars",
"field": "quarter"
},
"range": "width"
},
{
"name": "values_to_height",
"type": "linear",
"domain": {
"data": "cars",
"field": "value"
},
"range": "height"
},
{
"name": "quarter_to_color",
"type": "ordinal",
"domain": {
"data": "cars",
"field": "name"
},
"range": "category"
},
{
"name": "ord",
"type": "point",
"range": "width",
"round": true,
"domain": {
"data": "fields",
"field": "data"
}
},
{
"name": "Q1",
"type": "linear",
"range": "height",
"zero": false,
"nice": true,
"domain": {
"data": "cars",
"field": "Q1"
}
},
{
"name": "Q2",
"type": "linear",
"range": "height",
"zero": false,
"nice": true,
"domain": {
"data": "cars",
"field": "Q2"
}
},
{
"name": "Q3",
"type": "linear",
"range": "height",
"zero": false,
"nice": true,
"domain": {
"data": "cars",
"field": "Q3"
}
},
{
"name": "Q4",
"type": "linear",
"range": "height",
"zero": false,
"nice": true,
"domain": {
"data": "cars",
"field": "Q4"
}
}
],
"axes": [
{
"orient": "left",
"zindex": 1,
"scale": "Q1",
"title": "Q1",
"ticks": false,
"labels": false,
"offset": {
"scale": "ord",
"value": "Q1",
"mult": -1
}
},
{
"orient": "left",
"zindex": 1,
"scale": "Q2",
"title": "Q2",
"ticks": false,
"labels": false,
"offset": {
"scale": "ord",
"value": "Q2",
"mult": -1
}
},
{
"orient": "left",
"zindex": 1,
"scale": "Q3",
"title": "Q3",
"ticks": false,
"labels": false,
"offset": {
"scale": "ord",
"value": "Q3",
"mult": -1
}
},
{
"orient": "left",
"zindex": 1,
"scale": "Q4",
"title": "Q4",
"ticks": false,
"labels": false,
"offset": {
"scale": "ord",
"value": "Q4",
"mult": -1
}
}
],
"marks": [
{
"name": "marks_group_lines",
"type": "group",
"from": {
"facet": {
"name": "cars_by_name",
"data": "cars",
"groupby": "name"
}
},
"marks": [
{
"name": "marks_lines",
"type": "line",
"from": {
"data": "cars_by_name"
},
"encode": {
"update": {
"x": {
"scale": "name_to_xaxis",
"field": "quarter"
},
"y": {
"scale": "values_to_height",
"field": "value"
},
"stroke": {
"scale": "quarter_to_color",
"field": "name"
},
"strokeOpacity": {
"value": 1
}
},
"hover": {
"stroke": {
"value": "#7c7c7c"
},
"strokeOpacity": {
"value": 1
},
"zindex": 99
}
}
},
{
"name": "marks_symbols",
"type": "symbol",
"from": {
"data": "cars_by_name"
},
"encode": {
"enter": {
"stroke": {
"value": "#6D6D6D"
},
"strokeWidth": {
"value": 1
},
"shape": {
"value": "circle"
}
},
"update": {
"x": {
"scale": "name_to_xaxis",
"field": "quarter"
},
"y": {
"scale": "values_to_height",
"field": "value"
},
"fill": {
"scale": "quarter_to_color",
"field": "name"
},
"size": {
"value": 50
},
"stroke": {
"value": "#77AE80"
}
},
"hover": {
"fill": {
"value": "#AFD098"
}
}
}
}
]
}
]
}
I'd like to align the line vertices (and bullets) of the following chart to the center of the corresponding bars:
{
"data": [
{
"name": "table",
"transform": [
{
"type": "formula",
"field": "predicate0",
"expr": "d.data.x"
}
],
"values": [
{
"x": 1,
"series": 0,
"y": 9
},
{
"x": 1,
"series": 1,
"y": 9
},
{
"x": 3,
"series": 0,
"y": 7
},
{
"x": 3,
"series": 1,
"y": 7
},
{
"x": 5,
"series": 0,
"y": 1
},
{
"x": 5,
"series": 1,
"y": 3
},
{
"x": 2,
"series": 0,
"y": 9
},
{
"x": 2,
"series": 1,
"y": 9
},
{
"x": 4,
"series": 0,
"y": 2
},
{
"x": 4,
"series": 1,
"y": 3
}
]
}
],
"scales": [
{
"name": "x-axis",
"range": "width",
"type": "ordinal",
"padding": 0.2,
"domain": {
"data": "table",
"field": "predicate0"
}
},
{
"name": "y-axis",
"round": true,
"nice": true,
"range": "height",
"domain": {
"data": "table",
"field": "data.y"
}
},
{
"name": "color",
"type": "ordinal",
"domain": [
0,
1
],
"range": [
"#4682b4",
"#8a8f99"
]
},
{
"name": "shortLabels",
"type": "ordinal",
"domain": {
"data": "table",
"field": "data.x"
}
}
],
"axes": [
{
"properties": {
"axis": {
"stroke": {
"value": "#55606e"
}
},
"labels": {
"fill": {
"value": "#55606e"
},
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 12
}
},
"ticks": {
"stroke": {
"value": "#55606e"
}
},
"title": {
"fill": {
"value": "#55606e"
},
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 14
},
"fontWeight": {
"value": "normal"
}
}
},
"scale": "x-axis",
"tickPadding": 8,
"tickSize": 0,
"title": "Series",
"type": "x"
},
{
"grid": "true",
"layer": "back",
"scale": "y-axis",
"ticks": 5,
"title": "Count",
"type": "y",
"properties": {
"grid": {
"strokeDash": {
"value": [
2,
2
]
}
},
"ticks": {
"stroke": {
"scale": "color",
"value": 0
}
},
"axis": {
"stroke": {
"scale": "color",
"value": 0
}
},
"title": {
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 14
},
"fontWeight": {
"value": "normal"
},
"fill": {
"scale": "color",
"value": 0
}
},
"labels": {
"font": {
"value": "Open Sans"
},
"fontSize": {
"value": 12
},
"fill": {
"scale": "color",
"value": 0
}
}
}
}
],
"marks": [
{
"type": "rect",
"properties": {
"enter": {
"x": {
"scale": "x-axis",
"field": "predicate0"
},
"width": {
"scale": "x-axis",
"band": true
},
"y": {
"scale": "y-axis",
"field": "data.y"
},
"y2": {
"scale": "y-axis",
"value": 0
},
"fill": {
"scale": "color",
"field": "data.series"
}
}
},
"from": {
"transform": [
{
"type": "filter",
"test": "d.data.series === 0"
}
],
"data": "table"
}
},
{
"type": "line",
"properties": {
"enter": {
"x": {
"scale": "x-axis",
"field": "data.x"
},
"y": {
"scale": "y-axis",
"field": "data.y"
},
"stroke": {
"scale": "color",
"field": "data.series"
},
"strokeWidth": {
"value": 2
}
}
},
"from": {
"transform": [
{
"type": "filter",
"test": "d.data.series === 1"
}
],
"data": "table"
}
},
{
"type": "symbol",
"properties": {
"update": {
"fill": {
"scale": "color",
"field": "data.series"
}
},
"enter": {
"strokeWidth": {
"value": 3
},
"fill": {
"scale": "color",
"field": "data.series"
},
"x": {
"scale": "x-axis",
"field": "data.x"
},
"y": {
"scale": "y-axis",
"field": "data.y"
}
}
},
"from": {
"transform": [
{
"type": "filter",
"test": "d.data.series === 1"
}
],
"data": "table"
}
}
]
}
Unfortunately, the line marks doesn't support the dx property. I tried using a group but wasn't able to get it to work.