D3.js Tutorial - Learn How to Use D3.js

well hey everybody my name is Jessica Purina and today I'm going to be talking to you about something I think is incredibly powerful and that thing is data good data can help individuals and companies make better decisions it helps guide governmental policy around the world and it can make complex trends or topics clear and understandable specifically I'm going to talk to you guys about how to harness data using d3 because the problem with data is that it usually looks like this that's not easy to understand so how do we transform a dense dull text file into an interactive interesting informative visualization so that's where ds3 comes in so I'm gonna be talking to you about the what and the why of d3 and then going over how you can actually get started making some data visually appealing so what is V 3 it's just a JavaScript library although it is quite massive and it is there to help you make the visualization of your dreams it was created by Mike Bostock and some of his colleagues earlier at Stanford and it stands for data-driven documents hence d3 so the strength of d3 is that it does a great job of manipulating those data-driven documents in a really efficient manner using the web standards that we all know and love or love to hate depending on your opinion and it is actively managed by Mike Bostock on github he is updating it all the time and adding in great new features and libraries so why would you want to use d3 increasingly companies are relying on more data-driven decisions so being able to sort through that data make it clear and understandable and digestible is more important than it's ever been and as you saw with that Fitbit data I showed data doesn't really tell any sort of a story that's up to you d3 helps you tell that story clearly quickly and easily because it's really hard to get what you want done if you don't have the right tools so pretty much you just tell d3 what you want it to do and that's what it's going to do it's declarative it's also data bound which means that once you've set it up as your data changes your visualization is going to change and you're not actually going to need to do anything beyond that it works using SVG's so you get the advantages of something that is scalable resolution independence and search option search engine-friendly and it makes making things interactive really easy and I personally love interactive data visualizations so these are some examples of things that have been made using d3 so you've got a difference chart this one for temperature but you might also see it on a website like etrade or some sort of finance thing if anybody has used the amazing software Daisy disks they use this kind of visualization to show your hard drive and how much space files and folders are taking up maps are probably the clearest use case for visualization this one comes from The Guardian and it's showcasing Alaskan communities that are at risk from climate change and it's interactive these liquid field gauges are probably not what you think of when you think of data visualizations but this is the kind of stuff you can do with p3 and if I had a live version of this that liquid actually moved and when you load it up they spill so I guess I'm trying to say is if you have data you can visualize it in interesting ways this last image is from the Washington Post and I don't know much about baseball but I can totally understand this it is like pitches that have been thrown to and hit by Bryce Harper who apparently has the perfect baseball swing so how does d3 work the central principle of d3 is that it's designed to use CF style selectors to make its node selections once you've made those selections you can use operators to manipulate them in a fashion that's very similar to jQuery alright after you've got that you just want to make it depend on some data and definitely utilize additional libraries because they abstract away some of the complexity and they're going to save you a lot of work so I'm going to show you two quick demos for how you can utilize d3 I'm going to show you some data bounce circles and then we're going to get into that map that's on the Left a little bit I'm not going to talk about the donut chart much but if you have questions I'll be happy to talk to you about it later so alright I've got this really blank boring page and we are going to turn this into something interesting all right so the first thing I'm going to need to do I'm going to do some drag-and-drop coding to save you guys from having to watch me live type I need some data all right so I've got some truly arbitrary data countries attached to numbers and things that don't mean anything it's just there so that we can get some variety in the circles that we'll eventually see after we've got our data we're going to create our SVG container and this is what's going to actually hold our visualization so I'm naming the SVG and I'm using d3 dot select and I'm selecting the div with the ID example from my HTML page and you can see that this is a very basic HTML page just what four divs and then I've got some script tags for clarity I put the scripts in the bottom so you guys can see that I'm pulling in these threes library as well as the additional libraries for topo Jason and data Maps which you'll see in the map example all right so I'm attaching my SVG to example and now I'm going to actually append a d3 SVG element that's going to be the thing that holds our visualization and I'm just going to set some height and width some background color an interesting thing to note is that in jQuery if you were to do the selecting of a div and then append more stuff after it what actually would get returned is the original selection so that you can keep appending stuff d3 works a little bit differently in that when I append this SVG everything afterwards is actually to that SVG so that as you append things everything is being added to the last thing you appended alright so now we have some data we have a container and this is going to look like a bunch but I will walk you through it so we have the SVG that I created and I'm going to say select all circle which is weird because there are no circles anywhere but we'll get to that in a second all right after I selected my non-existant so far circles I'm going to bind my arbitrary data to my visualization and then I'm going to use this enter method I'll stretch this out a little bit see guys can see it a little bit better all right and enter is kind of where the magic happens with d3 that method is basically saying for every row in the data what comes next is what I want you to do and what I'm telling it to do is to append a circle to my SVG and set its attributes its X and y-axis its radius its color based on the data that it was linked to after that I'm just adding on a little title to every circle so if your mouse hovers over it you can see the name that's attached to it and from that if we refresh our page we get that so I couldn't do a little hover you can see some names move this more centered what's nice about this is once I have it set up if my data were to change you know say the population explodes your visualization changes you don't actually have to do anything to make that happen so if you have continually updating data d3 has you taken care of so that's an example of some basic things you can do with d3 but they're not particularly compelling or visually interesting so we're going to do a map and I'm going to show you how that is actually in some ways a lot easier so this is a map it's based on some census data from 2010 on medium medium state income so you can hover over each state and see its name and its median income so I'm not going to drag and drop code this but I am going to walk you guys through what I did so on this one I'm using the CSV method to bring in an external CSV file which looks like this I did not use all of the data in this file I just pulled out the state and the median income that's all I needed so then I'm going to take that data that I pulled out and I'm going to use it to do something interesting line seven I'm using d3 to select the body tag just and set it the background color to black you should not do this this should be done in CSS I just did it to show you guys that d3 can do it beyond that I'm using my data maps library to request a new data map I'm going to ask for them to set it to the US attach it to the div with the map container ID and then I'm sending a few other parameters but the really nice one is this pop-up template so this is the thing that uses the geo ID which is something that data maps gives you to show you which state it is and then I'm using a function to find the median income for that state based on the geo ID that I get back that's how you have the two linked together and then this is actually the most basic part of the entire thing I set up some colors all different shades of green and then I'm going to loop through my data with each time I loop I'm going to pull out the current state and it's going to be a class selector which is why I have the dot appended to the beginning and I'm going to use just a bunch of if-else statements to set the color based on the income bracket all right so that's going to set the color for each 50 state and then on the bottom I just have a resize method that means when I resize the window it'll look nice and pretty and it won't get messed up so that gave me this which is honestly probably even easier to do than the circles example I also did this donut graph which is not a great way to visualize this particular data because all the slices look exactly the same but it just shows you you can visualize the same data in a myriad of ways depending on what you're looking to do so that's what I want to show you guys with d3 I like you know I hope you found it interesting I hope you can see some of the things you're going to be able to do if these are the libraries I used if you're interested in using d3 with react there are some people that have done it before there's raspbian org and if you're interested in data visualization as a whole Udacity has a really interesting course on it so thank you guys [Applause]

Channel: Fullstack Academy

Views: 70,283

Rating: 4.8336482 out of 5

Keywords: D3.js, D3.js Tutorial, How to Use D3.js, learn D3.js

Id: _sqqxcRf9hw

Length: 11min 19sec (679 seconds)

Published: Mon Mar 06 2017