md`**OKAY**, so maybe that chart isn't super exciting to look at, BUT! What just happened? 1. We started off with a bunch of plain ol' SVG elements. 2. We used some JavaScript to join our rat data to those boring elements to make them ✨_slightly less boring_ ✨. That's pretty cool! You could almost say our document is becoming..._data-driven_. ![](https://i.kym-cdn.com/entries/icons/original/000/014/959/Screenshot_116.png) AAaaaaanyway, Let's break it down 🛠... Starting with: \`\`\`js d3.selectAll('rect'); \`\`\` D3 has a couple of methods for helping us retrieve DOM elements so that we might do stuff to them later. If you're familiar with [jQuery](https://jquery.com/), they work a lot like that! - \`select()\` is good for selecting a **single element**. If multiple elements exist, \`select()\` just returns the first one. - \`selectAll()\` is good for selecting **multiple elements**. \`\`\`js d3.selectAll('rect'); // select all SVG rect elements d3.select('#boston'); // select an element where id='boston' d3.selectAll('.bar'); // select all elements with the class 'bar' \`\`\` ### d3.select('rect'); \`\`\`html \`\`\` ### d3.selectAll('rect'); \`\`\`html \`\`\` ### The \`data\` method \`\`\`js .data(ratData) \`\`\` The \`data()\` method is the _data-driven_ in your document. It's the bit that binds your data to DOM elements on the page. Let's pop over to Chrome devtools to see that our \`rect\` elements have data properties bound to them. ⌛️ In this simple example, data from our \`ratData\` array is joing to the \`rect\` elements in the order it appears. So, our first \`rect\` gets a value of 400, the second 900, and so on. But there are much more sophisticated ways to get your data and DOM elements together! ### Attributes Like jQuery (and probably some other libraries you've used), D3 has methods to get and set element attributes and styles. You can set hardcoded values... \`\`\`js var el = d3.select('rect'); el.attr('height', 10); // set the rectangle's height attribute to 10 el.style('opacity', 0.5); // set a CSS style el.attr('height'); // returns 10 el.style('opacity'); // returns .5 \`\`\` ..or set values based on **data** by passing a function, which is what we did earlier. For each element, the function will be invoked with \`d\` being its data value (400, for example). Whatever the function returns is the the \`height\` attribute will be set to. \`\`\`js .attr('height', function(d){ // d = the element's data return d/10 * 1.5; // return value will assigned to the height attribute }) \`\`\` There is an even more generalized form of setting attributes on data. The big change is that you get both a data item (usually represented as \`d\`) *and* the element's _zero-based index_, usually represented as \`i\`. This can be useful for acting on an element in a regular manner as D3 iterates over a list of elements. We'll see more of this later. \`\`\`js .attr('attribute_name', function(d, i){ return some_value; }); \`\`\` Walking through this **for the first bar** in our previous example: \`\`\`js .attr('height', function(d, i){ // d = 400 // i = 0 return d/10 * 1.5; // 400/10 * 1.5 = 60 }); \`\`\` Finally, we do a similar thing for the rectangle's \`y\` attribute so that it's aligned to the bottom of our 150-pixel high SVG. SVG's have their **origin** at the [top-left corner](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions#The_grid), so it's important to be careful about which direction your bars are going! \`\`\`js .attr('y', function(d){ return 150 - d/10 * 1.5; }); \`\`\` Note: again like jQuery, D3 is set up to use handy **method chaining** (🙋‍♀️ who remembers what that is from last time?). Methods like \`data()\` and \`attr()\` return the **selection**, allowing us to do _multiple things in a row_ without having to select more elements. `