2f:T408,Before we draw the lines, let's think about how we might color them so that each line is easier to follow in case there are crossovers or too many lines being very close together. We could handpick 8 colors and store them in an array, but that could take a while to do. D3 offers [a variety of color schemes](https://github.com/d3/d3-scale-chromatic) that we can use. Since the `country` dimension is nominal, we will use one of the categorical color schemes - [d3.schemeDarks](https://github.com/d3/d3-scale-chromatic#schemeDark2). The color scheme is essential an array of colors, which we can give to [`d3.scaleOrdinal()`](https://github.com/d3/d3-scale#scaleOrdinal) as the range to create a function that maps a country name to a color. `d3.scaleOrdinal()` takes in an array of nominal or ordinal data, instead of minimum and maximum numeric values, as the domain. Similarly, it takes in an array that has the same length as the domain, and maps each element in the domain to the corresponding element in the range in order.30:T454,{ let lineChart = d3.create("svg") .attr("id", "line-chart-8") // set the id of the svg so we can add to it later .attr("width", chartDimensions.svgWidth) .attr("height", chartDimensions.svgHeight); let lineGroup = lineChart.append("g") .attr("transform", `translate(${chartDimensions.margin.left}, ${chartDimensions.margin.top})`); // shift all bars by the margin offset // create a line generator function that'll compute the path for an array of values let lineGenerator = d3.line() .x(d => xScale(d.year)) .y(d => yScale(d.life_expect)); lineGroup.selectAll("path") .data(lifeExpectancyByCountry8) .join("path") .attr("d", d => lineGenerator(d.values)) .attr("fill", "none") // specify no fill for the space enclosed by the path .attr("stroke", d => colorScale(d.country)) // set the color of the path .attr("stroke-width", 2) // set the width of the lines .attr("stroke-opacity", 0.7); // set the opacity of the lines return lineChart.node(); }31:T55f,{ const lineChart = d3.select("#line-chart-8"); // you can ignore the following, it's only done to allow redrawing elements in the Observable notebook if (!lineChart.selectAll(".axisElements").empty()) { lineChart.selectAll(".axisElements").remove() } // add x-axis lineChart.append("g") .attr("class", "axisElements") .attr('transform', `translate(${chartDimensions.margin.left}, ${chartDimensions.height + chartDimensions.margin.top})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); // don't add commas to the year labels // add y-axis lineChart.append("g") .attr("class", "axisElements") .attr('transform', `translate(${chartDimensions.margin.left}, ${chartDimensions.margin.top})`) .call(d3.axisLeft(yScale)); // add x-axis title lineChart.append("text") .attr("class", "axisElements") .attr("x", chartDimensions.margin.left + chartDimensions.width / 2) .attr("y", chartDimensions.svgHeight - 5) .attr("text-anchor", "middle") .style("font-size", "14px") .text("Year"); // add y-axis title lineChart.append("text") .attr("class", "axisElements") .attr("x", -(chartDimensions.margin.top + chartDimensions.height / 2)) .attr("y", 10) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .style("font-size", "14px") .text("Life Expectancy"); }32:T4f0,{ const lineChart = d3.select("#line-chart-8"); // you can ignore the following, it's only done to allow redrawing elements in the Observable notebook if (!lineChart.select("#legend-group").empty()) { lineChart.select("#legend-group").remove() } const legendGroup = lineChart.append("g") // add a legend group .attr("id", "legend-group") .attr("transform", `translate(${chartDimensions.margin.left + chartDimensions.width + 15}, ${chartDimensions.margin.top})` ); const legendItems = legendGroup.selectAll("g") .data(lifeExpectancyByCountry8.map(d => d.country)) .join("g") .attr("transform", (d, index) => `translate(0, ${index * 12})`); // space each legend item by 12px vertically legendItems.append("line") // we can use the element because we only need straight lines .attr("x1", 0/* add code here */) .attr("y1", 5/* add code here */) .attr("x2", 10 /* add code here */) .attr("y2", 5/* add code here */) .attr("stroke", d => colorScale(d)/* add code here */) .attr("stroke-opacity", 0.7) .attr("stroke-width", 2); legendItems.append("text") .attr("x", 15) .attr("y", 8) .attr("fill", "black") .style("font-size", "12px") .text(d => d); }33:T4be,

