2c:null 2d:["$","title",null,{"children":"Grace Chen - Introduction to D3 Course: Lesson 4 | DV DEVELOP 2025 SPRING Observable Tutorials | Observable"}] 32:T7e7,{ let data = d3 .shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); // dimension of visualization const width = 500; const height = 50; const margin = { top: 10, bottom: 10, left: 50, right: 10 }; // creating svg and assigning width, height, and margins const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // g-tag for margin convention const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // ordinal scale for data points const yScale = d3 .scalePoint() .domain(["enter", "update", "exit"]) .range([0, height]); // dintinct array of letter const xScale = d3 .scalePoint() .domain(alphabet) .range([10, width]); g.append("g") .call(d3.axisLeft(yScale)); while (true) { yield svg.node(); // using yield instead of return // yield data; // Selection const textSelection = g .selectAll(".letter") .data(data, (d) => d); // Enter textSelection .enter() .append("text") .attr("class", "letter") .attr("y", yScale("enter") + 5) .attr("x", (d) => xScale(d)) .style("font", "14px sans-serif") .style("fill", "green") // know that text is being entered .text((d) => d); // Update textSelection .transition() .duration(1000) .attr("y", yScale("update") + 5) .style("fill", "#000"); // letters are changing state // Exit textSelection .exit() .transition() .duration(1000) .style("fill", "red") .attr("y", yScale("exit") + 5) .transition() .duration(1000) .style("opacity", 0) .remove(); // not all letters are in same state await Promises.delay(3000); data = d3 .shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); } }33:T94a,{ let data = d3 .shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); const width = 500; const height = 50; const margin = { top: 10, bottom: 10, left: 50, right: 10 }; const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const yScale = d3 .scalePoint() .domain(["enter", "update", "exit"]) .range([0, height]); const xScale = d3.scalePoint().domain(alphabet).range([10, width]); g.append("g").call(d3.axisLeft(yScale)); while (true) { yield svg.node(); // yield data // g.selectAll(".letter") // .data(data, (d) => d) // .join( // (enter) => // append text // enter // .append("text") // .attr("fill", "green") // .attr("class", "letter") // .attr("x", (d) => xScale(d)) // .attr("y", yScale("enter") + 5) // .style("font", "14px sans-serif") // .text((d) => d), // (update) => // change fill to black and position // update // .attr("fill", "black") // .call((update) => // reference object and make transition // update.transition().attr("y", yScale("update") + 5) // ), // (exit) => // change fill to red and position // exit.attr("fill", "red").call((exit) => // exit // .transition() // .attr("y", yScale("exit") + 5) // .transition() // .remove() // ) // ); // Anything we add after our join will apply to the enter + update elements that remain // If we don't care about handling enter + update differently, and we just want to remove our exited elements, You can do it all this way. g.selectAll(".letter") .data(data, (d) => d) .join("text") .attr("class", "letter") .attr("y", yScale("enter") + 5) .attr("x", (d) => xScale(d)) .style("font", "14px sans-serif") .text((d) => d); await Promises.delay(3000); data = d3 .shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); } }34:T932,{ const width = 600; const height = 400; const margin = { top: 20, bottom: 20, left: 50, right: 50 }; const div = htl.html`

