25:["$","title",null,{"children":"Hierarchies Yang | Spring 2020 Info Vis | Observable"}] 4b:T504,chart2 = { const root = partition(data); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -width / 2, width, width]); svg .append("g") .attr("fill-opacity", 0.7) .selectAll("path") .data(root.descendants().filter(d => d.depth)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.key); }) .attr("d", arc); // .append("title") // .text( // d => // `${d // .ancestors() // .map(d => d.data.key) // .reverse() // .join("/")}\n${format(d.value)}` // ); svg .append("g") .attr("text-anchor", "middle") .attr("font-size", 8) .attr("font-family", "sans-serif") .selectAll("text") .data( root .descendants() .filter(d => d.depth && ((d.y0 + d.y1) / 2) * (d.x1 - d.x0) > 0.05) ) .join("text") .attr("transform", function(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = (((d.y0 + d.y1) / 2) * width) / 6; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; }) .attr("dy", "0.35em") .text(d => { if (d.depth == 2) return d.data.country_code; else return d.data.key; }); return svg.node(); }4c:T621,chart3 = { const root = pack(data); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "8px sans-serif") .attr("text-anchor", "middle"); const shadow = DOM.uid("shadow"); svg .append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("dy", 1); const node = svg .selectAll("g") .data( d3 .nest() .key(d => d.height) .entries(root.descendants()) ) .join("g") .attr("filter", shadow) .selectAll("g") .data(d => d.values) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); node .append("circle") .attr("r", d => d.r) .attr("fill", d => color(d.height - 1)) .attr("opacity", 0.8); const leaf = node.filter(d => !d.children); leaf.select("circle").attr("id", d => (d.leafUid = DOM.uid("leaf")).id); leaf .append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf .append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.country_code.split(/(?=[A-Z][a-z])|\s+/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => d); node.append("title").text( d => `${d .ancestors() .map(d => d.data.name) .reverse() .join("/")}\n${format(d.value)}` ); return svg.node(); }4d:T591,chart4 = { const root = tree(data); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); const link = g .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkHorizontal() .x(d => d.y) .y(d => d.x) ); const node = g .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`); node .append("circle") .attr("fill", d => (d.children ? "#555" : "#999")) .attr("r", 2.5); node .append("text") .attr("dy", "0.31em") .attr("x", d => (d.children ? -6 : 6)) .attr("text-anchor", d => (d.children ? "end" : "start")) .text(d => { if (d.depth >= 2) return d.data.country_code; else return d.data.key; }) .clone(true) .lower() .attr("stroke", "white"); return svg.node(); }4e:[] 47:{"id":"cc8c0dc6d0b26680","slug":"hierarchies-yang","title":"Hierarchies Yang","thumbnail":"464ae8b8a0d53a9d9804cf7137f680408846ed1607d8abfc063006117dedc183","access_level":"public","create_time":"$D2020-05-04T22:36:14.035Z","update_time":"$D2020-05-06T20:57:55.155Z","view_time":null,"first_public_time":"$D2020-05-05T22:42:50.007Z","has_unpublished_edits":null,"fork":{"id":"ac8d85c2345665ab","slug":"hierarchies","title":"Hierarchies","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":932,"publish_version":932,"role":null,"authored":false,"authors":[{"type":"individual","id":"78437bc34d1b864e","login":"xuanry-1839230","name":"Yang","avatar_url":"https://avatars-next.observableusercontent.com/614a4134c90a61883e9a86eaf027a1171f4a9f16973a657cbfa33763d1c5aa78","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hierarchies Yang","cells":[{"id":0,"value":"md`# Hierarchies Yang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"summary = md`In this notebook, you will create **four different representations** of the same hierarchical data through the following steps: \n1. Read through the brief descriptions of each visualization type on the [datavizcatalogue](https://datavizcatalogue.com/search/hierarchy.html)\n2. Using a dataset of your choice:\n - Create all four layouts mentioned in the reading\n - Reflect on the relative advantages // disadvantages in the layout, noting the **encodings** that the chart type uses, and their impact on **perceptual accuracy**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"setup = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Hierarchies Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/hierarchies-assignment)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"loading_data = md`## Loading Data\nAs in previous notebooks, you'll choose the dataset to work with in this assignment. The only real requirement is that the dataset has a natural hierarchy to it (in other words, each observation belongs to a _group_). Many datasets contain implicit hierarchies, such as countries that belong to _regions_, songs that appear on _albums_, courses that are taught by different _departments_, etc. \n\nIn the cells below, please do the following:\n- Load your data (either directly from the web, or by uploading it as [File Attachment](https://observablehq.com/@observablehq/file-attachments))\n- Display a subset of the data (e.g., the first ~10 rows) using the \\`render_data_table()\\` function, which I've already imported below (see how we did that [here](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#loading_data))\n- Tell us a little bit about the data (just enough so we understand where the data came from, and what we're looking at).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/info474-s17/m14-layouts/master/exercise-1/data/prepped_data.csv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"render_data_table(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`### Data Decription`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"md`This dataset comes from data.world. It containes every country's name and country code, the region they belong to, the country's gdp, life expectacy and fertitlity rate. In this visualization assignment, I'll be using only the gdp data. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"formatting_data = md`## Formatting Data\nIn order to visualize the hierarchies in your data, you'll need to organize your data into different groups. To do so, I suggest you use the \\`d3.nest()\\` method, as described in this [tutorial](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#aggregating_data).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"nested = d3\n .nest()\n .key(d => d.region)\n .entries(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"hierarchy = d3\n .hierarchy({ key: \"World\", values: nested }, d => d.values)\n .sum(d => d.gdp)\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"visualizations = md`## Visualizations\nIn this section, you'll create **all four** representations of hierarchical data discussed on [this page](https://datavizcatalogue.com/search/hierarchy.html). Following each visualization, please make note of the **encodings** in the chart, and the relative advantages / disadvantages in terms of **perception**. \n\nIf you want, you may **import** three out of the four charts (the other one, you must write the code here). As you do so, make sure you import the charts _with_ your data as the data to visualize!\n\nFeel free to organize this section as you see fit (e.g., create sub-sections for each visualzation, put all of your reflections at the end in a table) however you want to organize your work is fine!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"color = d3\n .scaleOrdinal()\n .domain(nested.map(d => d.key))\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`## Tree Map of Countries' GDP by Continent`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"make_treemap_layout = d3\n .treemap()\n .round(true)\n .tile(d3.treemapResquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n make_treemap_layout(hierarchy);\n svg\n .selectAll(\"g\")\n .data(hierarchy.leaves())\n .join(enter => {\n const gs = enter.append(\"g\");\n gs.append(\"rect\")\n .style(\"stroke\", \"white\")\n .style(\"fill\", d => color(d.parent.data.key))\n .style(\"fill-opacity\", .7);\n\n gs.append(\"text\")\n .text(d => d.data.country_code)\n .style(\"font-size\", \"8px\")\n .attr(\"y\", 8);\n return gs;\n })\n .attr(\"transform\", d => `translate(${d.x0}, ${d.y0})`)\n .selectAll(\"rect\")\n .attr(\"width\", d => d.x1 - d.x0)\n .attr(\"height\", d => d.y1 - d.y0);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"md`### Reflection`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"md`This tree map is very good at showing the relationship of the hierarchy using color and positioning of the blocks, it also shows the values (gdp's) for each block using area encoding. Although area encoding is not very accurate, and it can be hard to tell the difference between the blocks, it is very intuitive and strightforward. \nHowever, it can only show one levels of hierarchy, in this case, between the region and the countries within that region.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## Sunburst Diagram of Countries' GDP by Continent`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"arc = d3\n .arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n .padRadius(width / 6)\n .innerRadius(d => (d.y0 * width) / 6)\n .outerRadius(d => Math.max(d.y0 * (width / 6), d.y1 * (width / 6) - 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"partition = data => {\n return d3.partition().size([2 * Math.PI, hierarchy.height + 1])(hierarchy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`### Reflection`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"md`This sunburst diagram map, again, is very good at showing the relationship of the hierarchy using color and positioning of the slices, it also shows the values (gdp's) for each slice well using angle encoding. However, angle encoding is not very accurate, and it's hard to tell the exact size of each slice. Yet the sunburst diagram has an advantage compared to the tree map: it can show multiple levels of hierarchy (although only two levels are present here), which makes it more versatile. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`## Circle Packing of Countries' GDP by Continent`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"pack = data =>\n d3\n .pack()\n .size([width, height])\n .padding(2)(hierarchy)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`### Reflection`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"md`This circle packing graph shows the relationship of the hierarchy using color and positioning of the slices, it also shows the values (gdp's) for each circle well using area encoding. Area encoding is not very accurate, and areas of circles are even more difficult to perceive than area of rectangles(as compared to the tree map case), so it's hard to tell the corresponding value difference based on the sizes. Again, the cirle packing can show multiple levels of hierarchy (although there's only two levels present here), which makes it more versatile. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"md`## Tree Diagram`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"tree = data => {\n hierarchy.dx = 10;\n hierarchy.dy = width / (hierarchy.height + 1);\n return d3.tree().nodeSize([hierarchy.dx, hierarchy.dy])(hierarchy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`### Reflection`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md`This tree diagram shows the world, the different regions and the country codes, but it does't have any encodings that shows magnitude, thus it can't show any information about gdp values. However, this diagram still has some advantage compared to the previous three: it can clearly show all the region and country names, whereas in the previous cases, areas with smaller sizes will not have their tags(country code) show up.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`Figuring out how to show the text for both levels of the hierarchy for the sunburst diagram was difficult.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {\n displayCaution,\n displayImage,\n code_styles,\n table_styles,\n render_data_table\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"table_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null