Published
Edited
Aug 19, 2022
// The output data of this query has been attached as a JSON file
// data = fetch('https://nodegoat.io/data/type/1/object', {method: 'GET', headers: {'Authorization': 'Bearer '+Secret('nodegoat-demo'),'Content-Type': 'application/json'}}).then((response) => response.json())
letters = {
// Go to the position in the response data that contains the list of returned nodegoat Objects
const objects = nodegoat_api_output['data']['objects'];
// Create an JavaScript object to store the dates
const dates = {};
// Iterate over the returned nodegoat Objects
for (const object_id in objects) {
const object = objects[object_id];
// Ignore nodegoat Objects without a date
if (!object['object_definitions']['163']) {
continue;
}
const date = object['object_definitions']['163']['object_definition_value'];
if (!dates[date]) {
// Create a new JavaScript object for every unique date
dates[date] = {'amount': 1, 'names': [object['object']['object_name']], 'date': new Date(date)}
} else {
// Increase the amount for every additional letter on a recurring date
dates[date]['amount']++;
// Add the name of every additional letter on a recurring date
dates[date]['names'].push(object['object']['object_name']);
}
}
// Convert the JavaScript object to an array.
return Object.values(dates);
}
Plot.plot({
width: 300, // set the width of the visualisation
height: 1500, // set the height of the visualisation
color: {
scheme: 'blues' // select a color scheme
},
y: {
tickFormat: '' // render the date labels as strings
},
x: {
tickFormat: i => 'JFMAMJJASOND'[i] // render a label per month
},
marks: [
Plot.cell(letters, Plot.group({fill: 'sum'}, { // use the cell mark combined with a group transformation on the 'letters' data
x: d => d.date.getUTCMonth(), // use the months for the x-axis
y: d => d.date.getUTCFullYear(), // use the years for the y-axis
title: d => d.names.join('\n') // use the names of the letters as the title
}))
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
