Final Result
CustomChart {
fields {
field a {
type: "dimension"
label: "First Quantitative Variable"
},
field b {
type: "dimension"
label: "Second Quantitative Variable"
}
}
options {
// INSERT OPTION DEFINITION HERE
option num_type {
label: "Type of Quantitaive Variable"
type: "select"
options: ["discrete", "continuous"]
default_value: "discrete"
},
option cat_type {
label: "Type of Qualitative Variable"
type: "select"
options: ["nominal", "ordinal"]
default_value: "nominal"
}
}
// INSERT VEGA-LITE JSON SPECIFICATIONS BELOW
template: @vgl {
"data": {
"values": @{values}
},
"layer": [
{
"mark": {
"type": "point",
"filled": true
},
"encoding": {
"x": {
"field": @{fields.a.name},
"type": "quantitative"
},
"y": {
"field": @{fields.b.name},
"type": "quantitative"
}
}
},
{
"mark": {
"type": "line",
"color": "firebrick"
},
"transform": [
{
"regression": @{fields.b.name},
"on": @{fields.a.name}
}
],
"encoding": {
"x": {
"field": @{fields.a.name},
"type": "quantitative"
},
"y": {
"field": @{fields.b.name},
"type": "quantitative"
}
}
},
{
"transform": [
{
"regression": @{fields.b.name},
"on": @{fields.a.name},
"params": true
},
{"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"}
],
"mark": {
"type": "text",
"color": "firebrick",
"x": "width",
"align": "right",
"y": -5
},
"encoding": {
"text": {"type": @{options.cat_type.value}, "field": "R2"}
}
}
]
};;
}