25:["$","title",null,{"children":"Learning Module: Transitions | Dora Kiesel | Observable"}] 49:Ta04,{ // standard plot setup const width = 1000; const height = 300; const margin = {top:20, bottom: 35, left:35, right:5}; const radius = 2; // get some data, the cars, for example const data = cars; // create the scatter plot const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // create scales // we do not add the domains yet, because we do not know the attributes yet const scaleX = d3.scaleLinear().range([margin.left, width - margin.right]); const scaleY = d3.scaleLinear().range([height - margin.bottom, margin.top]); // initialize the axis and labels const axisX = svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`); const labelX = axisX.append('text') .attr('x', scaleX.range()[1]) .attr('y', margin.bottom - 5) .style('fill', 'black') .style('text-anchor', 'end'); const axisY = svg.append('g') .attr('transform', `translate(${margin.left}, 0)`); const labelY = axisY.append('text') .attr('x', 0) .attr('y', margin.top - 5) .style('fill', 'black') .style('text-anchor', 'middle'); // the x and y attributes let attributeX = 'power (hp)'; let attributeY = 'economy (mpg)'; // get the select boxes and add the callback that triggers on changing the attribute const selectX = d3.select('#attributeX'); const selectY = d3.select('#attributeY'); // add all of the possible attributes selectX.selectAll('option') .data(Object.keys(data[0]).filter(d => d != 'name')) .join('option') .text(d => d); selectY.selectAll('option') .data(Object.keys(data[0]).filter(d => d != 'name')) .join('option') .text(d => d); // add the callback on change: selectX.on('change', function(e) { attributeX = this.value; draw_scatterplot(); }); selectY.on('change', function(e) { attributeY = this.value; draw_scatterplot(); }); // make the initial draw draw_scatterplot(); function draw_scatterplot() { scaleX.domain(d3.extent(data, d => d[attributeX])); scaleY.domain(d3.extent(data, d => d[attributeY])); // add X axis axisX.call(d3.axisBottom(scaleX)); labelX.text(attributeX); // add Y axis axisY.call(d3.axisLeft(scaleY)) labelY.text(attributeY); // plot points svg.selectAll('circle') .data(data) .join('circle') .attr('r', radius) .attr('cx', d => scaleX(d[attributeX])) .attr('cy', d => scaleY(d[attributeY])); } // get the node to plot it in Observable return svg.node(); }4a:[] 29:{"id":"8778d35b29948a5b","slug":null,"title":"Learning Module: Transitions","thumbnail":"615adeeccbcf951d747756ae28052c3f3e60f37804b10b13ed7e1665a066e60e","access_level":"public","create_time":"$D2025-04-24T08:10:22.993Z","update_time":"$D2025-04-24T12:36:41.231Z","view_time":null,"first_public_time":"$D2025-04-24T12:35:07.589Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"70e349da24ad8d4a","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":62,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d0aee63f52c8e5d3","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"70e349da24ad8d4a","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":"starter_2024","role":"editor"},{"type":"individual","id":"d0aee63f52c8e5d3","login":"dorakiesel","name":"Dora Kiesel","avatar_url":"https://avatars-next.observableusercontent.com/7b3226d01425ff266f984cbdc9e7a58dc8e23b45e144d380fb89664f536334c8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learning Module: Transitions","cells":[{"id":0,"value":"# Learning Module: Transitions\n\nIn this learning module, you will learn the basics of how to implement basic transitions in D3. Transitions are very useful to guide the user through transformations in an interactive chart. \n\nFor example, clicking the button will change the point's position. To allow the user to follow the transformation, the transition adds the movement inbetween.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"{\n const height = width/10;\n const radius = 10;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n // create a point at a random position\n const point = svg.append('circle')\n .attr('r', radius)\n .attr('cx', Math.random() * width)\n .attr('cy', Math.random() * height);\n\n\n // get the button\n const button = d3.select(\"#clickableButton\")\n\n // add the click event\n button.on(\"click\", () => {\n point\n .transition() // <-- this is where the magic happens \n .attr('cx', Math.random() * width)\n .attr('cy', Math.random() * height);\n })\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":10,"value":"This is it. \n\nOnce you introduce the line *.transition()* into your code for manipulating the mark's channels, the channel gradually changes from the start to the given end value. \n\nYou can play around by placing the *.transition()* call between the x and y channel to now see that only one of the channels is transitioned. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"There are different ways to manipulate a transition:\n- *.ease()* changes the type of transition. Usually it is linear, but you can change it to many different functions. This [Observable page](https://observablehq.com/@d3/easing-animations) gives you an overview of the possibilities. \n- *.duration(ms)* changes the length of the duration of the transition. The parameter *ms* sets the time in milliseconds.\n- *.delay(ms)* adds a delay to the transition. The parameter *ms* is also in milliseconds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"{\n const height = width/10;\n const radius = 10;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n // create a point at a random position\n const point = svg.append('circle')\n .attr('r', radius)\n .attr('cx', Math.random() * width)\n .attr('cy', Math.random() * height);\n\n\n // get the button\n const button = d3.select(\"#clickableButton2\")\n\n // add the click event\n button.on(\"click\", () => {\n point\n .transition() // <-- this is where the magic happens\n .duration(2000)\n .delay(20)\n .ease(d3.easeCubicInOut)\n .attr('cx', Math.random() * width)\n .attr('cy', Math.random() * height);\n })\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":26,"value":"The start and end of the transition trigger events that can be listened to. The callback is registered via the *.on('end'/'start', callback)* method as in the following example: When the transition starts, the dot turns red. When it ends, the dot turns black again.\n\nIn the example, the transition is triggered on clicking the dot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"{\n const height = width/10;\n const radius = 10;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n // create a point at a random position\n const point = svg.append('circle')\n .attr('r', radius)\n .attr('cx', Math.random() * width)\n .attr('cy', Math.random() * height)\n .on(\"click\", () => {\n point\n .transition() // <-- this is where the magic happens\n .duration(2000)\n .delay(20)\n .ease(d3.easeCubicInOut)\n .attr('cx', Math.random() * width)\n .attr('cy', Math.random() * height)\n // we change the color to red during the animation\n .on('start', _ => {\n point.style('fill', 'red');\n })\n // we add a callback that triggers once the animation finishes\n .on('end', _ => {\n point.style('fill', 'black');\n });\n })\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":36,"value":"## Test your skills!\n\nGiven the scatter plot implementation and the select box below, implement a transition that smoothly transforms the points to show the selected attribute on the x-axis. Do not forget to also adjust the axis itself!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"x attribute:
y attribute: ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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"}],"files":"$W4a","stdlib":"1"}} 24:null