33:T41f,html``34:[] 32:{"title":"Let’s Make a Bar Chart, Part 2","cells":[{"id":0,"value":"# Let’s Make a Bar Chart, Part 2\n\nWhereas HTML is largely limited to rectangular shapes, SVG supports powerful drawing primitives like Bézier curves, gradients, clipping and masks. You may not need all of SVG’s extensive feature set, but even the basics are a worthwhile addition to your visualization toolbox.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"Like anything, this richness comes at a cost. The SVG specification may be intimidating, but you don’t need to master every feature to get started. Browsing the D3 gallery is an enjoyable way to pick up new techniques.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"And SVG and HTML share many similarities. You can write SVG markup and embed it directly in a web page. You can inspect SVG elements in your browser’s developer tools. SVG elements can be styled with CSS, albeit using different properties. However, unlike HTML, SVG elements are positioned absolutely; SVG does not support flow layout or even text wrapping.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"## Coding a Chart, Manually\n\nLet’s revisit our chart implementation as static markup, now in SVG.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"Unlike the DIV elements that were positioned using flow layout in HTML, SVG elements must be positioned with absolute coordinates: in addition to setting the width of each bar, we now have to set its vertical position.","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"SVG requires text to be positioned explicitly, too. Since text elements do not support padding or margins, the text position must be offset by three pixels from the end of the bar, while the *dy* offset is used to center the text vertically.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"## Coding a Chart, Automatically\n\nNow let’s construct the chart with D3. Parts of this code should look familiar.","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"data = [4, 8, 15, 16, 23, 42]","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"width = 420","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0, 20 * data.length])","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"We configure the *y*-scale based on the size of the dataset (*data*.length); this way, the size of the chart is based on the height of each bar rather than the overall height of the chart, and we ensure adequate room for labels.","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", y.range()[1])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\");\n\n const bar = svg.selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${y(i)})`);\n\n bar.append(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"width\", x)\n .attr(\"height\", y.bandwidth() - 1);\n\n bar.append(\"text\")\n .attr(\"fill\", \"white\")\n .attr(\"x\", d => x(d) - 3)\n .attr(\"y\", (y.bandwidth() - 1) / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"A data join is used to create a g element for each data point. Then the g element is translated vertically, creating a local origin for positioning the bar and its label.","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"Since there is exactly one rect and one text element per bar, we can append these elements directly to the g selection without needing additional data joins; data joins are only needed when creating a *variable* number of children based on data. The appended rect and text elements inherit data from their parent g element, and thus we can use data to compute the bar width and label position.","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"## Encoding Ordinal Data\n\nWhile it may not look like it, this dataset (and the resulting bar chart) is implicitly two-dimensional: the first dimension (*x*) is the numeric value (4, 8, 15, …); the second dimension (*y*) is the index of each value (0, 1, 2, …).","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"x.domain() // quantitative, continuous","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"y.domain() // ordinal","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"While quantitative values can be compared numerically, subtracted or divided, ordinal values can only be compared by rank (order). And so in addition to linear, pow and log scales for quantitative data, D3 provides scales for ordinal data.","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"Ordinal scales come in three forms.\n\nIn its most explicit form, an ordinal scale maps a discrete set of abstract data values (such as names) to a corresponding discrete set of visual values (such as colors). Like quantitative scales these sets are called the domain and range, respectively.","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"z = d3.scaleOrdinal()\n .domain([\"apples\", \"limes\", \"blueberries\"])\n .range([\"red\", \"green\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"z(\"apples\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"z(\"limes\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"In specifying the domain and range, all that matters is the order of values: element i in the domain is mapped to element i in the range.","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"It would accomplish little to enumerate the positions of each bar by hand, so instead we’ll use another form of ordinal scale: a band scale. This scale divides the given continuous range into evenly-spaced, evenly-sized bands, as in a bar chart. (The last form is the point scale, for ordinal dot plots.)","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"y(0) // the y-coordinate of the first bar’s top edge","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"y.bandwidth() // the height of each bar","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"Next, let’s make this chart more realistic by loading data from a CSV file.\n\nNext","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}