2f:null 30:["$","title",null,{"children":"Highlights of the Met Collection | Ri | Observable"}] 35:Ta99,md` # Highlights of the Met Collection The [Metropolitan Museum of Art](https://www.metmuseum.org/) maintains one of the largest art collections in the world. This visualization shows every item in the Met, grouped by Department and Classification. *Department* refers to the Curatorial Departments of the Met, which collect various works around a unified thematic idea. *Classification* refers loosely to the object's "type", which is sometimes described using the media of which a work was created in. This visualization attempts to offer a single view of all items labeld by the Met as a "highlight," with an emphasis on the Department and Classification of each item. This visualization allows the user to see the distribution of objects by Department and Classification, and to approach answers for a few basic questions about the Met's highlights: - What is the volume of artworks under each department and which has the largest number of items (i.e. Egyptian art, American Art, European Art, Modern and Contemporary Art, etc.)? Which departments in the Met have more highlights? How does this compare to the size of the Department based on your own experiences of visiting the Met? - Which department has the widest variety of materials or classifications used? - Which Departments might require a particular type of conversation work? What kind of conservation work might a Department require more of? ### Directions Hover to view basic information about a given artwork, along with an image, if a public domain image is available. Click a cell to learn more about the work at the Met Collection's website (opens in a new tab). ### Data source The Met publishes a dataset through their Open Access Initiative, [available on GitHub](https://github.com/metmuseum/openaccess). We downloaded this data and used the R programming language to create a subset of it for visualization purposes, filtering only highlights, grouping all objects by Department and Classification, and removing unused data. ### About the creators This project is unaffiliated with the Metropolitan Museum of Art. It was created by a team of students at [Columbia University](https://www.columbia.edu): - [Ji Yeon Kwon](https://www.linkedin.com/in/jiyeon-kwon/), - [Ri Le](https://rile.digital), - [Emma Lu](https://github.com/tarobao), - and [Ryan Walters](https://github.com/rwalt04) for [Agnes Chang's Intro to Data Vis course at Columbia University Computer Science in Fall 2019.](https://columbiaviz.github.io/2019f_w4995/index.html) We give special thanks to [Agnes Chang](http://agneschang.net) and our teaching assistant Vasudha Rengarajan for troubleshooting our project and providing useful feedback. `36:T10bc,chart = { const root = treemap(prepped_tree); let focus = root; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "11px sans-serif"); // const shadow = DOM.uid("shadow"); // svg.append("filter") // .attr("id", shadow.id) // .append("feDropShadow") // .attr("flood-opacity", 0.8) // .attr("dx", 0) // .attr("stdDeviation", 1.2); const nestedTreeData = d3.nest() .key(d => d.height) .entries(root.descendants()) // mutable inspectMe = nestedTreeData; // These are only rectangles // We create group and start the selection/data join up here const node = svg.selectAll("g") .data(nestedTreeData) // first we start on the highest level up .join("g") .attr("class", "filterGroup") // .attr("filter", shadow) .selectAll("g") .attr("transform", d => `translate(${d.y0},${d.x0})`) // what's this class .data(d => d.values) // ?? .join("g") .attr("class", d => "treeHeight_" + d.height) .attr("transform", d => `translate(${d.x0},${d.y0})`); // then we append to the variable labels const labels = svg.append("g") .attr('class', 'nodelabel') .selectAll("g") .data(nestedTreeData) // first we start on the highest level up .join("g") .attr("class", "labelgroup") .selectAll("g") .data(d => d.values) // .join("g") .attr("class", d => "treeHeight_" + d.height) .attr("transform", d => `translate(${d.x0},${d.y0})`); const labelHandler = (d) => { // Hides the label for individual objects // and only shows labels for classifications and departments... mutable inspectData = d; if (d.height >= 1) { return d.data.key; } else { return ''; } }; // assigning it to a mutable makes it possible for us to inspect const rect = node // append itemurl here .append("a") .attr("xlink:href", d => d.data.itemurl) .attr("target", "_blank") .append("rect") .attr("fill", d => color(d.height)) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) // ---- Interactivity starts here .on("mouseover", function(d) { // unsure why we have to use "function(d)" for it to work d3.select(this) .attr("fill", "blue"); mouseoverHelper(d); }) // .on("click", clicked) .on("mouseout", function(d) { d3.select(this) .transition() .duration(250) // try these .attr("fill", d => color(d.height)) d3.select("#tooltip") .remove(); }); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")) .id) .append("use") // .attr("xlink:href", d => d.nodeUid.href); this is broken, our data is missing .clipUid const text = node.append("text") .style("user-select", "none") .attr("pointer-events", "none") .attr("x", 4) .attr("y", 13); // .attr("fill-opacity", d => +labelVisible(d)) text.append("tspan") .text(d => d.data.key) .call(wrap, 70); // node.filter(d => d.children).selectAll("tspan") // .attr("dx", 3) // .attr("y", 13); const tspan = node.filter(d => !d.children) .selectAll("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`); /*function clicked(p) { focus = focus === p ? p = p.parent : p; root.each(d => { d.target = { // what does root.each do? recalculate each rect? x0: (d.x0 - p.x0), // calculate the new view x1: (d.x1 - p.x0), y0: (d.y0 - p.y0), y1: (d.y1 - p.y0) } }); const t = node.transition() .duration(750) .attr("transform", d => `translate(${d.target.y0},${d.target.x0})`); rect.transition(t) .attr("height", d => rectHeight(d.target)) .attr("width", d => rectWidth(d.target)); text.transition(t) .attr("fill-opacity", d => +labelVisible(d.target)); tspan.transition(t) .attr("fill-opacity", d => labelVisible(d.target) * 0.7); } function rectHeight(d) { return (d.x1 - d.x0); // not sure why we change x } function rectWidth(d) { return (d.y1 - d.y0); } function labelVisible(d) { return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 4; }*/ return svg.node(); } 37:T529,mouseoverHelper = d => { // console.log(d); let sl = 47; // temp janky way to split itemurl; index at which objectID starts mutable inspectCurrent = d; // This conditional prevents the viewer from rendering an ugly "undefined" // let's edit this so that you can mouseover any level if (d.height > 0) { // the mouseover is not on a leaf node // it's 4 am so i donlt knwo how to write conditionals // TODO: fix the errors that's thrown and write better logic mutable mouseoverDepartment = (d.parent.data ? d.parent.data.key : ""); mutable mouseoverClassification = d.data ? d.data.key : ""; // leave these blank? mutable mouseoverTitle = ""; mutable mouseoverArtist = ""; mutable mouseoverCulture = ""; mutable mouseoverDate = ""; } else { mutable mouseoverDepartment = d.data.department; mutable mouseoverTitle = d.data.title; mutable mouseoverClassification = d.data.classification; mutable mouseoverArtist = d.data.artistname; mutable mouseoverCulture = d.data.culture; mutable mouseoverDate = d.data.begindate; mutable objectID = d.data.itemurl.substring(sl); // UNCOMMENT THIS WHEN CHART LOADS? // mutable objectImgUrl = httpsObjectData.primaryImageSmall; // mutable objectSecondaryImg = httpsObjectData.additionalImages; } }38:T458,md` # Variables for interactivity See [Agnes' Observable notebook on mutables](https://observablehq.com/@observablehq/introduction-to-mutable-state), which are handy for doing mouseovers here! ## How it works - First, we declare our mutables below as empty strings. - .on() is a d3 func that we assign to mouseoverHelper, which handles the mouseover event. We **reassign** the variables here, basing it on the tree data passed through the [data bind](https://bost.ocks.org/mike/join/). - Then, we create a cell above the chart which renders HTML. Observable uses template tags, and allows you to reference JS variables in the HTML. (wow!!!!) [Observable's notebook, Introduction to HTML](https://observablehq.com/@observablehq/introduction-to-html) - Every time the mouseover event is called, the mutable fires update events to cells that reference it. You can see the updates firing when the left hand margin line flashes. - We style the HTML with CSS below. Avoid styling in the same cell, each _mutable_ update causes the styles to be reapplied, which lags the drawing performance and makes it unusable. `39:[] 33:{"id":"9c93698d3c63a42b","slug":"a4-nested-treemap-test-3-working-viz-draft","title":"Highlights of the Met Collection","thumbnail":"743cfb4b04c972243c2a02b06d2506edb857c8238379317fcb326dee646eac90","access_level":"public","create_time":"$D2019-10-31T02:42:12.186Z","update_time":"$D2019-11-05T01:17:14.087Z","view_time":null,"first_public_time":"$D2019-10-31T02:44:37.245Z","has_unpublished_edits":null,"fork":{"id":"02c3bd8fdcdcca67","slug":"a4-nested-treemap-test-3","title":"A4: Nested Treemap Test 3 (working viz draft)","owner":{"id":"cca82cf86e613018","login":"tarobao","name":"EM LU"}},"stars":14,"starred":false,"owner":{"type":"team","id":"7a5a5a266053fb35","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":"starter_2024"},"version":1569,"publish_version":1569,"role":null,"authored":false,"authors":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null}],"members":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Highlights of the Met Collection","cells":[{"id":546,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"html`\n

