25:["$","title",null,{"children":"Lab 12 [Solution]: Interaction (and Animation) in d3 | DrakeDWhite | Observable"}] 49:T431,// Adapted from https://www.d3-graph-gallery.com/graph/arc_basic.html justNodesAndLabels = { const radius = 8; // create a container for the svg; use standard margin notation const container = d3.create('svg') .attr('width', width) .attr('height', height) // create a group to hold the viz const arcGroup = container .append("g") // create the nodes and labels // x locations are determined by the xScale function; // we also add some padding to y to move it away from the margins // we assign an attribute named id, as this can be useful to have later arcGroup .selectAll("nodes") .data(nodes) .join("circle") .attr("cy", (d) => yScale(d)) .attr("cx", margin.left) .attr("r", radius) .attr("fill", "steelblue") .attr("id", (d) => d.id); arcGroup .selectAll("nodeLabels") .data(nodes) .join("text") .attr("y", (d) => yScale(d) + 5) .attr("x", margin.left * 2) .attr("fill", "darkgrey") .style("text-anchor", "middle") .text((d) => d.name); return container.node(); }4a:T444,// Adapted from https://www.d3-graph-gallery.com/graph/arc_basic.html justNodesAndLabels1 = { const radius = 8; // create a container for the svg; use standard margin notation const container = d3.create('svg') .attr('width', width) .attr('height', height) // create a group to hold the viz const arcGroup = container .append("g") // create the nodes and labels // x locations are determined by the xScale function; // we also add some padding to y to move it away from the margins // we assign an attribute named id, as this can be useful to have later arcGroup .selectAll("nodes") .data(nodes) .join("circle") .attr("cx", (d) => xScale(d)) .attr("cy", height - margin.bottom) .attr("r", radius) .attr("fill", "steelblue") .attr("id", (d) => d.id); arcGroup .selectAll("nodeLabels") .data(nodes) .join("text") .attr("x", (d) => xScale(d)) .attr("y", height - margin.bottom * 2) .attr("fill", "darkgrey") .style("text-anchor", "middle") .text((d) => d.name); return container.node(); }4b:T531,bar_chart = { // create the container const svg = d3.create("svg") .attr("width", barWidth + barMargin.left + barMargin.right) .attr("height", barHeight + barMargin.top + barMargin.bottom); // add the x axis svg.append('g') .call(barXAxis) // add the x-axis label svg.append("text") .attr("x", barWidth / 2 ) .attr("y", barHeight + barMargin.bottom + barMargin.top - 5) .attr("text-anchor", "center") .attr("font-size", 10) .attr("font-family", "sans serif") .attr("fill", axisColor) .text("Day in March") // add the y-axis svg.append("g") .call(barYAxis); // add the y-axis label svg.append("text") .attr("x", 0) .attr("y", barMargin.top) .attr("font-size", 10) .attr("font-family", "sans serif") .attr("fill", axisColor) .text("Avg Temp") const dur = 400 // add the points svg.append("g") .selectAll("rect") .data(filtered) .join("rect") .attr("x", d => barX(d.date)) .attr('y', barHeight - margin.bottom) .attr("width", barX.bandwidth()) .attr('height', 0) .attr("fill", "lightgray") .transition() .duration(dur) .delay((d, i) => i * dur) .ease(d3.easeBounceOut) .attr("y", d => barY(d.avg_temp)) .attr("height", d => barHeight - barY(d.avg_temp)) return svg.node() }4c:T502,// modified from https://observablehq.com/@nyuvis/interaction?collection=@nyuvis/guides-and-examples viewof hovering = { const svg = d3.create("svg") .attr("width", exerciseWidth + exerciseMargin.left + exerciseMargin.right) .attr("height", exerciseHeight + exerciseMargin.top + exerciseMargin.bottom); // add the x axis svg.append('g') .call(exerciseXAxis) // add the y-axis svg.append('g') .call(exerciseYAxis); // add the points svg.append('g') .attr('id', 'diamonds') .selectAll('circle') .data(diamonds.filter(d => d.cut == "Ideal" || d.cut == "Fair")) .join('circle') .attr('r', 5) .attr('cx', d=> exerciseX(d.carat)) .attr("cy", d=> exerciseY(d.price)) .attr('fill', 'lightgray') .attr('opacity', 0.3) .on('mouseenter', function() { // this refers to the circle // select it and change its attributes d3.select(this) .attr('opacity', 1) .attr('fill', d=> colorScale(d.cut)) .attr('r', 7) }) // or separate the function out and pass its name .on('mouseleave', mouseLeave); function mouseLeave() { d3.select(this) .attr('fill', 'lightgray') .attr('opacity', 0.3) // return to normal .attr('r', 5) } return svg.node() }4d:T783,// modified from https://observablehq.com/@d3/brushable-scatterplot?collection=@d3/d3-brush viewof brushing = { const svg = d3.create("svg") .attr("width", exerciseWidth + exerciseMargin.left + exerciseMargin.right) .attr("height", exerciseHeight + exerciseMargin.top + exerciseMargin.bottom) const data = diamonds.filter(d => d.cut == "Ideal" || d.cut == "Fair") // add the x axis svg.append('g') .call(exerciseXAxis) // add the y-axis svg.append('g') .call(exerciseYAxis); // add the points const dot = svg.append('g') .attr('id', 'diamonds') .selectAll('circle') .data(data) .join('circle') .attr('r', 5) .attr('cx', d=> exerciseX(d.carat)) .attr("cy", d=> exerciseY(d.price)) .attr('fill', 'lightgray') .attr('opacity', 0.3) // assigning the brushing function const brush = d3.brush() .on('start brush end', handleBrush) // brushing function function handleBrush(e) { let value = [] if (e.selection) { const [[x0, y0], [x1, y1]] = e.selection value = dot .attr('fill', 'lightgray') // this allows the brushing square to move .attr('opacity', 0.3) .filter(d => x0 <= exerciseX(d.carat) && // top corner is to the left of the point x1 > exerciseX(d.carat) && // bottom corner is to the right of the point y0 <= exerciseY(d.price) && // top corner is above the point y1 > exerciseY(d.price)) // bottom corner is below the point .attr("fill", d=> colorScale(d.cut)) // this updates the points within the brushing square .attr('opacity', 0.6) } else { dot.attr("fill", "lightgray") // this resets the view when brushing is exited .attr('opacity', 0.3) } // svg.property('value', value).dispatch('input') } // call the brushing function svg.call(brush) return svg.node() }4e:T5fe,

