 Hi. So my name is Joanne Cheng. I'm a developer at Thoughtbot out in Denver, Colorado. For those of you who don't know where Denver is, it's at red dot in the middle of North America. That's where I am. And this is the rest of our offices. So I mostly do web development with Ruby on Rails and a little bit of JavaScript and other various technologies that come our way. But I've been really fascinated by the field of data visualization for the past several years. Data visualization simply defined as just the study of graphical representation of data. But it's associated these days with these really rich interactive web applications that let you explore data and see data in different ways. But I think to understand data visualization, we need to look at a couple of early print examples. So this is a bar graph of important export quantities of Scotland by an artist named William, a man named William Playfair. He released a book called Commercial and Political Atlas in 1786. During that time, data was mostly presented in dense tables of numbers and Playfair decided to use shapes instead of numbers because he thought people can compare things a lot easier with shapes. And I think he was right. Because of this book and other books he wrote, he inspired other interesting representations of data. And this is one of my favorite data visualizations. This is a map of the Soho District of London. It's a map of the Chloria outbreak in London in 1854. When this outbreak happened, there was a theory that all the diseases and all the death was caused by pollution or bad air. But Snow's theory was that it was caused by a contaminated water pump, particularly this one. And so to prove this theory, he plotted out little black rectangles which are basically little mini bar graphs on each street that represents the number of deaths per address. And because of this, he was able to prove to health officials that he was able to convince health officials to actually investigate that water pump. So if this data were presented in a different way, perhaps in just a regular bar chart, it probably may not have had the same effect as this map does. And so I love this map because it caused people to take action and change the way they look at the same set of data. And so with these two print examples, I wanted to show that sometimes you need to present data a little bit differently. And as web developers, our nature is to just present data. We get data from various other services, whether it's a database or another service, and we present it in a more palatable way. And so how can we share data creatively on the web when we need to? We can use images like in the print examples before, but we live in an age of dynamic web applications where data updates differently. And there's a lot of really well-made configuration-based graphing libraries out there, but we're restricted to predefined graphics and interactions. We lose that creative element to visualizations that we get through pencil and paper. They're also really difficult to style, and they stick out on a really well-designed page. I've worked with a lot of designers who don't like high charts because it takes them a very long time to get it the way they wanted to because they have to go into JavaScript. And they also, it also sticks out, they spend a lot of time designing a page and then they have to look at something that someone else designed. So this is where D3.js comes in. We need an expressive way to present data on the web when we need it. And so D3.js is a JavaScript framework or DSL written by Mike Bostock, who is currently at the New York Times. D3 is usually associated with making graphs and graphics, and I know this is a talk about data visualization, but it's not a visualization framework. It's really just a flexible way to manipulate the DOM with JavaScript arrays and objects. And when you need to be creative with your communication on the web, D3.js is an amazing tool. So to show you how to get, to show you kind of the basics of D3, I had this little example. It's gonna take me a little, a little long. So I have this mostly, oh, that's, sorry, one second. Can you all see? Okay, cool. So I have this mostly empty HTML page and this mostly empty JavaScript page. And to get started, I have this CSV of planet information. You have all the planet names, whoops. You have all the planet names, the diameter of each planet and the average distance from the sun for each planet. And I wanna basically create the solar system with D3 on this page. So I'm gonna do that with D3 and with creating every planet with SVG. And so we only have a body tag in this HTML file. So I'm gonna create an SVG container to contain this visualization I'm gonna make. So we now have an SVG container and what I did in the code, whoops. So that first line, I just, that first line, I just made a selection on the body tag just by passing in a selector to the select method. That's just gonna return the first matching, first matching selection. And then I append an SVG element to it. And now that SVG variable, or I should call this SVG, now this SVG container variable, the selection refers to this SVG element because when we append an element, it returns the element that we just appended. And that means when we call methods after append, we can call methods after append to change the attributes of that SVG element. So I can change the height and the width at a class to this. And that changes in our DOM. Now we need to get the data from the CSV file that I showed you here. D3 has a lot of helper methods that lets you make an HTTP request and then get the data back and it also parses it in a more friendly way to work with. So what this method, what I just did was I just made an HTTP request to planets.csv and then I get a callback function with the CSV parsed and the CSV parsed and easy to work with. So now I'm gonna actually draw the planets for every row in that CSV file. Oh, whoops, thank you. So now each of these circles represents a row in that CSV file that I just referred to. And let me explain what I just did because I just wrote a lot of code. So on line 12, I took that SVG container that we created on line five and I selected an element that doesn't exist yet. It's kind of a placeholder for, I made a selection and it's going to be a placeholder for the elements I'm gonna create. On line 13, I bound the data to that selection that I made in the previous line. And then on line 14, I entered the data. And what that's gonna do is it's gonna call methods after enter for every element in the array, which means for every element in that planets array, I'm going to append a circle to the SVG container. I'm gonna set the attribute of the Y position for every circle to be half the height, setting the radius to 10 pixels. And I'm gonna set the X position so that they're just kind of lined up in a row like that. And as you can see, I can either pass in a static value to this attribute function as a second parameter, or I can pass in a function. And when I pass in the function, I get two other parameters. I get D refers to the element in the array that I'm on and I refers to the index. And so now we have these nine black circles and they don't really mean anything. They don't really represent the planets. So I want to change the size of each of the circle using the diameter that I have in my CSV file. So let me explain what I just wrote. So D3 has a lot of other helper modules that let you find and explore your data. So for in online 12, I found the max of, I found the biggest diameter I found the, sorry, I found the biggest radius that I had in my dataset, just with this D3 max method. And I passed that in to create a scale. So online 15, that's just kind of an initializer for a new linear scale, which is the mapping we want between, we want a linear relationship between the radius of the planet and the number of pixels that show up on the screen. The domain is the number that we're going to pass into this function, this planet radius scale function. That's going to be the actual radius of the planet. And the range represents the number that we want back. This is going to be the number in pixels. So online 25, when I call that planet radius scale function that I generated online, online 15, I'm going to get a value that maps correctly to the scale that we want. And so it displays data in like this, in the correct scale and the correct mapping. And then we can do the same thing for, we can do the same thing for the planet distance because we have that distance from the sun attribute. So that's kind of our solar system a little bit. You can kind of see that everything is now relative and moved in the correct exposition. And we did that just by creating a scale like we did for the radius. Another thing we can do, we have the name of each planet. And what I did or what I can do is change the class of, or add a class to each circle that is in name of the planet. That doesn't do anything now, but I created a CSS file that would color the planets accordingly. And so we were able to do that because D3 lets us just add classes whenever to elements that we want. In addition to this, we also can get, we also can change the positions using transformations. Sorry. We could even also use animation transitions. D3 also gives us that capability. And all I did was basically change an attribute and call transition and set a delay before changing that attribute, on line 38 to 43. So that's kind of an introduction to D3, just kind of the most basic parts of D3. There's a lot of benefits to creating visualizations in this style. It's a lot more flexible than drawing things with traditional drawing libraries. Notice how I never called a method called circle or I never set a color directly using a method in the D3 API. It's designed to be really flexible and not be bound to any specific browser technology. And people have used D3 to draw divs and shape divs and also to draw on canvas. And because you have such, it's also really easy to style because you're controlling what classes are getting set on each of the elements. And because you have so much control over your graphics, you can also get a lot of performance benefits, potentially, if you're doing things correctly. But there's a couple of downsides. Mostly, because it's so flexible, you also have to create your own mobile views and responsive views. So you have to be the one to listen for whether the browser's resizing or detect the browser size and make sure your visualizations are good for smaller browser windows or mobile views. And there's a lot of also potential performance problems when you create too many SVG elements, which is really easy to do. For instance, I had this idea of creating this arc diagram in D3 to display pull requests on, pull requests and issues on Rails because I thought it'd be a really cool way to view GitHub issues. But unfortunately, this is what happened and this is 13,000 issues on GitHub. So this performed poorly and then when I tried to add mouse events to everything, that wasn't smart. So the theme of this conference is the future of JavaScript. And I was a little hesitant to talk about D3 because this technology has been around for a few years and development started even way before D3 was officially released. But technically, it's APIs designed to adapt to new browser technologies by not binding the user to any specific type of graphics. And more importantly, the flexibility of D3 to create graphics allows for more interesting ways to communicate. So for example, the idea of this planets visualization came from this article that was released somewhat recently. This is, oh, this is, so this was, this was, sorry, a visualization released by the New York Times last year. And I really, this is kind of one of my favorites. What I really love about it is it uses of a cabular that you know, you kind of know that this is planets that are moving and also it uses scales that are familiar to us rather than discrete numbers. And you can also see like crazy outliers as well really easily. And what is also, all the data for that visualization was populated through this table. So it kind of goes back to that original print example of taking numbers and translating them into something more readable and more friendly for humans. So I think the future of data visualization on the web lies with the creative ways that people use existing technology. And D3JS gives developers and designers both the expressiveness to be creative and flexibility to make use of new and upcoming browser technologies we'll have. And that is it. Have you ever, oh, hello. Have you ever tried combining D3 with other libraries like Backbone or Angular? How did you find that? Yes, so I've used it with Backbone. I actually had, I did a little, so Backbone, it's okay. Well, I actually, I played a little bit with Angular a couple of weeks ago actually. And what I really like about Angular is because you have like these data attributes that you can attach. It's really easy to attach that to like the D3 objects that you're creating because you're setting attributes all the time. But for the most part, if I'm doing a lot of requests to other services, then I will use something like Backbone or Angular to handle that rather than the D3 methods. If I'm only making one request, then I'll usually just use whatever D3 has or even just jQuery. One question I've wondered with D3, I've played it a couple of times. Where do you find the best place to go to learn is? Because it can feel quite complex. It can feel like to try and achieve a lot. There's quite a lot of code to write. And you just showed actually how it's quite simple when you break it into pieces. But are there any specific resources or places that you would go to on the web to read about it or learn about it? I don't have internet, sorry. There's a really good book, I think recently released by O'Reilly. Okay. I think it's called, it's D3, it's like kind of an introduction to D3. I don't know the name of the book off the top of my head. We can find it. But it was released I think around last year. I think June. It was really great because it broke down kind of how to create D3 visualizations and also like parts of the DOM and the introduction to SVG and... Okay. Awesome, thank you. Any last questions before coffee break? No, awesome. Thanks again.