30:[] 2e:{"title":"Let’s Make a Bar Chart, Part 1","cells":[{"id":0,"value":"# Let’s Make a Bar Chart, Part 1\n\nSay you have a little data—an array of numbers:","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = [4, 8, 15, 16, 23, 42]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"A bar chart is a simple yet perceptually-accurate way to visualize such data. This [multipart tutorial](/collection/@d3/lets-make-a-bar-chart) will cover how to make a bar chart with D3.js. First we’ll make a bare-bones version in HTML, then gradually a more complete chart in SVG.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"This tutorial will assume you have some web development experience: some familiarity with JavaScript, HTML, CSS, and the like. If you have questions or want help, please [post a comment](https://talk.observablehq.com). All the code is editable, so feel free to tinker, and fork this notebook to save your work!","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"## Selecting an Element\n\nIn vanilla JavaScript, you typically deal with elements one at a time. For example, to create a DIV element and set its content:","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"{\n const div = document.createElement(\"div\");\n div.innerHTML = \"Hello, world!\";\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"With D3 (as with jQuery and other libraries), you instead handle groups of related elements called *selections*. Working with elements *en masse* gives selections their power; you can manipulate a single element or many elements without substantially restructuring your code. Although this may seem like a small change, eliminating loops and other control flow can simplify your code.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"A selection can be created in myriad ways. You can create one by querying a *selector*, which is a special string that identifies desired elements by property, say by name or class (div or .foo, respectively).","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"{\n const p = d3.selectAll(\"p\");\n // p.style(\"color\", \"red\"); // Uncomment this line and run the code!\n // p.style(\"color\", null); // Uncomment this line to clear the color.\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"Or you can create a selection for a new, solitary, detached element. Calling [*selection*.node](https://d3js.org/d3-selection/control-flow#selection_node) will return this element, allowing it to be displayed.","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"{\n const div = d3.create(\"div\");\n div.html(\"Hello, world!\");\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## Chaining Methods\n\nSelection methods such as [*selection*.attr](https://d3js.org/d3-selection/modifying#selection_attr) and [*selection*.style](https://d3js.org/d3-selection/modifying#selection_style) support chaining: they return the current selection. This lets you easily apply multiple operations to the same elements.","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"d3.create(\"span\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"black\")\n .html(\"Hello, world!\")\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"Without method chaining, you must store the selection in a local variable and repeat it for each operation.","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"{\n const span = d3.create(\"span\");\n span.style(\"color\", \"white\");\n span.style(\"background-color\", \"black\");\n span.html(\"Hello, world!\");\n return span.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"*“Span, span, span, span… wonderful span!”*\n\nNote we didn’t need a local variable for the selection when method chaining: after applying any operations, the selection can be discarded. Method chaining lets you fret less over naming variables.","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"There is a gotcha with method chaining: while most operations return the current selection, some methods return something else. For example, [*selection*.append](https://d3js.org/d3-selection/modifying#selection_append) returns a new selection containing the new elements. (I prefer to indent four spaces for methods that return the current selection and two spaces for methods that return something else, such as *selection*.node or *selection*.append.)","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"Since method chaining can only be used to descend into the DOM hierarchy, use local variables to keep references to selections and go back up.","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"{\n const table = d3.create(\"table\");\n const tbody = table.append(\"tbody\");\n tbody.append(\"tr\").append(\"td\").text(\"First!\");\n tbody.append(\"tr\").append(\"td\").text(\"Second.\");\n tbody.append(\"tr\").append(\"td\").text(\"Third.\");\n return table.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"## Coding a Chart, Manually\n\nNow consider how you might create a bar chart without JavaScript. There are only six numbers in this trivial dataset, so it’s not too hard to write a few elements by hand and be done with it.","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"(Careful readers will note that the three-pixel padding here distorts the accuracy of the chart by making the bars longer! This can be fixed via box-sizing: border-box, or by switching to SVG, as we will in part 2.)","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"## Coding a Chart, Automatically\n\nOf course, hard-coding is impractical for most datasets! So now let’s create the identical chart using D3. We’ll start with an empty container, and append a DIV for each bar with the desired width.","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"{\n const div = d3.create(\"div\")\n .style(\"font\", \"10px sans-serif\")\n .style(\"text-align\", \"right\")\n .style(\"color\", \"white\");\n\n div.selectAll(\"div\")\n .data(data)\n .join(\"div\")\n .style(\"background\", \"steelblue\")\n .style(\"padding\", \"3px\")\n .style(\"margin\", \"1px\")\n .style(\"width\", d => `${d * 10}px`)\n .text(d => d);\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"And here’s the same code in long form, with a few explanatory comments.","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"{\n // Create an empty (detached) chart container.\n const div = d3.create(\"div\");\n\n // Apply some styles to the chart container.\n div.style(\"font\", \"10px sans-serif\");\n div.style(\"text-align\", \"right\");\n div.style(\"color\", \"white\");\n\n // Define the initial (empty) selection for the bars.\n const bar = div.selectAll(\"div\");\n\n // Bind this selection to the data (computing enter, update and exit).\n const barUpdate = bar.data(data);\n\n // Join the selection and the data, appending the entering bars.\n const barNew = barUpdate.join(\"div\");\n\n // Apply some styles to the bars.\n barNew.style(\"background\", \"steelblue\");\n barNew.style(\"padding\", \"3px\");\n barNew.style(\"margin\", \"1px\");\n\n // Set the width as a function of data.\n barNew.style(\"width\", d => `${d * 10}px`);\n\n // Set the text of each bar as the data.\n barNew.text(d => d);\n\n // Return the chart container.\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"This code introduces a core concept of D3: the *data join*. This is a general pattern for creating, updating or destroying elements to reflect new data. It might feel odd—especially here where we’re only creating a static chart, joining an empty selection—but the benefit is generality. Whether you’re building a static chart or a dynamic one with animated transitions, this one pattern is all you need.","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"[*selection*.data](https://d3js.org/d3-selection/joining#selection_data) computes the *enter*, *update* and *exit* selections, while [*selection*.join](/@d3/selection-join) applies default logic for each, appending entering elements and removing exiting elements. (If desired, you can define more precise logic, say for animated transitions or incremental updates.)","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"D3’s selection methods such as *selection*.attr and *selection*.style allow you to specify values either as a constant (the same for all selected elements) or a function (computed for each element). If the value of a particular attribute should be based on the element’s associated data, then use a function; otherwise, if it’s the same for all elements, then a string or number suffices.","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"## Scaling to Fit\n\nA weakness of the code above is the magic number 10 used to scale the data value to the appropriate pixel width. This number implicitly depends on the domain of the data (the maximum value, 42) and the width of the chart (420).","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"We can make these dependencies explicit by using a linear scale. D3’s scales map a *domain* of abstract data to a *range* of a visual variable such as position.","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, 420])","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"The returned *x*-scale is a function. When passed an abstract data value from the *domain*, it returns the corresponding visual value from the *range*.","pinned":false,"hidden":false,"mode":"md"},{"id":242,"value":"x(4) // the length of the bar representing 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"x(16) // the length of the bar representing 16","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"To use the scale, we replace the hard-coded multiplication for the width by calling the scale function.","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"{\n const div = d3.create(\"div\")\n .style(\"font\", \"10px sans-serif\")\n .style(\"text-align\", \"right\")\n .style(\"color\", \"white\");\n\n div.selectAll(\"div\")\n .data(data)\n .join(\"div\")\n .style(\"background\", \"steelblue\")\n .style(\"padding\", \"3px\")\n .style(\"margin\", \"1px\")\n .style(\"width\", d => `${x(d)}px`)\n .text(d => d);\n\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"The bare-bones bar chart here is admittedly of limited value: it should have axes to assist in comparison, and you may prefer vertical columns to horizontal bars. For greater visual expression, let’s switch to Scalable Vector Graphics.\n\nNext","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}