Embedding a Vega-lite visualization using specific data from Airtable into Softr

Custom Coding
,
1

Hi! I am working with a team member to embed a Vega-lite visualization into Softr using data from Airtable, and we have successfully been able to figure out how to embed the visualization in Softr, but we want the visualization to display different data for each project. When users sign into Softr, they create a project so all of their data is attached to it in Airtable, but we can’t figure out how to modify the embed code so that it pulls data related to a specific project. Does anyone have any ideas on how to go about this issue?

2

Hi Meghan,

What is the embed code exactly?

3

Hi Matthieu,
Here is the embed code:

<div id="vis"></div>

<script type="text/javascript">

const airtableBaseID = ''; // Replace with your base ID
const airtablePAT = ''; // Replace with your PAT

async function fetchAirtableData() {
const url = ``; // Replace with your table name
const response = await fetch(url, {
headers: {
Authorization: `Bearer ${airtablePAT}`,
},
});


const airtableData = await response.json(); // Parse JSON response

return airtableData.records.map(record => ({
"Hazard type (from Hazard type)": record.fields["Hazard type (from Hazard type)"],
"Exposed Asset / System / Party": record.fields["Exposed Asset / System / Party"],
"Calculation": record.fields["Calculation"]
}));
}


// Define the Vega-Lite spec
function getVegaLiteSpec(data) {
return {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'A simple bar chart with data from Airtable.',
data: { values: data }, // Use fetched data from Airtable
mark: 'bar',
encoding: {
y: {
field: "Hazard type (from Hazard type)",
type: "nominal"
},
x: {
field: "Exposed Asset / System / Party",
type: "ordinal"
},
color: {
field: "Calculation",
type: "quantitative",
title: "Hazard exposures"
}
}
};
};


// Fetch data and embed the visualization
fetchAirtableData().then(data => {
const spec = getVegaLiteSpec(data);
vegaEmbed('#vis', spec);
});
</script>