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
}))
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.