${mouseoverDepartment}, ${mouseoverClassification}

${mouseoverTitle}

${mouseoverArtist} ${formatParens(mouseoverCulture)}

${mouseoverDate}

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"md`\n# Behind the Scenes\n\nThe visualization product is above. All code and cells below this describe our process work. Consider this a... *Behind the Scenes...*\n\nIn general, a sketch of our program looks like this:\n- Use R (tidyverse) to subset the data from the original Met dataset (400K+ rows)\n- Upload the file to GitHub as a public Gist\n- Retrieve the .csv file from GitHub Gists and load it into D3\n- Transform the data into a hierarchical format\n- Run the layout function on the tree-ified version of our data\n- Use d3.treemap to generate coordinates/layout for our viz\n- Join the data to create DOM (SVG) elements to our viz \n- Create debugger mutables for simple debugging work\n- Create helper functions for mouseover and clicks\n- Create and update mutable variables in other cells to render the tooltip cells\n- Style our tooltip cells with a CSS observable cell\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"mutable inspectData =''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"mutable inspectSelector = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"mutable httpsObjectData = {\n var apiPath = 'https://collectionapi.metmuseum.org/public/collection/v1/objects/' + objectID;\n return await d3.json(apiPath);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"// ryan's wrap function\nfunction wrap(text, width) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text()\n .split(/\\s+/)\n .reverse(),\n word,\n line = [],\n lineNumber = 0, //<-- 0!\n lineHeight = 1.2, // ems\n x = text.attr(\"x\"), //<-- include the x!\n y = text.attr(\"y\"),\n dy = text.attr(\"dy\") ? text.attr(\"dy\") : 0; //<-- null check\n var tspan = text.text(null)\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node()\n .getComputedTextLength() > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\")\n .text(word);\n }\n }\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"//\n// Logic helper function; ensures that\n// we don't render titles for classifications with only a few\n\nhelperTitleNoOverplot = d => {\n const classificationThreshold = 4;\n console.log(d.parent.children.length);\n // if d's parent doesn't have enough classification categories,\n if (d.parent.children.length < classificationThreshold) {\n // don't draw the titles...\n return '';\n } else {\n // else, just draw the title normally\n return d.data.title;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"mutable inspectCurrent =''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"x = d3.scaleLinear().domain([0, width]).range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"y = d3.scaleLinear().domain([0, height]).range([50, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// This is a flashy way to change the layout type specified as a func in d3.treemap()\nviewof tile = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`\n# Loading the data\n\nFirst, we load the data from GitHub Gist. Be sure to use raw.githubusercontent.com to enable [CORS access](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"// links = d3.csvParse(')\nrowdata = d3.csv(\n \"https://gist.githubusercontent.com/rl2999/444bd7dec27ba79716a48f267ada5847/raw/8172032b87af222d1696da680a470a5f261fe076/met_highlights_dept_class_url.csv\"\n)\n\n// OLD DATA\n// rowdata = d3.csv(\"https://gist.githubusercontent.com/rl2999/e15594889ee650f0a7ffe238d3c03f0e/raw/1edf08ce77b0a600c16f109a75fef3916926a572/met_highlights_dept_class.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`\n## The treemap() layout function\n\nD3 has a special layout functionality that automatically computes x y coordinates for us, given that we want a particular type of layout. In our case, we want a treemap, so we use D3 treemap. \n\nBecause our dataset is comprised of a flat CSV where each row is an object, we must transform this into a tree-like structure for treemap() to compute the values for us. \n\n## Data transformation\n\nThere are multiple steps here:\n- Pass our rowdata into d3.nest() to make a grouped hierarchal data structure\n- Pass the data into d3.hierarchy\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"byDepartmentClassification = d3.nest()\n.key(d => d.department)\n.key(d => d.classification)\n.entries(rowdata)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// Pass thingy into hierarchy\nhier = d3.hierarchy(prepped_tree, funcChildren)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"treemap = data => d3.treemap()\n .tile(d3[tile])\n .size([width, height])\n .padding(vPadding)\n .paddingTop(vPaddingTop)\n .round(true)\n (d3.hierarchy(data, funcChildren)\n // running .sum in this way will count the nodes, similar to .count\n // ideally we want to filter...\n // .sum(d => (d.children ? d.parent : 1)).value\n // changed sum -> count, counting leaves to generate values\n // for now this didn't do much, just changing the output graph a little, rectangles fill up properly\n .count(d => 1)\n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`\n### Creating the tree structure\n\nWhen we use nest, it computes almost everything correctly... except it doesn't wrap it into a structure like\n{\n name: \"met\",\n children: children\n}\n\nTherefore, we must create the object ourselves, and *then* pass it into d3.hierarchy.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"// When we run treemap, this function wraps up stuff \n// and mutates the input, computing values that \n// will be passed into root for the chart all the way above... \n// The code below is called in chart but you can remove it from this here.\n// This line is only included so we can inspect the output above...\ntreemap(prepped_tree);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// There is probably an easier way to do this in JS\n// but this way uses a constructor\nobj = function(name, children) {\n this.name = name;\n this.values = children; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"prepped_tree = new obj(\"metStuff\", byDepartmentClassification);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// This function is used to choose where the children are located\nfuncChildren = d => d.values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"funcChildren(prepped_tree)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"2000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleSequential([8, 0], d3.interpolateViridis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"// Mutables\nmutable mouseoverDepartment = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"\nmutable mouseoverClassification = \"\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"mutable mouseoverTitle = \"\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"mutable mouseoverArtist = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"mutable mouseoverCulture = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"mutable mouseoverDate = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"mutable objectID = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"mutable objectSecondaryImg = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"mutable objectImgUrl = httpsObjectData.primaryImage","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"// renderCulture\n// Helper function that returns a formatted output \n// for variable in parenthesis\nformatParens = (input) => {\n if (input == '') { \n return '';\n } else \n { \n // render out output string with parentheses\n return '(' + input + ')'; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"vPadding = 1.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"vPaddingTop = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"md`\n### License\n\nAs a gesture to the Met's expression of free cultural exchange, this code is licensed under [the Creative Commons Zero license.](https://github.com/metmuseum/openaccess/blob/master/LICENSE)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 34:"$33:body"