25:["$","title",null,{"children":"Introduction to D3 Course: Lesson 4 | Joel M | Observable"}] 49:T6d3,{ 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 // 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") // .text(d => d); // Update // textSelection // .transition() // .duration(1000) // .attr("y", yScale('update') + 5) // .style("fill", "#000"); // Exit // textSelection.exit() // .transition() // .duration(1000) // .style("fill", "red") // .attr("y", yScale('exit') + 5) // .transition() // .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); } }4a:T8b7,{ 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 => 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 => update .attr("fill", "black") .call(update => update.transition() //call method - references object to make a transition, not needed in enter bc there's no transition .attr("y", yScale('update') + 5)), exit => exit //exit removes element from the page .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); } }4b:T599,{ const width = 600; const height = 400; const margin = { top: 20, bottom: 20, left: 50, right: 50 }; const div = htl.html`

`; 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) => { }) return div }4c: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)4d:[{"id":"a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","href":"https://static.observableusercontent.com/files/a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","name":"iris.csv","type":"text/csv","lastModified":1695917510393.979,"size":3712}] 29:{"id":"03a049db8a0d5a2e","slug":null,"title":"Introduction to D3 Course: Lesson 4","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-28T16:11:50.393Z","update_time":"$D2023-09-28T16:39:18.886Z","view_time":null,"first_public_time":"$D2023-09-28T16:11:50.393Z","has_unpublished_edits":null,"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":"bfb3ec534240b313","login":"jmasselink","name":"Joel M","avatar_url":"https://avatars-next.observableusercontent.com/08492a6995b7a3df3081f7528975d09f9b36e4135cd509b0cca496408d4b8241","tier":"starter_2024","bio":"geo geek hackery goin on here.","followed_by_you":false,"follows_you":false},"version":229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d56ebda3ae9ad331","login":"jmasselink","name":"Joel M","avatar_url":"https://avatars-next.observableusercontent.com/08492a6995b7a3df3081f7528975d09f9b36e4135cd509b0cca496408d4b8241","tier":null,"bio":"geo geek hackery goin on here.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d56ebda3ae9ad331","login":"jmasselink","name":"Joel M","avatar_url":"https://avatars-next.observableusercontent.com/08492a6995b7a3df3081f7528975d09f9b36e4135cd509b0cca496408d4b8241","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## Activity 1\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"---\n## Activity 2\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"---\n## Activity 3\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"{\n const name = value;\n const \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"{\n const width = window.innerWidth;\n const height = 200;\n const r = 25;\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n const x = d3.scalePoint()\n .domain([0, 1, 2, 3, 4])\n .range([0, width])\n .padding(.5)\n\n svg.selectAll(\"circle\")\n .data(d3.range(5).map(Object))\n .join(\"circle\")\n .attr(\"cx\", (_, i) => x(i)) // \"_\" is like \"d\" but we're not using the \"d\" values\n .attr(\"cy\", height / 2)\n .attr(\"r\", r)\n .transition()\n .duration(3000)\n .attr(\"cx\", width - r);\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":"---\n## Activity 4\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"

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

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

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"import {note} from \"@observablehq/callout-boxes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"color = d3.schemeBlues[7]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"iris","database":"$undefined"},{"id":210,"value":"{\n const width = 500;\n const height = 200;\n const r = 50;\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n const circle = svg.append(\"circle\")\n .attr(\"r\", r)\n .attr(\"cx\", r)\n .attr(\"cy\", height / 2)\n .transition().duration(2000)\n .attr(\"cx\", width - r)\n .transition()\n .attr(\"cx\", r)\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"}],"files":"$W4d","stdlib":"1"}} 24:null