`; // groups data by whatever field specified const categories = d3.groups(iris, (d) => d.species); const buttons = d3 .select(div) .selectAll("button") .data(categories) .join("button"); buttons.text((d) => d[0]); const svg = d3 .select(div) .append("div") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3 .scaleLinear() .domain(d3.extent(iris, (d) => d["sepalLength"])) .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(iris, (d) => d["sepalWidth"])) .range([height, 0]); const color = d3 .scaleOrdinal() .domain(categories.map((d) => d[0])) .range(d3.schemeDark2); g.append("g").call(d3.axisLeft(y)); g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)); const circles = g .selectAll("circle") .data(iris.filter((d) => d.species == "setosa")) .join("circle") .attr("r", 4) .style("stroke", "#000") .attr("cx", (d) => x(d.sepalLength)) .attr("cy", (d) => y(d.sepalWidth)) .style("fill", (d) => color(d.species)); buttons.on("click", (event, d) => { // selecting circles g.selectAll("circle") .data(d[1], (d) => d) .join( // allows for animation and changing of data being shown (enter) => enter .append("circle") .attr("r", 4) .style("stroke", "#000") .attr("cx", (d) => x(d.sepalLength)) .attr("cy", (d) => y(d.sepalWidth)) .style("fill", (d) => color(d.species)), (update) => update .attr("cx", (d) => x(d.sepalLength)) .attr("cy", (d) => y(d.sepalWidth)) .style("fill", (d) => color(d.species)), // circles slowly shrinking as transition (exit) => exit .attr("fill", "red") .call((exit) => exit.transition().duration(2000).attr("r", 0).remove() ) ); }); return div; }35:T4a5,testYourKnowledge([ { title: 'General Update Pattern', backText: [`The general update pattern is a deprecated approach for handling changing datasets.`, `Though it is no longer the preferred method, it's good to know to be able to read many D3 examples, and it helps demonstrate the value of the newer method, selection.join`], question: "The modern approach for handling changing datasets in your visualization", answer: false }, { title: 'Selection.join', backText: ['Selection.join will automatically update & enter new elements and exit/remove older elements without having any custom configuration', 'You still can treat each of the enter/update/exit states separately within the join method.'], question: 'Can automatically handle changing datasets without needing much configuration.', answer: true }, { title: 'Transitions', backText: [`D3 transition can interpolate attributes and styling to animate your visualizations.`, `The extensive library of easing functions allows you to use many types of interpolators.`], question: `D3 transitions interpolate values so you can animate your visualizations.`, answer: true }, ], 300, 300)36:[{"id":"a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","href":"https://static.observableusercontent.com/files/a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","name":"iris.csv","type":"text/csv","lastModified":1744193760604.592,"size":3712}] 30:{"id":"8e1a767a4a4aaa67","slug":"gc-intro-to-d3-4","title":"Grace Chen - Introduction to D3 Course: Lesson 4","thumbnail":"530eb1b754381d6c3c0904ad2b0c2b0e9102b6575815b20b63bf699e037a0dd9","access_level":"public","create_time":"$D2025-04-09T10:16:00.604Z","update_time":"$D2025-04-10T08:03:08.915Z","view_time":null,"first_public_time":"$D2025-04-10T08:03:23.661Z","fork":{"id":"2eb21736da8400c8","slug":"introduction-to-d3-course-lesson-4","title":"Introduction to D3 Course: Lesson 4","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1dbd369284af18df","login":"dv-develop-2025-spring-observable-tutor","name":"DV DEVELOP 2025 SPRING Observable Tutorials","avatar_url":"https://avatars-next.observableusercontent.com/abefc102535ca1020f91cb4c0dbfd56f396559d321163a0de37a287837f65e07","tier":"starter_2024"},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec64fb3abdc1053a","login":"grace-chen","name":"Grace Chen","avatar_url":"https://avatars-next.observableusercontent.com/b6f469b045c91ba4f01137bd3b1bef884e09eb592f6ebe13febb8a319c830798","tier":null}],"members":[{"type":"team","id":"1dbd369284af18df","login":"dv-develop-2025-spring-observable-tutor","name":"DV DEVELOP 2025 SPRING Observable Tutorials","avatar_url":"https://avatars-next.observableusercontent.com/abefc102535ca1020f91cb4c0dbfd56f396559d321163a0de37a287837f65e07","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ec64fb3abdc1053a","login":"grace-chen","name":"Grace Chen","avatar_url":"https://avatars-next.observableusercontent.com/b6f469b045c91ba4f01137bd3b1bef884e09eb592f6ebe13febb8a319c830798","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"14309809ab0e4ce3","slug":"grace-chen-d3-js","title":"Grace Chen - d3.js","owner":{"id":"1dbd369284af18df","login":"dv-develop-2025-spring-observable-tutor","name":"DV DEVELOP 2025 SPRING Observable Tutorials"}},"type":"notebook","body":{"title":"Grace Chen - Introduction to D3 Course: Lesson 4","cells":[{"id":5,"value":"# Grace Chen - Introduction to D3 Course: Lesson 4\n## Enter, Update, Exit & Transitions\n\n[Session 4 slide deck](https://docs.google.com/presentation/d/1nIdf7cwGu6Yp-6PPMjbqMchnz2Pwbg5RFjcKMNl0_TQ/edit?usp=sharing)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## Activity 1\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"### General Update Pattern\n- Using the general update pattern, create a \"visualization\" of how the random letters are changing, with a row for the enter, update and exit. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"---\n## Activity 2\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"### Enter, Update Exit with Join()\n- Let's convert our previous example using the general update pattern to follow the new selection.join paradigm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"---\n## Activity 3\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"### Transitions\n- Test out a few different types of transitions:\n - Make each circle move the right \n - Make each circle move the right slowly\n - Make each circle move the right one at a time\n - Make each circle move to the right then back to where it came from\n - Try out different [easing](https://observablehq.com/@d3/easing) methods!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"{\n const width = window.innerWidth;\n const height = 200;\n const r = 25;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"overflow\", \"visible\"); // allows for cirlces to go off page\n\n const x = d3\n .scalePoint()\n .domain([0, 1, 2, 3, 4])\n .range([0, width])\n .padding(0.5);\n\n svg\n .selectAll(\"circle\")\n .data(d3.range(5).map(Object))\n .join(\"circle\")\n .attr(\"cx\", (_, i) => x(i))\n .attr(\"cy\", height / 2)\n .attr(\"r\", r)\n .transition() // call transition method\n // .duration(6000) // animation moves slower - circles moving at different speeds\n .duration(6000)\n // .duration((d) => (d + 1) * 1000)\n .delay((d) => d * 750)\n .ease(d3.easeElastic)\n .attr(\"cx\", width - r)\n \n\n // chaining the transition - going to original position\n .transition()\n .duration(6000)\n .delay((d) => d * 750)\n .ease(d3.easeElastic)\n .attr(\"cx\", (_, i) => x(i)); // not hard-coded\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n## Activity 4\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"### Transition Scatterplot\n- Using the Iris Scatterplot from session 2, handle updates from the buttons at the top for changing the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"iris","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"d3.groups(iris, (d) => d.species)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"---\n## Wrap Up\nTest your knowledge from session four with these short questions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"import {note} from \"@observablehq/callout-boxes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {testYourKnowledge} from \"@observablehq/test-your-knowledge-cards\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"color = d3.schemeBlues[7]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"iris = await FileAttachment(\"iris.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"iris","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"