31:T588,md` #### Using D3: #### 1. select(), selectAll(), data() To enable this functionality, D3's core operator is the [_selection_](https://github.com/d3/d3-selection). Selections specify 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). Selections are specified with the [\`d3.select\`](https://github.com/d3/d3-selection#select) (select the **first** element that matches the criteria) and [\`d3.selectAll\`](https://github.com/d3/d3-selection#selectAll) (select **all** elements that match the criteria) functions, which roughly map to their native DOM equivalents ([\`document.querySelector\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and [\`document.querySelectorAll\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)). For example, if we want to select all the DOM element of type "div", we can call \`d3.selectAll("div")\`. Or, if we want to select the first element with class \`myClass\`, we can call \`d3.select(".myClass")\`. Notice the \`"."\` in the selection. Using our selection as the base, we can employ the [\`selection.data()\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) operator to bind DOM elements to some backing data. We can then display the DOM node for the ordered list using \`ol.node()\`. `32:T440,md`

## Scalable Vector Graphics (SVG) HTML DOM has a lot of restrictions. The elements have shapes that are restricted to mostly rectangles and have [complex layout model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) that makes it hard to position elements. In the last example, we can create the horizontal bar charts easily because \`

\` elements stack on top of each other by default. If we want to create a vertical bar chart instead, it would be very difficult. As a result, we can switch to SVG which gives us a richer set of [graphical primitives](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) to use including curves, lines, and arbitrary shapes. Like HTML, SVG elements can be styled using CSS and can be programmatically manipulated via the DOM. ### SVG Coordinate System In an SVG, the (0, 0) coordinate in is located at the top left corner, and the (width, height) coordinate is at the bottom right corner.`33:T589,{ // you may want to use a new scale, which has been defined for you const new_xscale = d3.scaleBand() .domain(barData.map(d => d.key)) .range([0, width / 2]) const new_yscale = d3.scaleLinear() .domain([0, d3.max(barData, d => d.value)]) .range([0, height]) // create svg element, specify total width and height const container = d3.create('svg') .attr('width', width) .attr('height', height); // add SVG 'rect' elements for bars container.selectAll('rect') .data(barData) .join('rect') .attr('x', 0) // change this .attr('y', d => yscale(d.key)) // change this .attr('width', d => xscale(d.value)) // change this .attr('height', yscale.bandwidth()) // change this .style('fill', d => color(d.key)) .style('stroke', 'white'); // add SVG 'text' elements for labels container.selectAll('text') .data(barData) .join('text') .attr('x', d => xscale(d.value)) // change this .attr('y', d => yscale(d.key)) // change this .attr('dx', -20) // change this .attr('dy', '1.25em') .attr('fill', 'white') .style('font-size', 'small') .text(d => d.value); // return SVG DOM element return container.node(); }34:[{"id":"68f89ebe654f81a62174c4cf1446d2beff0b96ee642277cc4e5c81dbc57368c037d4adcd7ae174604a7b7c3be073b0dc106baee5e6004ae2ce333be09a26eeda","href":"https://static.observableusercontent.com/files/68f89ebe654f81a62174c4cf1446d2beff0b96ee642277cc4e5c81dbc57368c037d4adcd7ae174604a7b7c3be073b0dc106baee5e6004ae2ce333be09a26eeda","name":"Screen Shot 2020-03-02 at 7.13.09 AM.png","type":"image/png","lastModified":1612759359433.884,"size":20018}] 2f:{"title":"CSE 412 Section 6: D3 Tutorial — Static Visualizations","cells":[{"id":0,"value":"md`# CSE 412 Section 6: D3 Tutorial — Static Visualizations\n_Note: This is a revised version of [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1). The current notebook simplifies some explanations, adds additional contents for beginners, and provides sample solutions._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`

\n## Intro\n[D3.js](https://d3js.org/) is a _visualization grammar_ that provides a balanced **ease-of-use** and **expressiveness** for us to create visualizations.\n\nCompared to chart typologies (such as Excel, Google Charts) and visual analysis grammars, visualization grammars give us more control in mapping the data to graphical marks and customizing the marks.\n\nCompared to graphics APIs and component architectures, visualization grammars provide an easier, high-level descriptive way to specify the graphical elements to generate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`

\n## Table of Contents\n* Import D3 and Dataset\n* Import Dataset\n* Element Selection and Data Binding\n* Simple Bar Charts\n* Scale Functions\n* Scalable Vector Graphics (SVG)\n* The SVG Group Element \n* Visualizing Scales: Axes & Legends\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`

\n## Import D3 (v6)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`

\n## Import Dataset\nWe will use the dataset from the [Gapminder Foundation](https://www.gapminder.org/). This dataset contains statistics on societies, economies, and environments of countries around the world.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"// import all datasets from vega first\nall_datasets = require('vega-datasets');","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"// the dataset we are using for this tutorial\ngapminder = all_datasets['gapminder.json']();","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`

\n## Element Selection and Data Binding\nWhen binding the data to the graphical marks, D3 does not restrict us to a fixed set of available encoding channels. Instead, we have the ability to bind our data to any type of element of the DOM (the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)).\n\nLet's start by taking a look at an example where we _create an ordered list_ that contains the name and population size of the top ten countries around the world in 2005.\n\nThis is our dataset:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"// extract the 10 most populous countries in 2005\nlistData = gapminder\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":41,"value":"md`\n#### Expected output and what the HTML would look like:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"html`\n

China: 1,303,182,268
India: 1,080,264,388
United States: 295,734,134
Indonesia: 218,465,000
Brazil: 186,112,794
Pakistan: 162,419,946
Bangladesh: 144,319,628
Nigeria: 128,765,768
Japan: 127,417,244
Mexico: 106,202,903

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"{\n const ol = d3.create('ol'); // the ordered list element\n \n ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)\n .data(listData) // provides the backing data\n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`Notice that nothing is showing up. This is because we haven't yet created any new DOM elements from the dataset, so our \\`ol.node()\\` is currently an empty DOM node. \\`selection.data()\\` returns a _new_ selection with three different states, _enter_, _update_, and _exit_, that we can utilize below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"selection = {\n const ol = d3.create('ol');\n return ol.selectAll('li').data(listData);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`#### 2. join(), enter(), update(), exit()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"datajoin = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_\n\nThe selection would return 3 arrays, **enter**, **update**, and **exit**, if applicable. \n\n * The **enter** state is a selection that contains _new_ data entries that does _not_ yet have a corresponding element in the original selection.\n\n * The **update** state is a selection that contains _existing_ elements that match a bound data value.\n\n * The **exit** state is a selection that also has _existing_ elements but the bound data value no longer exists.\n\nWe can address the three states separately or use the [\\`.join()\\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_join) operator that returns the merged enter and update selections.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"{\n const ol = d3.create('ol'); // the ordered list element\n \n ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)\n .data(listData) // provides the backing data\n .join('li') // joins data with the selection, creating 'li' elements as needed\n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`If we were to address the three states separately, we can do it like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"{\n const ol = d3.create('ol'); // the ordered list element\n \n ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)\n .data(listData) // provides the backing data\n .join(\n enter => enter.append('li'), // <-- append an li element for each entering item\n update => update, // <-- do nothing with items that match an existing element\n exit => exit.remove() // <-- remove li elements whose backing data is now gone\n ) \n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`\n#### JS Lambda Function\nThe \\`=>\\` notation above is the lambda function. This allows us to define a function inline and pass it in as a parameter. The code:\n\n\\`enter => enter.append('li')\\`\n\nis the same as defining a function first:\n\n\\`def func(enter) {return enter.append('li');}\\`\n\nthen pass \\`func\\` as the first parameter of \\`join\\`: \n\n\\`join(func, ..., ...)\\`.\n\n#### 3. Add properties and attributes by attr(), text(), style(), etc.\nThe last step is to specify the styling properties of each element. We can do that by specifying the style we want to add after the _.join()_ call.\n\nIn this example, we call _.text()_ to add the text attribute to each of \\`

\\` element. We pass in a lambda function that specifies what the text should be for each of our data entry.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"list = {\n const fmt = d3.format(',');\n const ol = d3.create('ol'); // the ordered list element\n \n ol.selectAll('li') // selects all 'li' elements (which may or may not exist!)\n .data(listData) // provides the backing data\n .join('li') // joins data with the selection, creating 'li' elements as needed\n .attr('class', 'country') // set CSS class to 'country'\n .text( // add formatted text to 'li' elements\n d => `${d.country}: ${fmt(d.pop)}` // a lambda function that specifies the text for each of the entry\n ) \n \n return ol.node(); // return the DOM element node of the 'ol' element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`Using selections, you can update the style for elements that have already been created. For example, we can select the new list items with the CSS class \\`'country'\\` to update the style of our previous list:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"randomColor = () => `#${Math.floor(Math.random()*16777215).toString(16)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"// Run this cell to recolor just the first item in the list above\nd3.select('li.country').style('color', randomColor()), null","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"// Run this cell to recolor ALL items in the list above\nd3.selectAll('li.country').style('color', randomColor()), null","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`Exercise 1: 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.\n\nYou can use the sliders below (the scrubber) to change the elements in the backing \\`listData\\` to test your changes to \\`enter\\`, \\`update\\`, and \\`exit\\`, and reset the visualization with the button. Don't worry about the implementation or incorporation of the sliders into the visualization; we did this for you already. 😊\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof year = Scrubber(\n // min to max years in 5 year increments\n d3.range(d3.min(gapminder, d => d.year), d3.max(gapminder, d => d.year) + 1, 5), \n { \n autoplay: false, delay: 500, loop: false, // experiment with these settings!\n format: year => 'year = ' + year + reset, // display the variable name and force cell to rerun on reset\n initial: listData[0].year // initial year of listData elements\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"viewof n = Scrubber(\n d3.range(0, 15, 1),\n { \n autoplay: false, delay: 500, loop: false, // experiment with these settings!\n format: n => 'n = ' + n + reset, // display the variable name and force cell to rerun on reset\n initial: listData.length // initial number of listData elements\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"{\n const ol = d3.select(html`

`);\n \n const update = reset; // Rerun this cell when the reset button is clicked.\n \n ol.selectAll('li') // select all list elements (orange circle above)\n .data(listData) // bind all our data values (blue circle above)\n .join('li') // a selection that merges the \"enter\" and \"update\" states\n .text(d => `${d.country}: ${d.pop}`)\n \n return ol.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"{\n const ol = d3.select('ol#enter-update-exit');\n\n // use a new dataset, manipulable with the variables defined above\n const newData = gapminder\n .filter(d => d.year === year)\n .sort((a, b) => b.pop - a.pop)\n .slice(0, n);\n \n ol.selectAll('li') // select all list elements\n .data(newData, d => d.country) // bind our data values\n .join( \n /* TODO: edit these functions */\n enter => enter.append('li'),\n update => update,\n exit => exit.remove()\n ) \n .text(d => `${d.country}: ${d.pop}`);\n \n return newData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`← Sample solution hidden here in source code`\n/*\nenter => enter.append('li').style('color', 'green'),\nupdate => update.style('color', 'blue'),\nexit => exit.style('color', 'red')\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`

\n## Simple Bar Charts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`Before we get more complex, let's try our hand at making a simple bar chart.\n\nExercise 2: Try to recreate the bar chart below. You will want to adjust the length, style and scale them appropriately, and add the text. One thing to keep in mind: How might you increase the size of the bars to fill the width of the screen?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"FileAttachment(\"Screen Shot 2020-03-02 at 7.13.09 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`\nHint: You can fetch the width and height of the webpage like this:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`Width is ${width} px and height is ${height} px.` // Observable's built-in width property!","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"// compute average life expectancy per region ('cluster')\n// output values as 'key' (cluster) and 'value' (life_expect)\nbarData = aq.from(gapminder)\n .filter(d => d.year === 2005)\n .groupby('cluster')\n .rollup({ mean: d => op.floor(op.mean(d.life_expect)) })\n .orderby('cluster')\n .select({ cluster: 'key', mean: 'value' })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"{\n const container = d3.create('div');\n \n const data = barData;\n \n const barChart = container.selectAll('div')\n .data(data)\n .join('div')\n \n barChart\n .style('background', 'steelblue') // Set the background color of the div to 'steelblue'\n .style('border', '1px solid white') // Set the border of the div as 'white'\n .style('font-size', 'small') // Set the text font size in the div to 'small'\n .style('color', 'white') // Set the text font color to 'white'\n .style('text-align', 'right') // Set the text alignment in the div to 'right'\n .style('padding', '3px') // HINT: CSS styles require units, not just numbers\n /* TODO: Add additional styles here to adjust the width and height of divs and append text labels */\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`← Sample solution hidden here in source code`\n/*\n.style('width', d => d.value * width / 80 + 'px')\n.style('height', '15px')\n.text(d => d.value)\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`Did you have to hard code a scale factor for the width? If so, our simple bar chart exposes one weakness in how we might specify visual encodings: The _width_ of our bars could be dependent on a magic number, which scales the data value to a pixel width. Ideally such scaling should not be brittle, it should adapt to the range of data values as well as the desired total width of the chart.\n

\n## Scale Functions\nInstead of scaling the chart manually, we can rely on D3's [scale functions](https://github.com/d3/d3-scale#d3-scale) to automatically map a _domain_ of data values to a _range_ of pixel values.\n\nFor instance, we can use the following scale to determine the width of our bars:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"xscale = d3.scaleLinear()\n .domain([0, d3.max(barData, d => d.value)])\n .range([0, width]) // Observable's built-in width property!","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`\\`xscale\\` is a function that linearly maps an input value to the given range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"xscale(49)","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`So we can now use this for our bar graph:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"{\n const container = d3.create('div');\n \n const data = barData;\n \n const barChart = container.selectAll('div')\n .data(data)\n .join('div')\n \n barChart\n .style('background', 'steelblue') // Set the background color of the div to 'steelblue'\n .style('border', '1px solid white') // Set the border of the div as 'white'\n .style('font-size', 'small') // Set the text font size in the div to 'small'\n .style('color', 'white') // Set the text font color to 'white'\n .style('text-align', 'right') // Set the text alignment in the div to 'right'\n .style('padding', '3px') // HINT: CSS styles require units, not just numbers\n .style('width', d => xscale(d.value) + 'px')\n .style('height', '15px')\n .text(d => d.value)\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`Scales are a workhorse of visualization design! For example, we can use a [color scale](https://github.com/d3/d3-scale-chromatic#d3-scale-chromatic) to color our bars. There are tw types of color scales: the sequential (continuous) scale with _d3.scaleSequential()_ and the ordinal (discrete) scale with _d3.scaleOrdinal()_. We will use the ordinal color scale here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"color = d3.scaleOrdinal(d3.schemeTableau10).domain(barData.map(d => d.key)); \n// Default color schemes are here: https://github.com/d3/d3-scale-chromatic#categorical\n// Try another one! For example: d3.schemePurples[6] or d3.schemePaired","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"{\n const container = d3.create('div');\n\n container.selectAll('div')\n .data(barData)\n .join('div')\n .style('background', d => color(d.key)) // <-- Use color scale to specify the bar color\n .style('border', '1px solid white')\n .style('font-size', 'small')\n .style('color', 'white')\n .style('text-align', 'right')\n .style('padding', '3px')\n .style('width', d => `${xscale(d.value)}px`)\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"{\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n svg.selectAll('circle')\n .data([{'x':0,'y':0,'color':'orange'},\n {'x':width,'y':height,'color':'blue'}])\n .join('circle')\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('r', 50)\n .style('fill', d => d.color)\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"md`\n### Let's recreate our bar chart:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"height = 150","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"yscale = d3.scaleBand()\n .domain(barData.map(d => d.key)) // 0th element at 0, last element + 1 at svgHeight\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"{\n // create svg element, specify total width and height\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n // add SVG 'rect' elements for bars\n container.selectAll('rect')\n .data(barData)\n .join('rect')\n .attr('x', 0)\n .attr('y', d => yscale(d.key)) \n .attr('width', d => xscale(d.value))\n .attr('height', yscale.bandwidth()) // <-- Band scales split a pixel range into equal-sized bands\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n // add SVG 'text' elements for labels\n container.selectAll('text')\n .data(barData)\n .join('text')\n .attr('x', d => xscale(d.value))\n .attr('y', d => yscale(d.key))\n .attr('dx', -20)\n .attr('dy', '1.25em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n // return SVG DOM element\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"md`SVG differs from HTML in that we are responsible for the layout of every element. For each of the rectangle and text, we have to specify the x and y coordinates, as well as the color and size of our text too. However, it is now much more easier to rotate our bar chart into a vertical one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`Exercise 3: Try to rotate the following bar chart 90 degrees into a vertical one, where all bars are lined up at the bottom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`← Sample solution hidden here in source code`\n/*\n .attr('x', d => new_xscale(d.key)) \n .attr('y', d => height - new_yscale(d.value))\n .attr('width', new_xscale.bandwidth())\n .attr('height', d => new_yscale(d.value))\n\n .attr('x', d => new_xscale(d.key)) \n .attr('y', d => height - new_yscale(d.value))\n .attr('dx', 33)\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`

\n## \\`\\`: The SVG Group Element\nSVG's \\`\\` element allows us to group a set of elements together, not unlike desktop presentation packages like Keynote or Powerpoint. Once grouped, all children can be transformed together — for example, we can position the overall group rather than the individual children. Each \\`\\` also establishes its own coordinate system, with the origin \\`(0, 0\\`) in the top-left hand corner.\n\nFor example, we can rewrite our bar chart visualization using \\`\\` elements as follows. Notice that the \\`\\` and \\`\\` elements are now children of \\`\\`, inherit its data, and only need minimal positioning due to the group's \\`transform\\`.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n const g = container.selectAll('g')\n .data(barData)\n .enter() // <-- We use \"enter\" (not \"join\") so we can later append and only for new data.\n .append('g')\n .attr('transform', d => `translate(0, ${yscale(d.key)})`);\n\n g.append('rect')\n // We no longer need to bind data to , or specify y positions.\n .attr('width', d => xscale(d.value))\n .attr('height', yscale.bandwidth())\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n g.append('text')\n // We no longer need to bind data to , or specify y positions.\n .attr('x', d => xscale(d.value))\n .attr('dx', -20)\n .attr('dy', '1.2em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`

\n## Visualizing Scales: Axes & Legends\n\nAxes and legends visualize our scale functions, and D3 has functions that we can utilize. \n\nLet's start with axes. With the way we're currently drawing our bar chart, we haven't left any room for axes — the bars are flush with the left and bottom sides of our SVG container. To give us the space we need, we use the [margin convention](https://observablehq.com/@d3/margin-convention):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"graphic","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`Rather than only defining the \\`width\\` and \\`height\\` of our visualization and using these variables to drive the ranges of our \\`x\\` and \\`y\\` scales, we will define an additional \\`margin\\` object with a property for each of the four sides:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`Our scales will then use this margin offset to determine their range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"// Domain (data values): [0, 78], Range (pixel values): [20, width - 10]\nxMargin = xscale.copy().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"// Remember (0, 0) is the top-left hand corner; try flipping the elements and see what happens!\n// Domain (data values): [0, 1, 2, 3, 4, 5], Range (pixel values): [height - 20, 10]\nyMargin = yscale.copy().range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('border', '1px dotted #999'); // <-- A dotted border helps us see the added margin\n\n const g = container.selectAll('g')\n .data(barData)\n .enter() \n .append('g')\n .attr('transform', d => `translate(${margin.left}, ${yMargin(d.key)})`);\n\n g.append('rect')\n .attr('width', d => xMargin(d.value) - xMargin(0)) // <-- We must subtract our left offset.\n .attr('height', yMargin.bandwidth())\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n g.append('text')\n .attr('x', d => xMargin(d.value) - xMargin(0)) // <-- We must subtract our left offset.\n .attr('dx', -20)\n .attr('dy', '1em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`The [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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('border', '1px dotted #999'); \n\n container.append('g')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xMargin));\n\n container.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yMargin));\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`Our last step is then to merge all our code together, bars + axes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n const g = container.selectAll('g')\n .data(barData)\n .enter() \n .append('g')\n .attr('transform', d => `translate(${margin.left}, ${yMargin(d.key)})`);\n\n g.append('rect')\n .attr('width', d => xMargin(d.value) - xMargin(0))\n .attr('height', yMargin.bandwidth())\n .style('fill', d => color(d.key))\n .style('stroke', 'white');\n\n g.append('text')\n .attr('x', d => xMargin(d.value) - xMargin(0))\n .attr('dx', -20)\n .attr('dy', '1em')\n .attr('fill', 'white')\n .style('font-size', 'small')\n .text(d => d.value);\n\n container.append('g')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xMargin));\n\n container.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yMargin));\n\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`

\n### Acknowledgements\nThis notebook is a revised version from [@uwdata](https://observablehq.com/@uwdata)'s [Introduction to D3, Part 1](https://observablehq.com/@uwdata/introduction-to-d3-part-1) to be used for [CSE 412](https://courses.cs.washington.edu/courses/cse412/21wi/) section. Jane Hoffswell made major contributions to the original notebook, and [Kai-Wei Chang](https://www.linkedin.com/in/kaiweic/) made revisions to this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}