2b:null 2c:["$","title",null,{"children":"Introduction to D3 Course: Lesson 4 | JuliaR | Observable"}] 31:T700,{ 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})`); // ordinal scale for distinct arrays 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 //Selection const textSelection = g.selectAll(".letter") .data(data, d => d); //Enter textSelection.enter().append("text") .attr("class", "letter") .attr("y", yScale('enter') + 5) // little offset that depends on the font .attr("x", d => xScale(d)) .style("font", "14px sans-serif") .style("fill", "green") .text(d => d); // text is equal to the character // Update textSelection .transition() //animation .duration(1000) .attr("y", yScale("update") + 5) .style("fill", "#000"); // Exit textSelection .exit() .transition() // animation 1 .duration(1000) .style("fill", "red") .attr("y", yScale("exit") + 5) .transition() // animation 2 .duration(1000) .style("opacity", 0) .remove(); await Promises.delay(3000); data = d3.shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); } }32:T902,{ 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) { const t = svg.transition() .duration(1000); yield svg.node() // yield data g.selectAll(".letter") .data(data, d => d) .join( enter => enter.append("text") .attr("class", "letter") .attr("y", yScale('enter') + 5) // little offset that depends on the font .attr("x", d => xScale(d)) .style("font", "14px sans-serif") .attr("fill", "green") .text(d => d), update => update .attr("fill", "#000") .call( update => update.transition(t) //animation .attr("y", yScale("update") + 5) ), exit => exit .attr("fill", "red") .call( exit => exit.transition(t) // animation 1 .attr("y", yScale("exit") + 5) .transition(t) // animation 2 .attr("opacity", 0) .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); } }33:T54d,{ 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) { const t = svg.transition() .duration(1000); yield svg.node() // yield data // 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:T719,{ const width = 600; const height = 400; const margin = { top: 20, bottom: 20, left: 50, right: 50 }; const div = htl.html`

`; // grouping the data to filter out const categories = d3.groups(iris, d => d.species) // adding buttons to the top - add it to the 'div', not 'svg'! const buttons = d3.select(div) .selectAll("button") .data(categories) .join("button"); buttons.text(d => d[0]) const svg = d3.select(div) .append("div") // remember this! .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) => { // the data is there already g.selectAll("circle") .data(d[1], (d) => d) .join( 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)), // no update here, since it's different dataset each time! (update) => update .attr("cx", (d) => x(d.sepalLength)) .attr("cy", (d) => y(d.sepalWidth)) .style("fill", (d) => color(d.species)), exit => exit .attr("fill", "red") .call( exit => exit.transition() .duration(3000) .attr("r", 0) .remove() ) ) }) return div }36: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)37:[{"id":"a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","href":"https://static.observableusercontent.com/files/a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","name":"iris.csv","type":"text/csv","lastModified":1695969146938.325,"size":3712}] 2f:{"id":"74527967460648c6","slug":null,"title":"Introduction to D3 Course: Lesson 4","thumbnail":"67e18cfe23249d913f33f1ce2fff967924058e5df32b70d032fc7f0914ee4e41","access_level":"public","create_time":"$D2023-09-29T06:32:26.938Z","update_time":"$D2023-09-29T16:14:43.569Z","view_time":null,"first_public_time":"$D2023-09-29T06:32:26.938Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f077e520accf5f8c","login":"jromanowska","name":"JuliaR","avatar_url":"https://avatars-next.observableusercontent.com/c3b53a6ae9c194dafb363d7f5a552fabc9a3159e91dbd439bdc0988fe30e7420","tier":"starter_2024"},"version":290,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"af4a3c9377681d9d","login":"jromanowska","name":"JuliaR","avatar_url":"https://avatars-next.observableusercontent.com/c3b53a6ae9c194dafb363d7f5a552fabc9a3159e91dbd439bdc0988fe30e7420","tier":null}],"members":[{"type":"individual","id":"af4a3c9377681d9d","login":"jromanowska","name":"JuliaR","avatar_url":"https://avatars-next.observableusercontent.com/c3b53a6ae9c194dafb363d7f5a552fabc9a3159e91dbd439bdc0988fe30e7420","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to D3 Course: Lesson 4","cells":[{"id":5,"value":"# 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":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"**Remember to `remove()` the elements!**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"Without animation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"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":273,"value":"**NEWTON TOY**!","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\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\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\", 25)\n .transition()\n .duration((d) => (d + 1) * 1000)\n .attr(\"cx\", (_, i) => x(i) + 50)\n .ease(d3.easeQuadIn)\n .transition()\n .duration(2000)\n .attr(\"cx\", (_, i) => x(i));\n\n return svg.node();\n}","pinned":false,"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":155,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"iris","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":"$36","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":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"