3e:null 3f:["$","title",null,{"children":"Introduction to D3 Course: Lesson 4 | ClaraPT's Workspace | Observable"}] 45:T805,{ let data = d3.shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); const width = 500; const height = 100; const margin = { top: 50, bottom: 50, left: 50, right: 50}; // create svg const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // create g const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales - like an ordinal scale // y domain: distinct array of values const yScale = d3.scalePoint() .domain(['enter', 'update', 'exit']) .range([0, height]); const xScale = d3.scalePoint() .domain(alphabet) .range([10, width]); // some extra padding // add axes to svg g.append("g").call(d3.axisLeft(yScale)); while (true) { yield svg.node(); // selection const textSelection = g.selectAll(".letter") // look for text of class letter .data(data, d => d); // don't need to call any specific properties // Enter textSelection .enter() .append("text") .attr("class", "letter") .attr("y", yScale("enter") + 5) // give it a position on y axis offset height of text .attr("x", (d) => xScale(d)) // give it a position along x axis .style("font", "14px sans-serif") .style("fill", "green") .text((d) => d); // text itself is equal to that character // 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) //make character disappear and remove from page .remove(); await Promises.delay(3000); data = d3 .shuffle(alphabet.slice()) .slice(Math.floor(Math.random() * 10) + 5) .sort(d3.ascending); } }46:T678,{ 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); } }47:T873,{ 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().attr("y", yScale("update") + 5) ), (exit) => 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); } }48:T879,{ 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) => { 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)), (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(2000).attr("r", 0).remove() ) ); }); return div; }49: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)4a:[{"id":"a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","href":"https://static.observableusercontent.com/files/a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","name":"iris.csv","type":"text/csv","lastModified":1707361013678.729,"size":3712}] 43:{"id":"3ef3fa8493ffbc5a","slug":null,"title":"Introduction to D3 Course: Lesson 4","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-02-08T02:56:53.678Z","update_time":"$D2024-02-08T06:58:55.442Z","view_time":null,"first_public_time":"$D2024-02-08T02:56:53.678Z","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":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","bio":"","following":false},"version":257,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"role":"editor"},{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","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":226,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"### Solutions: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$46","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":"$47","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":242,"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\");\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"},{"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\");\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)) // _ is d, just means we are not using d\n .attr(\"cy\", height / 2)\n .attr(\"r\", r)\n .transition()\n .duration(12000)\n .delay((d) => d * 750)\n .ease(d3.easeElastic) // an easing method\n .attr(\"cx\", width - r)\n .transition()\n .duration(12000)\n .delay((d) => d * 750)\n // .ease(d3.easeElastic)\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"},{"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":218,"value":"iris","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"d3.groups(iris, (d) => d.species)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$48","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":"$49","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"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"