A D3 chart

43:["$","title",null,{"children":"Intro to D3 part 1: a man walks into a barchart | Dan Swick | Observable"}] 4b:T4f7,md`## 0. What the heck is D3 anyway? You've probably heard of D3 in your dataviz travels. It's pretty popular, especially [among](https://github.com/sharonsu94/data-journalism-and-d3) [journalists](https://www.niemanlab.org/tag/d3-js/). It was invented by [Mike Bostock](https://bost.ocks.org/mike/) (formerly of the New York Times and currently of the company that hosts this notebook) in his giant brain. > D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 😕 ### _What does that mean??_ #### It means taking data... | City | # of rats | | ----- | ----- | | Cambridge | 400| |Boston | 900| | Somerville | 300 | | Brookline | 600|
#### ...Binding it to HTML or SVG elements... \`\`\`html \`\`\` #### ...And manipulating those elements based on the data. `4c:T1126,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. `4d:T9dc,md` #### First, create an SVG element to house our rectangles later on \`\`\`js var svg = d3.select('body') .append('svg') .attr('width', 500) .attr('height', 150); \`\`\` _If you've used JQuery before, this will look like familiar territory. Select the \`body\` element and append some stuff to it_. There are a couple of key differences, though: 1. D3's append only takes the name of the element rather than actual markup. \`\`\`js d3.select('body').append('svg') // versus $('body').append(' from: https://lumiamitie.github.io/d3/d3-enter-update-exit/

from: https://lumiamitie.github.io/d3/d3-enter-update-exit/

If we put everything together, our chart is pretty flexible and can be updated as needed. Here's how that might look. The first cell is a general function we can reuse to draw charts whenever we want. The following cells show how you might use that function: `4f:[] 47:{"id":"c3b35ea7c2918e1e","slug":"intro-to-d3-a-man-walks-into-a-barchart","title":"Intro to D3 part 1: a man walks into a barchart","thumbnail":"94693100e66de6a8c1216de8aded9c452033d521e52d392c77844bbf7c9a4aad","access_level":"public","create_time":"$D2019-05-08T05:35:22.676Z","update_time":"$D2019-10-10T02:10:09.962Z","view_time":null,"first_public_time":"$D2019-05-08T18:05:58.258Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"21a6859df74ef0b0","login":"danswick","name":"Dan Swick","avatar_url":"https://avatars-next.observableusercontent.com/a55db82953a5b821daa61e47633dabc1c2b386477ad0e07eb1c6447faa6612ca","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"858367eabf0f2b9a","login":"danswick","name":"Dan Swick","avatar_url":"https://avatars-next.observableusercontent.com/a55db82953a5b821daa61e47633dabc1c2b386477ad0e07eb1c6447faa6612ca","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"858367eabf0f2b9a","login":"danswick","name":"Dan Swick","avatar_url":"https://avatars-next.observableusercontent.com/a55db82953a5b821daa61e47633dabc1c2b386477ad0e07eb1c6447faa6612ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro to D3 part 1: a man walks into a barchart","cells":[{"id":0,"value":"md`# Intro to D3 part 1: a man walks into a barchart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Welcome to D3! D3 is very powerful and very flexible. Usually, when something is both of those things, that means it doesn't score high on the \"approachable\" axis and that is true of D3. It can be pretty tough at first, but we'll work through it together and you'll be topping the charts soon enough!\n\nEditor's note: this notebook borrows _very heavily_ from Maptime Boston's great [D3 workshop](https://maptimeboston.github.io/d3-maptime). It is tweaked a bit for Observable, D3@5, and humor.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## D3 folks are prolific\n\nIf you're ever feeling stuck, it's likely someone out there has encountered a similar problem and written about it! Here are a few places to look for help when you need it:\n\n- [D3 documentation](https://github.com/d3/d3/wiki). Start here!\n- Be sure to check out the [D3 gallery](https://github.com/d3/d3/wiki/Gallery) for **tons** of inspiring examples.\n- [Scott Murray's tutorials](http://alignedleft.com/tutorials/d3) are fantastic (these were in your prep work for this week, but it's worth repeating).\n- [Mike Bostock's](https://bl.ocks.org/mbostock) bl.ocks page is **full** of mind-blowing things.\n- Check out the official [D3 account on Observable](https://observablehq.com/@d3) for **EVEN MOAR EXAMPLES**\n- Talk to one another! Sometimes the best way to understand a problem is to try explaining it to someone else, then work together on a solution.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`We'll come back to more D3-tails (get it?) later and learn more about what makes it unique. For now, let's do what we do best and learn by getting our hands dirty.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"chartCopy = { \n const svgCopy = chart.cloneNode(true); // cloneNode to make a new node. Otherwise Observable gets weird\n\n return html`${svgCopy}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md` ## Part 1. Simple barchart from scratch 👩‍🍳\n\nLet's start by making that simple bar chart from above. For this section, we're going to work in our text editors. Observable will be great for the next section, but it's not ideal for this one so we're going to write code the old fashioned way. \n\nDon't worry, we'll come back here in a bit.\n\nBegin by scooping some boilerplate into a new HTML file. Feel free to save this file anywhere.\n\n\\`\\`\\`html\n\n\n A D3 chart\n \n\n\n \n\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`\n**Next**, add some _data_. We'll use those rat numbers from the earlier table. Inside your \\`