I’m creating a scatterplot matrix with vega-lite, I want to add a functionality that allows users to search and select for specific data-points with a text input that uses that same dataset as the scatterplot and when selected highlight those points in the scatterplot. Based on my initial search i’ve yet to find a way to do so. Is this even possible?
Heres the current scatterplot code. implementation
var scatterPlot = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "USDA Food Database",
"data": {
"url": "data/newData.json"
},
"transform": [
{"filter": "datum.ONIscore > 0 && datum.F6 != '' && datum.Protein != 'NULL' && datum.Fat != 'NULL'&& datum.Carb != 'NULL' && datum.Calorie != 'NULL'"}
],
"concat": [
{
//ScatterPlot # 1
"encoding": {
"color": {
"condition": {
"param": "brush",
"title": "Food Categories",
"field": "F6",
"type": "nominal",
},
"value": "gray"
},
"tooltip": [
{ "field": "foodName", "type": "nominal" },
{ "field": "Protein", "type": "nominal" },
{ "field": "Fat", "type": "nominal" },
{ "field": "Carb", "type": "nominal" },
{ "field": "Calorie", "type": "nominal" },
{ "field": "ND", "type": "nominal" },
],
"y": {
"field": "Protein",
"title": "Protein",
"type": "quantitative"
},
"x": {
"title": "ONIscore",
"field": "ONIscore",
"type": "quantitative"
},
},
"width": 500,
"height": 250,
"mark": "circle",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]"
}
},
{
"name": "grid",
"select": {
"type": "interval",
"resolve": "global",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![!event.shiftKey]"
},
"bind": "scales",
},
],
"transform": [{"filter": {"param": "click"}}],
},
{
"encoding": {
"color": {
"condition": {
"param": "brush",
"title": "Food Categories",
"field": "F6",
"type": "nominal",
},
"value": "gray"
},
"tooltip": [
{ "field": "foodName", "type": "nominal" },
{ "field": "Protein", "type": "nominal" },
{ "field": "Fat", "type": "nominal" },
{ "field": "Carb", "type": "nominal" },
{ "field": "Calorie", "type": "nominal" },
{ "field": "ND", "type": "nominal" },
],
"y": {
"field": "Fat",
"title": "Fat",
"type": "quantitative"
},
"x": {
"title": "ONIscore",
"field": "ONIscore",
"type": "quantitative"
},
},
"width": 500,
"height": 250,
"mark": "circle",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]"
}
},
{
"name": "grid",
"select": {
"type": "interval",
"resolve": "global",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![!event.shiftKey]"
},
"bind": "scales",
},
],
"transform": [{"filter": {"param": "click"}}],
},
//Scatterplot #3
{
"encoding": {
"color": {
"condition": {
"param": "brush",
"title": "Food Categories",
"field": "F6",
"type": "nominal",
},
"value": "gray"
},
"tooltip": [
{ "field": "foodName", "type": "nominal" },
{ "field": "Protein", "type": "nominal" },
{ "field": "Fat", "type": "nominal" },
{ "field": "Carb", "type": "nominal" },
{ "field": "Calorie", "type": "nominal" },
{ "field": "ND", "type": "nominal" },
],
"y": {
"field": "Carb",
"title": "Carbohydrates",
"type": "quantitative"
},
"x": {
"title": "ONIscore",
"field": "ONIscore",
"type": "quantitative"
}
},
"width": 500,
"height": 250,
"mark": "circle",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]"
}
},
{
"name": "grid",
"select": {
"type": "interval",
"resolve": "global",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![!event.shiftKey]"
},
"bind": "scales",
},
],
"transform": [{"filter": {"param": "click"}}],
},
//Scatterplot #4
{
"encoding": {
"color": {
"condition": {
"param": "brush",
"title": "Food Categories",
"field": "F6",
"type": "nominal",
},
"value": "gray"
},
"tooltip": [
{ "field": "foodName", "type": "nominal" },
{ "field": "Protein", "type": "nominal" },
{ "field": "Fat", "type": "nominal" },
{ "field": "Carb", "type": "nominal" },
{ "field": "Calorie", "type": "nominal" },
{ "field": "ND", "type": "nominal" },
{ "field": "ONIscore", "type": "nominal" },
{ "field": "SatietyIndex", "type": "nominal" },
{ "field": "Satiety", "type": "nominal" },
],
"y": {
"field": "Calorie",
"title": "Calories pr. 100 grams",
"type": "quantitative"
},
"x": {
"title": "ONIscore",
"field": "ONIscore",
"type": "quantitative"
}
},
"width": 500,
"height": 250,
"mark": "circle",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]"
}
},
{
"name": "grid",
"select": {
"type": "interval",
"resolve": "global",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![!event.shiftKey]"
},
"bind": "scales",
},
],
"transform": [{"filter": {"param": "click"}}],
},
//Scatterplot #5
{
"encoding": {
"color": {
"condition": {
"param": "brush",
"title": "Food Categories",
"field": "F6",
"type": "nominal",
},
"value": "gray"
},
"tooltip": [
{ "field": "foodName", "type": "nominal" },
{ "field": "Protein", "type": "nominal" },
{ "field": "Fat", "type": "nominal" },
{ "field": "Carb", "type": "nominal" },
{ "field": "Calorie", "type": "nominal" },
{ "field": "ND", "type": "nominal" },
],
"y": {
"field": "Carb",
"title": "Carb",
"type": "quantitative"
},
"x": {
"title": "InsulinogenicV2",
"field": "InsulinogenicV2",
"type": "quantitative"
}
},
"width": 500,
"height": 250,
"mark": "circle",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]"
}
},
{
"name": "grid",
"select": {
"type": "interval",
"resolve": "global",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![!event.shiftKey]"
},
"bind": "scales",
},
],
"transform": [{"filter": {"param": "click"}}],
},
//Scatterplot #6
{
"encoding": {
"color": {
"condition": {
"param": "brush",
"title": "Food Categories",
"field": "F6",
"type": "nominal",
},
"value": "gray"
},
"tooltip": [
{ "field": "foodName", "type": "nominal" },
{ "field": "Protein", "type": "nominal" },
{ "field": "Fat", "type": "nominal" },
{ "field": "Carb", "type": "nominal" },
{ "field": "Calorie", "type": "nominal" },
{ "field": "ND", "type": "nominal" },
],
"y": {
"field": "SatietyIndex",
"title": "Satiety",
"type": "quantitative"
},
"x": {
"title": "Satiety",
"field": "Satiety",
"type": "quantitative"
}
},
"width": 500,
"height": 250,
"mark": "circle",
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"resolve": "union",
"on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![event.shiftKey]"
}
},
{
"name": "grid",
"select": {
"type": "interval",
"resolve": "global",
"translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
"zoom": "wheel![!event.shiftKey]"
},
"bind": "scales",
},
],
"transform": [{"filter": {"param": "click"}}]
},
{
//Barchart Begin
"encoding": {
"color": {
"condition": {
"param": "click",
"field": "F6",
},
"value": "gray"
},
"x": {"aggregate": "count", "type": "nominal"},
"y": {"title": "Food Category", "field": "F6"}
},
//BARCHART
"width": 500,
"mark": "bar",
"params": [{
"name": "click",
"select": {"type": "point", "encodings": ["color"]}
}],
"transform": [{"filter": {"param": "brush"}}]
}
],
"config" : {
"concat": {
"spacing" : 0,
"columns" : 2
}
}
}
await vegaEmbed('#scatterPlot', scatterPlot).then(function(result){
console.log(result.view.addEventListener('click',function(event,item){
sendDataToFile(item.datum,1);
console.log("Sending data to JSON file.");
}));
})
Search bar code
const autoCompleteJS = new autoComplete({
placeHolder: "Search for Food...",
data: {
src: async() => {
try {
// Loading placeholder text
document.getElementById("autoComplete").setAttribute("placeholder", "Loading...");
// Fetch External Data Source
const source = await fetch("./data/data.json");
const data = await source.json();
// Post Loading placeholder text
document.getElementById("autoComplete").setAttribute("placeholder", autoCompleteJS.placeHolder);
// Returns Fetched data
return data;
} catch (error) {
return error;
}
},
keys: ["foodName"],
cache: true,
},
resultItem: {
highlight: true
},
events: {
input: {
selection: (event) => {
const selection = event.detail.selection.value;
autoCompleteJS.input.value = selection;
}
}
}
});