Scatter-Animation

25:["$","title",null,{"children":"Animation & Interaction Tutorial 🥳 | visualization | Observable"}] 49:Tb98,# Animation in D3 ## Transition The [__`d3.transition`__](https://www.d3indepth.com/transitions/) is a powerful feature that allows you to create smooth and animated transitions between different states of your visualizations. (You basically have all the control to all visual variables, and geometrical elements :) ). First please read this [webpage](https://www.d3indepth.com/transitions/)and have a basical feeling about __`d3.transition`__. Let's break it down into the following key concepts: 1. __Selection__: You can use D3's selection methods (e.g., `d3.select`, `d3.selectAll`) to select the elements you want to animate. > You can select empty class as an entry for later operations > See this example: > ```javascript d3.select('svg') .selectAll('circle') svg.append("rect").attr("id","rect0"); d3.select("svg").select("#rect0"); ``` 3. __Data Join__: now you should specify which data is associated with which geometrical element. We will talk about this in the next session. > ```javascript > d3.select('svg') .selectAll('circle') .data(data) .join('circle')``` 4. __Transition__ Creation: Once you have a selection of elements, you can create a transition object using the `.transition()` method. > ```javascript d3.select('svg') .selectAll('circle') .data(data) .join('circle').transition() .attr('cx', function(d) { return d; }) .style('opacity', 0.75);``` 5. __Attribute__ and Style Changes: After creating a transition object, you can chain methods like `.attr()` and `.style()` to modify attributes and CSS styles of the selected elements. These changes are interpolated and animated over the specified duration. > ```javascript d3.select('svg') .selectAll('circle') .data(data) .join('circle').transition() .attr('cx', function(d) { return d; }) .style('opacity', 0.75);``` 6. __Duration and Delay__: You can specify the duration of the animation using the `.duration()` method, which sets the time it takes for the animation to complete. Additionally, you can introduce a delay before the animation starts by using the `.delay()` method. 7. __Easing__: Easing functions control the pacing of the animation. D3.js provides various built-in easing functions (e.g., linear, exponential, elastic) that can be applied using the `.ease()` method. These functions define how the animated values interpolate over time, affecting the smoothness and appearance of the animation. Please try different ease function at this [webpage](https://www.d3indepth.com/transitions/). > ```javascript d3.select('svg') .selectAll('circle') .data(data) .join('circle').transition() .duration(2000) // Animation duration in milliseconds .delay(500) .attr('cx', function(d) { return d; }) .style('opacity', 0.75);``` Here's a simple example that demonstrates the usage of `d3.transition` to animate a circle's position: 4a:T410,chart2={ // Specify the chart’s dimensions. let width = 320; let height = 240; // Create the SVG container. let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;`); svg.append("circle") .attr("id","blueCircle") .attr("cx", 50) .attr("cy", 50) .attr("r", 50) .attr("fill", "blue"); //the return sentence is complicated as this is an observable environment. //return svg.node(); return Object.assign(svg.node(), { update() { // Select the circle element const circle = d3.select("#blueCircle") .transition() .duration(2000) // Animation duration in milliseconds .attr("cy", 180) // Set new x-coordinate .transition() .attr("cx", 200)// Set new y-coordinate .transition() .attr("cx", 200)// Set new y-coordinate .attr("cy", 50)// Set new y-coordinate .transition() .attr("cx", 50) .attr("cy", 50); //return back to original position } }); }4b:T487,chart3={ // Specify the chart’s dimensions. let width = 420; let height = 180; // Create the SVG container. let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;`); svg.append("circle") .attr("id","Circle0") .attr("cx", 250) .attr("cy", 100) .attr("r", 50) .attr("fill", "blue"); svg.append("rect") .attr("x", 50) .attr("y", 50) .attr("id","Rect0") .attr("width", 80) .attr("height", 70) .attr("fill", "yellow"); //the return sentence is complicated as this is an observable environment. //return svg.node(); return Object.assign(svg.node(), { update() { // Select the elements const rect = d3.select("#Rect0"); const circle = d3.select("#Circle0"); // Create a transition object with a shared duration const transition = d3.transition().duration(1000); // Apply common transition to rectangle and circle rect.transition(transition) .attr("width", 100) .attr("fill", "blue"); circle.transition(transition) .attr("r", 30) .attr("fill", "red"); } }); }4c:Td54,## Data Join Imagine you have a dataset containing stock price data for all companies in the world from 2000 to 2022. Your goal is to dynamically draw bubbles for each company and size the bubbles based on their stock prices. Or in the first demo of "animated circle ", what if the variable `numItems` is 100000? The solution would be to create geometrical elements and specify the relationship with the data item in a for-loop. Manually binding data to geometry elements can be a very tedious task 😭! ### Data Join with D3 However, don't be panic! With D3, you have a more convenient approach🥰!D3 comes to the rescue, making data binding much more intuitive and efficient. Data join feature is a powerful D3 mechanism that allows you to bind data to elements in the DOM (Document Object Model) and __automatically__ update the visualization based on that data. It enables you to create dynamic and responsive visualizations that automatically reflect changes in the underlying data. Here's a short description of data join: + Data Binding: With the data join feature, you can associate an array of data with a selection of elements using the .data() method. D3.js matches the data items with the elements based on their indices. + Enter Selection: The .enter() selection represents the data items that are new and need to be added to the visualization. You can use it to create new elements based on the data. + Update Selection: The .update() selection represents the elements that already exist in the visualization and need to be updated. You can modify the properties of these elements based on the data. + Exit Selection: The .exit() selection represents the elements that no longer have corresponding data items. You can remove these elements from the visualization. See the demo code of data join here: ```JavaScript // Sample data const data = [ { name: "Alice", age: 25 }, { name: "Bob", age: 32 }, { name: "Charlie", age: 19 }, ]; // Select an SVG element const svg = d3.select("svg"); // Select and bind data to circles const circles = svg.selectAll("circle") .data(data); // Enter new data elements circles.enter() .append("circle") .attr("r", 10) .attr("cx", (d, i) => i * 30 + 20) .attr("cy", 50) .style("fill", "steelblue"); // Update existing data elements circles.attr("cx", (d, i) => i * 30 + 20); // Exit any unnecessary data elements circles.exit().remove(); ``` Equivalently, you can do the following: ```JavaScript d3.select('svg') .selectAll('circle') .data(data) .join( function(enter) { return enter .append('circle') .attr('cy', 50) .attr('cx', function(d){return d;}.attr('r',40).style('opacity', 0); }, function(update) { return update; }, function(exit) { return exit.transition().duration(1000).attr('cy', 500).remove(); } ).transition() .duration(1000) .attr('cx', function(d) { return d; }) .style('opacity', 0.5); ``` ### Transition and Data Join By combining the data join with D3's transition module, you can animate the changes in the visualization smoothly. You can use the `.data()` to bind data with geometry element, then use `.transition() ` method to create a transition object and apply animations to the elements. You will see this in programming task 1, in which scatter bubbles' size is automatically connected with data.4d:Ta8f,# Animation Loop 1. Due to the limitations of Observable, we don't have sequential execution here, and animation for-loop is implemented with a generator cell (Check the `year` cell below.) 2. However, as a standard front-end programmer, you can achieve excellent results without using Observable by coding directly with HTML and JavaScript. Here, I will show you how to define animations in JavaScript. 3. In a nutshell, you will have: > __renderinit__: where you specify elements that don't change with data, e.g., axis, SVG image, scales, etc. > __renderupdate__: specify how geometrical elements update their behavior as a reaction to data changes. > __The complete code__: the entire D3 visualization code could simply be a JavaScript script embedded in HTML and consist of three parts: data preprocessing, render init, and render for-loop. > ```html > > > > Scatter-Animation > > > > > > > > ``` ## Run a Js&Html D3 visualization demo To illustrate the idea talked above, let's skip observable for a moment and download the file `FileAttachment("index.html")`, open it in your browser, and watch its code in a text editor, compare its code with the observable counterpart. Note: you can do programming tasks on your laptop directly with Js and HTML, but you need to start a local server if you have data files to use. This is because of[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) ![image.png](${await FileAttachment("image.png").url()}) # Steps to run your local server: 1. The easiest way download vs code https://code.visualstudio.com/ 2. Install 'live server' extension 3. Open the html file you want to work on and __open it in live server__. ![image@1.png](${await FileAttachment("image@1.png").url()})4e:T461,## Programming Task 1: Scatter Points Graph Animation Your task is to create scatter-point graphs for the GDP and population of the G20 countries (visualizing more countries and data if you want). Additionally, you need to implement animation to dynamically display the scatter points for each year. Please follow the instructions below: 1. Write code to draw circles for each country, where the position of the circles is based on per-capita GDP and population, and the size of the circles is based on total GDP. (Code for preprocess data is already provided.) 2. Create x and y axes along with appropriate labels for the scatter-point graph. Design and implement these axes in a visually appealing and easily understandable manner. 3. Assign different colors to different countries in the scatter-point graph. 4. Utilize animation techniques to dynamically loop through the years. Implement a loop that cycles through each year, gradually or smoothly transitioning between scatter points for each year. 5. Bonus: Create legends for the countries in your graph. Good luck, and enjoy coding! Sample Demo pictures:4f:T177e,chart4={ let width = 1200; let height = 900; const margin = {top: 100, right: 120, bottom: 100, left: 120}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;`); let yValue= d=>+(d['GDP']); let xValue=d=>+(d['Population']); let colorKeyValue = d => d['Country Name']; let rValue = d => Math.sqrt((d['GDP'])*0.01*+(d['Population'])*0.0000001); let xScale, yScale; const xAxisLabel = 'Population'; const yAxisLabel = 'Per capita GDP'; const renderinit = function(input_data){ //compute extend of input data let maxX=0, maxY=0; let minX=10000000, minY=10000000; for (let index = 0; index < input_data.length; ++index) { maxX= d3.max(input_data[index], xValue)>maxX? d3.max(input_data[index], xValue):maxX ; maxY= d3.max(input_data[index], yValue)>maxY? d3.max(input_data[index], yValue):maxY ; minX= d3.min(input_data[index], xValue) d); // draw legend text legend.append("text") .attr("x", 40) .attr("y", 9) .attr("dy", ".5em") .attr("text-anchor", "start") .text(d => d); // year g.append("text") .attr('id', 'date_text') .attr("x", innerWidth / 4 + 30) .attr("y", innerHeight / 10 - 20) .attr("dy", ".5em") .style("text-anchor", "end") .attr("fill", "#504f4f") .attr('font-size', '4em') .attr('font-weight', 'bold') .text(' '); }; async function renderupdate(seq){ const g = d3.select('#maingroup'); d3.select('#date_text').text(seq[0]['Year']); let aduration = 1000; let transition = d3.transition().duration(aduration).ease(d3.easeLinear); let circleupdates = g.selectAll('circle').data(seq).join('circle') .attr('fill', d => g20color[colorKeyValue(d)] ) .attr('opacity', .8) .transition(transition) .attr('cy', d => yScale(yValue(d))) .attr('cx', d => xScale(xValue(d))) .attr('r', c => rValue(c)); let textupdates = g.selectAll('.country_text').data(seq).join('text') .attr("class", "country_text") .attr("dy", "1em") .style("text-anchor", "middle") .attr("fill", "#333333") .text( d => colorKeyValue(d)) .transition(transition) .attr('x', d => xScale(xValue(d))) .attr('y', d => yScale(yValue(d))); await transition.end(); } return Object.assign(svg.node(), { initFn(){ renderinit(preprocessData); }, update(iyear){ renderupdate(preprocessData[iyear]); } } ); }50:T861,## d3.zoom `d3.zoom()` is a built-in function in D3.js that provides support for zooming and panning interactions on SVG elements. It allows you to enable zoom behavior on a selected SVG container and define how the elements within that container respond to user interactions like mouse scroll and drag. Here's a brief overview of how to use `d3.zoom()`: 1. Create/specify an SVG container: you'll need to create an SVG container where you want to apply the zoom behavior. 2. Define the zoom behavior: Use the `d3.zoom()` function to define the zoom behavior and attach it to the SVG container. You can customize the zoom behavior by setting various properties like minimum and maximum zoom levels, pan restrictions, and event handling functions. ```js const svg = d3.select("#container") .append("svg") .attr("width", 500) .attr("height", 500); const zoomBehavior = d3.zoom() .scaleExtent([1, 5]) // Set the minimum and maximum zoom levels .on("zoom", handleZoom); // Specify the event handler for zooming svg.call(zoomBehavior); ``` 3.Implement the event handler: The `zoom` event will be triggered when the user performs zooming or panning actions. You need to define the `handleZoom` function to respond to these events. Typically, this function updates the transformations of the SVG elements based on the zoom behavior. ```js function handleZoom(event) { // Get the current transform properties (scale and translation) const transform = event.transform; // Apply the transform to the SVG elements you want to zoom/pan svg.attr("transform", transform); } ``` Now, the SVG container with the specified `id="container"` will have zooming and panning interactions enabled. When you scroll the mouse wheel, the SVG elements will scale in and out, and dragging the mouse will pan the SVG content. This is just a basic introduction to using `d3.zoom()`. The library offers various other features and customization options, such as restricting zoom to specific axes or applying smooth transitions during zooming. For more advanced usage, refer to the D3.js documentation on zoom behavior: https://github.com/d3/d3-zoom.51:T860,{ const width = 928; const marginTop = 6; const height = width / 2 + marginTop; // Fit the projection. // const projection = d3.geoNaturalEarth1(); const projection = d3.geoEqualEarth().fitExtent([[2, marginTop + 2], [width - 2, height]], {type: "Sphere"}); const path = d3.geoPath(projection); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;") .on('click',function(){ console.log("dbclick"); }); svg.call(zoom); const mainGroup=svg.append("g").attr("id","maingroup"); // Add a white sphere with a black border. mainGroup.append("path") .datum({type: "Sphere"}) .attr("fill", "white") .attr("stroke", "currentColor") .attr("d", path); const countryNames = countries.features.map(feature => feature.properties.name); console.log(countries); const colorScale = d3.scaleOrdinal() .domain(countryNames) .range(d3.schemeSet3); // Add a path for each country and color const g= mainGroup.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => colorScale(d.properties.name)) .attr("d", path) //add interaction .on('mouseover',function(){ d3.select(this) .attr("opacity",0.6) .attr("stroke","black") .attr("stroke-width","2") }) .on("mouseout",function () { d3.select(this) .attr("fill", d => colorScale(d.properties.name)) .attr("opacity",1.0) .attr("stroke","white") .attr("stroke-width","1") }).on("click",function(d) { }); // Comment & Uncomment this line of code to see the effects of boundary white mesh. mainGroup.append("path") .datum(countrymesh) .attr("fill", "none") .attr("stroke", "white") .attr("d", path); function zoomed(event) { const {transform} = event; mainGroup.attr("transform", transform); } return svg.node(); }52:T448,# Programming Task 2 : Interactive GeoMap In this programming assignment, you have been provided with a D3 code above that loads a world map. Your task is to implement the following features: 1. Make it nicer: Enhance the black map by adding colors to it. You can choose to make each country the same light blue color or assign different colors to each country. (Tip: You can utilize the country Names along with the d3.schemeSet color scheme to achieve this. ) 2. Interaction: Highlight mouse hover countries by changing the opacity or stroke properties, don't forget to reset when the mouse leave. 3. Interaction: Enable support for zooming in and zooming out on the map. Users should be able to zoom in to get a closer view of a specific region or zoom out to view the entire world map. Consider using D3's zoom behavior or other appropriate techniques to achieve this functionality. 4. __Bonus__ 🎁: if you load a CSV data recording every country's arbitrary data and color coding country based on that data, e.g. You can get world life-healthy data by `FileAttachment("hale.csv").csv();`53:[{"id":"0659dbb040d0afa81a6c1724e283369aee71e417aad95483d914dd1599fe37f7c22ccc0082352a54f82efc56848b9a65b9df7d48b40fb4d77117617716839dc5","href":"https://static.observableusercontent.com/files/0659dbb040d0afa81a6c1724e283369aee71e417aad95483d914dd1599fe37f7c22ccc0082352a54f82efc56848b9a65b9df7d48b40fb4d77117617716839dc5","name":"demo@1.png","type":"image/png","lastModified":1689255123724.432,"size":124648},{"id":"37e4ba7fffe991ff1f73ceb2901414460b3c0268174e82648a4fa73a519953b0d0de6f3180a4264ef033717045385b9b0100ea1a01d8ca24a71ddc45289b373d","href":"https://static.observableusercontent.com/files/37e4ba7fffe991ff1f73ceb2901414460b3c0268174e82648a4fa73a519953b0d0de6f3180a4264ef033717045385b9b0100ea1a01d8ca24a71ddc45289b373d","name":"demo0@1.png","type":"image/png","lastModified":1689255123724.432,"size":106530},{"id":"4f5d3fc0403dcf320769cfb71b4272c298e17f895ae06b68002fffb2ff597f379cd03f17982e39030fd8a2dae166fcc89529f929507c173859b3c334fca750f9","href":"https://static.observableusercontent.com/files/4f5d3fc0403dcf320769cfb71b4272c298e17f895ae06b68002fffb2ff597f379cd03f17982e39030fd8a2dae166fcc89529f929507c173859b3c334fca750f9","name":"All.csv","type":"text/csv","lastModified":1689255123724.432,"size":603808},{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1689255123724.432,"size":756420},{"id":"985c84dc1f8064c41bb54a35278497fb8bce65c17d2a31d5f89ee20cda223bf821fb1040cbde4b2c6a05e25015b169d9a993c0849db2ad1de64e0a36f543271b","href":"https://static.observableusercontent.com/files/985c84dc1f8064c41bb54a35278497fb8bce65c17d2a31d5f89ee20cda223bf821fb1040cbde4b2c6a05e25015b169d9a993c0849db2ad1de64e0a36f543271b","name":"image.png","type":"image/png","lastModified":1689588078671.628,"size":187672},{"id":"52a5ec3e3c186b5e137f6d26b7b14746055d11d4891cbcc321c9c8234f53de9ad227d923f3638d0a44f4df3d7191ef56c8c4cef6906339f4b91b411db81a1956","href":"https://static.observableusercontent.com/files/52a5ec3e3c186b5e137f6d26b7b14746055d11d4891cbcc321c9c8234f53de9ad227d923f3638d0a44f4df3d7191ef56c8c4cef6906339f4b91b411db81a1956","name":"index@1.html","type":"text/html","lastModified":1689596739961.194,"size":1329},{"id":"a7c8141092bfac24a46d294e7462f7143523004b4c07f9b404a5e015e701c830062965fb4643b9aa348879bd2fcb35523722618c6272a4c4e300eea99dbf2e6d","href":"https://static.observableusercontent.com/files/a7c8141092bfac24a46d294e7462f7143523004b4c07f9b404a5e015e701c830062965fb4643b9aa348879bd2fcb35523722618c6272a4c4e300eea99dbf2e6d","name":"image@1.png","type":"image/png","lastModified":1689597977838.907,"size":104244},{"id":"1018e648dc1932c399f2f24fda727f5a907f6e02ab3fc163398645fdb224df583c6045fcf31f5683b2e2ba448cb422b194349a0701db0b38db025748429ab50f","href":"https://static.observableusercontent.com/files/1018e648dc1932c399f2f24fda727f5a907f6e02ab3fc163398645fdb224df583c6045fcf31f5683b2e2ba448cb422b194349a0701db0b38db025748429ab50f","name":"scaterPlots.zip","type":"application/zip","lastModified":1689598311902.672,"size":320997},{"id":"a3dd8e8c5b6fc1b19642cdbdb39c990df95891faa873f47e0516fcf781b1a38923600f29b3a4c3872ede72cde6019fc290cea06a28d5926815445eb099849caa","href":"https://static.observableusercontent.com/files/a3dd8e8c5b6fc1b19642cdbdb39c990df95891faa873f47e0516fcf781b1a38923600f29b3a4c3872ede72cde6019fc290cea06a28d5926815445eb099849caa","name":"image@2.png","type":"image/png","lastModified":1689660621593.039,"size":341957}] 29:{"id":"8245f341c1629ac7","slug":null,"title":"Animation & Interaction Tutorial 🥳","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-07-13T13:32:03.724Z","update_time":"$D2023-07-18T08:13:24.338Z","view_time":null,"first_public_time":"$D2023-07-13T13:32:03.724Z","has_unpublished_edits":null,"fork":{"id":"4f65e59861ebf790","slug":null,"title":"Animation & Interaction(Student Version) 🥳","owner":{"id":"f1a0ce40d74c0abe","login":"vccvis","name":"visualization"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f1a0ce40d74c0abe","login":"vccvis","name":"visualization","avatar_url":"https://avatars-next.observableusercontent.com/cde86b79b2fec625fe4da60738ba8a70b39754fb935077f3fb1e519d84eda5c4","tier":"starter_2024","bio":"","following":false},"version":1444,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3dcc6d09977699f","login":"xingdi-zhang","name":"Xingdi Zhang","avatar_url":"https://avatars-next.observableusercontent.com/19e6c4bf4196b43e2d9e7f5b7ca4d7a424d07ab7eba99f634dc44a5d0060a018","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c3dcc6d09977699f","login":"xingdi-zhang","name":"Xingdi Zhang","avatar_url":"https://avatars-next.observableusercontent.com/19e6c4bf4196b43e2d9e7f5b7ca4d7a424d07ab7eba99f634dc44a5d0060a018","tier":null,"role":"editor"},{"type":"team","id":"f1a0ce40d74c0abe","login":"vccvis","name":"visualization","avatar_url":"https://avatars-next.observableusercontent.com/cde86b79b2fec625fe4da60738ba8a70b39754fb935077f3fb1e519d84eda5c4","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Animation & Interaction Tutorial 🥳","cells":[{"id":4,"value":"# Animation & Interaction Tutorial 🥳\nD3 is a powerful library that allows you to create interactive and animated data visualizations in web browsers. It provides a wide range of tools and functions to handle interactions and animations. In this notebook, you will learn about:\n+ D3 Animation\n > + Transition\n > + Animation Chain \n > + Animation Synchronization\n+ Data Join\n+ Interaction in D3\n > + Events & Callback action\n \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1425,"value":"## This is xingdi zhang.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1160,"value":"data={\n while (true) {\n let data = [];\n let numItems=1;\n await Promises.delay(4000);\n\tfor(let i=0; i {return d[\"Country Name\"] in g20color});\n //get all years &remove duplicated items; \n let allyears = Array.from(new Set(data.map( datum => datum['Year'])));\n // make sure dates are listed according to real time order; \n allyears = allyears.sort(function(a,b){\n return b['Year']-a['Year'];\n });\n \n // re-arrange and re-organize the data sequentially by year\n \n allyears.forEach(datum => {\n sequential.push([]);\n });\n \n data.forEach(datum => {\n sequential[allyears.indexOf(datum['Year'])].push(datum);\n });\n return sequential;\n };\n let sequentialData=preprocess(rawalldata);\n return sequentialData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"chart4.initFn()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"year ={\n while (true) {\n for(let i = 0; i < preprocessData.length; i++){\n await Promises.delay(800);\n yield i;\n }\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"chart4.update(year);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"# Interaction in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Events & Callback Action\n\nInteractions in D3.js are achieved through events. An event is an action or occurrence that happens in the browser, such as a mouse click, keyboard input, or touch gesture. D3.js enables you to attach event listeners to specific elements in your visualization, so you can respond to these events and update the visualization accordingly. \nCommonly used events include:\n+ click: When the mouse is clicked on an element, equivalent to a combination of mousedown and mouseup.\n+ mouseover: When the cursor is placed over an element.\n+ mouseout: When the cursor moves out of an element.\n+ mousemove: When the mouse is moved.\n+ mousedown: When a mouse button is pressed down.\n+ mouseup: When a mouse button is released.\n+ dblclick: When the mouse is double-clicked.\n\nFor detail, check \n+ [d3 events](https://d3js.org/d3-selection/events)\n+ [Dom events](https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1433,"value":"```javascript\n// Assuming you have a selection and have bound a click event listener to it\nd3.selectAll('.my-element')\n .on('click', function() {\n // Get the clicked element from the event object\n const clickedElement = d3.event.target;\n\n // Do something with the clicked element\n console.log('Clicked element:', clickedElement);\n });\n```\nIn html\n```\ndiv.addEventListener('click', (e) => {\nconsole.log(e.target) // the p that was clicked\nconsole.log(e.currentTarget) // this div\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1192,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1443,"value":"https://stackoverflow.com/questions/55742502/in-d3-how-to-disable-double-click-zoom-conditionally","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"## Example: Zoom InOut& Mouse Hover\nHere's an example code to illustrate interaction in d3(moving you mouse to the green circle or scroll your mouse, see what happens): ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"{\n const width = 228;\n const height = 180;\n const margin=1;\n const zoom = d3.zoom()\n .scaleExtent([1, 8])\n .on(\"zoom\", zoomed);\n\n var svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;`);\n var svg_mainGroup=svg.append(\"g\");\n \n svg.call(zoom);\nconst circle = svg_mainGroup\n .append('circle')\n .attr('id', 'circleBasicTooltip')\n .attr('cx', 100)\n .attr('cy', 100)\n .attr('r', 40)\n .attr('fill', '#69b3a2');\nconst tooltip = svg_mainGroup\n .append('text')\n .attr('x', 120)\n .attr('y', 100)\n .attr('font-size', '20px')\n .attr('position', 'absolute')\n .attr('visibility', 'hidden')\n .text(\"I'm a circle!\");\n\n circle\n .on('click', () => tooltip.style('visibility', 'visible'))\n .on('mouseout', () => tooltip.style('visibility', 'hidden'));\n\n function zoomed(event) {\n const {transform} = event;\n svg_mainGroup.attr(\"transform\", transform);\n }\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"# Example: Dragging\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"## Be careful about interaction design\nWhen designing interactions, programmers must prioritize clarity and accessibility to prevent the hiding of crucial information. Good interaction design should ensure that users can easily navigate and explore the visualization, providing intuitive controls and responsive feedback. It is important to strike __a balance between simplicity and depth__, offering appropriate levels of interaction complexity without overwhelming users. By considering the __users' needs and cognitive abilities__, you can create an interaction design that minimizes the risk of concealing vital insights.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"## Be careful with DOM.\nOperations on the parent node in DOM can affect its child nodes. When performing transformations, this can result in the __child nodes' coordinate origin always being relative to the parent node__ rather than the root node.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 24:null