2c:null 2d:["$","title",null,{"children":"AVL Trees: Understanding Rotations | T.J. Jankun-Kelly | Observable"}] 32:Tc79,html`

Balance Factors. Red indicates left-heavy, green right-heavy, bold indicates where tree is unbalanced.

`33:T1a34,{ const view = html`

A single right-rotation at node 4. Tree still remains unbalanced.

`; const tree_view = d3.select(view); var t = d3.transition(); tree_view.select("#e42").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", 3*ewidth/8) .attr("y1", 250) .attr("x2", ewidth/4) .attr("y2", 150) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", ewidth/8) .attr("y2", 250) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e23").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", 3*ewidth/8) .attr("y1", 250) .attr("x2", 5*ewidth/16) .attr("y2", 350) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/8) .attr("y1", 250) .attr("x2", 3*ewidth/16) .attr("y2", 350) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n4").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (3*ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (ewidth/4) + ", 150)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n4>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .textTween(() => d3.interpolateRound(-2, -1)) .styleTween("font-weight", () => ((t) => t <= 0.5 ? "bold" :"normal")) .transition() .delay(dur) .duration(0) .text(-2) .style("font-weight", "bold") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n2").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (ewidth/4) + ", 150)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (ewidth/8) + ", 250)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n2>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .textTween(() => ((t) => "+" + d3.interpolateRound(1, 2)(t))) .styleTween("font-weight", () => ((t) => t <= 0.5 ? "normal" :"bold")) .attr("transform", "translate(3, 25)") .transition() .delay(dur) .duration(0) .text("+1") .style("font-weight", "normal") .attr("transform", "translate(15, 20)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n3").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (5*ewidth/16) + ", 350)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (3*ewidth/16) + ", 350)") .transition() .delay(dur) .on("start", repeat); }); return view; }34:Tbad,md`Rotations shift the root of a subtree so that one of its children takes its place; the old root then becomes a child of the former child. In the example above, node 4 rotates to become the right child of node 2, its left child—it could not become any other child as 4 is greater than 2. Any former child of the new root in the location the old root is moving to becomes the child of the old root appropriately sorted: In this case, node 3 becomes the left-child of node 4. This rotation, where the *pivot node* (the new root) moves up and clockwise, and the old root moves down and clockwise is called a *right-rotation*; there is an analogous *left-rotation* where the pivot moves counterclockwise. A single rotation is not always enough to fix a tree: In the example above, the tree is still unbalanced after the transition with node 2 being right-heavy (balance factor of +2). Rotating to the right will just return us to the original, unbalanced tree. Instead of a *single rotation*, we can apply a *double rotation* to rebalance: First, we rotate about the pivot in one direction, then rotation about the root in another. The first rotation forces the heavier subtrees to be all on the same side, which the final rotation corrects (see below).`35:T20cf,{ const view = html`

A left-right rotation: Rotate left at node 2, then right at node 4. Tree balanced.

`; const tree_view = d3.select(view); var t = d3.transition(); tree_view.select("#e42").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .attr("x1", 3*ewidth/8) .attr("y1", 250) .attr("x2", ewidth/4) .attr("y2", 150) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", ewidth/8) .attr("y2", 250) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e23").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", ewidth/16) .attr("y1", 350) .attr("x2", ewidth/8) .attr("y2", 250) .transition() .duration(dur) .attr("x1", ewidth/8) .attr("y1", 250) .attr("x2", ewidth/4) .attr("y2", 150) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/8) .attr("y1", 250) .attr("x2", 3*ewidth/16) .attr("y2", 350) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n4").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .attr("transform", "translate(" + (3*ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (ewidth/4) + ", 150)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n4>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .textTween(() => (t) => (t <= 0.5 ? "-2" : "+0" )) .styleTween("font-weight", () => ((t) => t <= 0.5 ? "bold" :"normal")) .style("fill", "black") .transition() .delay(dur) .duration(0) .text(-2) .style("font-weight", "bold") .style("fill", "#c00") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n2").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (ewidth/16) + ", 350)") .transition() .duration(dur) .attr("transform", "translate(" + (ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (ewidth/8) + ", 250)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n2>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .textTween(() => (t) => (t <= 0.5 ? "+1" : "+0" )) .style("fill", "#000") .attr("transform", "translate(3, 25)") .transition() .delay(dur) .duration(0) .transition() .delay(dur) .duration(0) .text("+1") .style("font-weight", "normal") .style("fill", "#090") .attr("transform", "translate(15, 20)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n3").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (ewidth/8) + ", 250)") .transition() .duration(dur) .attr("transform", "translate(" + (ewidth/4) + ", 150)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (3*ewidth/16) + ", 350)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n3>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .textTween(() => (t) => (t <= 0.5 ? "+0" : "-1" )) .style("fill", "#C00") .transition() .duration(dur) .textTween(() => (t) => (t <= 0.5 ? "-1" : "+0" )) .style("fill", "#000") .transition() .delay(dur) .duration(0) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n5>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .textTween(() => (t) => (t <= 0.5 ? "-1" : "+0" )) .style("fill", "black") .transition() .delay(dur) .duration(0) .text(-1) .style("fill", "#c00") .transition() .delay(dur) .on("start", repeat); }); return view; }36:T1dc6,{ const view = html`

Balance Factors before & after a single right rotation

Balance Factors before & after a single left rotation

Balance Factors before & after a left-right double rotation

`; const tree_view = d3.select(view); var t = d3.transition(); tree_view.select("#e12").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .attr("x1", 3*ewidth/4) .attr("y1", 150) .attr("x2", ewidth/2) .attr("y2", 50) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/2) .attr("y1", 50) .attr("x2", ewidth/4) .attr("y2", 150) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e13").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .attr("x1", 3*ewidth/4) .attr("y1", 150) .attr("x2", 7*ewidth/8) .attr("y2", 250) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/2) .attr("y1", 50) .attr("x2", 3*ewidth/4) .attr("y2", 150) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e24").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", ewidth/8) .attr("y1", 250) .attr("x2", ewidth/16) .attr("y2", 350) .transition() .duration(dur) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", ewidth/8) .attr("y2", 250) .transition() .delay(dur) .duration(0) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e25").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", ewidth/8) .attr("y1", 250) .attr("x2", ewidth/4) .attr("y2", 150) .transition() .duration(dur) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", ewidth/2) .attr("y2", 50) .transition() .delay(dur) .duration(0) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", 3*ewidth/8) .attr("y2", 250) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e510").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", ewidth/8) .attr("y1", 250) .attr("x2", 3*ewidth/16) .attr("y2", 350) .transition() .duration(dur) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", 3*ewidth/8) .attr("y2", 250) .transition() .delay(dur) .duration(0) .attr("x1", 3*ewidth/8) .attr("y1", 250) .attr("x2", 5*ewidth/16) .attr("y2", 350) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#e511").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("x1", ewidth/4) .attr("y1", 150) .attr("x2", 3*ewidth/8) .attr("y2", 250) .transition() .duration(dur) .attr("x1", 3*ewidth/4) .attr("y1", 150) .attr("x2", 5*ewidth/8) .attr("y2", 250) .transition() .delay(dur) .duration(0) .attr("x1", 3*ewidth/8) .attr("y1", 250) .attr("x2", 7*ewidth/16) .attr("y2", 350) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n1").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .attr("transform", "translate(" + (3*ewidth/4) + ", 150)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (ewidth/2) + ", 50)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n1>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .textTween(() => ((t) => t <= 0.5 ? "-2" : "+1")) .style("fill", "#090") .styleTween("font-weight", () => ((t) => t <= 0.5 ? "bold" :"normal")) .transition() .delay(dur) .duration(0) .text(-2) .style("fill", "#c00") .style("font-weight", "bold") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n2").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (ewidth/8) + ", 250)") .transition() .duration(dur) .attr("transform", "translate(" + (ewidth/4) + ", 150)") .transition() .delay(dur) .duration(0) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n2>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .textTween(() => ((t) => t <= 0.5 ? "+1" : "+0")) .style("fill", "black") .attr("transform", "translate(15,20)") .transition() .duration(dur) .attr("transform", "translate(3,25)") .transition() .delay(dur) .duration(0) .text("+1") .style("fill", "#090") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n3").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .transition() .duration(dur) .attr("transform", "translate(" + (7*ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (3*ewidth/4) + ", 150)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n4").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (ewidth/16) + ", 350)") .transition() .duration(dur) .attr("transform", "translate(" + (ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n5").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (ewidth/4) + ", 150)") .transition() .duration(dur) .attr("transform", "translate(" + (ewidth/2) + ", 50)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (3*ewidth/8) + ", 250)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n5>.balance").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(3, 25)") .textTween(() => ((t) => t <= 0.5 ? "-1" : "-2")) .styleTween("font-weight", () => ((t) => t <= 0.5 ? "normal" :"bold")) .transition() .duration(dur) .textTween(() => ((t) => t <= 0.5 ? "-2" : "+0")) .style("fill", "black") .styleTween("font-weight", () => ((t) => t <= 0.5 ? "bold" :"normal")) .transition() .delay(dur) .duration(0) .text(-1) .style("fill", "#c00") .style("font-weight", "normal") .attr("transform", "translate(15, 20)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n10").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (3*ewidth/16) + ", 350)") .transition() .duration(dur) .attr("transform", "translate(" + (3*ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (5*ewidth/16) + ", 350)") .transition() .delay(dur) .on("start", repeat); }); tree_view.select("#n11").transition(t) .delay(1000) .on("start", function repeat() { d3.active(this) .duration(dur) .attr("transform", "translate(" + (3*ewidth/8) + ", 250)") .transition() .duration(dur) .attr("transform", "translate(" + (5*ewidth/8) + ", 250)") .transition() .delay(dur) .duration(0) .attr("transform", "translate(" + (7*ewidth/16) + ", 350)") .transition() .delay(dur) .on("start", repeat); }); return view; }3b:T2a8f,md`Consider a left-heavy secondary and let ${tex`h`} be the height of its left subtree **before insertion.** Thus, the height of the other subtrees are: + ${tex`h`} for the secondary pivot's right subtree. Since secondary is left-heavy **after** insertion, it was neutral before. Thus, the two subtrees were equal in height. + ${tex`h+1`} for pivot's left subtree. pivot's right subtree has a height of ${tex`h+2`} (secondary, it's left subtree, and the new node). Given pivot's balance factor of +1, its left subtree must be one shorter than the longer right one. + Also ${tex`h+1`} for root's right subtree. The root's left subtree has a height of ${tex`h+3`} (pivot, secondary, it's left subtree, and the new node). Given root's balance factor of -2, its right subtree must be two shorter than the longer left one. After the first (left) rotation at pivot, that node is now neutral while secondary is now even more left-heavy after adding pivot to the heavier side. But the second (right) rotation fixes this: pivot remains neutral (+0) with no subtree changes, the old root becomes slightly right-heavy (+1) as the non-lengthed subtree of secondary becomes its child, and secondary is also neutral as root and pivot's tallest subtrees are the same height. The above figure depicts this double rotation. If secondary is instead right-heavy, the added node ends up on root's side at the end, making it neutral (+0) and pivot left-heavy (-1). If secondary is neutral (+0) after insertion, then the subtree without the new node was longer to begin with (${tex`h+1`}). Thus, when the final rotation occurs, both root and pivot are neutral (+0) as all their subtrees have equal heights. ## Balance Factors: Summary The following table summarizes the different cases and the resulting balance factors:

