2f:T4ac,md`Grammars like [Vega-Lite](https://observablehq.com/@stanfordvis/introduction-to-vega-lite) break visualization design down into a process of specifying _mappings_ (or _visual encodings_) between data fields and the properties of graphical objects called _marks_. They 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. For more expressive power, we must take one step down the [ladder of abstraction](http://worrydream.com/LadderOfAbstraction/): from _visual analysis_ grammars to more general-purpose _visualization_ grammars. With visualization grammars, 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. `30:T487,md`We created this list usng D3 (you can expand the cell above to see the code). We will explain how this code works later. But for now assume that the list was made by having D3 create the ordered list (\`

\`). 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). The [\`d3.select\`](https://github.com/d3/d3-selection#select) and [\`d3.selectAll\`](https://github.com/d3/d3-selection#selectAll) functions 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)) but differ in two key ways. First, we can manipulate a selection _declaratively_. This means that rather than iterating over every item returned by the selector (like we would've had to when using \`document.querySelectorAll\`), we can operate on the selection as a whole:`31:T5d4,md`At this point, we're nearing the limit of what we can do with D3 and the HTML DOM. In particular, HTML is largely restricted to rectangular shapes and is governed by a [complex layout model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) that can often interfere with the way we wish to position and size marks for visualization purposes. Imagine we want to rotate our bar chart into a column chart (i.e., tall bars instead of long ones): we would need to use an [inline](https://www.w3schools.com/css/css_inline-block.asp) [layout](https://www.w3schools.com/css/css_float.asp) [mechanism](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to position bars side-by-side rather than setting their _y_ positions. This approach would break our _visual encoding_ abstraction of mapping data values to visual properties, and would yield a more difficult and brittle design process. As a result, rather than persevere with HTML, let's instead switch to [SVG (Scalable Vector Graphics)](https://developer.mozilla.org/en-US/docs/Web/SVG). SVG gives us a much richer set of [graphical primitives](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) to work with including curves, lines, and arbitrary shapes. Like HTML, SVG elements can be styled using CSS and can be programmatically manipulated via the DOM. So everything we've learned so far in this notebook still applies. Let's recreate our bar chart, this time using SVG \`
\` elements:`32:T5d4,{ const width = 400; const height = 200; const container = d3.create('svg') .attr('width', width) .attr('height', height); // Redefine the x scale here. const xscale = d3.scaleBand() .domain(barData.map(d => d.key)) // one band per key .range([0, width]) // across the SVG width // Redefine the y scale here. const yscale = d3.scaleLinear() .domain([0, d3.max(barData, d => d.value)]) // min → max values .range([height, 0]); // invert so higher values go up container.selectAll('rect') .data(barData) .join('rect') .attr('x', d => xscale(d.key)) // bar’s horizontal position .attr('y', d => yscale(d.value)) // top of the bar .attr('width', xscale.bandwidth()) // bar width (auto-calculated) .attr('height', d => height - yscale(d.value)) // bar height (difference from base) .style('fill', d => color(d.key)) .style('stroke', 'white'); container.selectAll('rect') .data(barData) .join('rect') .attr('x', d => xscale(d.key)) // bar’s horizontal position .attr('y', d => yscale(d.value)) // top of the bar .attr('width', xscale.bandwidth()) // bar width (auto-calculated) .attr('height', d => height - yscale(d.value)) // bar height (difference from base) .style('fill', d => color(d.key)) .style('stroke', 'white'); return container.node(); }33:T56c,md` After working with Vega-Lite and moving to D3, you might be thinking: "What a lot of low-level work for such a simple chart!" _(You would not be wrong!)_ However, the example above introduces most of the components you will need to construct a variety of more complex visualizations. The concepts & utilities you've learned will become second nature as you start to build more ambitious charts! Borrowing from [Scott Murray](https://alignedleft.com/work/d3-book-2e), D3 is _not_ a charting library. Rather, it is more apt to call it a visualization _kernel_ as it offers a series of modules for constructing visualizations including [loading](https://github.com/d3/d3-fetch) and [parsing](https://github.com/d3/d3-dsv) data, [binding](https://github.com/d3/d3-selection) and [encoding](https://github.com/d3/d3-scale) DOM elements, and calculating more advanced layouts such as [force-directed layouts](https://github.com/d3/d3-force) or [cartographic projections](https://github.com/d3/d3-geo). This notebook only scratches the surface of all the functionality D3 provides. Luckily, as D3 is one of the most widely used JavaScript libraries, there is a rich and diverse set of examples to learn from. We recommend perusing the [@d3 Observable notebooks](https://observablehq.com/@d3) or looking through the [curated gallery of examples](https://observablehq.com/@d3/gallery). `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":1760339868964.763,"size":20018},{"id":"f439de574431e955df9589f743d0e5d37373c2ed87ad38204dea1a5ef8474fc88879e6c50c3ba8ec82cc1f62261970a87a5c7fd1c0321cd2993270a1f3be05f1","href":"https://static.observableusercontent.com/files/f439de574431e955df9589f743d0e5d37373c2ed87ad38204dea1a5ef8474fc88879e6c50c3ba8ec82cc1f62261970a87a5c7fd1c0321cd2993270a1f3be05f1","name":"Screen Shot 2020-03-02 at 9.11.37 AM.png","type":"image/png","lastModified":1760339868964.763,"size":25363}] 2d:{"title":"Introduction to D3` [SOLUTIONS]","cells":[{"id":0,"value":"# Introduction to D3` [SOLUTIONS]","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"md`In this notebook, we will gain familiarity with one of the most widely used visualization grammars: [D3.js](https://d3js.org/). Let's start by importing the D3 library:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"md`_This document is 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)._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`Next let's load a dataset to work with. We'll use a dataset on global health and population measures from 1955–2000, compiled by the [Gapminder Foundation](https://www.gapminder.org/) and shared in [Hans Rosling's popular TED talk](https://www.youtube.com/watch?v=hVimVzgtD6w).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"gapminder = datasets['gapminder.json']()","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"printTable(gapminder.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"md`\n_Note that we have put a [**Imports**](https://observablehq.com/@stanfordvis/introduction-to-d3#imports) section at the end of this document where we import various utility functions such as the \\`printTable()\\` function._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"md`\nLet'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. We will use this subset in our first few D3 examples.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"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":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`
\n## Selections and Data Binding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`Rather than confining us to a pre-determined set of graphical marks, D3 takes a much more general approach: _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\nFor instance, we could \"visualize\" a subset of our dataset as an ordered list (\\`
1. \\`) are marks:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"list = {\n const fmt = d3.format(',');\n const ol = d3.create('ol');\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(d => `${d.country}: ${fmt(d.pop)}`) // add formatted text to 'li' elements\n \n return ol.node(); // return the DOM element node of the 'ol' elemenet\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"// Run this cell to recolor just the first item in the list above. \n// If you are curious rhe randomColor() function was imported as a utility at the end of this document.\nd3.select('li.country').style('color', randomColor()), null","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"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":184,"value":"md`Second, and more importantly for our purposes, we can use the [\\`selection.data()\\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) operator to create DOM elements using some backing data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"{\n const ol = d3.create('ol');\n \n ol.selectAll('li') // select all list elements (orange circle below)\n .data(listData) // bind all our data values (blue circle below)\n \n return ol.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`However, notice that the visualization produced by the cell above is blank! We have not yet created the new DOM elements for the list items. Rather, the call to \\`selection.data()\\` returns a _new_ selection with three different states: _enter_, _update_, and _exit_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"selection = {\n const ol = d3.create('ol');\n return ol.selectAll('li').data(listData);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"datajoin = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`For every value in our backing data, the operator checks whether a corresponding DOM element exists in a one-to-one manner:\n\n * 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.\n\n * The **update** state is a selection that contains _existing_ DOM elements that match a bound data value.\n\n * The **exit** state is a selection that also contains _existing_ DOM elements, but for which a matching data value was not found.\n\nMatches are determined by the second argument to \\`.data()\\`, which specifies a _key_ function. If no key function is specified (like our code cell above), 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"md`We can address the three states separately, but the [\\`selection.join()\\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_join) operator gives us a more convenient interface:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"{\n const ol = d3.create('ol');\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') // merge the 'enter' and 'update' sets, create 'li' elements as needed\n .text(d => `${d.country}: ${d.pop}`) // For data-bound selections, transformation operators can be \n // functions that receive a data value as an input argument.\n return ol.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`By default, if we just pass a string to \\`selection.join()\\`, entering elements are appended to the selection, exiting elements are removed, and updating elements simply pass through. However, we can also address the three states separately. For instance, the code snippet below is the long form version of the one above:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"{\n const ol = d3.create('ol');\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(\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 .text(d => `${d.country}: ${d.pop}`)\n \n return ol.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1149,"value":"md`
  `","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`\n##
  Exercise
  \n\nModify 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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"{\n const ol = d3.select(html`
  `);\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":306,"value":"{\n const ol = d3.select('ol#enter-update-exit');\n\n // use a new dataset, manipulable with the variables defined below\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 (orange circle above)\n .data(newData, d => d.country) // bind all our data values (blue circle above)\n .join(\n enter => enter.append('li').style('color', 'green'), // hint: add code here\n update => update.style('color', 'blue'), // hint: add code here\n exit => exit.style('color', 'red')\n ) \n .text(d => `${d.country}: ${d.pop}`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"md`You can use the variables below to change the elements in the \\`newData\\` extracted in the cell above to test your changes to \\`enter\\`, \\`update\\`, and \\`exit\\`. _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._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"year = 2005","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"n = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1154,"value":"md`
  `","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"md`Why all of this complexity? D3's data join operators give us a general way to draw our visualization's marks. As a result, we don't have to worry about any kind of iteration or branching (i.e., no \\`for\\` loops or \\`if\\` statements). We can focus on _what_ we want our visualization to look like, rather than writing out each step for _how_ it should be computed. This property is called _declarative_ (in contrast to _imperative_) specification or programming and helps keep our code more readable and understandable. And, as we'll see in the [next notebook](https://observablehq.com/@stanfordvis/making-d3-charts-interactive), D3's data join makes it more convenient to specify animated transitions as items are entering, updating, or exiting.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`
  \n## A Simple Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"md`Before we get more complex, let's try our hand at making a simple bar chart showing the average life expectancy (\\`value\\`) for different geographic regions (\\`key\\`), using D3 to create basic HTML \\`
  \\` elements.\n\n##
  Exercise
  \nTry to recreate the bar chart below. You will want to bind the bar data to new \\`div\\` elements, style them appropriately, and add the text.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"FileAttachment(\"Screen Shot 2020-03-02 at 7.13.09 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"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":362,"value":"{\n const container = d3.create('div');\n \n container.selectAll('div')\n .data(barData)\n .join('div')\n .style('background-color', 'steelblue') // color for the bars\n .style('margin', '5px 0') // space between bars\n .style('height', '25px') // bar height\n .style('width', d => `${d.value * 15}px`) // scale width by value\n .style('color', 'white') // text color\n .style('text-align', 'right') // align value to the end\n .style('padding-right', '3px') \n .style('font-size', '14px') // spacing for text\n .text(d => d.value); // show value text\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`Did you find yourself \"hard-wiring\" a scale factor for the width of the bars? 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`
  \n## Scale Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`Rather than implicitly dealing with scaling issues, or introducing maintenance and readability costs associated with magic numbers, D3 offers us a variety of [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:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"md`The current page \\`width\\` variable = ${width} px.` // Observable's built-in width property!","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"xscale = d3.scaleLinear()\n .domain([0, d3.max(barData, d => d.value)])\n .range([0, width]) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`\\`xscale\\` is a function that linearly maps an input value to the given range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"xscale(49)","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`We can now use it to scale our bar widths like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"{\n const container = d3.create('div');\n\n container.selectAll('div')\n .data(barData)\n .join('div')\n .style('background', 'steelblue')\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`) // <-- Use xscale instead of a magic number\n .text(d => d.value);\n \n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`Scales are a workhorse of visualization design! For example, we might want to assign each bar a different color. One option to do so could involve a large ternary expression or if-else statement. Alternatively we can instead use a [color scale](https://github.com/d3/d3-scale-chromatic#d3-scale-chromatic) like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"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!","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"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))\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":461,"value":"md`
  \n## SVG: Scalable Vector Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"{\n const barHeight = 25;\n const height = barData.length * barHeight;\n\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, i) => i * barHeight)\n .attr('width', d => xscale(d.value))\n .attr('height', barHeight)\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, i) => i * barHeight)\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":555,"value":"md`Perhaps the biggest change in our shift from HTML to SVG is that we are entirely responsible for how our bars are laid out. Whereas before we could rely on \\`
  \\` elements gaining a height based on their content and padding, and on the [flow layout model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout) to position them one after another, in SVG we have to explicitly set the \\`x\\`, \\`y\\` positions of all elements, and the \\`width\\` and \\`height\\` of our \\`\\` elements.\n\nA _magic number_ has snuck back into our specification. Can you spot it?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"md`Using SVG does not mean we need to hard-wire the height of our bars. Instead, we can use [band scales](https://observablehq.com/@d3/d3-scaleband) to automatically divide up the total height of our SVG element (\\`150px\\`) into equally-sized bars.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"height = 150","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"yscale = d3.scaleBand()\n .domain(barData.map(d => d.key))\n .range([height, 0]) // Try flipping this to [0, height] and see the effect on the bars below.","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`Notice that this scale maps to a range of \\`[height, 0]\\` and not \\`[0, height]\\` as we might initially have guessed. This is because the origin \\`(0, 0)\\` of the SVG coordinate system is in the top-left hand corner of the SVG element.\n\nNow we can use our new \\`yscale\\` like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"{\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n container.selectAll('rect')\n .data(barData)\n \n .join('rect')\n .attr('x', 0)\n .attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning bars\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 container.selectAll('text')\n .data(barData)\n .join('text')\n .attr('x', d => xscale(d.value))\n .attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning labels\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":619,"value":"md`With SVG, rotating our bar chart into a column chart becomes much more straightforward than it would have been with HTML.\n\n##
  Exercise
  \nTry changing your bar chart from a horizontal orientation to a vertical orientation below. _Hint: Think about how the scales of a bar chart differ from a column chart._\nThe chart you want to create should look something like this:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`As we can see, scales really are at the heart of our visualization design process. As a result, it's often very helpful to visualize the scales themselves as axes and legends. D3 can help with this, but we first have to take a bit of a tangent...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`
  \n## \\`\\`: The SVG Group Element`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"md`SVG'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":713,"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":725,"value":"md`Alright, now that we've met \\`\\`, let's get back to the main event!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"axes = md`
  \n## Visualizing Scales: Axes & Legends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"md`Axes and legends visualize our scale functions using text labels, shapes, and lines. We could construct them manually (as in [this notebook](https://observablehq.com/@d3/color-legend)) but D3 (and its developer community) offers us some helper modules to make our lives easier.\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":740,"value":"graphic","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`_Credit: [Mike Bostock](https://observablehq.com/@d3/margin-convention)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"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":761,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"md`Our scales will then use this margin offset to determine their range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"xMargin = xscale.copy().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"// Remember (0, 0) is the top-left hand corner\nyMargin = yscale.copy().range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`Using these scales, our bar chart currently looks like this. We now have some whitespace around the left and bottom of the SVG element, just waiting for our axes!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"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":811,"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":816,"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":827,"value":"md`Our last step is then to merge all our code together, bars + axes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"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":887,"value":"md`Unfortunately, D3 does not offer a built-in mechanism for creating legends, but we will see how to create our own when we build an interactive legend in the [next notebook](https://observablehq.com/@stanfordvis/making-d3-charts-interactive)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"md`
  \n## Summary`","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"md`
  \n### Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"md`This notebook was originally written by Arvind Satyanarayan's [Introduction to D3](https://observablehq.com/@mitvis/introduction-to-d3), which in turn was heavily inspired by Mike Bostock's [Let's Make a Bar Chart](https://bost.ocks.org/mike/bar/) series. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"html`
  `","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"imports = md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"\nimport {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"datasets = require('vega-datasets')","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"randomColor = () => `#${Math.floor(Math.random()*16777215).toString(16)}`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}