3e:null 3f:["$","title",null,{"children":"Introduction to D3 Course: Lesson 5 | TRSS | Observable"}] 45:T542,{ const width = 900; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 60; const x = d3 .scaleBand() .domain(populationData.map((d) => d.name)) .range([0, width]); const y = d3 .scaleLinear() .domain([0, d3.max(stackLayout, (d) => d3.max(d, (d) => d[1]))]) // .nice() .range([height, 0]); const color = d3 .scaleOrdinal() .domain(keys) .range(d3.schemeSpectral[keys.length]); const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg .append("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); // Append a group for each series, and a rect for each element in the series. g.append("g") .selectAll(".bucket") .data(stackLayout) .join("g") .attr("class", "bucket") .attr("fill", (_, i) => color(keys[i])) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => x(d.data.name)) .attr("y", (d) => y(d[1])) .attr("width", x.bandwidth()) .attr("height", (d) => y(d[0]) - y(d[1])); g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)); g.append("g").call(d3.axisLeft(y)); return svg.node(); }46:T558,{ const width = 200; const height = 200; const margin = { top: 20, bottom: 20, left: 20, right: 20 }; 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 rectangle = g .append("rect") .attr("width", width) .attr("height", height) .style("fill", "#ddd") .style("stroke", "#000") .on("mouseenter", (event) => { rectangle.style("fill", "magenta"); }) .on("mouseleave", (event) => { rectangle.style("fill", "blue"); }) .on("click", (events) => { rectangle .transition() .duration(2000) .ease(d3.easeBounce) .attr("width", 0) .attr("height", 0) .attr("x", width / 2) .attr("y", height / 2) .transition() .duration(2000) .ease(d3.easeBounce) .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0); }); const circle = g .append("circle") .style("pointer-events", "none") .attr("r", 5); svg.on("mousemove", (event) => { circle.attr("cx", event.layerX - margin.left); circle.attr("cy", event.layerY - margin.top); }); return svg.node(); }47:Tb8d,{ const width = 600; const height = 400; const margin = { top: 30, 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})`); g.append("rect") .attr("width", width) .attr("height", height) .style("fill", "#eee"); const text = svg .append("text") .style("font", "12px sans-serif") .attr("y", 15) .text("Click on a circle to read the data!"); const x = d3 .scaleLinear() .domain(d3.extent(iris, (d) => d["sepalLength"])) .nice() .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(iris, (d) => d["sepalWidth"])) .nice() .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 previousData = d3.local(); 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)) .style("cursor", "pointer") .on("click", (event, d) => { text.text(JSON.stringify(d)); }); buttons.on("click", (event, d) => { g.selectAll("circle") .data(d[1], (d) => [d.sepalLength, d.sepalWidth]) .join( (enter) => enter .append("circle") .style("stroke", "#000") .attr("cx", (d) => x(d.sepalLength)) .attr("cy", (d) => y(d.sepalWidth)) .style("fill", (d) => color(d.species)) .style("cursor", "pointer") .on("click", (event, d) => { text.text(JSON.stringify(d)); }) .attr("r", 0) .transition() .duration(2000) .attr("r", 4), (update) => update .transition() .ease(d3.easeCubicIn) .duration(1000) .attr("r", 2) .style("fill", (d) => color(d.species)) .transition() .ease(d3.easeCubicOut) .duration(1000) .attr("r", 4), (exit) => exit .attr("fill", "red") .transition() .duration(2000) .attr("r", 0) .remove() ); }); return div; }48:T435,testYourKnowledge([ { title: 'Data Structures', backText: [`Converting a tabular data structure to a hierarchical data structures is about creating a structure better suited for your visualization, not about creating efficiency.`, `A hierarchical data structure can introduct complexity which may not be best for all situations.`], question: "Hierarchical data structres are more efficient that tabular data structures", answer: false }, { title: 'Thinking in D3', backText: ['Thinking in D3 ', ''], question: 'Thinking in D3 means thinking more criticically about the components that go into a visualization', answer: true }, { title: 'Interaction', backText: [`While event listeners are built-in method with D3 selections, its interaction does not come out of the box. You need to specify the event and interaction that results.`, `D3 uses web standards for event listeners, so you can use any web-standard event in your D3 visualization.`], question: `Interaction with D3 comes out of the box.`, answer: false }, ], 300, 300)49:[{"id":"3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","href":"https://static.observableusercontent.com/files/3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","name":"us-population-state-age.csv","type":"text/csv","lastModified":1742913221421.906,"size":3516},{"id":"a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","href":"https://static.observableusercontent.com/files/a2810faa56f2edca2606a76bffb24e6c150fbf4b70512f35fd794a3c52144d51dbc70db3c4d3158c935f13fba1f66ca3425cc65f7e8bea9c70a493b532fabbdc","name":"iris.csv","type":"text/csv","lastModified":1742913221421.906,"size":3712}] 43:{"id":"f2d0af91e48bc396","slug":null,"title":"Introduction to D3 Course: Lesson 5","thumbnail":"982bf541966fdfbcaf6c2b39a6f49e346209ffc2b7a97e6e9aa8eac77e439e37","access_level":"public","create_time":"$D2025-03-25T14:33:41.421Z","update_time":"$D2025-05-15T13:38:42.938Z","view_time":null,"first_public_time":"$D2025-03-25T14:33:41.421Z","has_unpublished_edits":null,"fork":{"id":"adf87cc9bddfd34b","slug":"introduction-to-d3-course-lesson-5","title":"Introduction to D3 Course: Lesson 5","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d23f4772d2636bfa","login":"trss","name":"TRSS","avatar_url":"https://avatars-next.observableusercontent.com/cf75fa02188cff9d08ad21efa4d0fa7074c8dcaedce88236eef651d212e5964f","tier":"starter_2024","bio":"","following":false},"version":264,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f50c9bb109895dae","login":"trss","name":"trss","avatar_url":"https://avatars-next.observableusercontent.com/3349e6e48487259972ccf248f2400cb670e60904d75fa82437c27c3c3c1b276f","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"d23f4772d2636bfa","login":"trss","name":"TRSS","avatar_url":"https://avatars-next.observableusercontent.com/cf75fa02188cff9d08ad21efa4d0fa7074c8dcaedce88236eef651d212e5964f","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f50c9bb109895dae","login":"trss","name":"trss","avatar_url":"https://avatars-next.observableusercontent.com/3349e6e48487259972ccf248f2400cb670e60904d75fa82437c27c3c3c1b276f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2b0aa662056c2fb3","slug":"introduction-to-d3-course","title":"Introduction to D3 Course by Paul Buffa","owner":{"id":"d23f4772d2636bfa","login":"trss","name":"TRSS"}},"type":"notebook","body":{"titling":"auto","title":"Introduction to D3 Course: Lesson 5","cells":[{"id":5,"value":"# Introduction to D3 Course: Lesson 5\n## Thinking in D3\n\n[Session 5 slide deck](https://docs.google.com/presentation/d/1obvcXsmiuH-xOQh3v3ItjSmDRjNU0u4bcEaK0wCNr8U/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":42,"value":"### Hierarchical Data with Stack Layout\n- Create a new stack layout function, using the population dataset by state, making the keys the various age buckets.\n - Compare datasets to see what changed. Is the data set the same structure? Is it smaller or larger?\n- Create a stacked bar chart with the x-axis being each state, and the y axis being the total population, bars colored by their key.\n - Use a band scale to handle for the bar widths\n - Nest a d3.max within the d3.max to get the max y scale value.\n - Use a nested structure to our elements, so that there is a group for each key.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"populationData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"populationData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"keys = [\"<10\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70-79\", \"≥80\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// stackLayout = d3.stack().keys(keys)(populationData)\nstackLayout = d3.stack().keys(keys).offset(d3.stackOffsetExpand)(populationData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$45","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 2\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"### Interaction with Event Listeners\n- Make the rectangle turn yellow when you enter the rectangle.\n- Make the rectangle turn blue when you leave the rectangle.\n- Make the rectangle shrink into nothingness when you click on the rectangle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"$46","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 3\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"### Interaction with Event Listeners\n- Add an click event listener to the circles so you can read the data bound to each element.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"$47","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 one 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":"$48","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":76,"value":"populationData = await FileAttachment(\"us-population-state-age.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"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":"$W49","stdlib":"1"}} 44:"$43:body"