Balance factors before and after rotation
Before Rotation			Rotation Type	After Rotation
root	pivot	sec	Rotation Type	root	pivot	sec
-2	-1		Single Right	+0	+0
+2	+1		Single Left	+0	+0
-2	+1	-1	Double Left-Right	+1	+0	+0
-2	+1	+0		+0	+0	+0
-2	+1	+1		+0	-1	+0
+2	-1	-1	Double Right-Left	+0	+1	+0
+2	-1	+0		+0	+0	+0
+2	-1	+1		-1	+0	+0

## Appendix I prefer updating balance factors to heights, but both are viable for AVL Trees (and I believe heights are more common). Balance factors are, afterall, what we are concerned with, so why deal with an intermediary? This approach follows [Malik](https://www.cengage.com/c/data-structures-using-c-2e-malik/9780324782011PF/ "D.S. Malik, Data Structures Using C++, 2nd Edition"), though they do not derive the balance factors directly, just provide them.`3c:[] 30:{"id":"39c38af70145ab5b","slug":"avl-trees-understanding-rotations","title":"AVL Trees: Understanding Rotations","thumbnail":"f3e6812e8cb7c35f7ad683f2fd79955075fcb06c5d5bc074a6f90ced0b544496","access_level":"public","create_time":"$D2020-07-10T21:48:10.709Z","update_time":"$D2020-08-29T15:54:55.143Z","view_time":null,"first_public_time":"$D2020-07-12T17:00:43.471Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":"starter_2024"},"version":531,"publish_version":531,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"e60edadcf2ad6765","slug":"data-structures","title":"Data Structures","owner":{"id":"57cbc1498c70b426","login":"infowantstobeseen","name":"T.J. Jankun-Kelly"}},"type":"notebook","body":{"titling":"auto","title":"AVL Trees: Understanding Rotations","cells":[{"id":0,"value":"md`# AVL Trees: Understanding Rotations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`AVL Trees improve Binary Search Trees by forcing better height balance of the nodes, reducing the maximum insert and search times. This balance is enforced by *rotations* that enforce the *AVL property*: No subtree's height differs by more than one from its sibling. Thus, when we insert or remove an item, we just need to rebalance the subtree containing the new item with one of its ancestor's siblings. How we rebalance depends on that ancestor's *balance factor*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`Any node in an AVL tree can be neutral (the heights are equal), left-heavy (the left subtree has a greater height), or right-heavy (the right subtree is taller). The difference of the two subtree heights indicates the node's *balance factor*; by convention, we subtract the right subtree's height from the left's. A node is valid in an o long as the balance factor does not exceed ±1. In the tree above, node 4 is unbalanced: It has a left-height of 2 but a right-height of 0, for a balance factor of -2. To be an AVL tree, we must restructure the subtree rooted at node 4 so that it is balanced again. We do this via *rotation*.\n\n## Rotations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`Updating the topology of the tree is straightforward once rotations are understood, but updating the balance factors can be costly if not done carefully. While we can recalculate the height of the subtrees after every rotation (or at the end of a double rotation), this costs more the closer we are to the root. Fortunately, once we realize that the AVL property limits the height of all the involved subtrees before we rotate, updating the balance factor comes down to which rotation(s) we have done.\n\n## Balance Factors: Single Rotations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"d3 = require(\"d3-selection@1.4\", \"d3-transition@1.3\", \"d3-ease\", \"d3-interpolate\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"ewidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"dur = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"root = d3.schemeCategory10[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"pivot = d3.schemeCategory10[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"secondary = d3.schemeCategory10[4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 31:"$30:body"