Filtering

Here are the basic steps for creating one type of filter for a visualization (using legend as a toggle):

Create baseline visualization
Add a filter to the data based on comparisons to a value of another svg
Create the filtering visualizations

Create and arrange svg components of visualization
Create a tracker (usually a list or a map) of which groups you want to display and assign it to a variable
Create function to toggle or remove items from your tracker

Assign variable for if the selected item value was in the tracker (boolean)
Assign variable for the selected item
Change appearance of selected item
Update tracker by changing value for or removing selected item value
Update svg value and simulate input event

Update svg value and simulate input event before returning svg node

Some things to keep in mind - this is one form of linking the appearances of two svgs. This typically means you'll need to know what is appearing in one svg to update the appearance of the other. One way to do this is through values. You'll also need a way to simulate an input event. That's where dispatching comes in.

4f:T79f,viewof legend = { const fontSize = 13; const legendHeight = 100 const legendWidth = 150 const legendMargin = 10 const cuts = diamonds.map(d => d.cut) .filter((value, index, self) => self.indexOf(value) === index) // Track which cuts are selected in the legend. // This is a map from cut to a boolean for // whether or not it the cut is selected. // To start, all cuts are selected. const selected = new Map(cuts.map(d => [d, true])); // function to toggle the legend const toggleLegend = function(e, d) { const isSelected = selected.get(d) // get value for if the square is in the selected or not const square = d3.select(this) // variable for what was selected square.attr('fill', d => isSelected ? 'white' : colorScaleFull(d)) // change the appearance of the square selected.set(d, !isSelected) // change the selected for the dataset svg.property('value', selected).dispatch('input'); } const svg = d3.create('svg') .attr('width', legendWidth) .attr('height', legendHeight) const legendY = d3.scaleBand() .domain(cuts) .range([0, legendHeight]) .padding(0.2) svg .append('g') .selectAll('legend_text') .data(cuts) .join("text") .attr('x', (1.5 * legendMargin) + legendY.bandwidth()) .attr('y', d => legendY(d) + legendMargin) .text(d => d) .attr('font-size', fontSize) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .style('cursor', 'hand') svg .append('g') .selectAll('rect') .data(cuts) .join("rect") .attr("x", d => legendMargin) .attr("y", d => legendY(d)) .attr("width", legendY.bandwidth()) .attr("height", legendY.bandwidth()) .attr("fill", d => colorScaleFull(d)) .attr('stroke', d => colorScaleFull(d)) .attr('stroke-width', 2) .on('click', toggleLegend) svg.property('value', selected).dispatch('input'); return svg.node(); }50:Tb1b,// combining into one cell // modified from https://observablehq.com/@nyuvis/interaction?collection=@nyuvis/guides-and-examples allCharts = { const legendHeight = 100 const legendWidth = 150 const legendMargin = 10 const fontSize = 13; const svg = d3.create("svg") .attr("width", exerciseWidth + exerciseMargin.left + exerciseMargin.right + legendWidth) .attr("height", exerciseHeight + exerciseMargin.top + exerciseMargin.bottom); const chart = svg.append('g') .attr('id', 'chart') // add the x axis chart.append('g') .call(exerciseXAxis) // add the y-axis chart.append('g') .call(exerciseYAxis); // draw points // make it a function so that we can call it when filtering too function drawPoints(data) { const d = chart.append('g') .attr('id', 'diamonds') d .selectAll('circle') .data(data) .join('circle') .attr('r', 5) .attr('cx', d=> exerciseX(d.carat)) .attr("cy", d=> exerciseY(d.price)) .attr('fill', d => colorScaleFull(d.cut)) .attr('opacity', 0.6) } drawPoints(diamonds); // draw legend const cuts = diamonds.map(d => d.cut) .filter((value, index, self) => self.indexOf(value) === index) const legend = svg.append('g') .attr('id', 'legend') const legendY = d3.scaleBand() .domain(cuts) .range([0, legendHeight]) .padding(0.2) const selected = new Map(cuts.map(d => [d, true])); const toggleLegend = function(e, d) { const isSelected = selected.get(d) // get value for if the square is in the selected or not const square = d3.select(this) // variable for what was selected square.attr('fill', d => isSelected ? 'white' : colorScaleFull(d)) // change the appearance of the square selected.set(d, !isSelected) // change the selected for the dataset d3.select('#diamonds').remove() // remove the original chart drawPoints(diamonds.filter(d => selected.get(d.cut))); // redraw the points } legend .append('g') .selectAll('legend_text') .data(cuts) .join("text") .attr('x', exerciseWidth - exerciseMargin.right + (2 * legendMargin)) .attr('y', d => legendY(d) + exerciseHeight - legendHeight) .text(d => d) .attr('font-size', fontSize) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .style('cursor', 'hand') legend .append('g') .selectAll('rect') .data(cuts) .join("rect") .attr("x", d => exerciseWidth - exerciseMargin.right) .attr('y', d => legendY(d) + exerciseHeight - legendHeight - legendMargin) .attr("width", legendY.bandwidth()) .attr("height", legendY.bandwidth()) .attr("fill", d => colorScaleFull(d)) .attr('stroke', d => colorScaleFull(d)) .attr('stroke-width', 2) .on('click', toggleLegend) return svg.node(); } 51:[{"id":"4455198943cbf22790bc588d2673eb7382d99e1f5046560e5e3e4e06d8bd2934a506d6f5f5acf5844ba1e18f7d424a43264a98e66697cdec4d12a0c2da5678e0","href":"https://static.observableusercontent.com/files/4455198943cbf22790bc588d2673eb7382d99e1f5046560e5e3e4e06d8bd2934a506d6f5f5acf5844ba1e18f7d424a43264a98e66697cdec4d12a0c2da5678e0","name":"example.csv","type":"text/csv","lastModified":1681832838484.723,"size":15313}] 29:{"id":"90efbcc02dc85c2a","slug":null,"title":"Lab 12 [Solution]: Interaction (and Animation) in d3","thumbnail":null,"access_level":"public","create_time":"$D2023-04-18T15:47:18.484Z","update_time":"$D2023-04-18T15:47:18.484Z","view_time":null,"first_public_time":"$D2023-04-18T15:47:18.484Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d14075fff1a3b7f1","login":"drakedwhite","name":"DrakeDWhite","avatar_url":"https://avatars-next.observableusercontent.com/a6d51c2fa518826e0334ee98b5410204ee41703adfc4dddc8215dcc5beb3981c","tier":"starter_2024","bio":"Masters Student (MIMS) at UC Berkeley. Interested in cybersecurity law/ethics/policy, but I also do a lot of poking around in code.","followed_by_you":false,"follows_you":false},"version":757,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"348872f63a8ffe6c","login":"drakedwhite","name":"DrakeDWhite","avatar_url":"https://avatars-next.observableusercontent.com/a6d51c2fa518826e0334ee98b5410204ee41703adfc4dddc8215dcc5beb3981c","tier":null,"bio":"Masters Student (MIMS) at UC Berkeley. Interested in cybersecurity law/ethics/policy, but I also do a lot of poking around in code.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"348872f63a8ffe6c","login":"drakedwhite","name":"DrakeDWhite","avatar_url":"https://avatars-next.observableusercontent.com/a6d51c2fa518826e0334ee98b5410204ee41703adfc4dddc8215dcc5beb3981c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lab 12 [Solution]: Interaction (and Animation) in d3","cells":[{"id":0,"value":"# Lab 12 [Solution]: Interaction (and Animation) in d3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"

Welcome back to d3! We're on our second of three labs:

\n\n

Introduction: Basics of how d3 works & how to use data in d3
Visualizing: Practicing different kinds of visualizations in d3 and how to use them successfully
Interaction: Exploring interactive techniques (and animation) in d3

\n\n

We'll start with a short review of what we've done so far:

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"// create example data\nnodes = [{id: 0, name: \"A\"}, {id: 1, name: \"B\"}, {id: 2, name: \"C\"}, {id:3, name: \"D\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"CreatingSVGs = md`## Creating SVGs\nLet's define the SVG. We need to declare a width and height. It's also standard to declare some margins around the width and height so that the visualization does not bump up against the edges of the view.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"margin = ({top: 20, bottom: 20, left: 30, right: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`We are going to want to place the nodes evenly spaced along the x-axis. To do this, we use a d3 scale function. The domain is the names of the nodes and the range is the span of pixels across the horizontal width of the SVG, from 0 to the width.\n\nSince we are mapping ordinal values along discrete points on the axis, we will use d3's scalePoint scale function. To quote D3 in depth, \"scalePoint creates scale functions that map from a discrete set of values to equally spaced points along the specified range\". This works similarly to scaleBand, which we covered last week.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"xScale = d3.scalePoint()\n .domain(nodes)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"yScale = d3.scalePoint()\n .domain(nodes)\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`### Create nodes\nFirst we will just lay out the circles and their text labels. The code below should be quite familiar, since it is very similar to what we've seen in prior notebooks. This code also shows that you can name the selection what you want (you don't have to name a circle selection \"circle\"; here we named it \"nodes\").\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`\n**Exercise:** rotate this chart so that it puts the nodes on the y-axis. Don't forget to make a yScale().\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"PracticeAnimation = md`\n\n\n## Animations\n### transition() and duration()\n\nLet's try out some animation. We'll just start with the nodes. For this first animation, we first place the circles high up in of the svg (y value of 50) and then let them animate into the lower y value of height-margin.bottom. \n\nThis animation will use the duration() function to cause a staggered a delay when dropping the circles; the length of the delay is a function of the index (position in the array) of the circle. We'll also add a bounce, just for fun!\n\n>*Tip: If you want more explanation of these transitions, or further info on animations, check out this observable notebook: \nLearn D3: Animation*\n\n>*Tip: to see the different kinds of easing for d3 in action, see \nTransition Easing Comparisons*\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// code goes here\n// Adapted from https://www.d3-graph-gallery.com/graph/arc_basic.html\nanimatedNodes= {\n const radius = 8;\n\n // create a container for the svg; use standard margin notation\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n\n // create a group to hold the viz\n const arcGroup = container\n .append(\"g\")\n\n arcGroup\n .selectAll(\"nodes\")\n .data(nodes)\n .join(\"circle\")\n .attr(\"cx\", (d) => xScale(d))\n .attr(\"cy\", 20)\n .attr(\"r\", radius)\n .attr(\"fill\", \"steelblue\")\n .attr(\"id\", (d) => d.id)\n .transition() // add this\n .ease(d3.easeBounceOut) // add this second to show how ease transitions change the animation\n .duration((d, i) => i * 500) // add this \n .attr(\"cy\", height - 50) // add this\n\n return container.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`### Chaining transition()\nNow we will use an example of ability to *chain* transitions in d3; this allows you to have a series of animations, one after the next, by simply adding more transitions as shown below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"{\n const radius = 8;\n\n // create a container for the svg; use standard margin notation\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n\n // create a group to hold the viz\n const arcGroup = container\n .append(\"g\")\n\n const animatedNodes = arcGroup\n .selectAll(\"nodes\")\n .data(nodes)\n .join(\"circle\")\n .attr(\"cx\", (d) => xScale(d))\n .attr(\"cy\", 20)\n .attr(\"r\", radius)\n .attr(\"fill\", \"steelblue\")\n .attr(\"id\", (d) => d.id)\n .transition() \n .ease(d3.easeBounceOut) \n .duration((d, i) => (i + 1) * 500) \n .attr(\"cy\", height - 50) // add this\n\n animatedNodes\n .transition()\n .attr(\"fill\", \"firebrick\")\n .transition()\n .ease(d3.easeBackIn)\n .attr(\"cy\", 50);\n\n return container.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"

So, let's apply this to a visualization to show how this might be used to animate data.

Interaction

\n\n

We've covered one kind of interaction (mouseover). There are many other kinds of interaction! See this notebook for more information and examples! We'll work through a couple of these:\n

\n\n

Another (quick) approach to hovering
Brushing
Filtering

\n\n

For a lot of forms of interactive visualizations, we'll use viewof, rather than just assigning the chart to a variable. This allows for more fluid updating of the interactive view (see more in views as well). Views also allow us to set value properties to svgs and emit an input when values are changed. This will be very important if you want to create a filter.

Hovering (again)

\n\n

Here are the basic steps for creating a visualization which responds on mouse hover:

\n\n

Create baseline visualization
Add .on('mouseenter') to the data group
Add .on('mouseleave') to the data group

Brushing

\n\n

Here are the basic steps for creating a visualization which has brushing:

\n\n

Create baseline visualization
Add variable for d3.brush()
Add function for what should occur on the inside of the brushed area (e.g., handleBrush(event))

If there is an event:

Get variables to represent the corners of the brush box
Set attributes for what the non-brushed points should look like
Filter for if the points are in the brush box
Set attributes for what the brushed points should look like

Else: Set attributes for what the points should look like as baseline

Call brushing function svg.call(brush)

Filtering

Interaction

Hovering (again)

Brushing

Variables & etc.

Exercise information

Animation Example