Whoops, yes I am talking about the Vega-lite extension. This is the code I have for successfully embedding the visualization but I need the visual to generate differently based on which user is logged in:
<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>
