MuseWeb 2023: Linked Art in Practice Workshop
// Update the variable below and see what happens
templatesString = "a totally different value"
// templatesString = "template string"
// Here we are using a convenient helper built into Observable that makes the http request
// to the URI, reads the response, and returns just the JSON
objectData = d3.json(objectURI)
LinkedArtJS = import("https://cdn.skypack.dev/@thegetty/linkedart.js")
{
// Note: when working with a JavaScript cell, any line like this that is preceded by // and is greyed out is a comment
// Look to these as tips or instructions on how to work with this particular cell
// Let's play with the various ways to change the output of a JavaScript function.
// (1) Change the text below and press `play` to the right (to execute the code).
let objectTitle = "What is the title?";
// (2) Using dot notation
// We have already pre-coded a way to look at the first result of "identified_by".
// Uncomment the line of code below to see how it works.
objectTitle = objectData.identified_by[1].content;
// (3) Using basic helpers
objectTitle = LinkedArtJS.getValueByClassification(
objectData.identified_by,
"http://vocab.getty.edu/aat/300417193"
);
// Actually we would do it more like this ...
objectTitle = LinkedArtJS.getValueByClassification(
LinkedArtJS.normalizeFieldToArray(objectData, "identified_by"),
"http://vocab.getty.edu/aat/300417193"
);
// (4) Using high level helpers
objectTitle = LinkedArtJS.getPrimaryName(objectData);
return objectTitle;
}
getDimensionsDescriptions(object, {
requestedClassifications: "http://vocab.getty.edu/aat/300266036"
}) // gets dimensions descriptions using a different AAT term
objectData
/**
* Takes the JSON-LD object and returns the title
**/
function getTitle(object) {
let title = "Get title";
// (1) Find the data you'd like to return for this value and copy/paste
// title = "May Flowers";
// (2) Try to find the value using dot notation
title = object.produce_by[0].another_field[0].attribute[0].value;
// (3) Explore the linked art js docs, are there any helpers that seem to return this information?
// https://www.linkedartjs.org/module-LinkedArtHelpers.html
// title = LinkedArtJS.helperName(object)
// (4) Use LinkedArtJS to construct a more generic call to return the value you need
// title = LinkedArtJS.getValueByClassification(object, AAT classification URI)
return title;
}
/**
* Takes the JSON-LD object and returns the artist
**/
function getArtist(object) {
let artist = "Get artist";
return artist;
}
/**
* Takes the JSON-LD object and returns the type
**/
function getType(object) {
// There are several classes this object fall under, choose one type
let type = "Get type";
return type;
}
/**
* Takes the JSON-LD object and returns the dimensions
**/
function getDimensions(object) {
// Note there are several ways to note dimensions of an object, whether we want to parse the `dimensions` key or return the `dimensions_statement` which you'll find elsewhere in the JSON-LD
let dimensions = "linkedartjs.dimensions(object)";
return dimensions;
}
/**
* Takes the JSON-LD object and returns the thumbnail as an html element
**/
function getThumbnail(object) {
// Is there a helper that returns an array of digital images?
// Feel free to use the helper I wrote below to get a smaller version of that image
let thumbnail = "Get thumbnail";
// thumbnail = getSmallThumbnail("IIF image url");
return thumbnail;
}
/**
* Takes a IIF image url and returns the HTML for a thumbnail
**/
function getSmallThumbnail(iiifImageUrl) {
if (!iiifImageUrl) {
return `${imgNotAvailable}`;
}
const uuid = iiifImageUrl.split("/")[5];
const src = `https://media.getty.edu/iiif/image/${uuid}/full/300,/0/default.jpg`;
return `<img src="${src}">`;
}
function getTombstone(objectData) {
function getField(output) {
return typeof output == "object" ? JSON.stringify(output) : output;
}
const title = getField(getTitle(objectData));
const artist = getField(getArtist(objectData));
const dimensions = getField(getDimensions(objectData));
const type = getField(getType(objectData));
const thumbnail = getThumbnail(objectData);
return `<div class="tombstone">
<ul>
<li>${title}</li>
<li>${artist}</li>
<li>${dimensions}</li>
<li>${type}</li>
<li>${getThumbnail(objectData)}</li>
</ul>
</div>`;
}
html`${getTombstone(objectData)}`
/**
* Paste your object's URI into our collection below
**/
collection = [objectURI, objectURI]
{
let out = [];
collectionData.forEach((objectData) => {
out.push(getTombstone(objectData));
});
return html`${out.join("")}`;
}
mermaidJs = require("mermaid@8.9/dist/mermaid.min.js")
d3Fetch = "d3-fetch"
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.
