Published
Edited
Mar 31, 2022
1 fork
5 stars
linked_art = {
// First, write a function that asynchronously retrieves records.
// (See the previous lesson for an explanation of how this works.)
function get_linked_art(urls) {
const data = Promise.all(
urls.map(async (url) => {
return await (await fetch(url)).json()})
)
return data;
}
// Then run that function over the entire list of URLs.
let linked_art = get_linked_art(record_urls)
return linked_art
}
lajs = import("https://cdn.skypack.dev/@thegetty/linkedart.js");
art_data = linked_art.map(l => {
return {"title": lajs.getPrimaryName(l),
"artist": lajs.getFieldValuesByClassifications(l.produced_by, "referred_to_by","https://data.getty.edu/museum/ontology/linked-data/tms/object/producer-description")[0],
"materials": lajs.getMaterialStatements(l)[0],
"type": lajs.getValueByClassification(lajs.normalizeFieldToArray(l, 'referred_to_by'), "http://vocab.getty.edu/aat/300435443"),
"dimensions": lajs.getDimensionsDescriptions(l)[0],
"begin": lajs.getProductionTimespans(l)[0].begin_of_the_begin,
"end": lajs.getProductionTimespans(l)[0].end_of_the_end,
"image": lajs.getDigitalImages(l)[0],
"cultures": lajs.getCultures(l)[0]} })
viewof artdf = aq.from(art_data)
// Use .spread() to separate the dimension column into width and height attributes
.spread({ dimensions: d => op.split(d.dimensions, /\s×\s|\s/) }, { drop: false, limit: 2 , as: ["width", "height"]})
.derive({
width: d => op.parse_float(d.width), // Turn width into a number
height: d => op.parse_float(d.height), // Turn height into a number
begin: d => op.parse_date(d.begin), // Turn begin into a date
end: d => op.parse_date(d.end) // Turn end into a date
})
.view()
thumbnails = artdf.column("image").data.slice(3).map(t => `https://media.getty.edu/iiif/image/${t.split("/")[5]}/full/300,/0/default.jpg`)
async function get_image(thumbnail) {
// Get image thumbnail
const response = await fetch(thumbnail)
const blob = await response.blob()
const url = URL.createObjectURL(blob)
// Get image info to explicitly set width and height
const data = await (await fetch(`${thumbnail.split("full")[0]}info.json`)).json()
// Create image object
const image = new Image()
image.src = url
// Explicitly set width and height
image.width = 300
image.height = 300.00 / parseFloat(data.width) * parseFloat(data.height)
// Return image object
return image
}
images = await Promise.all(thumbnails.map(async (t) => get_image(t)))
images[4]
ml5 = require("ml5")
featureExtractor = ml5.featureExtractor('MobileNet').ready
features = featureExtractor.infer(images[4]).data()
feature_matrix = Promise.all(images.map(async i => featureExtractor.infer(i).data()))
UMAP = (await require("umap-js")).UMAP
umapLayout = new UMAP().fit(feature_matrix)
viewof umapData = artdf.slice(3).assign(aq.from(umapLayout.map(u => {return {x: u[0], y:u[1]}}))).view()
scatterplot1 = Plot.plot({
x: {axis: null, insetLeft: 20, insetRight: 20},
y: {axis: null, insetBottom: 20, insetTop: 20},
marks: [
Plot.dot(umapData, {x: "x", y: "y", stroke:"type"}),
Plot.text(umapData, {x: "x", y: "y", text: d => d.materials.split(" ")[0], dy: -8})
]
})
scatterplot2 = Plot.plot({
x: {axis: null, insetLeft: 20, insetRight: 20},
y: {axis: null, insetBottom: 20, insetTop: 20},
marks: [
Plot.text(umapData, {x: "x", y: "y", text: d => d.artist.split("(")[0], dy: -8, fill: "cultures"})
]
})
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.
