29:null 2a:["$","title",null,{"children":"D3: Animation | Ayaan Kazerouni | Observable"}] 2f:T43f,In [the previous lesson](https://observablehq.com/@ayaankazerouni/csc477-d3-mapping-data-to-graphics?collection=@ayaankazerouni/csc-477-cal-poly), we joined data and graphics using the `join` method with a pattern that looked like this: ```js container.selectAll('rect') .data(data) .join('rect') .attr('x', ....) // etc. ``` The above pattern has an oddity — we're seemingly selecting `rect` elements _before_ joining in data and drawing `rect` elements for each data point. That aspect of D3's API exists because the _data join_ interface helps us define both how _new_ marks should be drawn as well as how marks should be updated (if data changes) or removed (if data leaves). Quoting Mike Bostock's [_Thinking with Joins_](https://bost.ocks.org/mike/join/): > Data points joined to existing elements produce the **update** (inner) selection. > > Leftover unbound data produce the **enter** selection (left), which represents missing elements. > > Likewise, any remaining unbound elements produce the **exit** selection (right), which represents elements to be removed. 30:T5c1,In the code snippet above, the `join` method took a single string as an argument, defining the HTML element to be drawn for each data point. `join` has another overload that takes _three functions_ as arguments: 1. To define how new data should be drawn (the **enter** stage). 2. To define how existing data should be redrawn if some properties have been updated (the **update** stage). 3. To define how data that is _leaving_ should exit (the **exit** stage). We can rewrite the above code snippet as follows, giving the `join` method three functions as arguments instead. Each function takes a _selection_ as a parameter. By convention, the parameters for each function are called `enter`, `update`, and `exit`. ```js container.selectAll('rect') .data(data) .join( enter => enter.append('rect') // Append a rectangle for each data point (with x, y, width, height etc.). .attr('x', ...), // etc. update => update, // Don't do anything, since in this example there are no updates. exit => exit.remove() // Remove marks for exiting data. ) ``` This pattern is useful when your visualization is dynamic, e.g., because of interactivity, and you want to control how those changes should occur. In the example below, we have a range slider that lets the user decide a **max median income** threshold. _Play around with the range slider and then expand the code cell to see how the enter, update, and exit functions are used to control the changes._31:Tb3e,simpleJoinCycle = { // Start by creating the svg container as usual. const container = d3.create('svg') .attr('width', width) .attr('height', height); // Y scale and axis const y = d3.scaleLinear() .domain([0, d3.max(csEnrollmentData, d => d.ami)]) .range([height - margin.bottom, margin.top]) .nice(); const yAxis = container.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).tickFormat(d3.format('$~s'))); // X scale and axis const x = d3.scaleBand() .domain(csEnrollmentData.map(d => d.county)) .range([margin.left, width - margin.right]) .padding(0.15); const xAxis = container.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(styleXAxisText); function styleXAxisText(selection) { return selection.selectAll('text') .attr('transform', 'rotate(-90)') .attr('text-anchor', 'end') .attr('y', 0) .attr('dy', '0.35em') .attr('x', 0) .attr('dx', '-9'); } // Add a title container.append('text') .attr('text-anchor', 'start') // Positioning will be based on the middle of the text. .attr('x', 0) // Start of the figure horizontally .attr('y', margin.top - 18) // Above the top margin of the figure vertically. .attr('font-weight', 'bold') .attr('font-family', 'Avenir') .attr('font-size', '11pt') .text('Median household income in California counties'); // This function gets called each time the maxIncome value changes. // Rectangles will be drawn inside the update function below. function update(maxIncome) { // Only show rectangles for those counties that are below the maximum selected income. const data = csEnrollmentData.filter(d => d.ami < maxIncome); // Select all the county rectangles and join them with the new data. container.selectAll('rect.county') .data(data, d => d.county) // Change the data that the rectangles are bound to. .join( // When a record is first encountered, append a black bar, scaled appropriately. enter => enter .append('rect') .attr('class', 'county') .attr('x', d => x(d.county)) .attr('y', d => y(d.ami)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.ami)) .attr('fill', 'steelblue'), // When a record is encountered again, draw a black bar. update => update .attr('fill', 'steelblue'), // When a record is "leaving", change its colour to red. // Alternatively, call "exit.remove()" to remove the bar entirely. exit => exit.attr('fill', 'red'), ) } // Return the container node with the update function added to it as a field. return Object.assign(container.node(), { update }); }32:T83b,chart = { // Start by creating the svg container as usual. const container = d3.create('svg') .attr('width', width) .attr('height', height); // Y scale and axis const y = d3.scaleLinear() .domain([0, d3.max(csEnrollmentData, d => d.ami)]) .range([height - margin.bottom, margin.top]) .nice(); container.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).tickFormat(d3.format('$~s'))); // X scale and axis. // NEW: Before setting the x domain, sort the data using the chosen sort key. // Because of Observable's reactivity, each time sortKey is updated, this entire cell gets redrawn. const domain = csEnrollmentData.toSorted((a, b) => a[sortKey] < b[sortKey] ? -1 : 1).map(d => d.county); const x = d3.scaleBand() .domain(domain) .range([margin.left, width - margin.right]) .padding(0.1); container.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll('text') .attr('transform', 'rotate(-90)') .attr('text-anchor', 'end') .attr('y', 0) .attr('dy', '0.35em') .attr('x', 0) .attr('dx', '-9'); // Add a title container.append('text') .attr('text-anchor', 'start') // Positioning will be based on the middle of the text. .attr('x', 0) // Start of the figure horizontally .attr('y', margin.top - 18) // Above the top margin of the figure vertically. .attr('font-weight', 'bold') .attr('font-family', 'Avenir') .attr('font-size', '11pt') .text('Median household income in California counties'); // Draw a rectangle per data point container.selectAll('rect') .data(csEnrollmentData) .join('rect') .attr('x', d => x(d.county)) .attr('y', d => y(d.ami)) // <-- set the y position based on the linear scale, which is now inverted .attr('height', d => y(0) - y(d.ami)) // <-- set the bar height so that each bar extends downward to the baseline .attr('width', x.bandwidth()) .attr('fill', 'steelblue') return container.node(); }33:T51b,D3's animation facilities can make this a smooth transition by calculating _intermediate values_ between a bar's current position and its new position, and moving the bar through those values over a specified duration (e.g., 750 milliseconds). D3 can do this for most visual variables, like `x` and `y` position, `width` and `height`, `background-color`, etc. D3 uses _interpolators_ to calculate these intermediate values. For example, [`d3.easeLinear`](https://d3js.org/d3-ease#easeLinear) would calculate positional values such that our bar would appear to move at constant speed from position A to position B over the specified duration. [`d3.easeCubic`](https://d3js.org/d3-ease#easeCubic) would give the appearance of a "slow-in, slow-out" movement, i.e., the bar would start moving slowly, pick up speed, and slow down again as it reaches its destination. See [available easing functions in D3](https://d3js.org/d3-ease0), and the excellent [Easing Functions Cheat Sheet](https://easings.net/) by Andrey Sitnik and Ivan Solovev for illustrations of various easing functions. The example below uses the D3 `transition` function to animate the movement of bars each time the sort order changes. *Since we're not yet adding or removing data, we're still using the string version of the `join` method.*34:Tc5d,animated = { // Start by creating the svg container as usual. const container = d3.create('svg') .attr('width', width) .attr('height', height); const y = d3.scaleLinear() .domain([0, d3.max(csEnrollmentData, d => d.ami)]) .range([height - margin.bottom, margin.top]) .nice(); // Add the y axis const yAxis = container.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).tickFormat(d3.format('$~s'))); const x = d3.scaleBand() .domain(csEnrollmentData.map(d => d.county)) .range([margin.left, width - margin.right]) .padding(0.15); const xAxis = container.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(styleXAxisText); // Re-usable style rules for the x-axis labels so we don't repeat ourselves. // (see the update function) function styleXAxisText(selection) { return selection.selectAll('text') .attr('transform', 'rotate(-90)') .attr('text-anchor', 'end') .attr('y', 0) .attr('dy', '0.35em') .attr('x', 0) .attr('dx', '-9'); } // Add a title container.append('text') .attr('text-anchor', 'start') // Positioning will be based on the middle of the text. .attr('x', 0) // Start of the figure horizontally .attr('y', margin.top - 18) // Above the top margin of the figure vertically. .attr('font-weight', 'bold') .attr('font-family', 'Avenir') .attr('font-size', '11pt') .text('Median household income in California counties'); // Instead of letting Observable handle updates by re-executing the entire cell, // expose an "update" function on the chart. We will manually call this function // when "sortKey" changes. function update(key) { // Since x is a band scale, changing the sort order means changing the scale's domain. x.domain(csEnrollmentData.toSorted((a, b) => a[key] < b[key] ? -1 : 1).map(d => d.county)); // Create a transition object that can be reused. // All transitions will take place during the same 750 millisecond window. const t = d3.transition() .duration(750) .ease(d3.easeCubic); // Specify explicitly the stages for the data join. const bars = container.selectAll('rect') .data(csEnrollmentData, d => d.county) // <-- NEW! Key function so D3 remembers what's changing. .join( // Specify the initial settings for bars. enter => enter.append('rect') .attr('x', d => x(d.county)) .attr('y', d => y(d.ami)) .attr('height', d => y(0) - y(d.ami)) .attr('width', x.bandwidth()) .attr('fill', 'steelblue'), update => update.transition(t) .attr('x', d => x(d.county)), exit => exit.remove() ); // Re-compute and draw the x-axis based on the new scale. xAxis.transition(t) .call(d3.axisBottom(x)) .call(styleXAxisText); // Re-apply tick label rotation and other styles. } // Return the container node with the update function added to it as a field. return Object.assign(container.node(), { update }); }35:Tcc5,joinCycle = { // Start by creating the svg container as usual. const container = d3.create('svg') .attr('width', width) .attr('height', height); // Y scale and axis const y = d3.scaleLinear() .domain([0, d3.max(csEnrollmentData, d => d.ami)]) .range([height - margin.bottom, margin.top]) .nice(); const yAxis = container.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).tickFormat(d3.format('$~s'))); // X scale and axis const x = d3.scaleBand() .domain(csEnrollmentData.map(d => d.county)) .range([margin.left, width - margin.right]) .padding(0.1); const xAxis = container.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .call(styleXAxisText); function styleXAxisText(selection) { return selection.selectAll('text') .attr('transform', 'rotate(-90)') .attr('text-anchor', 'end') .attr('y', 0) .attr('dy', '0.35em') .attr('x', 0) .attr('dx', '-9'); } // Add a title container.append('text') .attr('text-anchor', 'start') // Positioning will be based on the middle of the text. .attr('x', 0) // Start of the figure horizontally .attr('y', margin.top - 18) // Above the top margin of the figure vertically. .attr('font-weight', 'bold') .attr('font-family', 'Avenir') .attr('font-size', '11pt') .text('Median household income in California counties'); function update(sortKey, maxIncome) { // Only show rectangles for those counties that are below the maximum selected income. const data = csEnrollmentData.filter(d => d.ami < maxIncome); // Update the x scale's domain to only show the filtered data (sorted by the specified key). // Call .padding again, since it seems the scale won't re-compute this if number of items // in the domain changes. x.domain(data.toSorted((a, b) => a[sortKey] < b[sortKey] ? -1 : 1).map(d => d.county)) .padding(0.15); const t = d3.transition() .duration(750) .ease(d3.easeCubic); // Select all the county rectangles and join them with the new data. container.selectAll('rect.county') .data(data, d => d.county) // Set the data that the rectangles are bound to, since it might have changed. .join( enter => enter .append('rect') .attr('class', 'county') .attr('x', d => x(d.county)) .attr('y', y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', 'steelblue') .transition(t) // Add transition to the y position and height to "grow upwards" .attr('y', d => y(d.ami)) .attr('height', d => y(0) - y(d.ami)), update => update.transition(t) .attr('x', d => x(d.county)) .attr('y', d => y(d.ami)) .attr('height', d => y(0) - y(d.ami)), exit => exit.transition(t) // Shrink downward, then disappear .attr('y', height - margin.bottom) .attr('height', 0) .remove() ) xAxis.transition(t) .call(d3.axisBottom(x)) .call(styleXAxisText); } return Object.assign(container.node(), { update }); }36:[] 2d:{"id":"9c12bdc69aeaf1d3","slug":"csc477-d3-animation","title":"D3: Animation","thumbnail":"4059aeef8b0dab66b0e9509c846cc42fd9b4ac4ada98f9a4adb606ce94db5bec","access_level":"unlisted","create_time":"$D2025-05-16T20:48:29.582Z","update_time":"$D2026-05-13T16:35:34.001Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":1048,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"D3: Animation","cells":[{"id":486,"value":"# D3: Animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":746,"value":"toc('h2,h3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"## More on data joins: the Enter, Update, and Exit stages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":678,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"[_Thinking with Joins_](https://bost.ocks.org/mike/join/). Mike Bostock.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":653,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"// What's Inputs.bind? This is a \"synchronized input\" — I want to provide a widget for the same value\n// later on in this notebook. See https://observablehq.com/@observablehq/synchronized-inputs for more info.\nInputs.bind(\n Inputs.range([80000, 180000], {\n step: 1000, \n label: htl.html`Highlight in red counties with median income higher than`,\n value: 180000\n }),\n viewof maxIncome\n) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"// Call the update function we exposed for the figure.\n// Due to Observable's reactivity, this cell will run each time maxIncome changes.\nsimpleJoinCycle.update(maxIncome)\n, md`California counties with median incomes below ${d3.format('$~s')(maxIncome)}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"_How does D3 \"remember\" which bars are being removed or updated?_ See the call to `.data(...)` in the figure above. We give it a second argument, a _key function_ that enables D3 to identify whether a data point is new (i.e., it is _entering_) or it's something it has seen before (it's being _updated_ or it's _exiting_). In this example, we identify data points by their county names.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Animation\n\nIn a static visualization, we're usually much better served using a join like `.join('rect')`, since we're really only defining the **enter** stage—nothing is being updated or removed.\n\nHowever, when we want to control what our visualization should do when data enters, or changes, or is removed, then the \"full form\" is useful. The most common use case for data joins like we saw above is **animation**, i.e., we want to animate the drawing of our bars, their updates, and how they exit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"### A motivating example: Object constancy\n\nLet's give the bar chart the ability to interactively change whether it displays counties sorted alphabetically or by household income. \nWe could easily use Observable's in-built reactivity to provide this feature.\n\nBelow, we have a radio button by which we can decide how our data should be sorted.\nBecause of Observable's reactivity, the figure gets redrawn each time the choice changes (because the entire cell gets re-run).\n\n_Expand the cell to see how and where the sort order gets set._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"// A synchronized input, because I want this same widget again later on this page.\n// See https://observablehq.com/@observablehq/synchronized-inputs\nInputs.bind(\n Inputs.radio(new Map([\n ['County name', 'county'],\n [\"Median income (asc)\", 'ami'],\n ]), { label: 'Sort bars by:', value: 'county' }),\n viewof sortKey\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"Take a look at `San Luis Obispo` county in the chart above, then click the check box to sort by income. There is a bit of a jarring moment where the object you're focusing on gets \"lost\" and you have to find it again.\n\nWe can use animation to help the user _follow the data_, i.e., we can allow the user to visually track the `San Luis Obispo` bar as it changes its location depending on how the bars are being sorted. This is known as _object constancy_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"### Animating transitions between sort orders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"_How does D3 keep track of each data point's old and new position?_ See the call to `data` in the code below: we now give it a second argument, a _key function_ that D3 uses to identify each record.\n\nIn this example, we're identifying each record by it's county name. If a county's `x` position changes, D3 can tell what its old `x` position was, and animate accordingly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"// A synchronized input, because I want this same widget again later on this page.\n// See https://observablehq.com/@observablehq/synchronized-inputs\nInputs.bind(\n Inputs.radio(new Map([\n ['County name', 'county'],\n [\"Median income (asc)\", 'ami'],\n ]), { label: 'Sort bars by:', value: 'county' }),\n viewof sortKey\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"// Call the update function we exposed for the figure.\n// Due to Observable's reactivity, this cell will run each time sortKey changes.\nanimated.update(sortKey)\n, md`California counties, sorted ${sortKey === 'ami' ? 'by median income' : 'alphabetically'}.` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"## Putting things together: Animating data joins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"// A synchronized input, because I want this same widget again later on this page.\n// See https://observablehq.com/@observablehq/synchronized-inputs\nInputs.bind(\n Inputs.radio(new Map([\n ['County name', 'county'],\n [\"Median household income\", 'ami']\n ]), { label: 'Sort bars by:', value: 'county' }),\n viewof sortKey\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"// A synchronized input, because I want this same widget again later on this page.\n// See https://observablehq.com/@observablehq/synchronized-inputs\nInputs.bind(\n Inputs.range([100000, 180000], { step: 10000, label: \"Highlight counties with median income higher than\", value: 180000 }),\n viewof maxIncome\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"joinCycle.update(sortKey, maxIncome),\nmd`California counties with median income below ${d3.format('$~s')(maxIncome)}, sorted ${sortKey === 'ami' ? 'by median income' : 'alphabetically'}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"viewof sortKey = Inputs.input('ami')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"viewof maxIncome = Inputs.input(180000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { csEnrollmentData } from '@ayaankazerouni/csc477-d3-mapping-data-to-graphics'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"margin = ({\n top: 30,\n right: 20,\n bottom: 85,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"import { stylesheet } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"import {toc} from '@jonfroehlich/collapsible-toc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"