2b:null 2c:["$","title",null,{"children":"Getting Started with Linked Art | Alternative Versions | Observable"}] 31:T9b8,md`## Sidenote: How do we Observable? The good part: This is dynamic, emerging platform that facilitates learning and sharing, minimizing (some of) the heartache of learning HTML/CSS and Javascript. It also allows us to observe a community as it is forming, to observe that community figure out its own norms, objectives, users, and limits. Not to mention the chance to participate in that community. The downside: This platform is emerging and somewhat baroque to navigate. User-contributed questions and answers, on the site and offsite, tend toward experienced users--please don't let this disuade you! The best tip we have is to make liberal use of the on the right. It is beyond the scope of this short workshop to do much more than scratch the surface, but if you are unfamiliar, we hope you have a chance to explore the excellent training materials linked to below. - [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable) (high level intro to the ecosystem) - [Learning Observable Notebooks and Cells](https://observablehq.com/@observablehq/learning-observable-notebooks-and-cells) - [Observable Documentation](https://observablehq.com/@observablehq/documentation) - [Observable's Observable Account Collections](https://observablehq.com/@observablehq) > ↑ Check out this page for great curated collections of notebooks.`32:T490,{ // 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; }33:T634,renderMermaid = function (obj, direction = "LR", debug = false) { let result; if (!debug) { result = mermaid` graph ${direction} classDef Literal fill:#ffffff,stroke:#000000; classDef CRM_Entity fill:#FFFFFF,stroke:#000000; classDef CRM_Entity_URI fill:#FFFFFF,stroke:#000000; classDef Temporal_Entity fill:#82C3EC, stroke:#000000; classDef Temporal_Entity_URI fill:#d2e9f9,stroke:#000000; classDef Type fill:#FAB565, stroke:#000000; classDef Type_URI fill:#fde7ce,stroke:#000000; classDef Time-Span fill:#86BCC8, stroke:#000000; classDef Time-Span_URI fill:#dcebef,stroke:#000000; classDef Appellation fill:#FEF3BA, stroke:#000000; classDef Appellation_URI fill:#fffae6,stroke:#000000; classDef Place fill:#94CC7D, stroke:#000000; classDef Place_URI fill:#e1f1da,stroke:#000000; classDef Persistent_Item fill:#FFFFFF, stroke:#000000; classDef Persistent_Item_URI fill:#FFFFFF,stroke:#000000; classDef Conceptual_Object fill:#FDDC34, stroke:#000000; classDef Conceptual_Object_URI fill:#fef6cd,stroke:#000000; classDef Physical_Thing fill:#E1BA9C, stroke:#000000; classDef Physical_Thing_URI fill:#f3e5d8,stroke:#000000; classDef Actor fill:#ffbdca, stroke:#000000; classDef Actor_URI fill:#ffe6eb,stroke:#000000; classDef PC_Classes fill:#cc80ff, stroke:#000000; classDef PC_Classes_URI fill:#ebccff,stroke:#000000; classDef Multi_URI fill:#cccccc,stroke:#000000; ${convertToMermaid(obj)} `; } else { result = convertToMermaid(obj); } return result; }34:[{"id":"c1863358ef8ad3e1dadcdef78befc157077a3cd63b705c068194ff397f5b7b3f51423d4c2a488665891062b99ce6b7da24078ca329652589234f25d8f5c3a0b8","href":"https://static.observableusercontent.com/files/c1863358ef8ad3e1dadcdef78befc157077a3cd63b705c068194ff397f5b7b3f51423d4c2a488665891062b99ce6b7da24078ca329652589234f25d8f5c3a0b8","name":"example-tombstones.png","type":"image/png","lastModified":1680540780806.643,"size":771058},{"id":"668d50791cd2462ba5c3a6b5c0c30396ff71e2f8b86bb3ca4848eef3053ff29ae3ba73661a6f99e6b62377720b15a48f37d6948a9c65fdda39ecb12708265c5b","href":"https://static.observableusercontent.com/files/668d50791cd2462ba5c3a6b5c0c30396ff71e2f8b86bb3ca4848eef3053ff29ae3ba73661a6f99e6b62377720b15a48f37d6948a9c65fdda39ecb12708265c5b","name":"technical-metadata.jpg","type":"image/jpeg","lastModified":1680540780806.643,"size":63834}] 2f:{"id":"0de7666fd291211e","slug":null,"title":"Getting Started with Linked Art","thumbnail":"926cc140e76925bfec81544c5f512d80ea16db09b9d72f3f2b2f000da6c99239","access_level":"public","create_time":"$D2023-04-03T16:53:00.806Z","update_time":"$D2023-04-03T18:30:30.144Z","view_time":null,"first_public_time":"$D2023-04-03T16:53:00.806Z","has_unpublished_edits":null,"fork":{"id":"213c0dd1303af681","slug":null,"title":"Getting Started with Linked Art","owner":{"id":"ee8a4748ec1e808f","login":"linked-art-in-practice","name":"Linked Art in Practice / MW23"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f275564200d93208","login":"alternativeversions","name":"Alternative Versions","avatar_url":"https://avatars-next.observableusercontent.com/9b80a012ff3d109d94c70b9005c0b85c2b44a92d1a5bbdb3e8d27c8a8d723837","tier":"starter_2024"},"version":1309,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"26c0cc4698467567","login":"alternativeversions","name":"Alternative Versions","avatar_url":"https://avatars-next.observableusercontent.com/9b80a012ff3d109d94c70b9005c0b85c2b44a92d1a5bbdb3e8d27c8a8d723837","tier":null}],"members":[{"type":"individual","id":"26c0cc4698467567","login":"alternativeversions","name":"Alternative Versions","avatar_url":"https://avatars-next.observableusercontent.com/9b80a012ff3d109d94c70b9005c0b85c2b44a92d1a5bbdb3e8d27c8a8d723837","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Getting Started with Linked Art","cells":[{"id":0,"value":"# Getting Started with Linked Art","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This notebook has a few purposes: To introduce the Observable environment, to get us familiar with parsing Linked Art serialized as JSON-LD, and to start applying what we've learned to linked open data provided by Getty APIs.\n\n_Note that by default your notebooks are public on Observable._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"### The Basics\n\n- A _notebook_?\n- Forking & creating an account\n- Declaring cell types (i.e., text or code)\n- Importing dependencies\n- Using reactive variables ➡️ (e.g., ``$\\{${templatesString}}``)\n- Attaching files\n\n**Shortcuts**\n\n- **⇧ + return** run currently selected cell\n- **⌘ + return** run currently selected cell and create a new one\n- **⌘ + /** comment/uncomment line (in a JS cell)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"// Update the variable below and see what happens\n// templatesString = \"a totally different value\"\ntemplatesString = \"lol\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"md`\n---\n### Your First Tasks:\n\n1. Fork this notebook so you have a copy of your own to work with\n2. Try commenting/uncommenting a line\n3. Edit the value of the variable \\`templateString\\` above -- what do you notice?\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Lets build a tombstone 🪦\n\nIn this exercise, we'll walk you step by step on how to parse a JSON-LD object to gather the data to build a \"tombstone\". This tombstone will display an image of the object with the title, artist and type below. Once you've complete all the steps, you should see the completed tombstone below.\n\nLet's get started!\n\n

${await FileAttachment(\"example-tombstones.png\").image()}\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"### Choose an object to work\n\nSearch through the Getty's [Museum Collection](https://www.getty.edu/art/collection/) and select an object to work with. Once you've found the one, scroll to the bottom of the page and find the object's technical resources, which should include the URL to the JSON-LD. Click on the copy button and paste that information below.\n\n- [Unknown (Greek), *Statue of a Victorious Youth*, 300–100 B.C.](https://www.getty.edu/art/collection/object/103QSX)\n- [Barbara Kasten, *Construct XIV*, 1982](https://www.getty.edu/art/collection/object/108JBN)\n- [Franz Xaver Messerschmidt (German, 1736 - 1783), _The Vexed Man_, 1771–1783](https://www.getty.edu/art/collection/object/103QTJ)\n- [Martin Puryear, *That Profile*, 1999](https://www.getty.edu/art/collection/object/108FQT)\n- [Carl Van Vechten, *[Jacob Lawrence]*, 1941](https://www.getty.edu/art/collection/object/106GX3)\n- [Carrie Mae Weems, *After Manet*, 2003](https://www.getty.edu/art/collection/object/109898)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"technicalMetadata = FileAttachment(\"technical-metadata.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"---\n### Fetch the JSON-LD\n\nReplace the following string with a URI to the object you've chosen. Once entered, you should see the JSON-LD update below. You can click on it to expand and see it all.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"viewof objectURI = Inputs.text({\n label: \"JSON-LD URI\",\n placeholder:\n \"https://data.getty.edu/museum/collection/object/3738b2d5-ee17-4367-bf84-b46961cfa5f4\",\n value:\n \"https://data.getty.edu/museum/collection/object/3738b2d5-ee17-4367-bf84-b46961cfa5f4\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"// Here we are using a convenient helper built into Observable that makes the http request\n// to the URI, reads the response, and returns just the JSON\nobjectData = d3.json(objectURI)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"---\n### Parse the data\n\nWhoa, that's a lot of data! How can we parse through all that information? Click on the download icon to download a png of your object's JSON-LD.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"wrap_svg_downloadable(renderMermaid(objectData))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Lucky for you, we've already imported the [LinkedArt.js library](https://github.com/thegetty/linkedart.js) for you down below. You're welcome.\n\nAs a reminder, LinkedArt.js has helpers already created to look for particular common fields. Let's start by looking for the title, or the **name** of the object. What helper do you think could populate that for you?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"LinkedArtJS = import(\"https://cdn.skypack.dev/@thegetty/linkedart.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`---\n\n### Finding the title`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"### Finding the artist within\n\nNow to find the artist. For this one, we're going to ask you to do a little bit more digging. Let's first take a look at the object you selected above. _(We've also displayed it below for you to make it easier to find again.)_ Remember the various fields to search through? (i.e. \"classified_by\", \"identified_by\", \"produced_by\")\n\nHint: The artist _produced_ the object, so maybe you will find something there.\n\nThis is great practice for the exercises below.\n\n[Checkout the Linked Art documentation for production activity to see how artists are being modeled.](https://linked.art/model/object/production/#base-production-activity)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":852,"value":"objectData.produced_by","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"## Put it all together\n\nNow we're going to grab the metadata to populate a tombstone. Let's start with:\n\n- Title\n- Artist\n- Dimensions\n- Type\n- Thumbnail","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"/**\n * Takes the JSON-LD object and returns the title\n **/\nfunction getTitle(object) {\n let title = \"Get title\";\n // (1) Find the data you'd like to return for this value and copy/paste\n // title = \"That Profile\";\n\n // (2) Try to find the value using dot notation\n // title = object.produce_by[0].another_field[0].attribute[0].value\n\n // (3) Explore the linked art js docs, are there any helpers that seem to return this information?\n // https://www.linkedartjs.org/module-LinkedArtHelpers.html\n // title = LinkedArtJS.helperName(object)\n\n // (4) Use LinkedArtJS to construct a more generic call to return the value you need\n title = LinkedArtJS.getValueByClassification(\n object.identified_by,\n \"http://vocab.getty.edu/aat/300417193\"\n );\n\n return title;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"md`\n__getTitle Output:__ ${getTitle(objectData)}\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"/**\n * Takes the JSON-LD object and returns the artist\n **/\nfunction getArtist(object) {\n let artist = object.produced_by.carried_out_by[0]._label;\n return artist;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"md`__getArtist Output:__ ${getArtist(objectData)}\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"/**\n * Takes the JSON-LD object and returns the type\n **/\nfunction getType(object) {\n // There are several classes this object fall under, choose one type\n let type = \"Get type\";\n return type;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`__getType Output:__ ${getType(objectData)}\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"/**\n * Takes the JSON-LD object and returns the dimensions\n **/\nfunction getDimensions(object) {\n // 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\n let dimensions = \"Get dimensions\";\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"md`__getDimensions Output:__ ${getDimensions(objectData)}\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"/**\n * Takes the JSON-LD object and returns the thumbnail as an html element\n **/\nfunction getThumbnail(object) {\n // Is there a helper that returns an array of digital images?\n // Feel free to use the helper I wrote below to get a smaller version of that image\n let thumbnail = \"Get thumbnail\";\n // thumbnail = getSmallThumbnail(\"IIF image url\");\n return thumbnail;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"md`__getThumbnail Output:__ ${getThumbnail(objectData)}\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"/**\n * Takes a IIF image url and returns the HTML for a thumbnail\n **/\nfunction getSmallThumbnail(iiifImageUrl) {\n if (!iiifImageUrl) {\n return `${imgNotAvailable}`;\n }\n const uuid = iiifImageUrl.split(\"/\")[5];\n const src = `https://media.getty.edu/iiif/image/${uuid}/full/300,/0/default.jpg`;\n return `

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"function getTombstone(objectData) {\n function getField(output) {\n return typeof output == \"object\" ? JSON.stringify(output) : output;\n }\n const title = getField(getTitle(objectData));\n const artist = getField(getArtist(objectData));\n const dimensions = getField(getDimensions(objectData));\n const type = getField(getType(objectData));\n const thumbnail = getThumbnail(objectData);\n return `

${title}
${artist}
${dimensions}
${type}
${getThumbnail(objectData)}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"html`${getTombstone(objectData)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"## Let's make a collection\n\nAdd your object's URI to the array below and let's see our collection of tombstones.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"/**\n * Paste your object's URI into our collection below\n **/\ncollection = [objectURI, objectURI]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"promises = collection.map((e) => fetch(e))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"collectionData = await Promise.all(collection.map((e) => d3.json(e)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"{\n let out = [];\n\n collectionData.forEach((objectData) => {\n out.push(getTombstone(objectData));\n });\n\n return html`${out.join(\"\")}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"#### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"mermaidJs = require(\"mermaid@8.9/dist/mermaid.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"mermaid = function (...values) {\n const src = String.raw(...values).trim();\n const id = \"mmd\" + Math.round(Math.random() * 10000);\n try {\n mermaidJs.initialize({\n securityLevel: \"loose\"\n });\n const result = mermaidJs.render(id, src, undefined);\n return svg([result]);\n } catch (ex) {\n console.error(ex);\n throw ex;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"import { convertToMermaid } from \"@workergnome/mermaid-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"import {\n wrap_svg_downloadable,\n download_icon\n} from \"@kelleyvanevert/little-things\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"imgNotAvailable = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"d3Fetch = \"d3-fetch\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"#### CSS Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"