2e:null 2f:["$","title",null,{"children":"CS 465 Tutorial 5 - Welcome to the Graveyard | Christopher Andrews | Observable"}] 34:T75f,Okay, let's take a look at the mechanics of this. Previously, we saw `join()` in its simple form: `join("rect")`. This is shorthand for "take the _enter_ selection and append `rect` elements for every member of the selection". Down below, you will see the join that is governing this behavior. You can see that we have given `join` three arguments, which are all functions. The first function is given the _enter_ selection, the second the _update_, and the third the _exit_. Don't worry too much about the details in there, but you can see that we are setting the color of the entering items to green, and the exiting items are red. We are also appending new `text` elements for the _enter_ selection. One line that I especially want to point out is `.data(data, d => d)`. I would like you to notice the second argument. That is the _key function_. D3 is using this function to determine a unique key for every piece of data. In this instance, all we have is the raw letters, so we are using the identity function (which falls apart a little bit when we duplicate letters). With more complex data it might look something like `.data(data, d => d.id)`, if our data has an `id` property. The key function plays an important role in determining how the join works. If you leave it off, the join is done sequentially instead. Imagine that our data is `['A', 'B', 'C']` and we change it to `['A', 'C']`. When we do the selection, D3 will find three DOM elements to be joined with our two data elements. Without a key, it will just match things up in order, so 'A' will be matched to `A`, and "C" will be matched with `B` and `C` will be left unmatched and sent to the _exit_ selection for removal. This is very confusing for users and not expected behavior. (go ahead and try it out -- remove the key function and try adding and deleting elements) 35:T4cb,### Enter selection For the `join`, we are going to specify the behavior of our three selections. For the moment, however, we are just going to worry about the _enter_ selection, so for the other two arguments to the `join` function I would like you to put in the identity function (i.e., `update=>update` and `exit=>exit`). For the _enter_ selection, I would like you to append a new ghost. recall how we made the first ghost: ```javascript .append("image") .attr("xlink:href", ghostImg) .attr("x", 25) .attr("y", 25) .attr("width", 75) .attr("height", 75); ``` You can largely do the same thing, but we have some changes to make. - We now have a variable called `GHOST_SIZE` that you should use for the `width` and `height` attributes. - For the position, you should use accessor functions to set the position based on the data - I would like you to add a "class" attribute and set it to "ghost" (so our selection is not a lie) If you run the function, ghosts will start popping up in the SVG region and they will just sort of hang out forever. Before we address the immortal ghosts, let's make the behavior a little more ghostly. Set the opacity of the ghost to 0 and use a transition to fade the ghost in.36:[{"id":"1b853d4293b1c4301ef041a8ffaf953c536dd51fdfa2fb1fb205bdf0f3c869106909b475be7e717d03695403aa908511106f506d277bb15acea83b45d60a3844","href":"https://static.observableusercontent.com/files/1b853d4293b1c4301ef041a8ffaf953c536dd51fdfa2fb1fb205bdf0f3c869106909b475be7e717d03695403aa908511106f506d277bb15acea83b45d60a3844","name":"ghost.svg","type":"image/svg+xml","lastModified":1635395418912.451,"size":9013},{"id":"c8b9dcf73ba58156cc63c0b2e340980e1888c9efc4491d9ff1a58d251940e293656fa0cf8a11f53c190fd090266addf35a29e36584aeeafd79109a0734ed67d5","href":"https://static.observableusercontent.com/files/c8b9dcf73ba58156cc63c0b2e340980e1888c9efc4491d9ff1a58d251940e293656fa0cf8a11f53c190fd090266addf35a29e36584aeeafd79109a0734ed67d5","name":"jack_o_lantern_018.jpg","type":"image/jpeg","lastModified":1635395418912.451,"size":3676781}] 32:{"id":"a2f3f2295d584933","slug":"cs-465-tutorial-5-welcome-to-the-graveyard","title":"CS 465 Tutorial 5 - Welcome to the Graveyard","thumbnail":"18671a7b7f02d0c68e88a0fadf984649b17fac1900b89dde6a5dd4013e55461e","access_level":"public","create_time":"$D2021-10-28T04:30:18.912Z","update_time":"$D2021-10-28T13:15:30.010Z","view_time":null,"first_public_time":"$D2021-10-28T13:27:57.868Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":"starter_2024"},"version":381,"publish_version":381,"role":null,"authored":false,"authors":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null}],"members":[{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"collection":{"id":"ef285280251c7f66","slug":"cs-465-f21-tutorials","title":"CS 465 f21 Tutorials","owner":{"id":"1f6018b69d66a2cf","login":"christopherpandrews","name":"Christopher Andrews"}},"type":"notebook","body":{"title":"CS 465 Tutorial 5 - Welcome to the Graveyard","cells":[{"id":0,"value":"# CS 465 Tutorial 5 - Welcome to the Graveyard\n### Transitions, selections and joins \n\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"#### Objectives\n- Learn about transitions -- the fundamental tool of animation in D3\n- Get some practice working with the Enter, Update, Exit join pattern","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Getting Started\n\nWe will follow the same pattern as before. \n\n- Fork the page\n- Share it with me\n- Submit it on Canvas when you are done","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"# Transitions\n\nOne of the attractions of using D3 is [transitions](https://github.com/d3/d3/blob/main/API.md#transitions-d3-transition). Transitions allow us to animate changes in our visualizations. They can help highlight change, help us visualize the passage of time, and can add visual interest to our graphs (check out the Animation examples in the [D3 Gallery](https://observablehq.com/@d3/gallery)). Like seasoning, animation is best when used thoughtfully and judiciously, but it can be a powerful addition when used well.\n\nThe basic pattern to creating transitions is\n- make a selection\n- call `transition()` on the selection\n- use functions like `delay()` and `duration()` to configure the transition\n- use `attr()` and `style()` to describe the state of the selection when the transition is concluded\n\nLet's take a look at an example. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"## A Local Haunting\n\nWhile all of the things we do in this tutorial can be applied to \"proper\" visualizations, I thought in honor of the season we would have a little bit of fun. So, we are going to animate a little ghost. \n\nI've given you the code to display the ghost below. You can see that the basic structure is essentially the same thing that we have done to build other visual structures. This time we are using the [`image`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) tag, which has attributes `x`, `y`, `width`, `height`, and `href` (the source of the image). Take a moment to read through the code so you are familiar with it. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"{\n const width = 500;\n const height = 100;\n\n \n const svg = d3.create(\"svg\")\n .attr(\"viewbox\", [0, 0, width, height])\n .style(\"width\", `${width}px`)\n .style(\"height\", `${height}px`)\n .style(\"background\", \"#222\");\n\n\n const ghost = svg.append(\"image\")\n .attr(\"xlink:href\", ghostImg)\n .attr(\"x\", 25)\n .attr(\"y\", 25)\n .attr(\"width\", 75)\n .attr(\"height\", 75);\n\n // add a transition here\n \n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"The value stored in the `ghost` variable is a **selection** (albeit a selection with only one item in it). As we previously discussed, each call to `attr` or `style` returns the same selection so I can save the selection in a variable despite the method chaining.\n\nWe are going to add a transition to the selection. This is as easy as writing `ghost.transition()`. Of course, this won't actually do anything yet. Let's make the ghost glide across the SVG region. After the transition, set the `x` attribute to 450.\n\nRun the cell. Our ghost will rocket from one side to the other. We can control the speed with `duration`. \n\nAdd a `duration(2000)` call to the transition. This will set the length of the transition to 2 seconds (or 2000 milliseconds). _It doesn't matter where this goes, but I think it is easier to read if the `duration` comes before the `attr`._\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"### Easing\n\nYou will notice that the speed of the ghost is not constant. It speeds up and then slows down. This is controlled by the **easing function**. The idea is that animations look more natural if they ease in and out rather than slamming around at a constant rate. The default is to use [d3.easeCubic](https://github.com/d3/d3-ease#easeCubic), but we can set it to other functions using the `ease` function. \n\nAdd `ease(d3.linear)` to the transition. \n\nThe ghost should now move at a constant rate. \n\nNow try `.ease(d3.easeBounceOut)`.\n\nThere are [a lot of different easing functions](https://github.com/d3/d3-ease). This [notebook](https://observablehq.com/@d3/easing-animations) illustrates what they all look like in action.\n\nPick one that you feel suits the ghost. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"### Delay and chaining\n\nWe can delay the start of a transition with the `delay` function. It works about as you would expect. \n\nOne use of the delay is to build multi-part animations. If you call `transition()` again on a transition, it creates another configurable transition. We can set a delay on the transition so it happens after the first one starts.\n\nAdd a new transition to the ghost that waits for two and a half seconds and then uses `style(\"opacity\", 0)` to make the ghost fade away. Configure the fade to something sufficiently ghostly. \n\nOnce this is working, add two more transitions. The first should shoot the ghost back to the start (still invisible), and the second should fade it back into view again (this is basically what is happening with the balls on the [ease example notebook](https://observablehq.com/@d3/easing-animations)). \n\n\nFeel free to play around and add some more transition to get a feel for how they work.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"# Joins: Enter, Update, Exit\n\nThe second thing we are going to look at in this tutorial is the mechanics of the data join. In class I shared this picture:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"The idea is that we make a selection of elements in the DOM (which is possibly empty). We then **join** this selection with a collection of data elements. This creates _three_ different selections: \n\n- _enter_ (data for which there is not yet a DOM element)\n- _update_ (DOM elements that have been paired up with data)\n- _exit_ (DOM elements for which there is no longer any data).\n\n\nThe [selection example](https://observablehq.com/@d3/selection-join?collection=@d3/d3-selection) does a pretty good job of walking you through the mechanics of this. However, to help you see what is going on, I borrowed some code to create this example. \n\nEdit `data` and then run the cell. Members of the _enter_ selection will be green, the _update_ selection will be black, and the _exit_ selection will be red, before it vanishes. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"data = [ 'A', 'B', 'C']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"svg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 33)\n .attr(\"viewBox\", `0 -20 ${width} 33`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"When you started, `data` contained `['A', 'B', 'C']` and the SVG contained three `text` elements displaying 'A', 'B', and 'C'. If you were, for example, to change `data` to `['A', 'B', 'Z']`, then \"Z\" would be in the _enter_ selection, \"A\" and \"B\" would be the _update_ selection, and \"C\" would be in the _exit_ selection. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"{\n // This functionality is borrowed from https://observablehq.com/@d3/selection-join?collection=@d3/d3-selection\n const t = svg.transition()\n .duration(750);\n\n svg.selectAll(\"text\")\n .data(data, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"fill\", \"green\")\n .attr(\"x\", (d, i) => i * 16)\n .attr(\"y\", -30)\n .text(d => d)\n .call(enter => enter.transition(t)\n .attr(\"y\", 0)),\n update => update\n .attr(\"fill\", \"black\")\n .attr(\"y\", 0)\n .call(update => update.transition(t)\n .attr(\"x\", (d, i) => i * 16)),\n exit => exit\n .attr(\"fill\", \"brown\")\n .call(exit => exit.transition(t)\n .attr(\"y\", 30)\n .remove())\n );\n return md`The function handling the updates`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"# Release the ghosts!\n\nOkay, so let's use what we have learned for a silly little animation. We are going to create a little region where ghosts can wander around. From time to time, new ghosts will fade into view. The other ghosts are skittish and will run away from it before resuming their aimless wandering. If a ghost strays past the boundaries of our region it will fade away.\n\nThe \"data\" behind this visualization will be an array called `ghosts` containing objects with three attributes: `id`, `x` and `y`. \n\nIn the cell below I've given you the bulk of the application (there are a bunch of helper function down in the Appendix as well). Most of the code is concerned with modeling the ghost behavior at the data level.\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof toggle = Inputs.toggle({label: \"Running / Stopped\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"{\n let ghosts = [];\n \n const svg = d3.create(\"svg\")\n .attr(\"viewbox\", [0, 0, WIDTH, HEIGHT])\n .style(\"width\", `${WIDTH}px`)\n .style(\"height\", `${HEIGHT}px`)\n .style(\"background\", \"#222\");\n\n\nwhile (toggle){ // loop while the toggle button is set to running\n ghosts = retire(ghosts); //remove ghosts that are at the edge\n \n ghosts.forEach(walk); // move the ghosts around\n \n if (ghosts.length <2 || randint(0, 3) < 1){\n // add a new ghost\n const newGhost = makeGhost(ghosts); // create a new ghost object\n \n ghosts.forEach((g)=> runaway(g, newGhost)); // all of the ghosts run away from the new ghost\n ghosts.push(newGhost); //add the new ghost to the collection\n }\n\n // use selection and join to display the ghosts\n animate(svg, ghosts);\n\n // allow the svg to redraw and then wait for a second\n yield svg.node();\n await Promises.tick(1000);\n \n}\n \nreturn svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"animate = function(svg, ghosts){\n\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"Your job is to write the `animate` function. \n\nStart by adding the `selectAll`/ `data` / `join` calls. \n\nFor the `selectAll`, instead of selecting a tag, we are going to select \".ghost\". As a reminder, we are using [CSS selector syntax](https://www.w3schools.com/cssref/css_selectors.asp). This time, instead of selecting an element type (like `image`), we are going to select all members of the class \"ghost\" (note that the class name is \"ghost\", the selector is \".ghost\").\n\nFor `data`, you will pass in the `ghosts` data. You will also want to add a key function that returns the ghost's `id`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"### Exit selection\n\nOkay, let's make the ghosts disappear. \n\nYou may have noticed in the selection example above that we can call `remove` on the _exit_ selection. This removes the DOM elements from the page. Add a `remove()` to the _exit_ selection.\n\nNow the ghosts will occasionally just vanish. \n\nThis seems a little abrupt. Add a transition before the `remove` and make your ghost fade away before it is removed. _For a slightly different effect, at the same time that you turn the opacity to 0, set the width and height to 0 as well so the ghost shrinks and fades at the same time_\n\nTest it out. You should see ghosts fading away now.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"### Update selection\n\nThe final piece is to get the ghosts to move around. of course, in the data, they are moving all over the place, we just haven't visualized it yet. \n\nTo address the _change_ in the data, we are going to be dealing with the _update_ selection. Since the position of the ghosts has changed, add `attr` calls and set the `x` and `y` positions based on the new value in the data. \n\nIf you run this (run this), you will see the ghosts sort of pop around the space. At this point, you know where this is going... Add a transition to make the ghosts glide from place to place.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"Okay, that's it! You should now have a collection of somewhat skittish ghosts roaming around in your notebook (and have hopefully learned something about selections, joins and transitions along the way. Happy Halloween!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"Holiday Vectors by Vecteezy","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"ghostImg = await FileAttachment(\"ghost.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"The `randint` function is a simple helper for generating random integers between two numbers. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"/**\n`randint(start, stop)` returns a random integer between `start` and `stop`.\n\n**/\n\nrandint = function(start, stop){\n return start + Math.floor(Math.random() * (stop - start))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"WIDTH = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"HEIGHT = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"GHOST_SIZE = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"makeGhost = function(ghosts){\n const maxId = ghosts.reduce((currentMax, g) => Math.max(currentMax, g.id), -1);\n const newGhost = {id: maxId + 1,\n x : randint(0, WIDTH-GHOST_SIZE),\n y: randint(0, HEIGHT-GHOST_SIZE)};\n \nreturn newGhost;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"walk = function(ghost){\n ghost.x += randint(10,50) * (-1)**randint(0,1);\n ghost.y += randint(10,50) * (-1)**randint(0,1);\n\n ghost.x = ghost.x < 0 ? 0 : ghost.x;\n ghost.x = ghost.x > (WIDTH - GHOST_SIZE) ? WIDTH - GHOST_SIZE : ghost.x;\n \n ghost.y = ghost.y < 0 ? 0 : ghost.y;\n ghost.y = ghost.y > (HEIGHT - GHOST_SIZE) ? HEIGHT - GHOST_SIZE : ghost.y;\n \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"runaway = function(ghost, newGhost){\n const deltaX = ghost.x - newGhost.x;\n const deltaY = ghost.y - newGhost.y;\n const speed = randint(10,100) / Math.sqrt(deltaX **2, deltaY ** 2);\n\n ghost.x += deltaX * speed;\n ghost.x = ghost.x < 0 ? 0 : ghost.x;\n ghost.x = ghost.x > (WIDTH - GHOST_SIZE) ? WIDTH - GHOST_SIZE : ghost.x;\n \n ghost.y += deltaY * speed;\n ghost.y = ghost.y < 0 ? 0 : ghost.y;\n ghost.y = ghost.y > (HEIGHT - GHOST_SIZE) ? HEIGHT - GHOST_SIZE : ghost.y;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"retire = function(ghosts){\n\n return ghosts.filter((g)=> g.x > 0 && g.x < WIDTH-GHOST_SIZE && g.y > 0 && g.y < HEIGHT-GHOST_SIZE);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"halloween = FileAttachment(\"jack_o_lantern_018.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"