\` element to our country \`circle\`s: the browser will then show the text as tooltips after a short hover delay. We should also sort the countries so that smaller circles are drawn last and not occluded by larger circles. While we won't concern ourselves here, note that using built-in browser tooltips can be limiting: they may take a while to display and do not support rich formatting. (For alternatives, see the [Learn D3: Interaction](https://observablehq.com/@d3/learn-d3-interaction) notebook.) As we wait for a tooltip, it would be nice for the chart to clearly indicate which country has been selected. For example, we could draw a stroke around the circle that the mouse pointer is currently visiting. To achieve this, we can add _event listeners_ to update \`<circle>\` attributes upon \`mouseover\` and \`mouseout\` events. _Read the cell code below for our extended chart, with comment annotations._ `33:T661,{ const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) // Add x-axis title 'text' element. .append("text") .text("Fertility") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .attr("text-anchor", "end"); svg .append("g") .call(d3.axisLeft(y)) // TODO(vishal): Add y-axis title 'text' element. .append("text") .text("Life Expectancy") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", 0) .attr("text-anchor", "end") .attr("transform", `translate(20, 0) rotate(-90)`); // TODO(vishal): Add a background label for the current year. const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) // TODO(vishal): sort so smaller circles are drawn last .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)) .attr("fill", (d) => color(d.cluster)) .attr("opacity", 0.75); // TODO(vishal): add a tooltip countries.append("title").text((d) => d.country); // TODO(vishal): Add mouse hover interactions, using D3 to update attributes directly. countries .on("mouseover", (evt) => { d3.select(evt.target).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", (evt) => { d3.select(evt.target).attr("stroke", null); }); return svg.node(); }34:T6dc,{ const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(yearFilter); // <-- TODO(tukey): update to use yearFilter const countries = svg .selectAll("circle") .data(gapminder.filter((d) => d.year === yearFilter)) // <-- TODO(tukey): update to use yearFilter .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)); countries .transition() .duration(1000) .ease(d3.easeLinear) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); return svg.node(); }35:T5a5,md`Our interactive chart above is fun, but we can do better! First, using Observable's reactive updates causes the entire cell (and thus the entire visualization) to be re-computed from scratch on every update. This is not very efficient, and can lead to poor performance with larger datasaets. Second, our updates are "jumpy": we would prefer smooth animations between timesteps. 😎 To reuse our chart, we need to provide a mechanism for updating it. We can update our chart code by defining a function that updates the data for a given year and then animates the changes to the visualization. We can then export this update method alongside our chart, invoking it each time our scrubber updates. The "key" 🔑 step here is to provide a _key_ function as part of the input to the D3 selection \`data()\` method. The key function tells D3 how to match data to the DOM. When the input data changes, how should the data values be joined with our SVG elements? Here we use the key function \`d => d.country\` to indicate a circle should bind to a new input data value if its \`country\` property matches the old input value. That way, when we filter across years and provide a different set of inputs, those inputs still get resolved to the correct SVG \`<circle>\` elements. _Play with the scrubber below to see our smooth animated transitions. Then expand the cell and read the code below; the comments describe the changes we have made._ `36:T9cc,chartAnimate = { const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]); // <-- simply use the minimum year, as updates occur elsewhere const countries = svg .selectAll("circle.country") // TODO(tukey): add key function .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); // TODO(tukey): update function // update countries and animate the transition // step 1: change the data to filter to the given year // step 2: re-sort elements to ensure the smallest remain on top of the visualization, as pop values may have changed // step 3: update position and radius, 1000 ms // step 4: update the year label function changeYear(year) { yearLabel.text(year); countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .ease(d3.easeCubic) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // TODO(tukey): extend SVG node // return svg.node(); return Object.assign(svg.node(), { changeYear }); }37:T4c1,md` Before moving on, let's talk about that semi-magical \`transition()\` call in our chart update function. The \`transition()\` method provides an API similar to a standard D3 selection: we can call \`attr()\` and \`style()\` to update our DOM elements. Under the hood, transitions then create _interpolators_ that calculate intermediate values between start and end points. When transition is called, D3 automatically schedules an animation that interpolates over the specified duration. In addition to the [\`duration()\`](https://github.com/d3/d3-transition#transition_duration) parameter, transitions support [\`delay()\`](https://github.com/d3/d3-transition#transition_delay) to set pauses before onset and [\`ease()\`](https://github.com/d3/d3-transition#transition_ease) to control pacing. The default \`ease\` function uses slow-in slow-out timing along a cubic curve: items start moving slowly, speed up through the middle of the transition, then slow down before stopping. <span style="color: chocolate; font-weight: bold;">Try setting a longer duration and using a different \`ease\` function — such as \`d3.easeLinear\` or \`d3.easeBounce\` — to experiment with animation effects.</span> `38:T569,function colorLegend(container) { const titlePadding = 14; // padding between title and entries const entrySpacing = 16; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 4; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const title = container .append("text") // TODO(tukey): create legend's title .text("Region") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Arial") .attr("font-size", 12) .attr("font-weight", "bold"); const entries = container .selectAll("g") // TODO(tukey): create and entry for each label .select("g") .data(regions) .join("g") .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ); const symbols = entries .append("circle") // TODO(tukey): add color indication for each label .attr("cx", entryRadius) .attr("r", entryRadius) .attr("fill", (d) => color(d.index)); const labels = entries .append("text") .text((d) => d.label) .attr("x", 2 * entryRadius + labelOffset) .attr("y", baselineOffset) .attr("fill", "black") .attr("font-family", "Comic Sans MS") .attr("font-size", 11); // TODO(tukey): add text labels }39:T924,chartLegend = { const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(1955); // Add and position the legend; place in the upper right corner. // TODO(tukey): add legend svg .append("g") .call((container) => colorLegend(container)) .attr("transform", `translate(${width - 150}, 10)`); const countries = svg .selectAll("circle.country") .data(dataInitial, (d) => d.country) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); function changeYear(year) { yearLabel.text(year); countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .ease(d3.easeCubic) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // TODO(tukey): consider using a legend library like https://observablehq.com/@d3/color-legend return Object.assign(svg.node(), { changeYear }); }3a:Tb80,mdskip`Now let's add interaction to our legend, processing input events and updating a selection model. We will add a new input argument to our legend helper method: _a selection model instance named \`selmodel\`_ (that is, \`selmodel = SelectionModel()\`). Most of our legend generation code is the same as before, but we make two concise yet critical additions: input _event listeners_ for our legend entries, and a selection model listener to update legends upon selection changes. We add _event listeners_ to our legend entry (\`<g>\`) groups using the \`on()\` method. Upon mouse click (\`click\`) we \`toggle()\` the selection status of the legend values. Upon double click (\`dblclick\`), we \`clear()\` all legend selections. ~~~ js const entries = container.selectAll('g') .data(regions) .join('g') .attr('transform', d => \`translate(0, \${titlePadding + d.index * entrySpacing})\`) .on('click', (e, d) => selmodel.toggle(d.index)) .on('dblclick', () => selmodel.clear()); ~~~ The first argument (\`e\`) to the event listener is an [event object](https://developer.mozilla.org/en-US/docs/Web/API/Event). If we wanted more information about the input event (for example, to check if the shift-key was depressed, or which mouse button was clicked) we could consult this object. The second argument (\`d\`) is the bound datum for the element being interacted with. The code above updates our selection model in response to user input, but we still need to make the legend respond to selection changes. To do this, we can add an event listener to our selection model: when the selection changes, we update all symbol and label colors to reflect the selection status. ~~~ js selmodel.on('change.legend', () => { symbols.attr('fill', d => selmodel.has(d.index) ? color(d.index) : '#ccc'); labels.attr('fill', d => selmodel.has(d.index) ? 'black' : '#bbb'); }); ~~~ At this point you might be asking yourself: Why do we use the event type \`'change.legend'\`? Why not just \`'change'\`? The reason is that D3's \`dispatch\` helper – which our selection model uses internally – only allows one event listener per name. If we listen for \`'change'\` and then another component also does, the new component will override our listener! By adding a _qualified type_ (\`change.legend\`) we indicate that we want to listen to \`change\` events while also giving our listener a unique name. You should also stop to question if this code really works. For example, what happens when the selection model is empty? It would not be good if our initial chart state de-emphasized all data points! Fortunately for us, when the selection is empty our selection model treats _all_ values as selected; that is, the \`has()\` method will return \`true\`. Feel free to go back and check the selection model code above to confirm! _Expand the cell below to see our new legend helper in its entirety._ `3b:T87d,// container is a d3 selection for the container group (<g>) element // selmodel is a selection model instance for tracking selected legend entries function legend(container, selmodel) { const titlePadding = 14; const entrySpacing = 16; const entryRadius = 5; const labelOffset = 4; const baselineOffset = 4; const title = container .append("text") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", "bold") .attr("font-size", "12px") .text("Region"); // The "on" method registers event listeners // We update the selection model in response const entries = container .selectAll("g") .data(regions) .join("g") .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ) // TODO(vishal): handle interaction .on("click", (evt, d) => selmodel.toggle(d.index)) .on("dblclick", (evt) => selmodel.clear()); const symbols = entries .append("circle") .attr("cx", entryRadius) .attr("r", entryRadius) .attr("fill", (d) => color(d.index)); const labels = entries .append("text") .attr("x", 2 * entryRadius + labelOffset) .attr("y", baselineOffset) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "11px") .style("user-select", "none") .text((d) => d.label); // Listen to selection model, update symbol and labels upon changes selmodel.on("change.legend", () => { // TODO(vishal): add effects from legend's interaction // This is an event listener that executes when the legend selection is changed, so when something is toggled on or off. // symbols.attr("fill", (d) => { // if (selmodel.has(d.index)) { // return color(d.index); // } else { // return "#ccc"; // } // We can simplify this with a JavaScript ternary operator, which I really like since they're so concise symbols.attr("fill", (d) => selmodel.has(d.index) ? color(d.index) : "#ccc" ); labels.attr("fill", (d) => (selmodel.has(d.index) ? "black" : "#bbb")); }); }3c:T9ed,chartInteractiveLegend = { const selmodel = SelectionModel(); // <-- Instantiate a selection model const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(1955); // Add and position the legend; place in the upper right corner. svg.append("g"); // TODO: add legend const countries = svg .selectAll("circle.country") .data(dataInitial, (d) => d.country) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); function setYear(year) { yearLabel.text(year); countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .ease(d3.easeCubic) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // Add a selection model listener that updates country colors // We name the event 'change.chart' as this is the chart's own internal listener. // We do not want the name to collide with the listener defined in the legend component. selmodel.on("change.chart", () => { // TODO: add effects from legend's interaction }); return Object.assign(svg.node(), { setYear }); }3d:T446,md`--- ## Final exercise: handle messy data<br>(adding and removing elements) <span style="color: chocolate; font-weight: bold;">Exercise: Handle the addition and removal of countries from the data. Above our \`circle\` elements are always in the \`update\` set upon each change of year. Modify the data join to handle items in the \`enter\` or \`exit\` sets upon year changes.</span> Below we modify the data so that all countries in the Americas disappear after 1960, while all East Asia & Pacific countries do not appear until 1980. Use the scaffold code below to start, and feel free to review the [data join discussion in Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1#datajoin) or [D3 Learn: Joins](https://observablehq.com/@d3/learn-d3-joins). The chart code includes blocks for handling \`enter\`, \`exit\`, and \`update\` sets. Drag the scrubber back and forth to understand the current behavior, then add encoding and transition logic to properly handle items entering and exiting the scene. What animated effects might you apply to convey these changes?`3e:Te55,chartDynamic = { const svg = d3.create("svg").attr("viewBox", viewBox); const selmodel = SelectionModel(); // <-- Instantiate a selection model svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]); svg .append("g") .attr("transform", `translate(${width - 150}, 10)`) .call((container) => legend(container, selmodel)); let countries = svg .selectAll("circle.country") .data( dataDynamic.filter((d) => d.year === years[0]), (d) => d.country ) .join("circle") .attr("class", "country") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); function changeYear(year) { yearLabel.text(year); countries = countries .data( dataDynamic.filter((d) => d.year === year), (d) => d.country ) // what we had before // .join("circle") .join( // TODO(vishal): Add code to customize how countries enter the scene. // Idea: fade in from transparent and grow from zero size // Make sure new elements have their properties properly initialized! (enter) => enter .append("circle") .attr("class", "country") .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => 0), (update) => update, // countries that still exist // TODO(vishal): Add code to customize how countries exit the scene. // Idea: fade out to transparent and shrink to zero size before removal (exit) => exit .transition() .duration(1000) .attr("r", 0) .attr("opacity", 0) .remove() ); // TODO(vishal): Animate enter + update countries to current position and size // Hint: If you modify opacity above, you probably want to update it here! countries .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)) .attr("opacity", 0.75); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); } return Object.assign(svg.node(), { changeYear }); }3f:T571,md`<hr/> ## Next Steps Want to try your hand at some more exercises? Here are some suggestions: 1. **Revise the graphic design.** Above we sped along without diving into important questions of typography, sizing, and element placement. How else might you style and position the axis labels, axis titles, year label, circle colors, _etc._? 2. **Refine multi-select interactions.** Our legend supports multiple item selections, but does not use the most intuitive interaction model: it is more common to select a single element by click, and multiple elements by shift-click. Update the legend event listeners and selection model as needed. Similarly, can you clear the selection by clicking the chart background? 3. **Direct manipulation time scrubbing (extra hard!)**. So far we've used a slider widget to adjust the year. What if instead we could just grab a point and drag it through time? This is the idea behind Kondo & Collins' [DimpVis](https://vialab.ca/research/dimpvis). Here is an [example implemented with Vega](https://vega.github.io/vega/examples/global-development/); can you implement a similar design in D3? Want to move on to additional D3 tutorials? Try the [Learn D3 collection](https://observablehq.com/collection/@d3/learn-d3). Or, browse the [@d3 Observable notebooks](https://observablehq.com/@d3) and [D3 example gallery](https://observablehq.com/@d3/gallery). `40:[{"id":"d5dcb45688a2352acbb3d011089d182533a0ab1abea7fd4ba068e694d39efb856798b5533cab363c18ab72e999c95ea990f75eec519a0fa42cb3f25aaff06e8d","href":"https://static.observableusercontent.com/files/d5dcb45688a2352acbb3d011089d182533a0ab1abea7fd4ba068e694d39efb856798b5533cab363c18ab72e999c95ea990f75eec519a0fa42cb3f25aaff06e8d","name":"d3-base-chart.png","type":"image/png","lastModified":1635199426134.266,"size":50463}] 2f:{"title":"Introduction to D3, Part 2 (Starter)","cells":[{"id":0,"value":"md`# Introduction to D3, Part 2 (Starter)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`In [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1), we learned the basics of D3 for creating and transforming both HTML and SVG. Now we will put those skills to work and build interactive graphics that animate changes over time. We'll continue to use the [Gapminder Foundation](https://www.gapminder.org/) dataset on global health and population measures, recreating the \"bubble plot\" made famous in [Hans Rosling's TED presentation](https://www.youtube.com/watch?v=hVimVzgtD6w).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"md`Let's import D3, load and preview our dataset, and then get going!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"gapminder = datasets['gapminder.json']()","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"aq.from(gapminder).view({ limit: 40, height: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`<hr>\n## Build the Base Plot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`We'll begin by creating a static scatter plot for a single year. For this phase, we will put into practice most of what we learned in [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"md`Here is the final chart we want to create:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"viewof _yearAnimate = Scrubber(d3.range(1955, 2005 + 1, 5), {\n autoplay: false,\n delay: 1000,\n loop: false,\n label: \"Year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"finalChartUpdaterSoThatObservableDoesntKeepRerunningTheFinalChartCell = _finalChart.setYear(\n _yearAnimate\n) // needed to link the slider with the chart without making the final chart depend on the slider in Observable's data flow DAG","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"md`As preliminary steps, we'll compute the minimum and maximum years in the data (using the \\`d3.extent\\` helper), and filter our dataset to the initial year:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"years = d3.extent(gapminder, (d) => d.year) // compute min and max years","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"dataInitial = gapminder.filter((d) => d.year === years[0]) // filter to initial year","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`Next, let's set up the basic dimensions of our chart. For the width, we will use the built-in \\`width\\` variable provided by Observable (though you should feel free to override this if you want to). We will also set our desired \\`height\\`, plus a \\`viewBox\\` array with space to accommodate *x* and *y* axes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"margin = // define margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"md`Our envisioned design is a scatter plot of countries (circles) that we:\n\n- Position along the x-axis by the number of children per mother (\\`fertility\\`)\n- Position along the y-axis by the life expectancy in years (\\`life_expect\\`)\n- Color by geographic region (coded by the \\`cluster\\` field)\n- Size by their population (\\`pop\\`)\n\nFor each of these attributes, we need a corresponding [_scale_](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) to map from data values to visual values. For the x and y axes we use standard linear scales with a zero baseline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"dataInitial[0].fertility","pinned":true,"hidden":false,"mode":"ojs"},{"id":1922,"value":"[0, d3.max(gapminder, (d) => d.fertility)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"x = d3\n .scaleLinear()\n // create scale for x axis\n .domain([0, d3.max(gapminder, (d) => d.fertility)])\n .range([0, width])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1925,"value":"x(dataInitial[0].fertility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"y = d3\n // TODO(vishal): create scale for y axis\n .scaleLinear()\n .domain([0, d3.max(gapminder, (d) => d.life_expect) + 5])\n .range([height, 0])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1930,"value":"y(dataInitial[0].life_expect)","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`For the color encoding, we will use a _categorical_ color palette designed to help distinguish category (_nominal_) values. Here we use D3's \\`schemeTableau10\\`, but feel free to experiment with other color palettes provided by [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) or use your own array of custom color values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"gapminder.map((d) => d.cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1939,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"color = d3\n .scaleOrdinal()\n // create color encoding\n .domain(gapminder.map((d) => d.cluster))\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1941,"value":"color(dataInitial[0].cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`For the size encoding we use \\`scaleSqrt\\`, a non-linear scale the returns values proportional to the square root of the input values. Why? We want our size encoding to vary the circular _area (A)_ relative to the underlying data, but we will be explicitly assigning the circle _radius (r)_ values... and of course ${tex`A = \\pi r^2`}!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"size = d3\n .scaleSqrt()\n // create size encoding\n .domain(d3.extent(gapminder, (d) => d.pop))\n .range([4, 35])","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`Using our scale definitions, we can generate our base plot. <span style=\"color: chocolate; font-weight: bold;\">Fill in the missing attributes below with the proper scale encodings.</span>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"{\n // create the container SVG element\n const svg = d3.create(\"svg\").attr(\"viewBox\", viewBox);\n\n // position and populate the x-axis\n svg\n .append(\"g\")\n .call(d3.axisBottom(x))\n .attr(\"transform\", `translate(0, ${height})`);\n\n // position and populate the y-axis\n svg.append(\"g\").call(d3.axisLeft(y));\n\n // TODO(vishal): add circle elements for each country\n // use scales to set fill color, x, y, and radius\n const countries = svg\n .selectAll(\"circle\")\n .data(dataInitial)\n .join(\"circle\")\n .sort((a, b) => b.pop - a.pop) // sort by population descending\n .attr(\"cx\", (d) => x(d.fertility))\n .attr(\"cy\", (d) => y(d.life_expect))\n .attr(\"r\", (d) => size(d.pop))\n .attr(\"fill\", (d) => color(d.cluster))\n .attr(\"opacity\", 0.75);\n\n debugSelection(countries);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1958,"value":"function debugSelection(selection) {\n selection.each(function (d) {\n console.log(d, this);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"md`<hr/>\n## Filter by Year\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"md`Now it is time to give our chart some life! Before we move on to more advanced D3 capabilities, let's use Observable's reactive updates to interactively filter by year.\n\nWe can start by adding a _dynamic query_ widget to selecting the current year. The \\`Scrubber\\` component provides a slider along with animated playback capabilities. We can import the scrubber from the notebook in which it is defined:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`Let's instantiate a scrubber for the 5-year increments in our dataset. Then we only need to wire up the \\`yearFilter\\` value to our chart definition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"md`<span style=\"color: chocolate; font-weight: bold;\">Update the chart code below to use \\`yearFilter\\` to set the year label text and filter the dataset. Then drag the scrubber or click \"Play\" to explore the data!</span>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"years","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof yearFilter = Scrubber(\n // TODO(tukey): construct scrubber\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, loop: false, delay: 500 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1985,"value":"yearFilter","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":923,"value":"md`Even if you ultimately plan to use other methods, you can leverage Observable's reactive updates to quickly prototype interactive design ideas!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`<hr/>\n## Animate Transitions between Years\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof yearAnimate = Scrubber(\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1907,"value":"chartAnimate.changeYear(yearAnimate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"(chartAnimate.changeYear(yearAnimate),\nmd`Average Fertility & Life Expectancy by Country in ${yearAnimate}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"md`With our modified chart code we can now handle updates. However, we also need to \"wire up\" the chart so that it is notified of changes to our year scrubber (here named \\`yearAnimate\\`). The cell above invokes \\`changeYear()\\` in response to \\`yearAnimate\\` updates. In addition, by using a comma (\\`,\\`) operator it returns an informative title rather than just the boring old \\`undefined\\` value returned by \\`changeYear()\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`<hr/>\n## Create a Color Legend\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"md`Let's now turn our attention to creating a legend. Our ultimate goal is to provide an interactive legend that allows a viewer to highlight specific regions by clicking legend entries, but we first need to get a basic, static legend in place.\n\nThe key insight here is that legends are just visualizations, too! Here we want to visualize the scale mapping from values to colors. We can ask ourselves the same questions that we would with any visualization design task, including: what is our input data, and what visual encodings should we apply?\n\nOur dataset uses the cryptic \\`cluster\\` field to encode geographic regions as integer indices. As part of our legend we would like to present informative labels, so our input \"data\" can be a set of index-label pairs:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"regions = [\n { index: 0, label: 'South Asia' },\n { index: 1, label: 'Europe & Central Asia' },\n { index: 2, label: 'Sub-Saharan Africa' },\n { index: 3, label: 'America' },\n { index: 4, label: 'East Asia & Pacific' },\n { index: 5, label: 'Middle East & North Africa' }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`We _could_ start adding code for our legend in the same cell as our chart definition. However, it would be nice to have a bit more modularity and support reuse by separating our legend design from our primary chart. Following the lead of D3's axis generation methods, let's build a helper method for creating a color legend. Our method can take as input a D3 selection for the container (\\`<g>\\`) element for the legend. Our job is to then populate this container with the legend content.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"Let's test our legend helper before we fill in the `colorLegend` function. We can create a new SVG element with a container group and apply our legend helper using the `call()` method, which invokes the provided function, passing the current selection as an argument.","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"{\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 110);\n \n const legend = svg.append('g')\n .attr('transform', 'translate(0, 10)')\n .call(colorLegend); // <-- our legend helper is invoked just like an axis generator\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`The style of code above should hopefully be familiar by now. We first define some constants and add a single \\`text\\` element for the title. To create legend entries, we join our input data against a selection of \\`<g>\\` elements, creating a group for each legend entry. We position the entries by translating each group relative to its index. We then populate each group with a colored \\`<circle>\\` and a \\`<text>\\` label.\n\nNote the inclusion of the style \\`user-select: none\\`. This CSS directive tells the browser not to allow text selection of the legend label, which will be useful to avoid distracting selections when we later add interaction. You may or may not have noticed earlier that SVG text is selectable by default. Here that includes our axis labels, axis titles, and year label! By adding \\`user-select: none\\` (whether using D3 or a CSS stylesheet) you can suppress these selections. Importantly, this is different from \\`pointer-events: none\\`, which prevents interaction entirely!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`<span style=\"color: chocolate; font-weight: bold;\">Looking good! Try adjusting the various style constants in the legend helper and see how they affect the result.</span>\n\nWhile here we focused on a categorical color legend, a similar pattern can be used to create other types of legends. For example, by modifying the \\`<circle>\\` radius with a scale function, we could create a size legend instead. Of course, legends are common and you may tire of creating them from scratch. As D3 does not directly provide higher-level legend support, Observable's [d3-legend](https://observablehq.com/@d3/color-legend) library can come in handy!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`<hr/>\n## Add an Interactive Legend\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"mdskip = async (...inputs) => {\n return html`<div style='background:pink;'>${await md(...inputs)}</div>`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"md`<div style='background:red;color:white;padding:32px;font-size:1.5em'>We're going to skip the interactive legend part for the class tutorial.</div>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"mdskip`Now that we can generate a legend, let's add it to our chart and make it interactive. When a user selects one or more entries in the legend, we would like to de-emphasize the non-selected entries. This requires updating the colors of elements both in the main plot and in the legend. To keep our code modular and well-organized, we need a way of communicating between the legend and main plot.\n\nLet's introduce a _selection model_ that tracks which legend values are currently selected and provides updates (via _listener callbacks_) when the selection changes. We will use this model to store which regions (legend items) have been interactively selected by a viewer. While we could try to track selection state using reactive Observable cells, here we will focus on a modular approach that also works in stand-alone browser deployments.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"mdskip`Our selection model provides a reusable API for tracking selection state and updating listeners when that state changes. The model methods we will use are:\n\n* \\`on()\\` to register new selection listeners,\n* \\`has()\\` to test if a value is selected,\n* \\`toggle()\\` to toggle a value's selection status, and\n* \\`clear()\\` to clear an existing selection, leaving _all_ items selected.\n\nWe need to update the selection model (\\`toggle\\` or \\`clear\\` values) when legend items are selected and de-selected. We will need to add listeners (using \\`on\\`) that respond to selection changes, and update the visual presentation of the chart and legend based on which values are currently selected (checked using \\`has\\`).\n\n_Expand the cell below if you are interested in selection model implementation details. However, please feel free to ignore the selection model internals for now. What's important is that it provides the above methods for tracking and broadcasting selection state!_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"// Our selection model wraps two components:\n// - A JavaScript Set for tracking the selected elements\n// - A D3 dispatch helper for registering and invoking listener callbacks upon changes\nfunction SelectionModel(values) {\n const dispatch = d3.dispatch('change');\n const state = new Set(values);\n \n const api = {\n on: (type, fn) => (dispatch.on(type, fn), api),\n clear: () => (clear(), api),\n has: value => !state.size || state.has(value),\n set: value => (update(value, true), api),\n toggle: value => (update(value, !state.has(value)), api)\n };\n \n function clear() {\n if (state.size) {\n state.clear();\n dispatch.call('change', api, api);\n }\n }\n \n function update(value, add) {\n if (add && !state.has(value)) {\n state.add(value);\n dispatch.call('change', api, api);\n } else if (!add && state.has(value)) {\n state.delete(value);\n dispatch.call('change', api, api);\n }\n }\n\n return api;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1441,"value":"mdskip`Let's test our interactive legend:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"{\n const selmodel = SelectionModel(); // <-- Instantiate a selection model\n const svg = d3.create(\"svg\").attr(\"width\", 200).attr(\"height\", 110);\n\n svg\n .append(\"g\")\n .attr(\"transform\", \"translate(0, 10)\")\n .call((container) => legend(container, selmodel));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"mdskip`Finally, we need to update our chart code to:\n\n1. Instantiate the selection model\n2. Add and position the legend\n3. Add a selection model listener that updates country colors\n\nWe reuse each of the components from earlier: a year scrubber, a \\`changeYear()\\` + title cell, and our primary chart component.\n\n_Try clicking legend entries! We can smoothly animate the chart while also independently updating the legend selection. Read the chart code cell to inspect our edits..._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof yearLegend = Scrubber(\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"(chartInteractiveLegend.setYear(yearLegend),\nmd`Average Fertility & Life Expectancy by Country in ${yearLegend}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"gapminder","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"// We need a messy data set for testing.\n// Edit the data so that it's missing some countries for some years.\ndataDynamic = gapminder\n .filter((d) => d.cluster !== 4 || d.year >= 1980)\n .filter((d) => d.cluster !== 3 || d.year <= 1960)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2012,"value":"viewof yearDynamic = Scrubber(d3.range(years[0], years[1] + 1, 5), {\n autoplay: false,\n delay: 1000,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":965,"value":"(chartDynamic.changeYear(yearDynamic),\nmd`Average Fertility & Life Expectancy by Country in ${yearDynamic}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`<hr>\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"datasets = require('vega-datasets')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"} </article></body></html>

