29:null 2a:["$","title",null,{"children":"D3: Interaction | Ayaan Kazerouni | Observable"}] 2f:T7af,{ const { width, height } = dimensions; // Create the SVG image area. const svg = d3.create('svg') .attr('width', width) .attr('height', height); // X scale. const x = d3.scaleSqrt() .domain(d3.extent(classics, d => d.words)) .range([margin.left, width - margin.right]) .nice(); // Add the x axis. svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format('~s')).ticks(5)); // Add the x axis title. svg.append('text') .attr('x', (margin.left + (width - margin.right)) / 2) .attr('y', height - margin.bottom + 40) .attr('text-anchor', 'middle') .style('font', '10pt sans-serif') .text('Words (square root scale)'); // Y scale. const y = d3.scaleLinear() .domain(d3.extent(classics, d => d.readingGrade)) .range([height - margin.bottom, margin.top]) .nice(); // Add the y axis. svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // Add the y axis title. svg.append('g') .attr('transform', `translate(${margin.left - 50}, ${(margin.top + (height - margin.bottom)) / 2})`) .attr('text-anchor', 'middle') .append('text') .text('Flesch-Kincaid Reading Grade') .attr('transform', 'rotate(-90)') .attr('y', '1em') .style('font', '10pt sans-serif') // Draw circles for books. // Make sure to limit the selection to circles that have the class "book", // so that legend symbols (which will also be circles) aren't selected. const defaultOpacity = 0.8; const circles = svg.selectAll('circle.book') .data(classics) .join('circle') .attr('class', 'book') // Set a "book" class on each data point. .attr('cx', d => x(d.words)) .attr('cy', d => y(d.readingGrade)) .attr('r', 3) .attr('fill', d => color(d.classification)) .attr('opacity', defaultOpacity); return svg.node(); }30:T5fa,/** * This function populates and positions the tooltip element when * the mouse hovers over the target element. * * @param target The target element for which to attach a tooltip. * @param tooltip A reference to the tooltip div. * @param fn A function to compute the inner HTML of the tooltip. * (datum) => str * * @return The resulting target selection. */ function attachTooltip(target, tooltip, fn) { /* ✅ Steps: 1. Add a "mouseenter" event listener to the target. On mouseenter: * Set the element's stroke to black. * Make the tooltip element visible by setting its visibility to "visible". * Position the tooltip using the "top" and "left" CSS attributes, and the d3.pointer function. * Set the tooltips inner HTML. 2. Add a "mouseout" event listener to the target. On mouseout: * Set the element's stroke to null (i.e., unset the stroke). * Hide the tooltip by setting it's visibility to "hidden". */ target .on('mouseenter', function (event, datum) { d3.select(this) .attr('stroke', 'black'); const [x, y] = d3.pointer(event); const tooltipText = fn(datum); tooltip .style('visibility', 'visible') .style('top', `${y}px`) .style('left', `${x}px`) .html(typeof tooltipText === 'string' ? tooltipText : tooltipText.innerHTML); }) .on('mouseout', function(event, datum) { d3.select(event.target) .attr('stroke', null); tooltip .style('visibility', 'hidden'); }) }31:Tc37,{ const { width, height } = dimensions; // Create the SVG image area. const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Create a separate HTML container that holds the SVG image area // as well as a single empty

element for a tooltip. // The tooltip has some style settings; this includes being invisible by default. // And the tooltip has also been given the id "tooltip". const container = htl.html` ${svg.node()} `; // X scale. const x = d3.scaleSqrt() .domain(d3.extent(classics, d => d.words)) .range([margin.left, dimensions.width - margin.right]) .nice(); // Add the x axis. svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format('~s')).ticks(5)); // Add the x axis title. svg.append('text') .attr('x', (margin.left + (width - margin.right)) / 2) .attr('y', height - margin.bottom + 40) .attr('text-anchor', 'middle') .style('font', '10pt sans-serif') .text('Words (square root scale)'); // Y scale. const y = d3.scaleLinear() .domain(d3.extent(classics, d => d.readingGrade)) .range([dimensions.height - margin.bottom, margin.top]) .nice(); // Add the y axis. svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // Add the y axis title. svg.append('g') .attr('transform', `translate(${margin.left - 50}, ${(margin.top + (height - margin.bottom)) / 2})`) .attr('text-anchor', 'middle') .append('text') .text('Flesch-Kincaid Reading Grade') .attr('transform', 'rotate(-90)') .attr('y', '1em') .style('font', '10pt sans-serif') // ✅ Create a reference to the tooltip object, selected from inside the container. // We gave our tooltip the id "tooltip". So we can select it using the string "#tooltip". // The pound sign (#) is used to signify ids. const tooltip = d3.select(container) .select('#tooltip'); // Draw circles for books. // Make sure to limit the selection to circles that have the class "book", // so that legend symbols (which will also be circles) aren't selected. const defaultOpacity = 0.8; const circles = svg.selectAll('circle.book') .data(classics) .join('circle') .attr('class', 'book') // Set a "book" class on each data point. .attr('cx', d => x(d.words)) .attr('cy', d => y(d.readingGrade)) .attr('r', 3) .attr('fill', d => color(d.classification)) .attr('opacity', defaultOpacity) // ✅ Attach the tooltip to each circle selection. .call(attachTooltip, tooltip, (d) => htl.html`${d.title}
${d.author}`) return container; }32:T505,// "container" is an SVG element to which the legend will be added. // For example, a element we created to hold the legend. function legend(container) { // Styling. const paddingLeft = 20; const entrySpacing = 16; const paddingTop = 15; const titleOffset = 15; const symbolRadius = 4; const labelOffset = symbolRadius; const title = container.append('text') .style('font', '10pt sans-serif') .style('font-weight', 'bold') .attr('y', paddingTop) .text('Category'); const entries = container.selectAll('g') .data(Object.keys(classifications)) // The "data" for the legend is the possible categorical values .join('g') .attr('transform', (d, i) => `translate(0, ${(i * entrySpacing) + paddingTop + titleOffset})`); const symbols = entries.append('circle') .attr('r', symbolRadius) .attr('fill', d => color(d)); // <-- Color the legend elements using the color scale that we've already prepared. const labels = entries.append('text') .attr('x', symbolRadius + labelOffset) .attr('dy', '0.3em') .text(d => d) .style('font', '10pt sans-serif') .style('user-select', 'none'); // <-- Prevent text selection of legend labels (to not interfere with interaction we will add). return container.node(); }33:Tc88,{ const { width, height } = dimensions; // Create the SVG image area. const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Create a separate HTML container that holds the SVG image area // as well as a single empty

element for the tooltips. // Also includes styles for the tooltip. const container = htl.html` ${svg.node()} `; // X scale. const x = d3.scaleSqrt() .domain(d3.extent(classics, d => d.words)) .range([margin.left, dimensions.width - margin.right]) .nice(); // Add the x axis. svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format('~s')).ticks(5)); // Add the x axis title. svg.append('text') .attr('x', (margin.left + (width - margin.right)) / 2) .attr('y', height - margin.bottom + 40) .attr('text-anchor', 'middle') .style('font', '10pt sans-serif') .text('Words (square root scale)'); // Y scale. const y = d3.scaleLinear() .domain(d3.extent(classics, d => d.readingGrade)) .range([dimensions.height - margin.bottom, margin.top]) .nice(); // Add the y axis. svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // Add the y axis title. svg.append('g') .attr('transform', `translate(${margin.left - 50}, ${(margin.top + (height - margin.bottom)) / 2})`) .attr('text-anchor', 'middle') .append('text') .text('Flesch-Kincaid Reading Grade') .attr('transform', 'rotate(-90)') .attr('y', '1em') .style('font', '10pt sans-serif') const tooltip = d3.select(container) .select('#tooltip'); // Draw circles for books. // Make sure to limit the selection to circles that have the class "book", // so that legend symbols (which are also circles) aren't selected. const defaultOpacity = 0.8; const circles = svg.selectAll('circle.book') .data(classics) .join('circle') .attr('class', 'book') // Set a "book" class on each data point. .attr('cx', d => x(d.words)) .attr('cy', d => y(d.readingGrade)) .attr('r', 3) .attr('fill', d => color(d.classification)) .attr('opacity', defaultOpacity) .call(g => attachTooltip(g, tooltip, (d) => `${d.title}
${d.author}`)); // ------------------------------------------------ // ✅ Add the legend. // Create a "g" element for it, and place it using the translate transform. // Then .call(legend) on it. const legendGroup = svg.append('g') .attr('transform', `translate(${width - margin.right + 20}, 50)`) .call(legend); // The .call syntax is the same as doing the following, except it lets us // continue chaining selection functions if we wanted. // // legend(legendGroup); return container; }34:T6d2,// Based on https://observablehq.com/@uwdata/introduction-to-d3-part-2 class SelectionModel { constructor(values) { this.state = new Set(values); // ✅ Create a dispatch object for "change" events. // This allows other objects to attach listeners that can // react to "change" events. this.dispatch = d3.dispatch('change'); } /** * Set the change listener for this selection model. * @param type -- The event type to listen for * @param fn -- The function to be called when the event is triggered * @return this SelectionModel */ on(type, fn) { this.dispatch.on(type, fn); return this; } /** * Clear the selection, and fire off a "change" event. */ clear() { if (this.state.size) { this.state.clear(); this.dispatch.call('change'); } } /** * Toggle the selected state of a given value. * If a value is currently selected, remove it. * If it's not selected, select it. * Then fire a "change" event. * * @param value The value to select or unselect. * @param append If true, add the value to selection. * If false, replace whatever's currently selected * with this value. */ toggle(value, append=false) { if (this.state.has(value)) { this.state.delete(value); } else if (append) { this.state.add(value); } else { this.state.clear(); this.state.add(value); } // Fire off a "change" event, because the selection changed. this.dispatch.call('change'); return this; } /** * Does the selection contain the specified value? * If the selection is empty, all values are considered * selected. */ has(value) { return !this.state.size || this.state.has(value); } }35:T9fd,// Just like our previous legend, but this time takes a SelectionModel // as the second parameter. function interactiveLegend(container, selectionModel) { const paddingLeft = 20; const entrySpacing = 16; const paddingTop = 15; const titleOffset = 15; const symbolRadius = 4; const labelOffset = symbolRadius; const title = container.append('text') .style('font', '10pt sans-serif') .style('font-weight', 'bold') .attr('y', paddingTop) .text('Category'); const entries = container.selectAll('g') .data(Object.keys(classifications)) .join('g') .attr('transform', (d, i) => `translate(0, ${i * entrySpacing + paddingTop + titleOffset})`) .attr('cursor', 'pointer') // ✅ When a legend entry is clicked, toggle its selection. Also pass the selectonModel // a second boolean argument indicating if "shift" was pressed when the click occurred. // In that case, the item will be appended to the selection if it wasn't // already selected (see the "toggle" method in the SelectionModel class). .on('click', (event, datum) => selectionModel.toggle(datum, event.shiftKey)) // ✅ When an item is double clicked, clear the selection. // Because of how our `.has(...)` method is written, an empty // selection includes ALL categories. .on('dblclick', (e, d) => selectionModel.clear()); const symbols = entries.append('circle') .attr('r', symbolRadius) .attr('fill', d => color(d)); const labels = entries.append('text') .attr('x', symbolRadius + labelOffset) .attr('dy', '0.3em') .text(d => d) .style('font', '10pt sans-serif') .style('user-select', 'none') // ✅ Add some visual cues to the legend labels. .on('mouseenter', function() { d3.select(this).style('font-weight', 'bold'); }) .on('mouseout', function() { d3.select(this).style('font-weight', 'normal'); }) // ✅ Recall that our SelectionModel class fires off a "change" event each time it's updated. // Each time the selection changes, update visual properties of the legend labels and symbols. // We are listening for "change.legend" as opposed to simply "change" in case we want to add // more ways to change the selection in the future (e.g., by brushing on the chart). selectionModel.on('change.legend', () => { symbols.attr('fill-opacity', d => selectionModel.has(d) ? 1 : 0.3); entries.attr('fill', d => selectionModel.has(d) ? 'black' : '#ccc'); }) return Object.assign(container.node()); }36:T1306,{ const { width, height } = dimensions; // Create the SVG image area. const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Create a separate HTML container that holds the SVG image area // as well as a single empty

element for the tooltips. // Also includes styles for the tooltip. const container = htl.html` ${svg.node()} `; // Add the x axis. const x = d3.scaleSqrt() .domain(d3.extent(classics, d => d.words)) .range([margin.left, dimensions.width - margin.right]) .nice(); const xAxis = svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format('~s')).ticks(5)); // Add the x axis title. svg.append('text') .attr('x', (margin.left + (width - margin.right)) / 2) .attr('y', height - margin.bottom + 40) .attr('text-anchor', 'middle') .style('font', '10pt sans-serif') .text('Words (square root scale)'); // Add the y axis. const y = d3.scaleLinear() .domain(d3.extent(classics, d => d.readingGrade)) .range([dimensions.height - margin.bottom, margin.top]) .nice(); const yAxis = svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // Add the y axis title. svg.append('g') .attr('transform', `translate(${margin.left - 50}, ${(margin.top + (height - margin.bottom)) / 2})`) .attr('text-anchor', 'middle') .append('text') .text('Flesch-Kincaid Reading Grade') .attr('transform', 'rotate(-90)') .attr('y', '1em') .style('font', '10pt sans-serif') // Create a new SelectionModel object. const selectionModel = new SelectionModel() const legendGroup = svg.append('g') .attr('transform', `translate(${width - margin.right + 20}, 50)`) // Call interactive legend, providing the selectionModel as a parameter in addition // to the group to which the legend is being appended .call(interactiveLegend, selectionModel); // Select the tooltip. We will manipulate this selection in // mouse event listeners. const tooltip = d3.select(container) .select('#tooltip'); // Draw circles for books. // Make sure to limit the selection to circles that have the class "book", // so that legend symbols (which are also circles) aren't selected. const defaultOpacity = 0.8; const circles = svg.selectAll('circle.book') .data(classics, d => d.title) .join('circle') .call(setupCircles); function setupCircles(circles) { return circles .attr('class', 'book') .attr('cx', d => x(d.words)) .attr('cy', d => y(d.readingGrade)) .attr('r', 3) .attr('fill', d => color(d.classification)) .attr('opacity', defaultOpacity) .call(g => attachTooltip(g, tooltip, (d) => `${d.title}
${d.classification}`)); } // Each time the selection changes, call updateCircles() // This listener listens for "change.chart", while the // listener in the legend listens for "change.legend". // Both are really just responding to the SelectionModel's // "change" event, but the added names ("chart" and "legend") // mean they don't interfere with each other. selectionModel.on('change.chart', () => { updateCircles(); }) // ✅ Use the enter, update, and exit cycle // to update chart in response to the selection changes. function updateCircles() { // Filter data to only the selected categories. const data = classics.filter(d => selectionModel.has(d.classification)); // Re-compute the x and y domains. x.domain(d3.extent(data, d => d.words)); y.domain(d3.extent(data, d => d.readingGrade)); // Do the data join. svg.selectAll('circle.book') .data(data, d => d.title) .join( // For entering data, append a circle element. enter => enter.append('circle') .call(setupCircles), // For elements being updated, recompute their x and y positions. update => update .attr('cx', d => x(d.words)) .attr('cy', d => y(d.readingGrade)), // For exiting elements, simply remove() them. exit => exit.remove() ) // Finally: we need to re make the x and y axes based on the new scale domains. // Otherwise, the points will be re-positioned but our axes will be out of date. xAxis.call(d3.axisBottom(x).tickFormat(d3.format('~s')).ticks(5)); yAxis.call(d3.axisLeft(y)); } return container; }37:T502,classics = { const rawData = await (await fetch("https://corgis-edu.github.io/corgis/datasets/json/classics/classics.json")).json() const tidy = rawData.map(d => ({ classification: Object.keys(classifications) .find(k => classifications[k].includes(d.bibliography['congress classifications'].charAt(0))), language: d.bibliography.languages, title: d.bibliography.title, author: d.bibliography.author.name, words: d.metrics.statistics.words, readingGrade: d.metrics.difficulty['flesch kincaid grade'] })) .filter( d => d.words < 1_300_000 && // Omit outliers d.readingGrade < 25 && d.readingGrade > 0 && // Omit outliers !d.title.toLowerCase().match('complete.+works') && !d.title.toLowerCase().match('dictionary') // Omit "complete works" and dictionaries ); const uniqueByTitle = _.uniqBy(tidy, d => d.title); // Sort the items in reverse order by their classification frequencies, so most frequently-occuring // classifications are drawn under the others. const groups = _.groupBy(uniqueByTitle, d => d.classification); return uniqueByTitle.toSorted((a, b) => groups[a.classification].length < groups[b.classification].length ? 1 : -1); }38:[] 2d:{"id":"d26f243c6ac03888","slug":"csc477-d3-interactive-legend","title":"D3: Interaction","thumbnail":"1df753ecef37ec74931f8b6a39b8bf0a1aaf265dbc45c43903f790f15397a16b","access_level":"unlisted","create_time":"$D2025-05-15T16:45:36.683Z","update_time":"$D2026-05-22T18:15:40.148Z","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":1322,"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":29,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"D3: Interaction","cells":[{"id":0,"value":"# D3: Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":972,"value":"toc('h2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"## The data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":942,"value":"htmlTable = {\n const cols = Object.keys(classics[0]);\n\n const columnHeaders = cols.map(c => htl.html`${c}`);\n const groups = _.groupBy(classics, c => c.classification)\n const sample = Object.keys(classifications).map(c => groups[c][0]);\n\n return htl.html`\n \n \n ${columnHeaders}\n \n \n ${\n sample.map(c => htl.html.fragment`\n \n ${cols.map(col => htl.html`\n

${c[col]}\n `)\n }\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"## A simple scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"## Adding a tooltip\n\n*We are only going to talk about one strategy for adding tooltips. Please see [John Guerra's notebook](https://observablehq.com/@john-guerra/how-to-add-a-tooltip-in-d3) for a breakdown of other strategies.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":878,"value":"Look for comments with ✅ in the cells below that highlight key concepts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"## Adding a legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":988,"value":"_A legend is, itself, a data visualization_. This means we should design and construct it using techniques we already know. Let's write and test it in a separate function before incorporating it into our chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"The cell below contains a simple usage example of the legend.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"{\n const container = d3.create('svg');\n\n container.append('g')\n .attr('transform', 'translate(10, 0)')\n .call(legend);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"Next, add the legend to the scatterplot. Look for ✅ comments below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":556,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"## Making the legend interactive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":844,"value":"We want to allow a user to select a category of classics and only see those circles, just like the \"legend\" selections we did in Vega-Lite. We need the following:\n\n1. We should keep track of the selected categories.\n2. We should be able to notify our chart each time the selected categories change.\n3. Our legend should be able to detect clicks, shift-clicks, and double clicks, and update selections as necessary.\n\n**Start by making a relatively simple class to keep track of and change selected categories.** Our `SelectionModel` class has the ability to add and remove selections, and crucially, to fire off (or _dispatch_) events when selections change.\n\nThis is a relatively simple class, but look for ✅ in the code below for one or two unfamiliar bits.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"---\n\nThen, create an `interactiveLegend` function. It's similar our earlier `legend` function in that it takes a `container` and appends a legend to it. The added functionality is that it also takes a `SelectionModel` and styles the legend elements based on what's included in the selection.\n\nLook for ✅ in the code below for the added parts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"---\n\nThe cell below shows a simple usage example of our interactive legend. See that the selection is logged to the console each time the selection changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"{\n const container = d3.create('svg');\n\n const selectionModel = new SelectionModel();\n\n container.append('g')\n .attr('transform', 'translate(10, 0)')\n .call(interactiveLegend, selectionModel);\n\n // For illustrative purposes only: log the selection's state.\n selectionModel.on('change.test', () => {\n console.log(selectionModel.state)\n })\n\n return container.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"---\n\nNow that we know the legend's \"back-end\" works, let's incorporate it into our chart.\nAgain, look for ✅ in the code below to explain the new concepts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"$${flag('bonus', undefined, 'orange')} **Some bonus challenges**\n\n- Can we animate the changes to the chart above?\n- In addition to the legend selection, what would it take to also include point or interval selections? Some hints:\n - Right now, the `SelectionModel`'s \"selection\" is a list of book categories.\n - A point selection (or multi point selection) means selecting _books themselves_.\n - Can you use [`d3-brush`](https://d3js.org/d3-brush) to add a brush selection to the chart?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1175,"value":"---\n\nD3 has many facilities for interactions, including for [brushing](https://d3js.org/d3-brush), [dragging](https://d3js.org/d3-drag), and [zooming](https://d3js.org/d3-zoom). These, coupled with the general capability of HTML and SVG elements to listen for [user events](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events) like clicks, double clicks, hovers, or key presses, add up to enormous potential for web-based interactive graphics.\n\nThe [D3 gallery](https://observablehq.com/@d3/gallery) is replete with examples. I encourage you to _not_ start from scratch if you have an idea and find an example that matches. If you have an idea and can't find existing examples, talk to me! We'll figure it out together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"margin = ({\n top: 50,\n right: 200,\n bottom: 50,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"dimensions = ({\n width: 600,\n height: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"color = d3.scaleOrdinal()\n .domain(Object.keys(classifications))\n .range(d3.schemeTableau10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"// https://www.loc.gov/catdir/cpso/lcco/\n// Further aggregated into subcategories by me\nclassifications = ({\n \"general/other\": \"AZ\",\n \"history\": \"CDEF\",\n \"social sciences\": \"BGHJKL\",\n \"arts\": \"MNP\",\n \"science and technology\": \"QRST\",\n \"military\": \"UV\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"import {flag, stylesheet} from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"import {toc} from '@jonfroehlich/collapsible-toc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"