2f:T7aa,So far in this course, you have been introduced to [**Vega-Lite**](https://vega.github.io/vega-lite) and [**Tableau**](https://www.tableau.com/). These tools break visualization design down into a process of specifying _mappings_ (or _visual encodings_) between data fields and the properties of graphical objects. Both tools are useful for **concisely and rapidly creating recognizable visualizations**, while providing more design flexibility (or expressivity) than the chart typologies commonly found in spreadsheet tools. However, describing visualization design in these high-level terms **limits the types of visualizations we can create**. For example, we can only use the available marks, and can only bind data to supported encoding channels, in Vega-Lite and Tableau. What if you want to create a central hub of continuously updated data like the [New York Times Covid cases dashboard](https://www.nytimes.com/interactive/2021/us/covid-cases.html), or an interactive data story like [this piece by The Pudding on the repetitiveness in pop songs](https://pudding.cool/2017/05/song-repetition/)? This is where a programming library like [**D3.js**](https://d3js.org/) can be very useful and at times necessary. With D3, we still specify how data values map to the properties of graphical marks, but we now have an additional set of operators to specify this mapping with more **fine-grained control**. We also get far more control over the **interaction capabilities** of the visualizations. Here is a graph that sums up the differences between the three tools quite well: ${await FileAttachment("comparison_between_tools.png").image({width: 500})} Tableau has the lowest barrier to entry, making it most suitable for quick exploratory analysis, but it's difficult to customize the graphical marks and interactions; D3 has a steep learning curve, but it helps you create complex and unique visualizations using a rich library of built-in functions.30:T413,## What You'll Learn In today's tutorial, you will learn the basics of D3 and gain familiarity with the D3 development process. By the end of today's tutorial, you will have learned to make a bar chart like this:
${await FileAttachment("finished_bar_chart.png").image({width: 300})}
If time permits, we will also go over how to reuse the bar chart code and make a small multiple. _([Here's an example](https://www.nytimes.com/interactive/2016/05/22/world/europe/europe-right-wing-austria-hungary.html?r=0) of a bar chart small multiple)_
In Wednesday's tutorial, you'll learn to make a line graph as well as a scatter plot. In addition, we'll go over a few ways to add interactivity to a chart. Here's a sneak peak of what you'll make on Wednesday: ${await FileAttachment("day_2_sneak_peak.png").image({width:500})} _In this notebook, cells directly below 🔻 and Exercise are for you to put down your code as you follow along the in-class tutorial or on your own._31:T570,### Manipulating HTML and SVG Elements D3's core operator is the [**selection**](https://github.com/d3/d3-selection) — a set of DOM elements that share the same tag name, class attribute, or any other supported [CSS Selector](https://www.w3schools.com/cssref/css_selectors.asp). There are a couple ways you can create a selection: - Select a specific element by id using the syntax **`d3.select("#elementId")`** - Select the first element that matches a class using the syntax **`d3.select(".className")`** - Select all elements that belong to a specific class using the syntax **`d3.selectAll(".className")`** - Select the first element that matches a tag using the syntax **`d3.select("tagName")`** - Select all elements that match a tag using the syntax **`d3.selectAll("tagName")`** Once you have a selection, you can read the selected elements' attributes (such as svg position) using the syntax **`selection.attr("attributeName")`**; the styles (such as font-size) using the syntax **`selection.style("styleName")`**; the text inside an element using the syntax **`selection.text()`** To modify an attribute or style, pass the new value into **`.attr("attributeName")`** or **`.style("styleName")`** as the **second parameter**; to modify the text, pass the new text into **`.text()`** as the only parameter. Let's go through an example using the following HTML and SVG elements:32:T4ae,Like you saw earlier with the array.forEach() function, a function in Javascript can take in a function as a parameter. Those functions passed as parameters are called **"anonymous functions"** because they don't have a name. We can write anonymous functions in the **arrow form** like above, to make function calls look cleaner. The second parameter above `groupedEntries => d3.sum(groupedEntries, d => d.pop)`, which specifies that we want to take the sum of the population value of all the grouped entries corresponding to a year, is equivalent to ~~~ function (groupedEntries) { return d3.sum(groupedEntries, function (d) { return d.pop; }); } ~~~ [`d3.sum()`](https://github.com/d3/d3-array#sum) takes in an array, and an `accessor` function as an optional second parameter, and returns the maximum value in the array (or the maximum value returned by the `accessor` function across all entries in the array). Other functions provided by D3 you might find useful include: [`d3.max()`](https://github.com/d3/d3-array#max), [`d3.min()`](https://github.com/d3/d3-array#min), [`d3.mean()`](https://github.com/d3/d3-array#mean), and [`d3.extent()`](https://github.com/d3/d3-array#extent).33:T4f5,{ // give this svg an id so we can select it outside this cell const barChart = d3.select(html``); barChart.attr("width", svgWidth); barChart.attr("height", svgHeight); // add x-axis barChart.append("g") .attr('transform', `translate(${margin.left}, ${height + margin.top})`) .call(d3.axisBottom(xScale)); // add add y-axis barChart.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) .call(d3.axisLeft(yScale)); // add chart title barChart.append("text") .attr("x", svgWidth / 2) .attr("y", 20) .attr("text-anchor", "middle") .text("Global Population over Year 1995-2005"); // add x-axis title barChart.append("text") .attr("x", margin.left + width / 2) .attr("y", svgHeight - 5) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Year"); // add y-axis title, remember that all transformations are around the (0, 0) origin barChart.append("text") .attr("x", -(margin.top + height / 2)) .attr("y", 15) .attr("transform", `rotate(-90)`) // rotate it by -90 degrees .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Population"); return barChart.node(); }34:T4d1,{ const barChart = d3.select("#total-population-bar-chart"); // you can ignore the following, it's only done to allow redrawing elements in the Observable notebook if (!barChart.select(".barGroup").empty()) { barChart.select(".barGroup").remove() } const barGroup = barChart.append("g") // create a group to keep the bars .attr("class", "barGroup") .attr("transform", `translate(${margin.left}, ${margin.top})`); // shift all bars by the margin offset // Add rectangles here by binding the totalPopDataEntries array with rect elements barGroup.selectAll('rect') // selects all 'li' elements (which may or may not exist!) .data(totalPopDataEntries) // provides the backing data .join('rect') // joins data with the selection, creating 'li' elements as needed //.text(d => `${d.country}: ${d.pop}`) // add formatted text to 'li' elements .attr("x", d => xScale(d.year)) // add formatted text to 'li' elements .attr("y", d => yScale(d.pop)) .attr("width", xScale.bandwidth()) .attr("height", d => height - yScale(d.pop)) .attr("fill", "steelblue") return barGroup.node(); // return the DOM element node of the 'ol' elemenet }35:T839,function drawBarChart (inputArray, chartTitle) { const barChart = d3.create("svg"); barChart.attr("width", svgWidth); barChart.attr("height", svgHeight); // add x-axis barChart.append("g") .attr('transform', `translate(${margin.left}, ${height + margin.top})`) .call(d3.axisBottom(xScale)); // add add y-axis barChart.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) .call(d3.axisLeft(yScale)); // add chart title barChart.append("text") .attr("x", svgWidth / 2) .attr("y", 20) .attr("text-anchor", "middle") .text("Global Population over Year"); // add x-axis title barChart.append("text") .attr("x", margin.left + width / 2) .attr("y", svgHeight - 5) .attr("text-anchor", "middle") .attr("font-size", "14px") .text(chartTitle); // add y-axis title, remember that all transformations are around the (0, 0) origin barChart.append("text") .attr("x", -(margin.top + height / 2)) .attr("y", 15) .attr("transform", `rotate(-90)`) // rotate it by -90 degrees .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Population"); // draw the rectangles here const barGroup = barChart.append("g") // create a group to keep the bars .attr("class", "barGroup") .attr("transform", `translate(${margin.left}, ${margin.top})`); // shift all bars by the margin offset // Add rectangles here by binding the totalPopDataEntries array with rect elements barGroup.selectAll('rect') // selects all 'li' elements (which may or may not exist!) .data(inputArray) // provides the backing data .join('rect') // joins data with the selection, creating 'li' elements as needed //.text(d => `${d.country}: ${d.pop}`) // add formatted text to 'li' elements .attr("x", d => xScale(d.year)) // add formatted text to 'li' elements .attr("y", d => yScale(d.pop)) .attr("width", xScale.bandwidth()) .attr("height", d => height - yScale(d.pop)) .attr("fill", "steelblue") return barChart.node(); }36:T723,drawBarChartAmerica = function (container, inputArray, chartTitle) { const barChart = container.append("svg"); barChart.attr("width", svgWidth); barChart.attr("height", svgHeight); // add x-axis barChart.append("g") .attr('transform', `translate(${margin.left/*add code here*/}, ${height + margin.top/*add code here*/})`) .call(d3.axisBottom(xScale)); // add add y-axis barChart.append("g") .attr('transform', `translate(${margin.left/*add code here*/}, ${margin.top/*add code here*/})`) .call(d3.axisLeft(yScaleAmerica)); // add chart title barChart.append("text") .attr("x", svgWidth / 2) .attr("y", 20) .attr("text-anchor", "middle") .text(chartTitle); // add x-axis title barChart.append("text") .attr("x", margin.left + width / 2) .attr("y", svgHeight - 5) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Year"); // add y-axis title, remember that all transformations are around the (0, 0) origin barChart.append("text") .attr("x", -(margin.top + height / 2)) .attr("y", 15) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Population"); const barGroup = barChart.append("g") // create a group to keep the bars .attr("class", "barGroup") .attr("transform", `translate(${margin.left}, ${margin.top})`); // shift all bars by the margin offset // Add rectangles here by binding the totalPopDataEntries array with rect elements barGroup.selectAll("rect") .data(inputArray) .join("rect") .attr("x", d => xScale(d.year)) .attr("y", d => yScaleAmerica(d.pop)) .attr("width", xScale.bandwidth()) .attr("height", d => height - yScaleAmerica(d.pop)) .attr("fill", "steelblue"); return barChart.node(); }37:[{"id":"5c9c36bd84e90ef0178616d7c24ac718c2f4bbb1f139b63e4772f3c8f8d337e6686f8aae1962b629adcdc08519757f0a66f9460d570717e620b357f45a7b96ab","href":"https://static.observableusercontent.com/files/5c9c36bd84e90ef0178616d7c24ac718c2f4bbb1f139b63e4772f3c8f8d337e6686f8aae1962b629adcdc08519757f0a66f9460d570717e620b357f45a7b96ab","name":"comparison_between_tools.png","type":"image/png","lastModified":1675271886063.11,"size":282445},{"id":"533c69547d72eceffefe5d5804ffb179b37e152098f1dde131c487380f0434b2ba6eedd9074bab21ac8596b7365ba63ce0f3e24b1d0740b67343d6d839038cf7","href":"https://static.observableusercontent.com/files/533c69547d72eceffefe5d5804ffb179b37e152098f1dde131c487380f0434b2ba6eedd9074bab21ac8596b7365ba63ce0f3e24b1d0740b67343d6d839038cf7","name":"canvas_default_grid.png","type":"image/png","lastModified":1675271886063.11,"size":1234},{"id":"8faa04a2411eaf099e054b7eb9f7632b11f3192670eaf471cbfb5e0f4b4da8c0dc3da325ab64ad272f9ec3c7fa4bc4d73a097137dfebead977cee2c3d1c11c11","href":"https://static.observableusercontent.com/files/8faa04a2411eaf099e054b7eb9f7632b11f3192670eaf471cbfb5e0f4b4da8c0dc3da325ab64ad272f9ec3c7fa4bc4d73a097137dfebead977cee2c3d1c11c11","name":"finished_bar_chart.png","type":"image/png","lastModified":1675271886063.11,"size":53083},{"id":"cb3993b02c87f3a0d4807418a7ec379295e1a4b35cb1c8bc55a46097f5f2b7bae63294e49b8e07e707e56e8d94bdee103b46af3dc7eef9b4c327d00667caf6f6","href":"https://static.observableusercontent.com/files/cb3993b02c87f3a0d4807418a7ec379295e1a4b35cb1c8bc55a46097f5f2b7bae63294e49b8e07e707e56e8d94bdee103b46af3dc7eef9b4c327d00667caf6f6","name":"day_2_sneak_peak.png","type":"image/png","lastModified":1675271886063.11,"size":54688},{"id":"5fd5e71e6cfd06569513bbc36473223179e74e2824fd15d430ded1b62dfaf9420fed5aaf6646e532e2d5bbf63ff125af42fef4f1648f75164abbfb54cfa5a9e2","href":"https://static.observableusercontent.com/files/5fd5e71e6cfd06569513bbc36473223179e74e2824fd15d430ded1b62dfaf9420fed5aaf6646e532e2d5bbf63ff125af42fef4f1648f75164abbfb54cfa5a9e2","name":"layers_of_bar_chart.png","type":"image/png","lastModified":1675271886063.11,"size":420833}] 2d:{"title":"Introduction to D3 (Day 1)","cells":[{"id":0,"value":"# Introduction to D3 (Day 1)","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":1065,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## But first... JavaScript\nSince D3 is a JavaScript library, let's first go over some JavaScript fundamentals.
\n_(For more in-depth tutorials on JavaScript, check out [this site](https://javascript.info/). For looking up how to use built-in JavaScript functions, the [Mozilla Developer Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) provides detailed documentation with helpful examples in addition to tutorials.)_","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"### Variables\nThere are three ways to declare variables in javascript - using a keyword `var`, `let`, or `const`. The main differences between the three lie in the **scope** of the variable and whether the variable can be **reassigned or redeclared**.\n_(For a more detailed explanation, see [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript).)_
\n\n- All variables must have a unique name\n- Names are case sensitive\n- Variable values can be number, string, array, object, or even functions (JavaScript is a \"weakly-typed\" language)\n\nNote: In Observable notebooks, variables directly created in a cell do not need to be proceeded with a keyword, and the variable can be accessed from any other cell.\n\n

🔻 Create a variable in one cell and read its value in another cell

","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"x = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"// print the variable you created in the previous cell by typing its name here and running the cell\nx","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"In Observable notebooks, you can enclose lines of code inside curly braces (`{}`) to limit the scope of those lines to the cell they're written in. In a block, all variables need to be declared with the `var`, `let`, or `const` keyword (just like you would anywhere outside of Observable). Other cells do not have access to the variables inside a block. The return value of the block gets printed when the cell is run.\n\n

🔻 Create a block with some local variables, and try reading those variables outside of the cell

","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"{\n // declare and initialize one or more variables here (e.g. let y = 10, const str = \"Hello, World!\")\n let y = 100\n const str = \"Hello, World\"\n var x = 95\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"// what happens if you try to print a variable you created in the block above?\ny","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"### Arrays & Objects\nObjects and arrays are crucial to D3 development, because data needs to be represented in array format for D3 functions to map each array element to some mark. Each element can be as simple as a number or string. To declare an array, simply enclose the array elements in square brackets (`[]`), like so:
\n```let arr = [1, 3, 5, 7, 9];```\n\nThe elements of the array can be accessed by their index (with first element having an index of 0) with this syntax: `arr[index]`\n\n

🔻 Create an array with string elements and print the middle element

","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"{\n // create an array that contains more than one string (e.g. let strArr = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\"])\n // print the element in the middle of the array (e.g. return strArr[2])\n let strArr = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\"]\n return strArr[2]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"An array can also contain elements that are objects. Objects in JavaScript can store data of any type (even functions and other objects). Each entry in an object has a key and a value, and the value can be accessed and updated by key using `objectName.keyName` or `objectName[\"keyName\"]`.\n\nAn object can be declared with this syntax:
\n~~~\nlet pet = {\n name: \"Lucky\",\n age: 4,\n type: \"Dog\",\n breed: \"Golden Retriever\"\n};\n~~~\n\nYou can also declare an empty object first and then add the entries later:\n~~~\nlet pet = {};\npet.name = \"Lucky\";\npet.age = 4;\n...\n~~~\n\n

🔻 Create an object for your pet or someone's pet that you know

","pinned":false,"hidden":false,"mode":"md"},{"id":298,"value":"// your code here\npet = ({\n name: \"cam\",\n age: 8,\n type: \"Dog\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"### Functions\nA javascript function is defined with this syntax (a function can also not take any parameters):\n~~~\nfunction funcName (parameter1, parameter2, parameter3, ...) {\n // function body\n // return returnValue; (return statement not needed if nothing needs to be returned)\n}\n~~~\nWhen the function is called (`funcName(param1, param2, param3, ...)`), the lines inside the curly braces are executed.\n\nHere is a function that returns a random number between 0 and 100:","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"function generateRandomNumber(){\n return Math.floor(Math.random() * 100); // Math.random() returns a float between 0 and 1\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"

🔻 Write a function that generates a random number for each name in a given list and returns a list of name and number pairs as objects

","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"function generateNameNumberPairs (names) {\n // add code here: initialize an empty array\n let data = [];\n names.forEach(function (name) {\n // add code here: get a random number, store the name and the number in an object,\n // and push object into array\n data.push({name: name, number: Math.floor(Math.random() * 100)});\n });\n /**** \n \"Array.forEach\" is an iterative method for iterating through the elements of an array\n Alternatively, you can use a for loop to iterate through the array\n for (let i = 0; i < names.length; i++) {\n data.push({name: names[i], number: generateRandomNumber()});\n }\n ****/ \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"// call the above function with a list of names\ngenerateNameNumberPairs([\"Kelly\", \"Jim\", \"John\", \"Sam\", \"Mike\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"

\n## SVG (Scalable Vector Graphics)\nSVG is vector based (meaning that the graphics can be scaled without losing quality) and has a structure similar to HTML. The D3 library generates visualizations as SVG. _(Next time you come across a cool web-based data visualization, use the inspector to see how the visual elements are drawn. They're most likely SVG elements!)_","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"### Coordinate System\nSVG follows the web coordinate system, with the upper left corner being `(0, 0)` and lower right corner being `(width, height)`. The first element in the coordinates denotes horizontal displacement (x-coordinate) and the second element denotes vertical displacement (y-coordinate).
\n${await FileAttachment(\"canvas_default_grid.png\").image({width: 250})}\n
_image source: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions_\n\nAll svg elements need to be enclosed in the `` tag. When creating an svg, you need to specify the width and the height of the svg canvas:
\n``
\n\nEach element in the svg is placed on the canvas based on its coordinates, and only the elements whose coordinates fall inside the width and height ranges of the svg will be rendered.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"### Shapes & Text\nSVG supports a number of basic shapes, such as rectangle (``), circle (``), line (``), path (``), and polygon (``).\n\n#### Rectangle\nRectangles are often used to draw bars in bar charts. To draw a `` element, you need to specify the following attributes:\n- **`x`** - the x position of the top left corner of the rectangle\n- **`y`** - the y position of the top left corner of the rectangle\n- **`width`** - the width of the rectangle\n- **`height`** - the height of the rectangle\n\nIn addition, you can specify the color to fill the rectangle with using the **`fill`** attribute.\n\n

🔻 Modify the attributes of the rectangle to place it in the middle of the svg canvas, and change the color to \"green\"

","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":421,"value":"#### Circle\nCircles are often used to draw the dots in a scatter plot. To draw a `` element, you need to specify the following attributes:\n- **`cx`** - the x position of the center of the circle\n- **`cy`** - the y position of the center of the circle\n- **`r`** - the radius of the circle\n\nIn addition to specifying **`fill`** color, you can draw a line around the circle with using the **`stroke`** attribute.\n\n

🔻 Modify the attributes of the circle to place it in the middle of the svg canvas, and add a \"blue\" stroke

","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":1067,"value":"### Line\nThere are two ways to draw a line in svg. To draw a straight line with the `` element, you need to specify the following attributes:\n- **`x1`** - the x position of the starting point of the line\n- **`y1`** - the y position of the starting point of the line\n- **`x2`** - the x position of the ending point of the line\n- **`y2`** - the y position of the ending point of the line\n\nYou can specify the color of the line using the **`stroke`** attribute, and the width of the line using the **`stroke-width`** attribute.
\n_In Wednesday's tutorial, we will be using the `` element to draw the lines in a line chart._\n\n

🔻 Modify the attributes of the line to make it go from the upper left corner to the lower right corner

","pinned":false,"hidden":false,"mode":"md"},{"id":1119,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":436,"value":"**Check out [this guide](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes}) to learn how to draw other shapes**\n\n#### Text\nText elements are useful for labeling axes and values in visualizations. To draw a `` element, you need to specify the following attributes:\n\n- **`x`** - the x position of the text\n- **`y`** - the y position of the text\n- **`text-anchor`** (optional) - the direction (\"start\", \"middle\", or \"end\") that the text flows from the specified coordinates\n- **`fill`** (optional) - the color of the text\n\n

🔻 Modify the attributes of the text to place it in the middle of the svg canvas, and make it \"red\"

","pinned":false,"hidden":false,"mode":"md"},{"id":446,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":42,"value":"_Note: Many of the visual attributes (fill, stroke, stroke-width, font-size, etc) of an svg element can also be set using CSS styles, either by directly specifying the **`style`** attribute or using **`class`** like you would on HTML elements._\n\n### The Group Tag ``\nThe group element is used for grouping together sets of related graphical elements. Any CSS style you apply to the group element will also be applied to all of its descendants. The group element makes it easy to add **styles, transformations, interactivity, and even animations** to entire groups of objects.\n\n

🔻 Use the **`transform: translate()`** style property on the group element to move all elements to the center of the svg canvas

","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":45,"value":"

\n## D3.js\nManually creating svg elements is fun but also quite tedious, especially when you have a large number of elements to create based on some data. Fortunately, the D3 library allows you to programmatically create, select, and modify SVG as well as HTML elements. With D3, any element of the DOM (the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), or the programmatic representation of a webpage) can be a data-driven mark.\n\n_We'll use the latest version of D3 - version 7_","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"// import D3, version 7\nd3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"

Here's a line of circles

\n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":560,"value":"

🔻 Try changing the color of the circle with id \"violet\" to purple using D3

🔻 Try making all of the circles with the \"rainbowCircles\" class smaller (e.g. set radius to 5)

🔻 Try removing the black border on this svg

🔻 Try adding the text \" in rainbow colors\" to the element with id \"title\"

","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"{\n let violetCircle = d3.select(\"#violet\");\n violetCircle.attr(\"fill\", \"purple\");\n \n let circles = d3.selectAll(\".rainbowCircles\"); // what happens if we instead selected using \"circle\"?\n circles.attr(\"r\", 5);\n \n let svg = d3.select(\"#rainbowCirclesSvg\");\n svg.style(\"border\", \"none\");\n\n let str = d3.select(\"#rainbowCirclesText\");// try printing the text first by returning it in the block\n str.text(str.text() + \" in rainbow colors\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"In addition to modifying existing elements, we can **append new elements inside a selection** using D3 with the syntax **`selection.append(\"elementType\")`**. \n\nSince there are often a lot of attributes to set for a new element, you can chain all the `.attr()` and `.style` function calls. This is called **method chaining** _(you can read more about method chaining [here](https://www.geeksforgeeks.org/method-chaining-in-javascript/))_.\n\n_If the selection has multiple elements, the `.append()` function will add the new element inside each of the elements in the selection._\n\n

🔻 Add a new circle in black to the right of the violet circle in the svg above

","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"d3.select(\"#rainbowCirclesSvg\")\n .append(\"circle\")\n .attr(\"cx\", 200)\n .attr(\"cy\", 15)\n .attr(\"r\", 5)\n .attr(\"class\", \"rainbowCircles\")\n .attr(\"fill\", \"violet\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"### Data Binding\nThe ability to bind visual elements to an underlying dataset is what makes D3 a powerful tool for developing web visualizations.\n\nLet's go over how data binding works with a dataset on global health and population measures from 1955–2005, compiled by the [Gapminder Foundation](https://www.gapminder.org/) and shared in [Hans Rosling's popular TED talk](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen?language=en).","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"dataset = d3.json(\"https://raw.githubusercontent.com/vega/vega-datasets/next/data/gapminder.json\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"Let's also extract a subset of this data for the year 2005, sort it by population and slice off the top 10 countries. Expand the cell below to see how we obtain this subset.","pinned":false,"hidden":false,"mode":"md"},{"id":643,"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":651,"value":"To demonstrate the data binding mechanism in D3, let's simply visualize the 10 countries and their populations using an HTML list:","pinned":false,"hidden":false,"mode":"md"},{"id":647,"value":"list = {\n const ol = d3.create('ol');\n \n ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)\n .data(topTenList) // provides the backing data\n .join('li') // joins data with the selection, creating 'li' elements as needed\n .text(d => `${d.country}: ${d.pop}`) // add formatted text to 'li' elements\n \n return ol.node(); // return the DOM element node of the 'ol' elemenet\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"To bind the dataset to DOM elements, we call **`selection.data()`** with the backing data `topTen2005` as parameter. In the above cell, the **`selection.join()`** operator gives us a convenient interface to create an `li` element for each entry in the dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":694,"value":"By default, if we pass the element (`

` in the above case) we want to bind to the data entries to **`selection.join()`**, entering elements are appended to the selection, exiting elements are removed, and updating elements simply pass through.
\n\n_(It's possible to customize what to do with entering, existing, and updating elements with the join operator. We'll cover this more in-depth on Wednesday.)_","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"---\n## Making a Bar Chart\nYou're now ready to make your first visualization with D3! We will keep using the same global health dataset as above for our next exercises. To visualize something that cannot be observed by directly looking at the dataset entries, let's make a bar chart that **shows the total world population every five years from 1955 to 2005**.
\n\nAt the end of the tutorial, you'll have learned how to create a bar chart like this:\n${await FileAttachment(\"finished_bar_chart.png\").image({width: 450})}\n\n_(Since the dataset might not include all countries, it is possible that the sum of all countries' populations in each year would not be representative of total global population. For the purpose of the demo, we'll ignore this potential issue, but you should keep this common issue in your data visualization practice)_","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"### Preparing the Data\nBecause each entry in the dataset stores a country's population in a specific year, we need to aggregate the population data across all countries for each year.\nTo do this, you can use plain JavaScript, or D3's data transformation functions. Let's try using D3.\n\nFirst, let's revisit what an entry in the dataset looks like.","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"dataset[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"Each entry in our final data for the bar chart should have a `year` value and a `population` value, where `population` is the sum of all countries' populations in a given year. Thus, we need to **first group the entries by year and then sum up the population values in each year group**.\n\nWe can use [`d3.rollups()`](https://github.com/d3/d3-array#rollups) to achieve this. It takes in an array as the first parameter, a function that specifies how to reduce each group to the desired result, and another function that specifies what value to use as the key for the grouping.\n\n_Note: If we were to simply group all entries and keep them in an array instead of aggregating them, we can use [`d3.groups()`](https://github.com/d3/d3-array#groups) instead._","pinned":false,"hidden":false,"mode":"md"},{"id":778,"value":"totalPopData = d3.rollups(dataset, groupedEntries => d3.sum(groupedEntries, d => d.pop), d => d.year);\n/* Arrow functions are used here to make the code more concise\n The arrow function {d => d.year} is equivalent to writing the following\n function (d) {\n return d.year;\n }\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"// this step is not necessary, but makes the data more readable\ntotalPopDataEntries = totalPopData.map(([year, pop]) => {\n return {year: year, pop: pop}\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1379,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":787,"value":"The D3 data transformation functions may not be as intuitive as manually looping through the entries and aggregating the population yourself with plain JavaScript, but they can be very handy once you've learned how to use them.
\n_For a more in-depth introduction to the D3 group functions, check out this [notebook](https://observablehq.com/@d3/d3-group)._","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"### Drawing the Bar Chart Elements","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"Now that the data is in the format we need, we can start drawing the bar chart elements, including **the x-axis and y-axis, labels, and the bars** (as svg rectangles). We'll be drawing these elements on the svg canvas in layers.
\n\nHere's a picture to help you visualize the layers of components:
\n${await FileAttachment(\"layers_of_bar_chart.png\").image({width: 700})}\n\nBefore we start drawing the elements, let's think about the dimensions of the bar chart. Here are the population values in the dataset:","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"totalPopData.map(entry => entry[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"The population values are all very large numbers, so we can't simply specify that bar 1 will go from, say, y=`0` to y=`2182678196` in the svg. We need a way to scale down and map the population values to svg coordinates.","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"#### Step 1 - Set up Scale Functions\nD3 provides a variety of [scale functions](https://github.com/d3/d3-scale#d3-scale) that maps a data value to a pixel value for us. We simply need to supply the **domain** of the data values and the desired **range** of pixel values to create scale functions that can be used to plot all data points.\nThe two scale functions we need for a bar chart are **`d3.scaleLinear()`** for the population values and **`d3.scaleBand()`** for the years.\n\nBefore creating the scale functions, let's set the dimensions and margin spaces of the chart as variables so that we can easily change them later. We'll use the [margin convention](https://observablehq.com/@d3/margin-convention) to save space for the axes.","pinned":false,"hidden":false,"mode":"md"},{"id":992,"value":"graphic","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"margin = ({top: 40, right: 20, bottom: 40, left: 100}) // save room for axis labels","pinned":true,"hidden":false,"mode":"ojs"},{"id":924,"value":"svgWidth = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"svgHeight = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"width = svgWidth - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"height = svgHeight - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"Now we can create the scale function for the x-axis, which we'll use for the `year` dimension. The `d3.scaleBand()` function is useful for ordinal and categorical dimensions. We can also specify additional things such as the size of the padding between the bars.","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"xScale = d3.scaleBand()\n .domain(totalPopDataEntries.map(d => d.year))\n .range([0, width])\n .padding(0.1); // 0.1 means 10% of the entire band width","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"

🔻 Test out the xScale function

","pinned":false,"hidden":false,"mode":"md"},{"id":855,"value":"xScale(1955) // change this to a different value","pinned":true,"hidden":false,"mode":"ojs"},{"id":997,"value":"Since the population dimension is quantitative, we will use the `d3.scaleLinear()` function to create a continuous scale for the y-axis.","pinned":false,"hidden":false,"mode":"md"},{"id":849,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(totalPopDataEntries, d => d.pop)]) // d3.max returns the maximum population value here\n .range([height, 0]); // why do we have 0 mapped to height and max population mapped to 0?","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"

🔻 Test out the yScale function

","pinned":false,"hidden":false,"mode":"html"},{"id":869,"value":"yScale(2000000000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"#### Step 2 - Draw the Axes & Titles\nThe [d3-axis](https://github.com/d3/d3-axis) module offers a variety of helper functions to draw our axes, and customize their display (e.g., how many ticks are shown, what are their values, _etc._). An axis helper is meant to be called to populate a `` element. Also note how we apply a `translate` transformation to position the axes along the edges of the SVG element, offset by our margin to reserve space for the axis labels and titles.","pinned":false,"hidden":false,"mode":"md"},{"id":964,"value":"

🔻 Add the chart title as well as x-axis and y-axis titles to the svg

","pinned":false,"hidden":false,"mode":"md"},{"id":1174,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"#### Step 3 - Draw the Bars\nUsing the the scale functions, we will now draw rectangles as the bars. Similar to the ordered list we created above, we need to bind the data with rectangle elements. ","pinned":false,"hidden":false,"mode":"md"},{"id":881,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"### Making it Reusable\nWe can turn the code we wrote to create a single bar chart into a function that takes in an array of year+population entries, and call the function to generate a bar chart for any of the countries in the dataset.\n\nWhy bother writing all that code if we can't reuse it, right?","pinned":false,"hidden":false,"mode":"md"},{"id":1027,"value":"##

Exercise

\n\nComplete the function below that takes in an array (and a chart title) and draws a bar chart for the input array. You can simply use the same svg width, height, and margin variables as above. You can also use the same x and y scale functions for now.","pinned":false,"hidden":false,"mode":"md"},{"id":1029,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"

🔻 Once you finish implementing the function above, the new chart should show up below. Change the filter to different country names and see what happens!

","pinned":false,"hidden":false,"mode":"md"},{"id":1037,"value":"drawBarChart(dataset.filter(d => d.country == \"United States\"), \"United States\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1283,"value":"By reusing the y scale function from earlier, we're fixing the y-axis scale to fit the maximum total population. You can instead create a new y scale based on the input array and use it in the `drawBarChart` function.","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"## Bonus Exercise: Create a Small Multiple\nA small multiple is a series of similar charts that shows different partitions of a dataset to allow for easy comparison across views. [The neat example mentioned earlier](https://www.nytimes.com/interactive/2016/05/22/world/europe/europe-right-wing-austria-hungary.html?_r=0) has a similar structure to our bar chart.\n\nBy making the bar chart code reusable, we also make it possible to quickly generate a small multiple showing the population changes over the years of different countries side by side. For this exercise, let's make a small multiple for the countries in North America (their `cluster` code is 3 in the dataset).","pinned":false,"hidden":false,"mode":"md"},{"id":1231,"value":"americaData = d3.rollups(dataset.filter(d => d.cluster === 3), v => v, d => d.country)\n .map(entry => {\n return {country: entry[0], values: entry[1]}\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"All charts in a small multiple should share the same axis scales to make it easier to compare values across the charts, so let's create a new y scale function using the maximum population in `americaData`.","pinned":false,"hidden":false,"mode":"md"},{"id":1242,"value":"yScaleAmerica = d3.scaleLinear()\n .domain([0, d3.max(americaData, v => d3.max(v.values, d => d.pop))])\n .range([height, 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1248,"value":"The function below essentially contains the same code as the `drawBarChart` function above, except it appends a new `svg` to a container div (given as first parameter) and uses `yScaleAmerica`. Feel free to expand the code and take a look.","pinned":false,"hidden":false,"mode":"md"},{"id":1244,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"

🔻 Complete the code below to make the appropriate call to the `drawBarChartAmerica` function

","pinned":false,"hidden":false,"mode":"md"},{"id":1252,"value":"{\n const smallMultiple = d3.select(html`

`);\n\n americaData.forEach(countryEntry => {\n drawBarChartAmerica(smallMultiple, countryEntry.values, countryEntry.country);\n })\n \n return smallMultiple.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1273,"value":"If you'd like, you can go back to the `drawBarChartAmerica` function and modify the chart dimensions, change bar colors, add more information to the chart titles, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":1055,"value":"## You did it!\nGreat job. You have learned the basics of creating a visualization using D3. It might seem like a lot of work just to make a simple bar chart, but you'll soon understand why learning D3 is essential if you want to develop cool interactive data stories or visualization tools. In the next tutorial, we'll learn how to add custom interactive features to visualizations using D3. Until then, feel free to poke around more in this notebook, and check out the [D3 Gallery](https://observablehq.com/@d3/gallery) to see what other types of visualizations you'll be able to make with D3.","pinned":false,"hidden":false,"mode":"md"},{"id":1010,"value":"

\n### Acknowledgements\nThis notebook is partly based on an original notebook by the [MIT Visualization Group](https://observablehq.com/@mitvis/introduction-to-d3) which was later updated by the [UW Interactive Data Lab](https://observablehq.com/@uwdata/introduction-to-d3-part-1) as well as [Stanford Visualization](https://observablehq.com/@stanfordvis/introduction-to-d3).\n\nThe materials in this notebook are also based on 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":34,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":988,"value":"import {graphic} from \"@d3/margin-convention\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}