31:T17c7,_finalChart = { // // This is really messy and also implemented a tiny bit differently from our final chart // const selmodel = SelectionModel(); function compare(a, b) { if (selmodel.has(a.cluster) && !selmodel.has(b.cluster)) { return 1; } else if (!selmodel.has(a.cluster) && selmodel.has(b.cluster)) { return -1; } return b.pop - a.pop; } const margin = { top: 10, right: 10, bottom: 20, left: 20 }; const years = d3.extent(gapminder, (d) => d.year); const x = d3 .scaleLinear() .domain([0, d3.max(gapminder, (d) => d.fertility)]) .range([margin.left, width - margin.right]) .nice(); const y = d3 .scaleLinear() .domain([0, d3.max(gapminder, (d) => d.life_expect)]) .range([height - margin.bottom, margin.top]) .nice(); const color = d3 .scaleOrdinal() .domain(gapminder.map((d) => d.cluster)) .range(d3.schemeTableau10); const size = d3 .scaleSqrt() .domain(d3.extent(gapminder, (d) => d.pop)) .range([4, 35]); const dataDynamic = gapminder; // .filter((d) => d.cluster !== 4 || d.year >= 1980) // .filter((d) => d.cluster !== 3 || d.year <= 1960); function legend(container, selmodel) { const titlePadding = 14; const entrySpacing = 16; const entryRadius = 5; const labelOffset = 4; const baselineOffset = 4; const title = container .append("text") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", "bold") .attr("font-size", "12px") .text("Region"); const entries = container .selectAll("g") .data(regions) .join("g") .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ) .on("click", (evt, d) => selmodel.toggle(d.index)) .on("dblclick", (evt) => selmodel.clear()); const symbols = entries .append("circle") .attr("cx", entryRadius) .attr("r", entryRadius) .attr("fill", (d) => color(d.index)) .style("cursor", "pointer"); const labels = entries .append("text") .attr("x", 2 * entryRadius + labelOffset) .attr("y", baselineOffset) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "11px") .style("cursor", "pointer") .style("user-select", "none") .text((d) => d.label); selmodel.on("change.legend", () => { symbols.attr("fill", (d) => selmodel.has(d.index) ? color(d.index) : "#ccc" ); labels.attr("fill", (d) => (selmodel.has(d.index) ? "black" : "#bbb")); }); } const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width - margin.right) .attr("y", -10) .text("Fertility"); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .attr("transform", `translate(20, ${margin.top}) rotate(-90)`) .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - margin.bottom - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]); svg .append("g") .attr("transform", `translate(${width - margin.right - 150}, 10)`) .call((container) => legend(container, selmodel)); let countries = svg .selectAll("circle.country") .data( dataDynamic.filter((d) => d.year === years[0]), (d) => d.country ) .join("circle") .attr("class", "country") .sort(compare) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", (evt, d) => { d3.select(evt.target).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", (evt, d) => { d3.select(evt.target).attr("stroke", null); }); function setYear(year) { yearLabel.text(year); countries = countries .data( dataDynamic.filter((d) => d.year === year), (d) => d.country ) .join( (enter) => { enter = enter .append("circle") .attr("class", "country") .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => 0) .attr("fill", (d) => color(d.cluster)) .style("opacity", 0); enter.append("title").text((d) => d.country); return enter; }, (update) => update, (exit) => exit .transition() .duration(1000) .attr("r", 0) .style("opacity", 0) .remove() ); countries .sort(compare) .transition() .duration(1000) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)) .style("opacity", 0.75); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); } selmodel.on("change.chart", () => { countries .sort(compare) .attr("fill", (d) => selmodel.has(d.cluster) ? color(d.cluster) : "#ccc" ); }); return Object.assign(svg.node(), { setYear }); }32:T4fa,md` The chart above is a good start, but not very interpretable. What do the axes represent? What countries do the circles correspond to? What year is it? Let's add labels to the chart and tooltips for the countries. To add axis titles and a year label, we can append additional \`text\` elements and style them. To add tooltips, we can append a \`\` element to our country \`circle\`s: the browser will then show the text as tooltips after a short hover delay. We should also sort the countries so that smaller circles are drawn last and not occluded by larger circles. While we won't concern ourselves here, note that using built-in browser tooltips can be limiting: they may take a while to display and do not support rich formatting. (For alternatives, see the [Learn D3: Interaction](https://observablehq.com/@d3/learn-d3-interaction) notebook.) As we wait for a tooltip, it would be nice for the chart to clearly indicate which country has been selected. For example, we could draw a stroke around the circle that the mouse pointer is currently visiting. To achieve this, we can add _event listeners_ to update \`<circle>\` attributes upon \`mouseover\` and \`mouseout\` events. _Read the cell code below for our extended chart, with comment annotations._ `33:T661,{ const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) // Add x-axis title 'text' element. .append("text") .text("Fertility") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .attr("text-anchor", "end"); svg .append("g") .call(d3.axisLeft(y)) // TODO(vishal): Add y-axis title 'text' element. .append("text") .text("Life Expectancy") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", 0) .attr("text-anchor", "end") .attr("transform", `translate(20, 0) rotate(-90)`); // TODO(vishal): Add a background label for the current year. const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) // TODO(vishal): sort so smaller circles are drawn last .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)) .attr("fill", (d) => color(d.cluster)) .attr("opacity", 0.75); // TODO(vishal): add a tooltip countries.append("title").text((d) => d.country); // TODO(vishal): Add mouse hover interactions, using D3 to update attributes directly. countries .on("mouseover", (evt) => { d3.select(evt.target).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", (evt) => { d3.select(evt.target).attr("stroke", null); }); return svg.node(); }34:T6dc,{ const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(yearFilter); // <-- TODO(tukey): update to use yearFilter const countries = svg .selectAll("circle") .data(gapminder.filter((d) => d.year === yearFilter)) // <-- TODO(tukey): update to use yearFilter .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)); countries .transition() .duration(1000) .ease(d3.easeLinear) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); return svg.node(); }35:T5a5,md`Our interactive chart above is fun, but we can do better! First, using Observable's reactive updates causes the entire cell (and thus the entire visualization) to be re-computed from scratch on every update. This is not very efficient, and can lead to poor performance with larger datasaets. Second, our updates are "jumpy": we would prefer smooth animations between timesteps. 😎 To reuse our chart, we need to provide a mechanism for updating it. We can update our chart code by defining a function that updates the data for a given year and then animates the changes to the visualization. We can then export this update method alongside our chart, invoking it each time our scrubber updates. The "key" 🔑 step here is to provide a _key_ function as part of the input to the D3 selection \`data()\` method. The key function tells D3 how to match data to the DOM. When the input data changes, how should the data values be joined with our SVG elements? Here we use the key function \`d => d.country\` to indicate a circle should bind to a new input data value if its \`country\` property matches the old input value. That way, when we filter across years and provide a different set of inputs, those inputs still get resolved to the correct SVG \`<circle>\` elements. _Play with the scrubber below to see our smooth animated transitions. Then expand the cell and read the code below; the comments describe the changes we have made._ `36:T9cc,chartAnimate = { const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]); // <-- simply use the minimum year, as updates occur elsewhere const countries = svg .selectAll("circle.country") // TODO(tukey): add key function .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); // TODO(tukey): update function // update countries and animate the transition // step 1: change the data to filter to the given year // step 2: re-sort elements to ensure the smallest remain on top of the visualization, as pop values may have changed // step 3: update position and radius, 1000 ms // step 4: update the year label function changeYear(year) { yearLabel.text(year); countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .ease(d3.easeCubic) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // TODO(tukey): extend SVG node // return svg.node(); return Object.assign(svg.node(), { changeYear }); }37:T4c1,md` Before moving on, let's talk about that semi-magical \`transition()\` call in our chart update function. The \`transition()\` method provides an API similar to a standard D3 selection: we can call \`attr()\` and \`style()\` to update our DOM elements. Under the hood, transitions then create _interpolators_ that calculate intermediate values between start and end points. When transition is called, D3 automatically schedules an animation that interpolates over the specified duration. In addition to the [\`duration()\`](https://github.com/d3/d3-transition#transition_duration) parameter, transitions support [\`delay()\`](https://github.com/d3/d3-transition#transition_delay) to set pauses before onset and [\`ease()\`](https://github.com/d3/d3-transition#transition_ease) to control pacing. The default \`ease\` function uses slow-in slow-out timing along a cubic curve: items start moving slowly, speed up through the middle of the transition, then slow down before stopping. <span style="color: chocolate; font-weight: bold;">Try setting a longer duration and using a different \`ease\` function — such as \`d3.easeLinear\` or \`d3.easeBounce\` — to experiment with animation effects.</span> `38:T569,function colorLegend(container) { const titlePadding = 14; // padding between title and entries const entrySpacing = 16; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 4; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const title = container .append("text") // TODO(tukey): create legend's title .text("Region") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Arial") .attr("font-size", 12) .attr("font-weight", "bold"); const entries = container .selectAll("g") // TODO(tukey): create and entry for each label .select("g") .data(regions) .join("g") .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ); const symbols = entries .append("circle") // TODO(tukey): add color indication for each label .attr("cx", entryRadius) .attr("r", entryRadius) .attr("fill", (d) => color(d.index)); const labels = entries .append("text") .text((d) => d.label) .attr("x", 2 * entryRadius + labelOffset) .attr("y", baselineOffset) .attr("fill", "black") .attr("font-family", "Comic Sans MS") .attr("font-size", 11); // TODO(tukey): add text labels }39:T924,chartLegend = { const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(1955); // Add and position the legend; place in the upper right corner. // TODO(tukey): add legend svg .append("g") .call((container) => colorLegend(container)) .attr("transform", `translate(${width - 150}, 10)`); const countries = svg .selectAll("circle.country") .data(dataInitial, (d) => d.country) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); function changeYear(year) { yearLabel.text(year); countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .ease(d3.easeCubic) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // TODO(tukey): consider using a legend library like https://observablehq.com/@d3/color-legend return Object.assign(svg.node(), { changeYear }); }3a:Tb80,mdskip`Now let's add interaction to our legend, processing input events and updating a selection model. We will add a new input argument to our legend helper method: _a selection model instance named \`selmodel\`_ (that is, \`selmodel = SelectionModel()\`). Most of our legend generation code is the same as before, but we make two concise yet critical additions: input _event listeners_ for our legend entries, and a selection model listener to update legends upon selection changes. We add _event listeners_ to our legend entry (\`<g>\`) groups using the \`on()\` method. Upon mouse click (\`click\`) we \`toggle()\` the selection status of the legend values. Upon double click (\`dblclick\`), we \`clear()\` all legend selections. ~~~ js const entries = container.selectAll('g') .data(regions) .join('g') .attr('transform', d => \`translate(0, \${titlePadding + d.index * entrySpacing})\`) .on('click', (e, d) => selmodel.toggle(d.index)) .on('dblclick', () => selmodel.clear()); ~~~ The first argument (\`e\`) to the event listener is an [event object](https://developer.mozilla.org/en-US/docs/Web/API/Event). If we wanted more information about the input event (for example, to check if the shift-key was depressed, or which mouse button was clicked) we could consult this object. The second argument (\`d\`) is the bound datum for the element being interacted with. The code above updates our selection model in response to user input, but we still need to make the legend respond to selection changes. To do this, we can add an event listener to our selection model: when the selection changes, we update all symbol and label colors to reflect the selection status. ~~~ js selmodel.on('change.legend', () => { symbols.attr('fill', d => selmodel.has(d.index) ? color(d.index) : '#ccc'); labels.attr('fill', d => selmodel.has(d.index) ? 'black' : '#bbb'); }); ~~~ At this point you might be asking yourself: Why do we use the event type \`'change.legend'\`? Why not just \`'change'\`? The reason is that D3's \`dispatch\` helper – which our selection model uses internally – only allows one event listener per name. If we listen for \`'change'\` and then another component also does, the new component will override our listener! By adding a _qualified type_ (\`change.legend\`) we indicate that we want to listen to \`change\` events while also giving our listener a unique name. You should also stop to question if this code really works. For example, what happens when the selection model is empty? It would not be good if our initial chart state de-emphasized all data points! Fortunately for us, when the selection is empty our selection model treats _all_ values as selected; that is, the \`has()\` method will return \`true\`. Feel free to go back and check the selection model code above to confirm! _Expand the cell below to see our new legend helper in its entirety._ `3b:T87d,// container is a d3 selection for the container group (<g>) element // selmodel is a selection model instance for tracking selected legend entries function legend(container, selmodel) { const titlePadding = 14; const entrySpacing = 16; const entryRadius = 5; const labelOffset = 4; const baselineOffset = 4; const title = container .append("text") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", "bold") .attr("font-size", "12px") .text("Region"); // The "on" method registers event listeners // We update the selection model in response const entries = container .selectAll("g") .data(regions) .join("g") .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ) // TODO(vishal): handle interaction .on("click", (evt, d) => selmodel.toggle(d.index)) .on("dblclick", (evt) => selmodel.clear()); const symbols = entries .append("circle") .attr("cx", entryRadius) .attr("r", entryRadius) .attr("fill", (d) => color(d.index)); const labels = entries .append("text") .attr("x", 2 * entryRadius + labelOffset) .attr("y", baselineOffset) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "11px") .style("user-select", "none") .text((d) => d.label); // Listen to selection model, update symbol and labels upon changes selmodel.on("change.legend", () => { // TODO(vishal): add effects from legend's interaction // This is an event listener that executes when the legend selection is changed, so when something is toggled on or off. // symbols.attr("fill", (d) => { // if (selmodel.has(d.index)) { // return color(d.index); // } else { // return "#ccc"; // } // We can simplify this with a JavaScript ternary operator, which I really like since they're so concise symbols.attr("fill", (d) => selmodel.has(d.index) ? color(d.index) : "#ccc" ); labels.attr("fill", (d) => (selmodel.has(d.index) ? "black" : "#bbb")); }); }3c:T9ed,chartInteractiveLegend = { const selmodel = SelectionModel(); // <-- Instantiate a selection model const svg = d3.create("svg").attr("viewBox", viewBox); svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(1955); // Add and position the legend; place in the upper right corner. svg.append("g"); // TODO: add legend const countries = svg .selectAll("circle.country") .data(dataInitial, (d) => d.country) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("class", "country") .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); function setYear(year) { yearLabel.text(year); countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .ease(d3.easeCubic) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // Add a selection model listener that updates country colors // We name the event 'change.chart' as this is the chart's own internal listener. // We do not want the name to collide with the listener defined in the legend component. selmodel.on("change.chart", () => { // TODO: add effects from legend's interaction }); return Object.assign(svg.node(), { setYear }); }3d:T446,md`--- ## Final exercise: handle messy data<br>(adding and removing elements) <span style="color: chocolate; font-weight: bold;">Exercise: Handle the addition and removal of countries from the data. Above our \`circle\` elements are always in the \`update\` set upon each change of year. Modify the data join to handle items in the \`enter\` or \`exit\` sets upon year changes.</span> Below we modify the data so that all countries in the Americas disappear after 1960, while all East Asia & Pacific countries do not appear until 1980. Use the scaffold code below to start, and feel free to review the [data join discussion in Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1#datajoin) or [D3 Learn: Joins](https://observablehq.com/@d3/learn-d3-joins). The chart code includes blocks for handling \`enter\`, \`exit\`, and \`update\` sets. Drag the scrubber back and forth to understand the current behavior, then add encoding and transition logic to properly handle items entering and exiting the scene. What animated effects might you apply to convey these changes?`3e:Te55,chartDynamic = { const svg = d3.create("svg").attr("viewBox", viewBox); const selmodel = SelectionModel(); // <-- Instantiate a selection model svg .append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .append("text") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("x", width) .attr("y", -10) .text("Fertility"); svg .append("g") .call(d3.axisLeft(y)) .append("text") .attr("transform", "translate(20, 0) rotate(-90)") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Life Expectancy"); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]); svg .append("g") .attr("transform", `translate(${width - 150}, 10)`) .call((container) => legend(container, selmodel)); let countries = svg .selectAll("circle.country") .data( dataDynamic.filter((d) => d.year === years[0]), (d) => d.country ) .join("circle") .attr("class", "country") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); countries.append("title").text((d) => d.country); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); function changeYear(year) { yearLabel.text(year); countries = countries .data( dataDynamic.filter((d) => d.year === year), (d) => d.country ) // what we had before // .join("circle") .join( // TODO(vishal): Add code to customize how countries enter the scene. // Idea: fade in from transparent and grow from zero size // Make sure new elements have their properties properly initialized! (enter) => enter .append("circle") .attr("class", "country") .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => 0), (update) => update, // countries that still exist // TODO(vishal): Add code to customize how countries exit the scene. // Idea: fade out to transparent and shrink to zero size before removal (exit) => exit .transition() .duration(1000) .attr("r", 0) .attr("opacity", 0) .remove() ); // TODO(vishal): Animate enter + update countries to current position and size // Hint: If you modify opacity above, you probably want to update it here! countries .sort((a, b) => b.pop - a.pop) .transition() .duration(1000) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)) .attr("opacity", 0.75); countries .on("mouseover", function () { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2); }) .on("mouseout", function () { d3.select(this).attr("stroke", null); }); } return Object.assign(svg.node(), { changeYear }); }3f:T571,md`<hr/> ## Next Steps Want to try your hand at some more exercises? Here are some suggestions: 1. **Revise the graphic design.** Above we sped along without diving into important questions of typography, sizing, and element placement. How else might you style and position the axis labels, axis titles, year label, circle colors, _etc._? 2. **Refine multi-select interactions.** Our legend supports multiple item selections, but does not use the most intuitive interaction model: it is more common to select a single element by click, and multiple elements by shift-click. Update the legend event listeners and selection model as needed. Similarly, can you clear the selection by clicking the chart background? 3. **Direct manipulation time scrubbing (extra hard!)**. So far we've used a slider widget to adjust the year. What if instead we could just grab a point and drag it through time? This is the idea behind Kondo & Collins' [DimpVis](https://vialab.ca/research/dimpvis). Here is an [example implemented with Vega](https://vega.github.io/vega/examples/global-development/); can you implement a similar design in D3? Want to move on to additional D3 tutorials? Try the [Learn D3 collection](https://observablehq.com/collection/@d3/learn-d3). Or, browse the [@d3 Observable notebooks](https://observablehq.com/@d3) and [D3 example gallery](https://observablehq.com/@d3/gallery). `40:[{"id":"d5dcb45688a2352acbb3d011089d182533a0ab1abea7fd4ba068e694d39efb856798b5533cab363c18ab72e999c95ea990f75eec519a0fa42cb3f25aaff06e8d","href":"https://static.observableusercontent.com/files/d5dcb45688a2352acbb3d011089d182533a0ab1abea7fd4ba068e694d39efb856798b5533cab363c18ab72e999c95ea990f75eec519a0fa42cb3f25aaff06e8d","name":"d3-base-chart.png","type":"image/png","lastModified":1635199426134.266,"size":50463}] 2f:{"title":"Introduction to D3, Part 2 (Starter)","cells":[{"id":0,"value":"md`# Introduction to D3, Part 2 (Starter)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`In [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1), we learned the basics of D3 for creating and transforming both HTML and SVG. Now we will put those skills to work and build interactive graphics that animate changes over time. We'll continue to use the [Gapminder Foundation](https://www.gapminder.org/) dataset on global health and population measures, recreating the \"bubble plot\" made famous in [Hans Rosling's TED presentation](https://www.youtube.com/watch?v=hVimVzgtD6w).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"md`Let's import D3, load and preview our dataset, and then get going!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"gapminder = datasets['gapminder.json']()","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"aq.from(gapminder).view({ limit: 40, height: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`<hr>\n## Build the Base Plot\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`We'll begin by creating a static scatter plot for a single year. For this phase, we will put into practice most of what we learned in [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"md`Here is the final chart we want to create:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"viewof _yearAnimate = Scrubber(d3.range(1955, 2005 + 1, 5), {\n autoplay: false,\n delay: 1000,\n loop: false,\n label: \"Year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"finalChartUpdaterSoThatObservableDoesntKeepRerunningTheFinalChartCell = _finalChart.setYear(\n _yearAnimate\n) // needed to link the slider with the chart without making the final chart depend on the slider in Observable's data flow DAG","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"md`As preliminary steps, we'll compute the minimum and maximum years in the data (using the \\`d3.extent\\` helper), and filter our dataset to the initial year:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"years = d3.extent(gapminder, (d) => d.year) // compute min and max years","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"dataInitial = gapminder.filter((d) => d.year === years[0]) // filter to initial year","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`Next, let's set up the basic dimensions of our chart. For the width, we will use the built-in \\`width\\` variable provided by Observable (though you should feel free to override this if you want to). We will also set our desired \\`height\\`, plus a \\`viewBox\\` array with space to accommodate *x* and *y* axes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"margin = // define margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"md`Our envisioned design is a scatter plot of countries (circles) that we:\n\n- Position along the x-axis by the number of children per mother (\\`fertility\\`)\n- Position along the y-axis by the life expectancy in years (\\`life_expect\\`)\n- Color by geographic region (coded by the \\`cluster\\` field)\n- Size by their population (\\`pop\\`)\n\nFor each of these attributes, we need a corresponding [_scale_](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) to map from data values to visual values. For the x and y axes we use standard linear scales with a zero baseline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"dataInitial[0].fertility","pinned":true,"hidden":false,"mode":"ojs"},{"id":1922,"value":"[0, d3.max(gapminder, (d) => d.fertility)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"x = d3\n .scaleLinear()\n // create scale for x axis\n .domain([0, d3.max(gapminder, (d) => d.fertility)])\n .range([0, width])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1925,"value":"x(dataInitial[0].fertility)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"y = d3\n // TODO(vishal): create scale for y axis\n .scaleLinear()\n .domain([0, d3.max(gapminder, (d) => d.life_expect) + 5])\n .range([height, 0])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1930,"value":"y(dataInitial[0].life_expect)","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`For the color encoding, we will use a _categorical_ color palette designed to help distinguish category (_nominal_) values. Here we use D3's \\`schemeTableau10\\`, but feel free to experiment with other color palettes provided by [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) or use your own array of custom color values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"gapminder.map((d) => d.cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1939,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"color = d3\n .scaleOrdinal()\n // create color encoding\n .domain(gapminder.map((d) => d.cluster))\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1941,"value":"color(dataInitial[0].cluster)","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`For the size encoding we use \\`scaleSqrt\\`, a non-linear scale the returns values proportional to the square root of the input values. Why? We want our size encoding to vary the circular _area (A)_ relative to the underlying data, but we will be explicitly assigning the circle _radius (r)_ values... and of course ${tex`A = \\pi r^2`}!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"size = d3\n .scaleSqrt()\n // create size encoding\n .domain(d3.extent(gapminder, (d) => d.pop))\n .range([4, 35])","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`Using our scale definitions, we can generate our base plot. <span style=\"color: chocolate; font-weight: bold;\">Fill in the missing attributes below with the proper scale encodings.</span>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"{\n // create the container SVG element\n const svg = d3.create(\"svg\").attr(\"viewBox\", viewBox);\n\n // position and populate the x-axis\n svg\n .append(\"g\")\n .call(d3.axisBottom(x))\n .attr(\"transform\", `translate(0, ${height})`);\n\n // position and populate the y-axis\n svg.append(\"g\").call(d3.axisLeft(y));\n\n // TODO(vishal): add circle elements for each country\n // use scales to set fill color, x, y, and radius\n const countries = svg\n .selectAll(\"circle\")\n .data(dataInitial)\n .join(\"circle\")\n .sort((a, b) => b.pop - a.pop) // sort by population descending\n .attr(\"cx\", (d) => x(d.fertility))\n .attr(\"cy\", (d) => y(d.life_expect))\n .attr(\"r\", (d) => size(d.pop))\n .attr(\"fill\", (d) => color(d.cluster))\n .attr(\"opacity\", 0.75);\n\n debugSelection(countries);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1958,"value":"function debugSelection(selection) {\n selection.each(function (d) {\n console.log(d, this);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"md`<hr/>\n## Filter by Year\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"md`Now it is time to give our chart some life! Before we move on to more advanced D3 capabilities, let's use Observable's reactive updates to interactively filter by year.\n\nWe can start by adding a _dynamic query_ widget to selecting the current year. The \\`Scrubber\\` component provides a slider along with animated playback capabilities. We can import the scrubber from the notebook in which it is defined:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`Let's instantiate a scrubber for the 5-year increments in our dataset. Then we only need to wire up the \\`yearFilter\\` value to our chart definition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"md`<span style=\"color: chocolate; font-weight: bold;\">Update the chart code below to use \\`yearFilter\\` to set the year label text and filter the dataset. Then drag the scrubber or click \"Play\" to explore the data!</span>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"years","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof yearFilter = Scrubber(\n // TODO(tukey): construct scrubber\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, loop: false, delay: 500 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1985,"value":"yearFilter","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":923,"value":"md`Even if you ultimately plan to use other methods, you can leverage Observable's reactive updates to quickly prototype interactive design ideas!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`<hr/>\n## Animate Transitions between Years\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof yearAnimate = Scrubber(\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1907,"value":"chartAnimate.changeYear(yearAnimate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"(chartAnimate.changeYear(yearAnimate),\nmd`Average Fertility & Life Expectancy by Country in ${yearAnimate}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"md`With our modified chart code we can now handle updates. However, we also need to \"wire up\" the chart so that it is notified of changes to our year scrubber (here named \\`yearAnimate\\`). The cell above invokes \\`changeYear()\\` in response to \\`yearAnimate\\` updates. In addition, by using a comma (\\`,\\`) operator it returns an informative title rather than just the boring old \\`undefined\\` value returned by \\`changeYear()\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`<hr/>\n## Create a Color Legend\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"md`Let's now turn our attention to creating a legend. Our ultimate goal is to provide an interactive legend that allows a viewer to highlight specific regions by clicking legend entries, but we first need to get a basic, static legend in place.\n\nThe key insight here is that legends are just visualizations, too! Here we want to visualize the scale mapping from values to colors. We can ask ourselves the same questions that we would with any visualization design task, including: what is our input data, and what visual encodings should we apply?\n\nOur dataset uses the cryptic \\`cluster\\` field to encode geographic regions as integer indices. As part of our legend we would like to present informative labels, so our input \"data\" can be a set of index-label pairs:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"regions = [\n { index: 0, label: 'South Asia' },\n { index: 1, label: 'Europe & Central Asia' },\n { index: 2, label: 'Sub-Saharan Africa' },\n { index: 3, label: 'America' },\n { index: 4, label: 'East Asia & Pacific' },\n { index: 5, label: 'Middle East & North Africa' }\n];","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`We _could_ start adding code for our legend in the same cell as our chart definition. However, it would be nice to have a bit more modularity and support reuse by separating our legend design from our primary chart. Following the lead of D3's axis generation methods, let's build a helper method for creating a color legend. Our method can take as input a D3 selection for the container (\\`<g>\\`) element for the legend. Our job is to then populate this container with the legend content.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"Let's test our legend helper before we fill in the `colorLegend` function. We can create a new SVG element with a container group and apply our legend helper using the `call()` method, which invokes the provided function, passing the current selection as an argument.","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"{\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 110);\n \n const legend = svg.append('g')\n .attr('transform', 'translate(0, 10)')\n .call(colorLegend); // <-- our legend helper is invoked just like an axis generator\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`The style of code above should hopefully be familiar by now. We first define some constants and add a single \\`text\\` element for the title. To create legend entries, we join our input data against a selection of \\`<g>\\` elements, creating a group for each legend entry. We position the entries by translating each group relative to its index. We then populate each group with a colored \\`<circle>\\` and a \\`<text>\\` label.\n\nNote the inclusion of the style \\`user-select: none\\`. This CSS directive tells the browser not to allow text selection of the legend label, which will be useful to avoid distracting selections when we later add interaction. You may or may not have noticed earlier that SVG text is selectable by default. Here that includes our axis labels, axis titles, and year label! By adding \\`user-select: none\\` (whether using D3 or a CSS stylesheet) you can suppress these selections. Importantly, this is different from \\`pointer-events: none\\`, which prevents interaction entirely!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`<span style=\"color: chocolate; font-weight: bold;\">Looking good! Try adjusting the various style constants in the legend helper and see how they affect the result.</span>\n\nWhile here we focused on a categorical color legend, a similar pattern can be used to create other types of legends. For example, by modifying the \\`<circle>\\` radius with a scale function, we could create a size legend instead. Of course, legends are common and you may tire of creating them from scratch. As D3 does not directly provide higher-level legend support, Observable's [d3-legend](https://observablehq.com/@d3/color-legend) library can come in handy!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`<hr/>\n## Add an Interactive Legend\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"mdskip = async (...inputs) => {\n return html`<div style='background:pink;'>${await md(...inputs)}</div>`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"md`<div style='background:red;color:white;padding:32px;font-size:1.5em'>We're going to skip the interactive legend part for the class tutorial.</div>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"mdskip`Now that we can generate a legend, let's add it to our chart and make it interactive. When a user selects one or more entries in the legend, we would like to de-emphasize the non-selected entries. This requires updating the colors of elements both in the main plot and in the legend. To keep our code modular and well-organized, we need a way of communicating between the legend and main plot.\n\nLet's introduce a _selection model_ that tracks which legend values are currently selected and provides updates (via _listener callbacks_) when the selection changes. We will use this model to store which regions (legend items) have been interactively selected by a viewer. While we could try to track selection state using reactive Observable cells, here we will focus on a modular approach that also works in stand-alone browser deployments.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"mdskip`Our selection model provides a reusable API for tracking selection state and updating listeners when that state changes. The model methods we will use are:\n\n* \\`on()\\` to register new selection listeners,\n* \\`has()\\` to test if a value is selected,\n* \\`toggle()\\` to toggle a value's selection status, and\n* \\`clear()\\` to clear an existing selection, leaving _all_ items selected.\n\nWe need to update the selection model (\\`toggle\\` or \\`clear\\` values) when legend items are selected and de-selected. We will need to add listeners (using \\`on\\`) that respond to selection changes, and update the visual presentation of the chart and legend based on which values are currently selected (checked using \\`has\\`).\n\n_Expand the cell below if you are interested in selection model implementation details. However, please feel free to ignore the selection model internals for now. What's important is that it provides the above methods for tracking and broadcasting selection state!_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"// Our selection model wraps two components:\n// - A JavaScript Set for tracking the selected elements\n// - A D3 dispatch helper for registering and invoking listener callbacks upon changes\nfunction SelectionModel(values) {\n const dispatch = d3.dispatch('change');\n const state = new Set(values);\n \n const api = {\n on: (type, fn) => (dispatch.on(type, fn), api),\n clear: () => (clear(), api),\n has: value => !state.size || state.has(value),\n set: value => (update(value, true), api),\n toggle: value => (update(value, !state.has(value)), api)\n };\n \n function clear() {\n if (state.size) {\n state.clear();\n dispatch.call('change', api, api);\n }\n }\n \n function update(value, add) {\n if (add && !state.has(value)) {\n state.add(value);\n dispatch.call('change', api, api);\n } else if (!add && state.has(value)) {\n state.delete(value);\n dispatch.call('change', api, api);\n }\n }\n\n return api;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1441,"value":"mdskip`Let's test our interactive legend:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"{\n const selmodel = SelectionModel(); // <-- Instantiate a selection model\n const svg = d3.create(\"svg\").attr(\"width\", 200).attr(\"height\", 110);\n\n svg\n .append(\"g\")\n .attr(\"transform\", \"translate(0, 10)\")\n .call((container) => legend(container, selmodel));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"mdskip`Finally, we need to update our chart code to:\n\n1. Instantiate the selection model\n2. Add and position the legend\n3. Add a selection model listener that updates country colors\n\nWe reuse each of the components from earlier: a year scrubber, a \\`changeYear()\\` + title cell, and our primary chart component.\n\n_Try clicking legend entries! We can smoothly animate the chart while also independently updating the legend selection. Read the chart code cell to inspect our edits..._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof yearLegend = Scrubber(\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"(chartInteractiveLegend.setYear(yearLegend),\nmd`Average Fertility & Life Expectancy by Country in ${yearLegend}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"gapminder","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"// We need a messy data set for testing.\n// Edit the data so that it's missing some countries for some years.\ndataDynamic = gapminder\n .filter((d) => d.cluster !== 4 || d.year >= 1980)\n .filter((d) => d.cluster !== 3 || d.year <= 1960)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2012,"value":"viewof yearDynamic = Scrubber(d3.range(years[0], years[1] + 1, 5), {\n autoplay: false,\n delay: 1000,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":965,"value":"(chartDynamic.changeYear(yearDynamic),\nmd`Average Fertility & Life Expectancy by Country in ${yearDynamic}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`<hr>\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"datasets = require('vega-datasets')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"} </article></body></html>