## Making an Interactive Scatter Plot By now, you have likely built a good understanding of the general process of making a visualization in D3. Next, we'll go through the steps of how to make an interactive scatter plot that animates changes over time.
Once again, we'll use the [Gapminder Foundation](https://www.gapminder.org/) dataset on global health and population measures, and recreate the "bubble plot" made famous in [Hans Rosling's TED presentation](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen?language=en). _Check out the TED Talk if you haven't watched it before!_ Here's a snapshot of the visualization presented in the TED Talk ${await FileAttachment("Screen Shot 2023-01-24 at 12.18.50 AM.png").image({width: 600})}
_Note: the dataset used in the Talk has data for every year as opposed to every 5 years_ We'll start by creating a static scatter plot (using ``) for a single year (1955), with the x-axis representing fertility rate, the y-axis representing life expectancy, the circle color representing cluster group, and the circle size representing population.
As usual, set up the dimensions of the chart as well as scale functions first.34:T9bb,{ // create the container SVG element const svg = d3.create('svg') .attr('width', dimensions.width) .attr('height', dimensions.height); // position and populate the x-axis svg.append('g') .attr('transform', `translate(0, ${dimensions.height - dimensions.margin.bottom})`) .call(d3.axisBottom(x)) // Add x-axis title 'text' element. .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .attr('x', dimensions.width - dimensions.margin.right) .attr('y', -10) .text('Fertility'); // position and populate the y-axis svg.append('g') .attr('transform', `translate(${dimensions.margin.left}, 0)`) .call(d3.axisLeft(y)) // Add y-axis title 'text' element. .append('text') .attr('transform', `translate(20, ${dimensions.margin.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Life Expectancy'); // Add a background label for the current year. const yearLabel = svg.append('text') .attr('id', 'yearLabel') .attr('x', 40) .attr('y', dimensions.height - dimensions.margin.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text("1955"); const legend = svg.append('g') .attr('transform', `translate(${dimensions.width - 160}, ${dimensions.margin.top})`) .call(colorLegend); // <-- legend helper is included in Utilities section // add circle elements for each country // use scales to set fill color, x, y, and radius // sort circles to draw smaller circles on top const countries = svg.append("g") .attr("id", "countryGroup") .selectAll('circle') .data(dataInitial, d => d.country) .join('circle') .attr("class", "countryCircles") // give these circles a class so we can select them by this class .sort((a, b) => b.pop - a.pop) // <-- sort so smaller circles are drawn last and won't be blocked by larger circles .attr('opacity', 0.75) .attr('fill', d => color(d.cluster) /* add code here */) .attr('cx', d => x(d.fertility)/* add code here */) .attr('cy', d => y(d.life_expect)/* add code here */) .attr('r', d => size(d.pop)/* add code here */); // return the SVG DOM element for display return svg.node(); }35:Td4f,{ // create the container SVG element const svg = d3.create('svg') .attr('width', dimensions.width) .attr('height', dimensions.height); // position and populate the x-axis svg.append('g') .attr('transform', `translate(0, ${dimensions.height - dimensions.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', dimensions.width - dimensions.margin.right) .attr('y', -10) .text('Fertility'); // position and populate the y-axis svg.append('g') .attr('transform', `translate(${dimensions.margin.left}, 0)`) .call(d3.axisLeft(y)) .append('text') .attr('transform', `translate(20, ${dimensions.margin.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Life Expectancy'); // Add a background label for the current year. const yearLabel = svg.append('text') .attr('id', 'yearLabel') .attr('x', 40) .attr('y', dimensions.height - dimensions.margin.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text("1955"); const legend = svg.append('g') .attr('transform', `translate(${dimensions.width - 160}, ${dimensions.margin.top})`) .call(colorLegend); // <-- legend helper is included in Utilities section const countries = svg.append("g") .attr("id", "countryGroup") .selectAll('circle') .data(dataInitial, d => d.country) .join('circle') .sort((a, b) => b.pop - a.pop) // sort so smaller circles are drawn last and won't be blocked by larger circles .attr("class", "countryCircles") // give these circles a class so we can select them by this class .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)) /****** show tooltip and border when hovered over ******/ .on("mouseover", function (event, d) { // <-- need to use the regular function definition to have access to "this" svg.select("#tooltip-text") .text(d.country); let positionOffest = 8; svg.select("#tooltip") // move the tooltip to where the cursor is .attr("transform", `translate(${x(d.fertility) + positionOffest}, ${y(d.life_expect) + positionOffest})`) .style("display", "block"); // make tooltip visible d3.select(this) .attr("stroke", "#333333") .attr("stroke-width", 2); }) .on("mouseout", function (event, d) { svg.select("#tooltip").style("display", "none"); // hide tooltip d3.select(this).attr("stroke", "none"); // undo the stroke }); /****** Tooltip Code ******/ const tooltipGroup = svg.append("g") // the tooltip needs to be added last so that it stays on top of all circles .attr("id", "tooltip") .style("display", "none") // hidden by default .append("text") .attr("id", "tooltip-text") .attr("x", 5) .attr("y", 15) .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "black"); return svg.node(); }36:Td5f,{ // create the container SVG element const svg = d3.create('svg') .attr("id", "scatter-filter-year") .attr('width', dimensions.width) .attr('height', dimensions.height); // position and populate the x-axis svg.append('g') .attr('transform', `translate(0, ${dimensions.height - dimensions.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', dimensions.width - dimensions.margin.right) .attr('y', -10) .text('Fertility'); // position and populate the y-axis svg.append('g') .attr('transform', `translate(${dimensions.margin.left}, 0)`) .call(d3.axisLeft(y)) .append('text') .attr('transform', `translate(20, ${dimensions.margin.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Life Expectancy'); // Add a background label for the current year. const yearLabel = svg.append('text') .attr('id', 'yearLabel') .attr('x', 40) .attr('y', dimensions.height - dimensions.margin.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text("1955"); const legend = svg.append('g') .attr('transform', `translate(${dimensions.width - 160}, ${dimensions.margin.top})`) .call(colorLegend); // <-- legend helper is included in Utilities section const countries = svg.append("g") .attr("id", "countryGroup") .selectAll('circle') .data(dataInitial, d => d.cuontry) .join('circle') .sort((a, b) => b.pop - a.pop) // sort so smaller circles are drawn last and won't be blocked by larger circles .attr("class", "countryCircles") // give these circles a class so we can select them by this class .attr('opacity', 0.75) .attr('fill', d => color(d.cluster)/* add code here */) .attr('cx', d => x(d.fertility)/* add code here */) .attr('cy', d => y(d.life_expect)/* add code here */) .attr('r', d => size(d.pop)/* add code here */) .on("mouseover", function (event, d) { // need to use the regular function definition to have access to "this" svg.select("#tooltip-text") .text(d.country); let positionOffest = 8; svg.select("#tooltip") // move the tooltip to where the cursor is .attr("transform", `translate(${x(d.fertility) + positionOffest}, ${y(d.life_expect) + positionOffest})`) .style("display", "block"); // make tooltip visible d3.select(this) .attr("stroke", "#333333") .attr("stroke-width", 2); }) .on("mouseout", function (event, d) { svg.select("#tooltip").style("display", "none"); // hide tooltip d3.select(this).attr("stroke", "none"); // undo the stroke }); const tooltipGroup = svg.append("g") // the tooltip needs to be added last so that it stays on top of all circles .attr("id", "tooltip") .style("display", "none") // hidden by default .append("text") .attr("id", "tooltip-text") .attr("x", 5) .attr("y", 15) .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "black"); return svg.node(); }37:T5e1,### Three States: enter, update, and exit In the Day 1 tutorial, we only passed into the `.join()` function the element (e.g. `

`) that we want to bind the data to. However, we can can use the `.join()` function in a more advanced way to customize the element rendering behavior. Recall that the `.join()` call is preceded by a `.data()` call. The call to **`selection.data()`** actually returns a new selection with three different states: **`enter`**, **`update`**, and **`exit`**. For every value in our backing data, the operator checks whether a corresponding DOM element exists in a one-to-one manner: * The **`enter`** state is a selection that contains _placeholders_ for every data value that **did not have a corresponding DOM element in the original selection**. * The **`update`** state is a selection that contains _existing_ DOM elements that **match a bound data value**. * The **`exit`** state is a selection that also contains _existing_ DOM elements, but for which **a matching data value was not found**. Matches are determined by the second argument to `.data()`, which specifies a _key_ function. The _key_ function should return an identifier that is **unique** about the corresponding entry (such as "country" in this case).
If no key function is specified, D3 conducts a _join-by-index_: the first data value is joined to the first DOM element, the second value to the second element, and so on. Here's a Venn diagram that illustrates what the three states are.38:T421,{ const ol = d3.select('ol#enter-update-exit'); // this ensures that the code in this cell // updates the html ol created in the cell above // use a new dataset, manipulable with the variables defined below const newData = dataset .filter(d => d.year === year) // keep only data for this specific year .sort((a, b) => b.pop - a.pop) // sort the entries by population in descending order .slice(0, topN); // takes only the topN entries ol.selectAll("li") // select all list elements (orange circle above) .data(newData, d => d.country) // bind all our data values (blue circle above), using country name as key .join( enter => enter.append('li').style("color", "green") /* color entering items with green */, update => update.style("color", "blue") /* color updated (i.e. existing) items with blue */, exit => exit.style("color", "red") /* color exiting items with red instead of removing */ ).text(d => `${d.country}: ${d.pop}`); }39:Td78,{ // create the container SVG element const svg = d3.create('svg') .attr("id", "scatter-dynamic") .attr('width', dimensions.width) .attr('height', dimensions.height); // position and populate the x-axis svg.append('g') .attr('transform', `translate(0, ${dimensions.height - dimensions.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', dimensions.width - dimensions.margin.right) .attr('y', -10) .text('Fertility'); // position and populate the y-axis svg.append('g') .attr('transform', `translate(${dimensions.margin.left}, 0)`) .call(d3.axisLeft(y)) .append('text') .attr('transform', `translate(20, ${dimensions.margin.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Life Expectancy'); // Add a background label for the current year. const yearLabel = svg.append('text') .attr('id', 'yearLabel') .attr('x', 40) .attr('y', dimensions.height - dimensions.margin.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text("1955"); const legend = svg.append('g') .attr('transform', `translate(${dimensions.width - 160}, ${dimensions.margin.top})`) .call(colorLegend); // <-- legend helper is included in Utilities section const countries = svg.append("g") .attr("id", "countryGroup") .selectAll('circle') .data(dataDynamic.filter(d => d.year === 1955), d => d.cuontry) .join('circle') .sort((a, b) => b.pop - a.pop) // sort so smaller circles are drawn last and won't be blocked by larger circles .attr("class", "countryCircles") // give these circles a class so we can select them by this class .attr('opacity', 0.75) .attr('fill', d => color(d.cluster)/* add code here */) .attr('cx', d => x(d.fertility)/* add code here */) .attr('cy', d => y(d.life_expect)/* add code here */) .attr('r', d => size(d.pop)/* add code here */) .on("mouseover", function (event, d) { // need to use the regular function definition to have access to "this" svg.select("#tooltip-text") .text(d.country); let positionOffest = 8; svg.select("#tooltip") // move the tooltip to where the cursor is .attr("transform", `translate(${x(d.fertility) + positionOffest}, ${y(d.life_expect) + positionOffest})`) .style("display", "block"); // make tooltip visible d3.select(this) .attr("stroke", "#333333") .attr("stroke-width", 2); }) .on("mouseout", function (event, d) { svg.select("#tooltip").style("display", "none"); // hide tooltip d3.select(this).attr("stroke", "none"); // undo the stroke }); const tooltipGroup = svg.append("g") // the tooltip needs to be added last so that it stays on top of all circles .attr("id", "tooltip") .style("display", "none") // hidden by default .append("text") .attr("id", "tooltip-text") .attr("x", 5) .attr("y", 15) .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "black"); return svg.node(); }3a:T5b6,updateYearDynamic = function (newYear) { const countries = d3.select("#scatter-dynamic") .select("#countryGroup") .selectAll(".countryCircles") .data(dataDynamic.filter(d => d.year === newYear), d => d.country) .join( // 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", "countryCircles") .attr('cx', d => x(d.fertility)) .attr('cy', d => y(d.life_expect)) .attr('r', d => 0) .attr("opacity", 0) .attr("fill", d => color(d.cluster)), update => update, // Add code to customize how countries exit the scene. // Idea: use transition to fade out to transparent and shrink to zero size before removal exit => exit.transition() .duration(1000) .attr('r', d => 0) .attr("opacity", 0) .remove() ); // Animate enter + update countries to current position and size // Hint: If you modify opacity above, you probably want to update it here! countries.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)) .attr("opacity", 0.75); d3.select("#scatter-dynamic") .select("#yearLabel") .text(newYear); }3b:T568,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') .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})`); const symbols = entries.append('circle') .attr('cx', entryRadius) // <-- offset symbol x-position by radius .attr('r', entryRadius) .attr('fill', d => color(d.index)); const labels = entries.append('text') .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the left of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '11px') .style('user-select', 'none') // <-- disallow selectable text .text(d => d.label); }3c:[{"id":"f70369481dbcf53474f3992b8b385eea8c4090b2e5df69543228f1d2ea02eb111866e42fba27413441068bb6036058637d619dbacfce8f8dddd485064a936e88","href":"https://static.observableusercontent.com/files/f70369481dbcf53474f3992b8b385eea8c4090b2e5df69543228f1d2ea02eb111866e42fba27413441068bb6036058637d619dbacfce8f8dddd485064a936e88","name":"Screen Shot 2023-01-31 at 11.05.16 PM.png","type":"image/png","lastModified":1675277646565.844,"size":85894},{"id":"fc08d412be4e1cae8c1e6cbde813832189b3e32cab3079da7586d054be6227e12ac8c6960ed62db8cd49e7edf13e8fe5552b59e47889ba83fb9172348a1d96d1","href":"https://static.observableusercontent.com/files/fc08d412be4e1cae8c1e6cbde813832189b3e32cab3079da7586d054be6227e12ac8c6960ed62db8cd49e7edf13e8fe5552b59e47889ba83fb9172348a1d96d1","name":"Screen Shot 2023-01-31 at 11.05.02 PM.png","type":"image/png","lastModified":1675277646565.844,"size":155867},{"id":"78e1eb537797754481ca45942d84e0aa8aeb6540117e2789c04acc8a1b08fd0cebc48c23e809b065203a3eb1a0e39d6ffd39b146ce98db6141589b6240c14333","href":"https://static.observableusercontent.com/files/78e1eb537797754481ca45942d84e0aa8aeb6540117e2789c04acc8a1b08fd0cebc48c23e809b065203a3eb1a0e39d6ffd39b146ce98db6141589b6240c14333","name":"Screen Shot 2023-01-24 at 12.18.50 AM.png","type":"image/png","lastModified":1675277646565.844,"size":2270061}] 2d:{"title":"Introduction to D3 (Day 2)","cells":[{"id":0,"value":"# Introduction to D3 (Day 2)\nWelcome to Day 2 of the D3 tutorial! On Day 1, you learned to manipulate HTML and SVG elements with D3 functions, how data binding works, and how to make a simple bar chart. In this tutorial, you will learn to make other types of common charts as well as how to add interactivity to a scatter plot.\n\nHere's a sneak peak of what you'll be making in this tutorial:
\n#### Line Chart\n${await FileAttachment(\"Screen Shot 2023-01-31 at 11.05.16 PM.png\").image({width: 500})}\n\n#### Scatter Plot\n${await FileAttachment(\"Screen Shot 2023-01-31 at 11.05.02 PM.png\").image({width: 700})}","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"Let's import the same global health dataset we used on Day 1:","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"dataset = d3.json(\"https://raw.githubusercontent.com/vega/vega-datasets/next/data/gapminder.json\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"In the last tutorial, we used the `pop` attribute to show how each country's population grew from 1955 to 2005 in individual bar charts. Now let's try visualizing the life expectancy attribute `life_expect`. What type of chart would allow us to directly compare the changes in life expectancy over the years between a number of countries?\n\nA line chart!","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"## Making a Line Chart\nFirst, let's prepare the dataset. Our final data should be an array of country entries, since we will draw a line for each country in the chart. Each country entry should have the name of the country and an array of year entries that store the year and the life expectancy in that year.\n\nWe can use the [`d3.groups()`](https://github.com/d3/d3-array#groups) function to group the dataset by country:","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"lifeExpectancyByCountry = d3.groups(dataset, d => d.country /* specifies what key to use to group the entries */)\n .map(([country, values]) => { /* this step is not necessary, but makes the data more readable */\n return {country: country, values: values}\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"Next, we'll initialize some variables for the chart dimensions. This time, let's place them in a single object:","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"chartDimensions = {\n let dimensions = {\n svgWidth: 600,\n svgHeight: 400,\n margin: {top: 30, left: 40, bottom: 40, right: 100}\n };\n dimensions.width = dimensions.svgWidth - dimensions.margin.left - dimensions.margin.right;\n dimensions.height = dimensions.svgHeight - dimensions.margin.top - dimensions.margin.bottom;\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"### Set up Scale Functions\nWe'll use the x-axis for `year`, and the y-axis for `life_expect`.\nBecause we have the same range of years for each country, we can use the `scaleLinear()` function to create a scale function that maps a year number to an x-value and a scale function that maps a life expectancy value to a y-value.\n\nAs a reminder, creating a scale function involves setting the **domain** (i.e. the min and max of your input), and the **range** (i.e. the min and max of the desired output). A scale function can also be used for mapping a value to the size of elements, and for mapping a value to a color/shade.\n\n_Note: When dealing with a continuous time axis, you should use [`d3.scaleTime()`](https://github.com/d3/d3-scale#scaleTime) which treats the domain input as dates._","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(lifeExpectancyByCountry[0].values, d => d.year)) /* d3.extent returns [min, max] of the input array */\n .range([0, chartDimensions.width]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"

🔻 Test out the xScale function

","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"xScale(1955)","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"

🔻 Complete the yScale function and test it out

","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(lifeExpectancyByCountry, v => d3.max(v.values, d => d.life_expect))])\n .range([chartDimensions.height , 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"yScale(80)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"### Draw the lines\nThe `` svg element allows you to draw straight lines and curved lines as well as complex shapes, but it's tedious to draw lines with `` manually (_see [tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for how to do that_).
\nFortunately, we can use [`d3.line()`](https://github.com/d3/d3-shape#line) to programmatically draw a line based on an array of datapoints. Let's use it to draw the first country in the data array.","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"{\n let lineChart = d3.create(\"svg\")\n .attr(\"width\", chartDimensions.svgWidth)\n .attr(\"height\", chartDimensions.svgHeight);\n\n // create a line generator function that'll compute the path for an array of values\n let lineGenerator = d3.line()\n .x(d => xScale(d.year))\n .y(d => yScale(d.life_expect));\n\n lineChart.datum(lifeExpectancyByCountry[0]) // use .datum for only one entry\n .append(\"path\")\n .attr(\"d\", d => lineGenerator(d.values)) // call the lineGenerator with the values array passed in\n .attr(\"fill\", \"none\") // specify no fill for the space enclosed by the path\n .attr(\"stroke\", \"black\"); // set the color of the path\n \n return lineChart.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"Now we can try drawing more lines. Since drawing all 63 lines for the 63 countries in the dataset would make the chart too busy, let's limit the chart to display only the first 8 countries in the dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"lifeExpectancyByCountry8 = lifeExpectancyByCountry.slice(0, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"d3.schemeDark2","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"// create the scale function for mapping country name to color\ncolorScale = d3.scaleOrdinal()\n .domain(lifeExpectancyByCountry8.map(d => d.country))\n .range(d3.schemeDark2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"

🔻 Fill in the missing pieces to draw all 8 lines

","pinned":false,"hidden":false,"mode":"html"},{"id":197,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"Next, let's add the axis labels to the chart:","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"What else are we missing?\n\nA **color legend** for the country names!
\nWe can once again use the data binding feature of D3 to create a legend item for each country, instead of manually creating them.
\nBut let's first decide what we want a legend item to look like:","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":348,"value":"Now we just need to translate it to d3 code:","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"dimensions = ({\n width: width, // this time let's use the built-in width value provided by Observable\n height: 500,\n margin: { top: 10, right: 10, bottom: 20, left: 20 }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"dataInitial = dataset.filter(d => d.year === 1955)","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(dataset, d => d.fertility)])\n /* instead of always starting at 0 for range like we have been doing, we can simply put the margin as start value to apply the offset */\n .range([dimensions.margin.left, dimensions.width - dimensions.margin.right]) \n .nice() // format the values to look \"nice\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(dataset, d => d.life_expect)])\n .range([dimensions.height - dimensions.margin.bottom, dimensions.margin.top])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"color = d3.scaleOrdinal()\n .domain(dataset.map(d => d.cluster))\n .range(d3.schemeTableau10) // use a d3 built-in color scheme","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"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":"md"},{"id":401,"value":"size = d3.scaleSqrt()\n .domain(d3.extent(dataset, d => d.pop))\n .range([4, 35]) // output radii range from 4 to 35 pixels","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"

🔻 Fill in the missing pieces in the code below to generate the base plot

","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"_Note: To reduce clutter, the code for generating the circle color legend is stored in a function included in the `Utilities` section._\n\n### Add a Tooltip\n\nThe chart above is a good start, but we can't tell which country each circle represents. Displaying the country names by default might clutter the plot.
\n**Tooltips** are a nice addition to charts that allows the user to see more information on demand by hovering over an element with the cursor. It would also be great to differentiate the circle that is being hovered over with a colored border.\n\nTo display information based on mouse movement, we can add a callback function for different types of events, such as `mouseover`, `mouseout`, and `click`.","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"### Update the Plot Based on Year with Transition","pinned":false,"hidden":false,"mode":"md"},{"id":463,"value":"Now it is time to give our chart some life! Let's add the ability to control the year to display data for.\nTo focus on the D3 code for updating the displayed data, we will simply use an Observable `Scrubber` (imported in Utilities section) that allows us to control the year variable, instead of implementing it from scratch ourselves.\n\nTo update the chart data based on a year variable, we'll write a function that updates the positions of the circles as well as the displayed year text in the chart. This function will be called every time the year variable changes.\n\nWe'll also add a smooth transition between different years so that it's easier to trace how the fertility and life expectancy values have changed. To do that, we can use D3's **[.transition()](https://d3-wiki.readthedocs.io/zh_CN/master/Transitions/#d3_transition)** function. Transitions in D3 operate on selections of elements, and we can set additional parameters such as `duration`, `ease`, and `delay`.","pinned":false,"hidden":false,"mode":"md"},{"id":469,"value":"// the yearFilter stores the currently selected year\nviewof yearFilter = Scrubber(\n d3.range(1955, 2006 /* the max is exclusive*/, 5), // min to max years in 5 year increments\n { autoplay: false, delay: 1500, loop: false } // experiment with these settings!\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"

🔻 Update the code below to use the `newYear` parameter to control the backing data for the circles and update the year label!

","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"updateYear = function (newYear) {\n d3.select(\"#scatter-filter-year\")\n .selectAll(\".countryCircles\")\n .data(dataset.filter(d => d.year === newYear/* add code here */), d => d.country)\n .sort((a, b) => b.pop - a.pop)\n .transition() // <-- akin to a D3 selection, but interpolates values\n .duration(1000) // <-- 1000 ms === 1 sec\n .ease(d3.easeCubic) // <-- sets pacing; cubic is the default, try some others!\n /* add code here */\n .attr('opacity', 0.75)\n .attr('fill', d => color(d.cluster))\n .attr('cx', d => x(d.fertility))\n .attr('cy', d => y(d.life_expect))\n .attr('r', d => size(d.pop))\n \n d3.select(\"#scatter-filter-year\")\n .select(\"#yearLabel\")\n .text(newYear);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"//uncomment the function call below when your updateYear function is ready\nupdateYear(yearFilter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"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.\n\nIn 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.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":710,"value":"## Customize Update Behavior for Changes in Data\n\nThis dataset is relatively simple to work with in terms of changes over the years, since every country has an entry for all increments of 5 years from 1955 to 2005.
\nBut what if we have a dataset where some countries only show up after a certain year, and/or some countries disappear after a certain year? By default, the `.join()` function will plot new datapoints using the same design as how existing ones will be updated, and remove datapoints that have disappeared from the backing data.
\n\nWhat if you want to highlight those changes between the years in different ways instead of using the default mode?","pinned":false,"hidden":false,"mode":"md"},{"id":680,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":584,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":683,"value":"_Image Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_\n\nBy default, if we just pass the element we want to bind to the data entries to `selection.join()` like we did previously, entering elements are appended to the selection, exiting elements are removed, and updating elements simply pass through.\n\nTo customize the rendering behavior for the three different states, we can **address the three states separately as three parameters** in the `.join()` call to specify what to do with entering, existing, and exiting elements, respectively.\n\nLet's try it out with an HTML list showing the 10 countries with the highest populations in 2005.","pinned":false,"hidden":false,"mode":"md"},{"id":734,"value":"// extract the 10 most populous countries in 2005\ntopTenList = dataset\n .filter(d => d.year === 2005)\n .sort((a, b) => b.pop - a.pop)\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"{\n const ol = d3.select(html`

`);\n \n ol.selectAll(\"li\") // select all list elements (orange circle above, empty selection at this point)\n .data(topTenList) // |- bind all our data values (blue circle above)\n .join(\"li\") // |- to an \"li\" element\n .text(d => `${d.country}: ${d.pop}`) // set the text content of the \"li\" element\n \n return ol.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"

🔻 Modify the _enter_, _update_, and _exit_ functions in the code below such that entering items are colored green, updating items are colored blue, and exiting items are _not_ removed but rather colored red.","pinned":false,"hidden":false,"mode":"md"},{"id":691,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"

🔻 Use the variables below to change the entries in the `newData` extracted in the cell above to test your changes to `enter`, `update`, and `exit`.
","pinned":false,"hidden":false,"mode":"md"},{"id":696,"value":"year = 2000 // note that the dataset only contains entries for 1955-2005 in increments of 5 years ","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"topN = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"_Note that we are using Observable's ability to automatically figure out the dependency structure between cells so that changes to the cells below correctly update the cells above. When you use D3 outside of Observable, the code for handling update would need to be wrapped in a function, which can then be called when an event is triggered._","pinned":false,"hidden":false,"mode":"md"},{"id":586,"value":"Now that you've learned how the **enter**, **update**, and **exit** states differ, let's use them in the scatter plot as an additional exercise.\n\nFor this exercise, we have filtered the data so that all countries in the Americas disappear after 1960, while all East Asia & Pacific countries do not appear until 1980. The new data is called `dataDynamic` (you can expand the cell below to see how we set up `dataDynamic`).","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"dataDynamic = dataset\n .filter(d => d.cluster !== 4 || d.year >= 1980)\n .filter(d => d.cluster !== 3 || d.year <= 1960)","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"viewof yearDynamic = Scrubber(\n d3.range(1955, 2006, 5),\n { autoplay: false, delay: 1500, loop: false }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"updateYearDynamic(yearDynamic)","pinned":true,"hidden":false,"mode":"ojs"},{"id":660,"value":"

\nThat's it for the tutorial! D3 has a high learning curve, but luckily there're a ton of resources all over the internet on D3 because of how widely used it is. D3 is best learned through hands-on exercises.\n- If you've liked doing exercises in Observable so far, check out [this collection of D3 tutorials](https://observablehq.com/collection/@d3/learn-d3).\n- To learn to develop D3 visualizations locally, check out [this gallery](https://d3-graph-gallery.com).\n- For API documentation, use the [official documentation wiki](https://github.com/d3/d3/wiki).","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"### Acknowledgements\n\nThis tutorial is partly based on an original notebook by the [UW Interactive Data Lab](https://observablehq.com/@uwdata/introduction-to-d3-part-2) which was later adapted by [Stanford Visualization](https://observablehq.com/@stanfordvis/making-d3-charts-interactive). Materials have also been drawn from prof. [Hari Subramonyam](https://haridecoded.com/)'s lab materials for a data visualization course at the University of Michigan.","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"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":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}