2a:null 2b:["$","title",null,{"children":"Lab 2: Data Binding, Scales, and Axes | Columbia Data Viz Sp21 | Observable"}] 31:[{"id":"4c76ac00a2f1989d92e0e0c44ac389a20e50e4f7078dd44763a7820358848990d9361b96768fe2655d19058315814aec3fadc653086f47d7fd77c3d6d87be6b3","href":"https://static.observableusercontent.com/files/4c76ac00a2f1989d92e0e0c44ac389a20e50e4f7078dd44763a7820358848990d9361b96768fe2655d19058315814aec3fadc653086f47d7fd77c3d6d87be6b3","name":"finalbars@1.png","type":"image/png","lastModified":1611688558461.21,"size":8617}] 2e:{"id":"e641915b4796ae58","slug":"lab-2-data-binding-scales-and-axes","title":"Lab 2: Data Binding, Scales, and Axes","thumbnail":"c350f5fea7e5f5e335b6b5b4332236e718f80909c31d1b72b3b007f462dc3cc4","access_level":"public","create_time":"$D2021-01-26T16:02:19.467Z","update_time":"$D2021-02-09T11:53:07.490Z","view_time":null,"first_public_time":"$D2021-01-26T19:31:59.354Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":529,"publish_version":529,"role":null,"authored":false,"authors":[{"type":"individual","id":"8d5c31907af563e2","login":"agness","name":"Agnes Chang","avatar_url":"https://avatars-next.observableusercontent.com/93dc0da6b82c79bbfac62dd7a8227381dc4971ba857233bedf1b151a1da950f3","tier":null}],"members":[{"type":"individual","id":"8d5c31907af563e2","login":"agness","name":"Agnes Chang","avatar_url":"https://avatars-next.observableusercontent.com/93dc0da6b82c79bbfac62dd7a8227381dc4971ba857233bedf1b151a1da950f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":42,"collection":{"id":"3e36d095b0c15288","slug":"labs","title":"Columbia Data Viz Labs","owner":{"id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21"}},"type":"notebook","body":{"title":"Lab 2: Data Binding, Scales, and Axes","cells":[{"id":0,"value":"md`# Lab 2: Data Binding, Scales, and Axes\n\nIn this notebook we'll be getting started with [D3.js](https://d3js.org/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## 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":"ojs"},{"id":29,"value":"{\n const div = document.createElement(\"div\");\n div.innerHTML = \"Hello, world!\";\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`With D3 (as with jQuery and other libraries), you instead handle groups of related elements called *selections*. Working with elements in bulk gives selections their power: you can manipulate a single element or many elements without substantially restructuring your code.\n\nA 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":"ojs"},{"id":36,"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":42,"value":"// Now you try it: change all

elements on this page to a green color","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`You can also create a selection for a new, solitary, detached element. Calling [selection.node](https://github.com/d3/d3-selection/blob/master/README.md#selection_node) will return this element, allowing it to be displayed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"{\n const div = d3.create(\"div\");\n div.html(\"Hello, world!\");\n // make this div's hello world text white and background color black\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"chaining = md`## Chaining Methods\n\nSelection methods such as [selection.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) and [selection.style](https://github.com/d3/d3-selection/blob/master/README.md#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":"ojs"},{"id":56,"value":"d3.create(\"span\")\n .style(\"color\", \"red\")\n .html(\"Hello, world!\")\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"// create another div with words of your choice, white text, and black background color, all one command (chained syntax)","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`Without method chaining, we had to store the selection in a local variable and repeat it for each operation. (We also needed brackets to protect the local variable scope in an enclosure.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"manual = md`## 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.\n\nSay you have a little data—an array of numbers:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"data = [4, 8, 23, 15, 32, 19]","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Here's a written-out SVG implementation of the above data as a 1D bubble chart. Complete the following chart to represent all 6 data points in the \\`data\\` array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`\n## Coding a Chart, Automatically with Data Binding\n\nOf course, hard-coding is impractical for most datasets! So now let’s create the identical chart using D3. \n\nGiven an array of data and a D3 selection of graphical elements, we can bind, or ‘join’, each array element to each element of the selection.\n\nBy binding, you're defining a relationship between your data and graphical elements which makes data-driven modification of the elements straightforward later on, e.g. when our data changes or when we want to add interactivity.\n\nFor example if we have some basic SVG circles:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"// run this\nd3.select('#basiccircles')\n .selectAll('circle') // we can select the circles...\n .data(data) // and then join the array to it...\n .attr('r', d => d); // and then set each circle's `r` to the corresponding data element's value","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`Now for your turn, create one blue circle for each student's wallet size. (Given an element in the array as \\`d\\`, you can access the size via \\`d.size\\`.) Feel free to adjust the canvas size.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"wallets = [\n {\n \"name\": \"Andy\",\n \"size\": 25\n },\n {\n \"name\": \"Beth\",\n \"size\": 39\n },\n {\n \"name\": \"Craig\",\n \"size\": 42\n },\n {\n \"name\": \"Diane\",\n \"size\": 35\n },\n {\n \"name\": \"Evelyn\",\n \"size\": 48\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"// your d3 code to bind and modify wallet circles","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`We can, however, make things even for ourselves by utilizing additional features of D3. First, we can use D3 to create the DOM SVG elements from the get go, like so:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 1000)\n .attr(\"height\", 100);\n \n // create 1 circle\n svg.append(\"circle\")\n .attr(\"fill\", \"purple\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 50)\n .attr(\"r\", 25);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`Secondly, you might've asked when you made your wallet viz, what happens if the data array has more (or less) elements than the selection? D3 is designed to help us easily make sure that there are as many visual elements as there are data points, via the bind relationship you created:\n\n- if the array is longer than the selection there’s a shortfall of DOM elements and we need to add elements\n- if the array is shorter than the selection there’s a surplus of DOM elements and we need to remove elements\n\nThe power of D3 and data binding comes in here to help us add and remove DOM elements using the two functions \\`.enter()\\` and \\`.exit()\\`, which we can use to help us \"add\" the initial set of visual elements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 1000)\n .attr(\"height\", 100);\n \n // --- bind circle to data\n svg.selectAll(\"circle\")\n .data(data)\n .enter().append(\"circle\")\n .attr(\"cx\", (d, i) => (i+1)50 )\n .attr(\"cy\", 50)\n .attr(\"r\", d => d);\n\n // --- alternatively, using \".join\"\n // svg.selectAll(\"circle\")\n // .data(data)\n // .join(\"circle\") // the \"join\" selection is a convenience to merge the \"enter\" and \"update\" states, which is totally sufficient for our static chart\n // .attr(\"cx\", (d, i) => (i+1)50 )\n // .attr(\"cy\", 50)\n // .attr(\"r\", d => d);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`\nBreaking down the enter-append sequence above:\n1. \\`svg.selectAll(\"circle\")\\` at first returns \"empty\" state, because no circles exist yet.\n1. [selection.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) joins the data with our selected (empty) elements, returning a new selection that represents elements successfully bound to data (i.e. the \\`update\\` selection, discussed in more detail below.)\n1. [selection.enter](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter), as a property of the selection of bound elements, gives us all data values that don't have a corresponding visual element;\n1. finally we create a DOM element for each data element that is missing one, using [selection.append](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) to add a new circle for each to the SVG container.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`## Enter, Update, Exit\n\nTo define the data binding selections more generally:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`For every value in our data, D3 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 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 contains _existing_ elements, but for which a matching data value was not found.\n\nMatches are determined by an optional second argument to \\`.data\\`, which specifies a _key_ function. If no key function is specified (like our example 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":271,"value":"md`Now try recreating your original wallet viz using D3 \\`enter\\`, \\`update\\`, or \\`join\\` selections.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"// your wallet viz created entirely with D3","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`---\n\n## Making a Bar Chart, Manually\n\nNow let's start making a more realistic chart, one that will also have a legend and axes. Here's a written-out SVG implementation of our earlier \\`data\\` array as a bar chart. \n\nSVG's \\`\\` element allows us to group a set of elements together similar to how we might do so in 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\nTo familiarize ourselves with the visual elements required, complete the following manually-coded chart to represent all 6 data points in the array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"data // showing it again here for convenience","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`\n## Working with Scales\n\nHere we've hard-coded the width of our bars to 10x the value, but what if we wanted to scale the width of our bar chart to the width of our canvas? To help build up our ability to make flexible charts, we're going to introduce the concept of D3 scales here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`\n[\\`d3-scale\\`](https://github.com/d3/d3-scale) transforms a number in a certain interval domain into a number in another interval range.\n* If you’re familiar with the concept of normalization, that is a specific case of linear scale, mapping a numeric value to a new value between 0 and 1. For example, with 365 days in the year, day number 310 maps to about 0.85, or 85% of the way through the year.\n\n\n
\n\n
_Credit: Jerome Cukier_\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`D3 scales are functions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"scale = d3.scaleLinear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`Until we set a domain and range, this function maps input to output on a 1:1 scale.\n
\nRun the following, and then see what happens when you update the function with \\`.domain([100, 500]).range([10, 350])\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"// update this\nscale(2.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`\n\\`d3.scaleOrdinal()\\` maps from a set of discrete values to a set of visual attributes, e.g. colors.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"ordinalScale = d3.scaleOrdinal()\n .domain(['cat', 'dog', 'parrot', 'hamster'])\n .range(d3.schemePaired); // https://github.com/d3/d3-scale-chromatic#schemePaired","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"c = ordinalScale('parrot')","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"html`
\n ${c}\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`\n
\n\\`d3.scaleBand()\\` maps an ordinal input to a continuous range of uniform-width bands. It is thus most often used for bar charts with a categorical dimension.\n\n
\n\n
Via d3-scale API
\n
\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`## Making a Bar Chart, Automatically\nNow let’s construct the same bar chart with D3. Parts of this code should look familiar.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"width = 420","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"height = 20 * data.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`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":"ojs"},{"id":295,"value":"autobar = {\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 .style('border', '1px dotted #999'); // to help see the edges of our canvas\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\", 17) // <----- modify this line\n .attr(\"y\", y.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"md`Our numerical text labels in this D3 bar chart isn't as nice as our hand-coded one, which had it right-aligned to the edge of the bar. Update the chart above using the \\`x\\` scale function (remember, it accepts parameters) to address the width of the bar at each data element and set the position of the label accordingly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Working with Margins and Axes\n\nAxes and legends visualize our scale functions using text labels, shapes, and lines. We could construct them manually [like in this notebook](https://observablehq.com/@d3/color-legend) but D3 (or the wider community) offers us some helper modules to make our lives easier.\n\nLet's work with axes today. 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":96,"value":"graphic","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`Let's define a new set of scales that will then use this margin offset to determine their range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"xMargin = x.copy().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"yMargin = y.copy().range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`Now copy the above code block named \\`autobar\\` and replace all instances of your \\`x\\` and \\`y\\` scales with \\`xMargin\\` and \\`yMargin\\` respectively and see what you get:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"// Your `autobar` chart with value labels right aligned, with margins","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"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 along with a \\`\\` element like so. Notice 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":442,"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 .style('border', '1px dotted #999'); // to help see the edges of our canvas\n\n svg.append('g')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xMargin));\n \n svg.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yMargin));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"md`---\n## Putting Everything Together\nFinally, we are now ready to combine our bars with margins and axes. Copy the axes code into the cell below, and insert your \\`bar\\` selection code. \n\nNote that the \\`bar\\` selection selects all \\`\\` elements, so where you insert your bars code will matter. \n\nNote also, that now that you have visual axes to align to, you'll need to also translate your bars along the x-direction and adjust the width of your bars, to account for \\`margin.left\\`, if you didn't already do this when you replaced instances of your \\`x\\` scale with \\`xMargin\\`.\n\nYou should end with a chart that looks like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"FileAttachment(\"finalbars@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"// Your `autobar` chart with value labels right aligned, with margins and axes","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`That's it! Congratulations on your first fully D3-generated bar chart! 🎉`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`---\n### References\n * [Official D3 Project Page](https://d3js.org/)\n * [\\`d3-selection\\`](https://github.com/d3/d3-selection) API reference\n * [\\`d3-scale\\`](https://github.com/d3/d3-scale) API reference\n * Textbook: [D3: Interactive Data Visualization for the Web](https://clio.columbia.edu/catalog/13137514) 2nd ed., Scott Murray, O’Reilly (2017)\n\n### Acknowledgements\n\nThis notebook borrows heavily from:\n * [Observable Series: Learn D3](https://observablehq.com/collection/@d3/learn-d3) notebooks\n * [MIT Visualization Group: Introduction to D3](https://observablehq.com/@mitvis/introduction-to-d3) notebook\n * [Let's Make a Bar Chart, Part 1](https://observablehq.com/@d3/lets-make-a-bar-chart?collection=@d3/lets-make-a-bar-chart), [Part 2](https://observablehq.com/@d3/lets-make-a-bar-chart/2) notebooks\n * [D3 In Depth: Data Joins](https://www.d3indepth.com/datajoins/)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"