How to change Shape and Color of points in Vega Scatter Plot? - vega-lite

Question

I have a scatter plot generated with contours code in Vega.
Plot looks like
Based on 3rd field, differentiated the points with colour as Blue and Green Dots, but couldn't see the difference very clearly.
Is it possible to Change the Shape and Colour (atleast one) of the points to make the difference more visible
Code
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"title": {
"text": "Outlier Distribution between Duration Vs Age",
"anchor": "middle",
"fontSize": 16,
"frame": "group",
"offset": 4
},
"signals": [
{
"name": "bandwidth", "value": 0.5,
"bind": {"input": "range", "min": -1, "max": 1, "step": 0.1}
}
],
"data": [
{
"name": "source",
"url" : {
"index": "tenant_id.model_training_artefact",
"body": {
"size":10000,
"_source": ["duration", "credit_amount", "asnm", "age", "outlier"]
}
}
"format": {"property": "hits.hits"},
},
{
"name": "density",
"source": "source",
"transform": [
{
"type": "kde2d",
"groupby": ["_source.outlier"],
"size": [{"signal": "width"}, {"signal": "height"}],
"x": {"expr": "scale('x', datum.duration)"},
"y": {"expr": "scale('y', datum.age)"},
"bandwidth": {"signal": "[bandwidth, bandwidth]"}
}
]
},
{
"name": "contours",
"source": "density",
"transform": [
{
"type": "isocontour",
"field": "grid",
"levels": 4
}
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"round": true,
"nice": true,
"zero": true,
"domain": {"data": "source", "field": "_source.duration"},
"range": "width"
},
{
"name": "y",
"type": "linear",
"round": true,
"nice": true,
"zero": true,
"domain": {"data": "source", "field": "_source.age"},
"range": "height"
},
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": "category"
}
],
"axes": [
{
"scale": "x",
"grid": true,
"domain": false,
"orient": "bottom",
"tickCount": 5,
"title": "Duration"
},
{
"scale": "y",
"grid": true,
"domain": false,
"orient": "left",
"titlePadding": 5,
"title": "Age"
}
],
"legends": [
{"stroke": "color", "symbolType": "stroke"}
],
"marks": [
{
"name": "marks",
"type": "symbol",
"from": {"data": "source"},
"encode": {
"update": {
"x": {"scale": "x", "field": "_source.duration"},
"y": {"scale": "y", "field": "_source.age"},
"size": {"value": 50},
"fill": {"scale": "color" , "field": "_source.outlier"}
}
}
},
{
"type": "image",
"from": {"data": "density"},
"encode": {
"update": {
"x": {"value": 0},
"y": {"value": 0},
"width": {"signal": "width"},
"height": {"signal": "height"},
"aspect": {"value": false}
}
},
"transform": [
{
"type": "heatmap",
"field": "datum.grid",
"color": {"expr": "scale('color', datum.datum.outlier)"}
}
]
},
{
"type": "path",
"clip": true,
"from": {"data": "contours"},
"encode": {
"enter": {
"strokeWidth": {"value": 1},
"strokeOpacity": {"value": 1},
"stroke": {"scale": "color", "field": "outlier"}
}
},
"transform": [
{ "type": "geopath", "field": "datum.contour" }
]
}
]
}

Answer 1

Try defining scales for mark symbol color, shape and size.
For example, assuming your field outlier has 3 possible values:
"scales": [
...
{
"name": "scale_symbol_color",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": ["red", "orange", "blue"]
},
{
"name": "scale_symbol_shape",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": ["triangle", "square", "circle"]
},
{
"name": "scale_symbol_size",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": [400, 300, 200]
}
],
...
"marks": [
{
"name": "marks",
"type": "symbol",
"from": {"data": "source"},
"encode": {
"update": {
"x": {"scale": "x", "field": "_source.duration"},
"y": {"scale": "y", "field": "_source.age"},
"size": {"value": 50},
"fill": {"scale": "scale_symbol_color" , "field": "_source.outlier"},
"shape": {"scale": "scale_symbol_shape" , "field": "_source.outlier"},
"size": {"scale": "scale_symbol_size" , "field": "_source.outlier"},
}
}
},
...
Vega docs:
https://vega.github.io/vega/docs/scales/#ordinal
https://vega.github.io/vega/docs/marks/symbol/