31:T685,{ // 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:T887,{ // TO-DO const width = 800, height = 300, margins = { top:50, left: 60, right:60, bottom:50 }; const svg = d3.create('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); // The origianl genres and years must be preserved const years = vg_sales_2.map(d => d.Year); const genres = vg_sales_2.map(d => d.Genre); const sales = vg_sales_2.map(d => d.Sales_Median); const x_scale = d3.scaleBand().domain(unique(years)).range([0, width]); const x_axis = chart.append('g').attr('transform', `translate(0, ${height})`).call(d3.axisBottom(x_scale)); const y_scale = d3.scaleLinear().domain(d3.extent(sales)).range([height, 0]); const y_axis = chart.append('g').call(d3.axisLeft(y_scale)); const color_scale = d3.scaleOrdinal() .domain(unique(genres)) .range([ '#a6cee3','#1f78b4','#b2df8a', '#33a02c','#fb9a99','#e31a1c', '#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928' ]) // The sales can differ based on genre //const vg_sales_genre = vg_sales_2.filter(d => d.Genre == genre); chart.selectAll('circle') .data(vg_sales_2) .enter() .append('circle') .attr('r', 5) .attr('cx', d => x_scale(d.Year)) .attr('cy', d => y_scale(d.Sales_Median)) .attr('fill', d => color_scale(d.Genre)); // Title chart.append("text") .attr("transform", `translate(${width/2}, ${-margins.top/2})`) .style("text-anchor", "middle") .style("font-weight", 700) .text('Video Game Sales, by Genre and Year'); // Axes titles chart.append("text") .attr("transform", `translate(${width/2}, ${margins.top + height - 10})`) .style("text-anchor", "middle") .text('Year (1980-2022)'); chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margins.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text('Median NA Sales (Millions)'); return svg.node() }36:T8bc,{ // TO-DO genre; // TO-DO const width = 800, height = 300, margins = { top:50, left: 60, right:60, bottom:50 }; const svg = d3.create('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); // The origianl genres and years must be preserved const years = vg_sales_2.map(d => d.Year); const genres = vg_sales_2.map(d => d.Genre); const sales = vg_sales_2.map(d => d.Sales_Median); const x_scale = d3.scaleBand().domain(unique(years)).range([0, width]); const x_axis = chart.append('g').attr('transform', `translate(0, ${height})`).call(d3.axisBottom(x_scale)); const y_scale = d3.scaleLinear().domain(d3.extent(sales)).range([height, 0]); const y_axis = chart.append('g').call(d3.axisLeft(y_scale)); const color_scale = d3.scaleOrdinal() .domain(unique(genres)) .range([ '#a6cee3','#1f78b4','#b2df8a', '#33a02c','#fb9a99','#e31a1c', '#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928' ]) // The sales can differ based on genre const vg_genre = (genre == 'All') ? vg_sales_2 : vg_sales_2.filter(d => d.Genre == genre); chart.selectAll('circle') .data(vg_genre) .enter() .append('circle') .attr('r', 5) .attr('cx', d => x_scale(d.Year)) .attr('cy', d => y_scale(d.Sales_Median)) .attr('fill', d => color_scale(d.Genre)); // Title chart.append("text") .attr("transform", `translate(${width/2}, ${-margins.top/2})`) .style("text-anchor", "middle") .style("font-weight", 700) .text('Video Game Sales, by Genre and Year'); // Axes titles chart.append("text") .attr("transform", `translate(${width/2}, ${margins.top + height - 10})`) .style("text-anchor", "middle") .text('Year (1980-2022)'); chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margins.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text('Median NA Sales (Millions)'); return svg.node() }37:T84c,seattle_basic = { const width = 600, height = 500, margins = {top: 50, bottom: 50, left: 50, right: 50}; const svg = d3.create('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); const months = seattle_data.map(d => d.month_date); const temp_max = seattle_data.map(d => d.temp_max); const weather = seattle_data.map(d => d.weather); const weather_colors = unique(weather).map(d => weather_mapper[d]); const x_scale = d3.scaleTime() .domain(d3.extent(months)) .range([0, width]); const x_axis = chart.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%b"))); const y_scale = d3.scaleLinear() .domain(d3.extent(temp_max)) .range([height, 0]); const y_axis = chart.append('g') .call(d3.axisLeft(y_scale)); const c_scale = d3.scaleOrdinal() .domain(unique(weather)) .range(weather_colors); chart.selectAll('circle') .data(seattle_data) .enter() .append('circle') .attr('r', 5) .attr('cx', d => x_scale(d.month_date)) .attr('cy', d => y_scale(d.temp_max)) .attr('fill', 'transparent') .attr('stroke', d => c_scale(d.weather)) .attr('stroke-width', 2) // Title chart.append("text") .attr("transform", `translate(${width/2}, ${-margins.top/2})`) .style("text-anchor", "middle") .style("font-weight", 700) .text('Seattle Weather, by Max Temperature and Weather Type'); // Axes titles chart.append("text") .attr("transform", `translate(${width/2}, ${margins.top + height - 10})`) .style("text-anchor", "middle") .text('Time of Year'); chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margins.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text('Max Temperature'); return svg.node(); }38: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; }39:Te1a,seattle_tooltip = { // This should be copied from the previous code block. const width = 600, height = 500, margins = {top: 50, bottom: 50, left: 50, right: 50}; const svg = d3.create('svg') .attr('width', width + margins.left + margins.right) .attr('height', height + margins.top + margins.bottom); const chart = svg.append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margins.left}, ${margins.top})`); const months = seattle_data.map(d => d.month_date); const temp_max = seattle_data.map(d => d.temp_max); const weather = seattle_data.map(d => d.weather); const weather_colors = unique(weather).map(d => weather_mapper[d]); const x_scale = d3.scaleTime() .domain(d3.extent(months)) .range([0, width]); const x_axis = chart.append('g') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%b"))); const y_scale = d3.scaleLinear() .domain(d3.extent(temp_max)) .range([height, 0]); const y_axis = chart.append('g') .call(d3.axisLeft(y_scale)); const c_scale = d3.scaleOrdinal() .domain(unique(weather)) .range(weather_colors); // NEW: Create the tooltip with a width of 100 and a height of 40 const tooltip = create_tooltip(chart, 100, 40); // NEW: Create 3 events to handle mouse events wiht our chart. // Mouse Over Handler const onmouseover = (event, d) => { const [x, y] = d3.pointer(event); // Get mouse position tooltip.select('text#tt_temp') // Modify the tooltip text representing max temp .text(`Max Temp: ${d.temp_max}`); tooltip.select('text#tt_weather') // Modify the tooltip text representing weather .text(`Weather: ${d.weather}`); // Modify the Position, make visible tooltip .raise() // Make this SVG element above all circles .attr('transform', `translate(${x},${y-40})`) // Move it to match the mouse position .style('visibility','visible'); // Make it visible } // Mouse Move Handler const onmousemove = (event, d) => { const [x, y] = d3.pointer(event); // Get mouse position tooltip.attr('transform', `translate(${x},${y-40})`); // Modify the Position, make visible } // Mouse Leave Handler const onmouseleave = (event, d) => { tooltip.style('visibility','hidden'); // Make invisible } // NEW: New event handlers! chart.selectAll('circle') .data(seattle_data) .enter() .append('circle') .attr('r', 5) .attr('cx', d => x_scale(d.month_date)) .attr('cy', d => y_scale(d.temp_max)) .attr('fill', 'transparent') .attr('stroke', d => c_scale(d.weather)) .attr('stroke-width', 2) .on('mouseover', onmouseover) .on('mousemove', onmousemove) .on('mouseleave', onmouseleave); // Title chart.append("text") .attr("transform", `translate(${width/2}, ${-margins.top/2})`) .style("text-anchor", "middle") .style("font-weight", 700) .text('Seattle Weather, by Max Temperature and Weather Type'); // Axes titles chart.append("text") .attr("transform", `translate(${width/2}, ${margins.top + height - 10})`) .style("text-anchor", "middle") .text('Time of Year'); chart.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margins.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text('Max Temperature'); return svg.node(); }3a: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' } ])}3b:[{"id":"f4b8cbb67915be4e95f2ab1eae826c053510f7afe82c81054602b3534421754a4b2b9319b8aa6455c98f44d6bc961e32c92acc7aa11501c2db83a970c2c2f5c5","href":"https://static.observableusercontent.com/files/f4b8cbb67915be4e95f2ab1eae826c053510f7afe82c81054602b3534421754a4b2b9319b8aa6455c98f44d6bc961e32c92acc7aa11501c2db83a970c2c2f5c5","name":"vg_median_sales.png","type":"image/png","lastModified":1760487554585.596,"size":160925},{"id":"edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","href":"https://static.observableusercontent.com/files/edcc7d9615c45c91b19bc84f3d95610dc9681e96cd552c5b7829b7eb18d6dbda313a526cae6e148fa7969926adc5b6f7db57dbd2de5854490242238146f1a72a","name":"video_games_sales@1.csv","type":"text/csv","lastModified":1760487554585.596,"size":1372380}] 2f:{"title":"Week 7 Lab: Interactables: Solutions","cells":[{"id":0,"value":"# Week 7 Lab: Interactables: Solutions","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 `