31:T68b,ex2 = { // Create our dimensions, including the pivot point const width = 200, height = 200; const pivot = {x: 100, y: 100}; // Create our

[NOTE]: Persistent gets tricky when you start throwing in the `this` reference around. We haven't encountered many of these so far, but `this` is a contextual variable that references... itself. Be careful about this one! Make sure to [_read about it_](https://www.w3schools.com/js/js_this.asp) if you ever encounter it.

34:T4e8,## Review: Observable Interactions On Observable, we are provided Observable's `Inputs` library, which comes with some core input types that are compatible with Observable's notebook infrastructure. In summary, here's a list of the input types in the `Inputs` library that we are privy to: - [Button](/@observablehq/input-button) - do something when a button is clicked - [Toggle](/@observablehq/input-toggle) - toggle between two values (on or off) - [Checkbox](/@observablehq/input-checkbox) - choose any from a set - [Radio](/@observablehq/input-radio) - choose one from a set - [Range](/@observablehq/input-range) or [Number](/@observablehq/input-range) - choose a number in a range (slider) - [Select](/@observablehq/input-select) - choose one or any from a set (drop-down menu) - [Text](/@observablehq/input-text) - enter freeform single-line text - [Textarea](/@observablehq/input-textarea) - enter freeform multi-line text - [Date](/@observablehq/input-date) or [Datetime](/@observablehq/input-date) - choose a date - [Color](/@observablehq/input-color) - choose a color - [File](/@observablehq/input-file) - choose a local file We need not go through ALL these, but if you are curious where certain input types from from, they are here for you.35:T5f8,function create_tooltip(parent, width, height) { // Generates the tooltip within the provided parent const tooltip = parent.append("g") .style("pointer-events", "none") // Makes sure default pointer events don't interfere .style("visibility", "hidden") // We make it invisible for now. // Background rectangle tooltip.append("rect") .attr('x',0) // define its x, y, width, and height. Its reference point is the top-left. .attr('y',0) .attr('width',width) .attr('height',height) .attr("fill", "black") // Define the black background for it .attr("rx", 6) // Round the corners to make it visually appealing .attr("ry", 6) .attr("opacity", 0.8); // Make the background just a tad transparent. // Create two text elements in the tooltip, with unique IDs to distinguish them from one another // First, the text representing max temperature tooltip.append("text") .attr('id','tt_temp') // The unique identifier .attr("fill", "white") // Text is white .attr("font-size", 12) // font-size is 12px .attr("x", 5) // Set its position relative to the tooltip .attr("y", 15) .text('Max Temp: -'); // For now, make the entry a blank one in text // Secondly, the text representing the weather type. tooltip.append("text") .attr('id','tt_weather') .attr("fill", "white") .attr("font-size", 12) .attr("x", 5) .attr("y", 30).text('Weather: -'); // Return the tooltip. return tooltip; }36:T4f7,## Additional Materials Everyone has a different approach to their implementation, so check these notebooks out for further inspiration: ${previews([ { path: '@d3/learn-d3-interaction', thumbnail: '5b2771295eeca5633aae25ca9343b876201e27dc54f1d792c3335ec35b0406b1', title: '"Learn D3: Interaction" by D3', author: 'D3' }, { path: '@observablehq/lesson-5-interaction', thumbnail: 'f6fd5ea5ae066563cdb457049594b2fed288d285c185fa2eb99d21d0c05d80b0', title: '"Lesson 5, Interaction" by Robert Kosara', author: 'Robert Kosara' }, { path: '@stanfordvis/making-d3-charts-interactive', thumbnail: 'fcbbfda7e5c6d43dd43446655f9d818b43b828b33d88e40e69c641b80746bee1', title: '"Making D3 Charts Interactive" by Maneesh Agrawala', author: 'Maneesh Agrawala' }, { path: '@john-guerra/how-to-add-a-tooltip-in-d3', thumbnail: 'f1b8f74690bac1be96a686ebd82b1bd01560a0808eb41f8a48fbaaea7c6368a2', title: '"How to add a tooltip in D3" by John Alexis Guerra Gómez', author: 'John Alexis Guerra Gómez' }, { path: '@clhenrick/tooltip-d3-convention', thumbnail: 'ccd8dd2cb997c391d2ad5234c513f7a7dbfee79532f9ef31f3e2a179458c3a9a', title: '"Tooltip (D3 Convention)" by Chris Henrick', author: 'Chris Henrick' } ])}37:[{"id":"edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","href":"https://static.observableusercontent.com/files/edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","name":"video_games_sales@1.csv","type":"text/csv","lastModified":1760474978573.137,"size":1372380},{"id":"f4b8cbb67915be4e95f2ab1eae826c053510f7afe82c81054602b3534421754a4b2b9319b8aa6455c98f44d6bc961e32c92acc7aa11501c2db83a970c2c2f5c5","href":"https://static.observableusercontent.com/files/f4b8cbb67915be4e95f2ab1eae826c053510f7afe82c81054602b3534421754a4b2b9319b8aa6455c98f44d6bc961e32c92acc7aa11501c2db83a970c2c2f5c5","name":"vg_median_sales.png","type":"image/png","lastModified":1760477364528.324,"size":160925}] 2f:{"title":"Week 7 Lab: Interactables","cells":[{"id":0,"value":"# Week 7 Lab: Interactables","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"## General Structure\n\nYou need 3 core components to make an interactable element in D3:\n\n1. A way to manipulate the data (e.g. a button, a mouse event).\n2. Functions to handle changes (e.g. an _event handler_ function).\n3. A connection between (1) and (2).\n\nThere are generally many ways to approach this problem. In Observable, there are some caveats you will need to consider.","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"### Example 1: Button Interaction\n\nObserve the following example below. We have a \"Replay\" button (i.e. an _indirect_ interaction), and an `