2b:null 2c:["$","title",null,{"children":"D3 Tutorial: Interactivity + Animated Transitions | Cameron Yick | Observable"}] 31:T592,// This is a copy of the code from our last lesson: // https://beta.observablehq.com/@hydrosquall/d3js-bar-charts-lollipops-and-nesting#chart_lollipop chart_lollipop_local = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name) svg.append("g") .call(yAxis) return svg.node(); }32:T513,md` A few members of the class have used [Processing](http://processing.org) to make interactive pieces for, so I wanted to talk a little bit about the difference between \`loop\` and \`event-driven\` programming. Technically speaking there is an event loop happening in any computational piece as we're not doing parallel programming, but we're talking about choosing the right level abstraction to think in. In Processing, we usually have a "setup" and a "draw" function. Setup runs once, and then "draw" repeats for the entire lifetime of the program. Inside the loop, we would check for the status of some event, such as a [mousePress](https://processing.org/reference/mousePressed.html) or a [keyPress](https://processing.org/reference/keyPressed.html), and adjust the display accordingly. (Follow links for code samples). In Javascript, the event-driven programming we'll use on the web, we instead attach "event listeners" to specific elements on the page. These could be dedicated buttons or specific parts of our chart. We could use the loop model if we really wanted, but the event-driven model is easier to reason about for interactive charting applications, and requires less rewriting of our application. `33:T7f0,chart_lollipop_click_all_circles = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name) // Let's add event listeners to each of the circles groups.selectAll('circle') // .attr('fill', 'grey') // Uncomment me to confirm we selected the circles we wanted to. .on('click', function(d) { // note we have to use REGULAR function (not arrow syntax) for us // to be able to use d3.select(this) console.log(d); // we have access to the data object! check your console. console.log(this); // we also have access to the DOM object... d3.select(this) .attr('fill', MATERIAL_BLUE) // we can change color! .attr('r', d.num_missions * 3) // or size! or really, any visual property we want. }) svg.append("g") .call(yAxis) return svg.node(); }34:T60b,chart_lollipop_click_global = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name) // Lets change all the circles at once! let isToggled = false; svg.on('click', ()=> { isToggled = !isToggled; groups.selectAll('circle') .attr('fill', d=> isToggled ? 'orange' : bar_color(d)) // (condition) ? valueIfTrue : valueIfFalse }); svg.append("g") .call(yAxis) return svg.node(); }35:T7e5,chart_lollipop_click_button = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => lollipop_size) .attr("fill", bar_color) .append("title") .text(d => d.name) // Let's change all the circles with the same country of origin as the original one. groups.selectAll('circle') .on('mouseover', function(d) { // note we have to use REGULAR function (not arrow syntax) for us // to be able to use d3.select(this) const countryCode = d.location.country; console.log(countryCode); // we also have access to the DOM object... groups.selectAll('circle') .filter(d=> d.location.country != countryCode) .attr('opacity', 0.1); }).on('mouseleave', function(d) { groups.selectAll('circle') .attr('opacity', 1); }); svg.append("g") .call(yAxis); return svg.node(); }36:T7db,chart_lollipop_click_all_circles_transition = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions )) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name) // Let's add event listeners to each of the circles groups.selectAll('circle') .on(`${listen_mode}`, function(d) { console.log(d); // we have access to the data object! check your console. console.log(this); // we also have access to the DOM object... d3.select(this) .transition() // .ease(d3.easeLinear) // See also d3.easeCubicInOut, d3.easeQuadInOut // .duration(750) // 750 is the default duration in milliseconds. .attr('fill', MATERIAL_BLUE) // we can change color! .attr('r', d.num_missions * 3) // or size! or really, any visual property we want. }) svg.append("g") .call(yAxis) return svg.node(); }37:T42b,md`There are [many options within d3.transition](https://github.com/d3/d3-transition#selection_transition) to learn and master, but probably the most important ones to know are the ability to customize duration and the easing function. The [official list of easing functions](https://github.com/d3/d3-ease) (with the associated timing graphs) is available, and you can also make your own. The default if you don't set anything else is "cubic-in-out" as "linear" looks artificial in many cases. Due to friction/inertia and other pesky physics principles, maintaining constant anything and skipping acceleration phase in real life is impossible. You can spend lots of time tuning animation parameters! > For those interested in seeing strong examples of easing done well: see the animated ["Illusion of Life: 12 Principles GIFS"](http://the12principles.tumblr.com) based on the Disney text. > For those interested in strong use of animation in "cinematic" data visualization, see Neil Halloran's award winning ["The Fallen" series](http://www.neilhalloran.com). `38:T5fd,chart_lollipop_sort = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name); svg.append("g") .call(yAxis); // Let's make a function for sorting things svg.on('click', ()=> { svg.selectAll('circle') .sort((a,b) => d3.ascending(a.num_missions, b.num_missions)) // Challenge: flip orders... .transition() .duration(1500) .attr('cx', (d, i) => xScaleSorted(i));// adjust cx position based on the sort' }); return svg.node(); }39:T7bb,chart_lollipop_sort_with_rectangle = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name); svg.append("g") .call(yAxis); // Let's make a function for sorting things svg.on('click', ()=> { svg.selectAll('circle') .sort((a,b) => d3.ascending(a.num_agencies, b.num_agencies)) // Challenge: flip orders... .transition() .duration(1500) .attr('cx', (d, i) => xScaleSorted(i) + circleOffset );// adjust cx position based on the sort // SAME CODE AS ABOVE, except we're selecting rectangles, which have x instead of CX svg.selectAll('rect') .sort((a,b) => d3.ascending(a.num_agencies, b.num_agencies)) // Challenge: flip orders... .transition() .duration(1500) .attr('x', (d, i) => xScaleSorted(i));// adjust x position based on the sort' }); return svg.node(); }3a:T8c0,chart_lollipop_sort_cleaner = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name); svg.append("g") .call(yAxis); // We'll make our sorting function return a different order depending on the value of sortAscending let sortAscending = true; const sortingFunction = (a,b) => sortAscending ? d3.ascending(a.num_missions, b.num_missions) : d3.descending(a.num_missions, b.num_missions); svg.on('click', ()=> { sortAscending = !sortAscending; // toggle the sort order on every click // Define the transition just once so we can guarantee they'll run at the same time const t = d3.transition() .duration(1500); svg.selectAll('circle') .sort(sortingFunction) .transition(t) .attr('cx', (d, i) => xScaleSorted(i) + circleOffset );// adjust cx position based on the sort svg.selectAll('rect') .sort(sortingFunction) .transition(t) .attr('x', (d, i) => xScaleSorted(i));// adjust x position based on the sort }); return svg.node(); }3b:T87d,chart_lollipop_sort_individually = { const svg = d3.select(DOM.svg(width, height)); // This is just an Observable pattern. Think of it as "home". const groups = svg.append("g") .selectAll("g.lollipop") .data(rocketLaunchesTable).enter() .append("g") .attr("class", "lollipop") .attr('transform', `translate(10, 0)`); // Shift everything over to the left a bit // Here our our original rectangles let scaleFactor = 20; groups.append("rect") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.num_missions)) .attr("height", d => yScale(0) - yScale(d.num_missions)) .attr("width", xScale.bandwidth() / scaleFactor) // shrink the rectangles to save pixels .attr("fill", bar_color) let circleOffset = xScale.bandwidth() / (2 * scaleFactor); // Center the circles // We can add some circles on top! groups.append("circle") .attr("cx", d => xScale(d.name) + circleOffset) .attr("cy", d => yScale(d.num_missions)) .attr("r", d => 5) .attr("fill", bar_color) .append("title") .text(d => d.name); svg.append("g") .call(yAxis); let sortAscending = false; const sortingFunction = (a,b) => sortAscending ? d3.ascending(a.num_missions, b.num_missions) : d3.descending(a.num_missions, b.num_missions); svg.on('click', ()=> { const t = d3.transition() .duration(1500); const perElementDelay = 50; sortAscending = !sortAscending; // toggle the sort order on every click svg.selectAll('circle') .sort(sortingFunction) .transition(t) .delay((d, i) => i * perElementDelay) .attr('cx', (d, i) => xScaleSorted(i) + circleOffset );// adjust cx position based on the sort svg.selectAll('rect') .sort(sortingFunction) .transition(t) .delay((d, i) => i * perElementDelay) .attr('x', (d, i) => xScaleSorted(i));// adjust x position based on the sort }); return svg.node(); }3c:[] 2f:{"id":"ff2972219f76b510","slug":"d3-tutorial-interactivity-animated-transitions","title":"D3 Tutorial: Interactivity + Animated Transitions","thumbnail":"1bf09bcf0822136163040368b14b871ff9c87b59a6fc8b837ab057f9d2ec95d6","access_level":"public","create_time":"$D2018-04-15T16:33:41.065Z","update_time":"$D2021-12-16T19:59:45.550Z","view_time":null,"first_public_time":"$D2018-04-15T22:00:31.907Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"0b7d18f7496397ee","login":"hydrosquall","name":"Cameron Yick","avatar_url":"https://avatars-next.observableusercontent.com/834e6a5adc91d41ae48913d9cff19b149ea71b11ce0bad9743f08428cbd59334","tier":"starter_2024"},"version":558,"publish_version":558,"role":null,"authored":false,"authors":[{"type":"individual","id":"51f06cf9c5905378","login":"hydrosquall","name":"Cameron Yick","avatar_url":"https://avatars-next.observableusercontent.com/834e6a5adc91d41ae48913d9cff19b149ea71b11ce0bad9743f08428cbd59334","tier":null}],"members":[{"type":"individual","id":"51f06cf9c5905378","login":"hydrosquall","name":"Cameron Yick","avatar_url":"https://avatars-next.observableusercontent.com/834e6a5adc91d41ae48913d9cff19b149ea71b11ce0bad9743f08428cbd59334","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"efc5052eee277c78","slug":"tutorials","title":"Visualization Tutorials - D3 and Vega-Lite","owner":{"id":"0b7d18f7496397ee","login":"hydrosquall","name":"Cameron Yick"}},"type":"notebook","body":{"titling":"auto","title":"D3 Tutorial: Interactivity + Animated Transitions","cells":[{"id":0,"value":"md`# D3 Tutorial: Interactivity + Animated Transitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`This is the accompanying material for part 2 of a d3.js workshop series I'm giving at a graduate data visualization course at Parson's School of Design in NYC in April 2018. You may find [Part 1 here](https://beta.observablehq.com/@hydrosquall/d3js-bar-charts-lollipops-and-nesting). The shortlink for this page is [bit.ly/parsons-d3-p2](http://bit.ly/parsons-d3-p2).\n\nIn our last episode, we built several static charts. Today, we will build all our interactive examples off of one of those charts! This article is organized into 2 sections. Along the way, you will be gradually introduced to a few new useful Javascript tricks.\n\n1. Configuring our chart to change in response to user activity\n2. Making our chart change with animations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`### Recap: in our Last Episode... RocketLaunch Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart_lollipop","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`We made a basic lollipop chart showing:\n\n- how many agencies are involved with each of the upcoming rocket launches (y axis)\n- which lollipops are based in the US (turqoise markers)\n- hover over the bar to get the rocket name.\n\nToday, we'll use this chart as the basis for adding some interactivity by support for\n\n- Click interaction\n- Hover interaction\n\nThree common things to do as a consequence of interaction are:\n\n- Change the encoding of key points on the graph \n- Resort the order of the elements in the graph\n- Change parts of the page that aren't directly part of the graph\n\nWe'll cover all of these!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// To start, we'll reimport several of the global variables that were used in the last example.\nimport { \n d3, rocketLaunchesTable, \n xScale, yScale, \n xAxis, yAxis,\n height, width,\n bar_color,\n margin,\n chart_lollipop } from \"@hydrosquall/d3js-bar-charts-lollipops-and-nesting\"\n\n// If you prefer to work outside the Observable environment, I included a basic example of how to convert\n// one of the old barcharts from last time into a regular HTML page, and hosted the example on blockbuilder:\n// http://blockbuilder.org/hydrosquall/1352e7dc49aa697dc4b162df21dc297c\n// Note that the chart will probably look a little different every day, since the list of rocket launches coming up is not a constant. The GIF contains what the launch set looked like as of 4/15/2018.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`### Warmup Activities\n\nSince it's been a few days, I've copied the code from our last lollipop chart below. If you'd like to check your understanding of how this chart is made, here are some challenges you can use to test your knowledge.\n\n1. Make the USA lollipops a color of choice instead of turqoise\n2. Make \"stems\" of the lollipops disappear, keeping only the circles\n3. Turn the lollipops circles into rectangles instead\n4. Make the circle areas proportional to how many countries were involved with their launch (linear vs sqrt)\n5. Bring back the xAxis!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Part 1: Clicks and Event Listeners`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`Let's modify our original code so we can add some basic click-driven functionality.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`### 1.1: 2 Basic Clickable Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`Let's look at how to make each element change after you click. We can start by clicking the circles, and seeing what happens.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`_Check your understanding_: \n\n1. Can we change the opacity on clicks in addition to color?\n2. Can we make things happen based on mouseover?\n3. What if we want to click anywhere in the chart, and change every circle at once? (We'll cover that next)\n3. (Advanced): What kinds of things are possible in CSS without using any JS? (Hint: \\`:hover\\` in CSS3)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`_Challenge: how can we select the stems too?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`Fundamentally, every interaction in the event model very similarly, you just need to learn the syntax for creating a listener. The full menu of options is available at the Mozilla Developer Network [here](https://developer.mozilla.org/en-US/docs/Web/Events). This site is maintained by the makers of Firefox, and is a great place to answer general questions about web technologies.\n\nHere are a few that you can think about for your projects:\n\n- click (mousedown), \n- dblclick (double click)\n- contextmenu (right click)\n- mouseenter/mouseover (note that this can be tricky on mobile, no \"hovering\")\n- mousemove (expensive, fires continuously)\n\nDepending on what device your user is using, you may have access to other event listeners- some people have made visualizations respond to tilting/shaking their mobile phone! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`### 1.2: Attaching Click Listeners outside your D3 Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`Perhaps you want to control your chart with a vanilla HTML button. In a \"pure\" sense, this might be easier easier to demonstrate outside of ObservableHQ. \n\n Edit the textbox below to see how to edit displays with the notebook's \\`viewof\\` operator.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof text_color = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"viewof text_size = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`Text size is currently ${text_size} px.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`\nWhat you'll do is specify the \\`onClick\\` attribute for your button, and set it equal to a javascript function, like (see your browser console for the effect). Because ObservableHQ is sandboxing each of these cells, we can't readily select elements in another cell, so we won't use this technique to modify our charts for now.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`### 1.3 A practical user interaction example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`Let's close this section by using this highlighter effect to do something more useful than just messing with the properties. Let's only show the top circles for countries that match the one we're currently highlighting.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"viewof lollipop_size = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`_Ways to extend this example_:\n\n- marking the country code in the chart instead of logging to the console. \n- If the code feels sluggish, we could also try saving our \"groups.selectAll('circle') selection to avoid redoing the search each time.\n- Transitions 😀! Speaking of which...\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`## Part 2: Animated Transitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`You may have asked yourself at some point: \"besides wanting to become a full-stack developer, why would I want to do all this coding stuff if I could just make this bar chart in Powerpoint or Excel\"? \n\nOne of the most exciting features of d3.js is its builtin support for animated transitions. We're going to take look at this now using the \\`transition\\` method on our d3 selections. We're going to take our basic clicking example from earlier. (If you haven't figured out how to change that to a \"mouseover\" example, I've added select box that will help to make toggling between the two easier.\n\n \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`_Aside-_ making [dropdown menus](https://www.w3schools.com/tags/tag_select.asp) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"md`### 2.1 Adding Click Interactions to the Lollipop Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"viewof listen_mode = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"md`_Challenges: add an exit effect with a transition (see the 1.3 example if you get stuck)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"html` $\"SLOW$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`_ ✅ ease-in-out done well_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`\n### 2.2 Why Use Transitions in Data Viz, beyond \"Data Art\"?\n\n_An example with sorting_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`Transitions help your user understand the relationships between points as they interact with your visualization. Having points transform instantaneously and pop in/out of existence out of nowhere can be disorienting, because it doesn't reflect how things work in the real world. In particular, they are crucial for respecting the principle of [Object Constancy](https://bost.ocks.org/mike/constancy/).\n\nUsed effectively, transitions can make your visualizations more understandable, pleasant to use, and compelling. Used excessively, they will crash your user's browser, and leave your viewers thinking of you the way they view someone who has discovered the \"Venetian blinds\" transition in Powerpoint or the \"3D\" effect in Wordart for the very first time.\n\nTo illustrate this, we're going to an animated sort triggered by clicking anywhere within the chart area. We'll modify our example from the second chart in 1.1 to the bars in ascending height order.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"xRange = [margin.left, width - margin.right]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"// We'll see shortly why we need a new scale. This is based on the old code for xScale that we\n// had previously used.\nxScaleSorted = d3.scaleBand()\n // .domain(rocketLaunchesTable.map(d => d.name)) // old domain (looks for strings)\n .domain(d3.range(rocketLaunchesTable.map(d => d.name).length)) // new domain!\n .range(xRange)\n .padding(0.15) // how much space to put around each bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md`## 2.3 Polishing our animated chart sorting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`There are a few more tweaks that we'd like to do to make our chart more polished.\n\n1. Move the stem too, not just the circles\n2. Let our clicks toggle the sort order in both directions\n3. Make the bars animate 1 after another - helps your eyes track better.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`We'll take that same chart and tidy up the code a little bit, and add some logic to ensure the circles and bars move together. We'll also make it so that clicking toggles the sort order.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`We can also reduce the number of bars moving at once by adding a delay to each element as it moves. (With this example, we've finally reproduced the image at the header for this workshop's article!). I've kept this cell expanded since it contains all the code from the earlier two examples.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`If we wanted to get really fancy, we could adjust each delay as a function of the data property. For example, perhaps heavy rockets might take longer to animate because they're \"slower\". \n\nIf we had that information, how would you adjust the above code?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`## Conclusion\n\nTo recap, we've covered\n\n- How to listen for user events (clicks and mouseovers)\n- How to sort and filter our data using custom functions\n- How to animate changes to our data using d3.transition\n- The importance of using appropriate timing/easing functions for transitions\n- How to clean up our transition/animation code to make things run synchronously or one element at a time\n\nWe've only scratched the surface of d3's interactive capabilities! However, hopefully this gives you a foundation of tools to use that can be used in your final projects.\n\nThanks again for participating in this workshop series! \n\n_I'd love to hear your feedback and questions. I'm [@hydrosquall](https://github.com/hydrosquall) on Twitter and Github._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Resources: \n\n- Shortcuts (shift + / or \\`?\\`): https://talk.observablehq.com/t/list-of-keyboard-shortcuts/89\n- Todo: Add more \"warmups\" and \"exercises\" to this + previous tutorial so that students can check their understanding throughout, as this will help to generate questions + lock in understanding.\n- Color on the web: [Material UI](https://www.materialui.co/colors) and [Dataviz Palettes](http://projects.susielu.com/viz-palette)\n\n### Examples of More Interaction Types\n\n- [Zoom](https://github.com/d3/d3-zoom)\n- [Click-and-drag](https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e)\n- [Click, drag, pan, and zoom](https://bl.ocks.org/mbostock/6123708)\n- [Minimap for panning and zooming](https://codepen.io/billdwhite/pen/lCAdi)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`## Post-Workshop Appendix: Working with CSV/Uploading your own data\n\n1. Get a CSV of your data (Comma-separated values). Make sure it's rectangular and not jagged, aka all rows have same number of cells. Don't put spaces or uppercase characters in your column headers!\n2. Paste your CSV file into gist.github.com: https://gist.github.com. For example: https://gist.github.com/hydrosquall/aed6bfa956a8b98cf2e93036605d36d3\n3. Paste your \"RAW\" link into RawGit to make sure the file is served with correct headers: https://rawgit.com\n4. See Blockbuilder for an example of how to read in a CSV from rawgit (open your browser console by right clicking the webpage, in Chrome you'll \"inspect element\").\nhttp://blockbuilder.org/hydrosquall/1eb121e76947aa84c7bdff38537a2f07\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"MATERIAL_BLUE= \"#2196F3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 30:"$2f:body"