What do you want to learn?
Skip to main content
D3.js Data Visualization Fundamentals
by Ben Sullins
Learn how to bend data to your will with this powerful data visualization library in D3.js version 3.
Start CourseBookmarkAdd to Channel
Table of contents
DEMO: Drawing Shapes
DEMO: Drawing with Data
In this module, covering the basics of D3, we started out by looking at the origins. Where did D3 come from? What was the motivation behind it? We took a look at SVG objects, what are they, why do we use them and when did they really come into power with HTML5? We took a look at drawing shapes using standard SVG techniques, simply typing HTML to the page and seeing a shape being drawn for us. We also looked at using D3 to draw these same shapes. Then we got into the principles of what's behind D3, the selectors, the operators, and how we can actually use it to generate those SVG images. Lastly, we took a bit of a deeper dive into how to use data to actually draw something with D3.
Hi this is Ben Sullins and welcome to this module Basic Charting using D3js. This is the second module in our course and in this one, we're going to look at basic charting. We're going to start with building a bar chart. Now we built a bar chart in the previous module, so we'll continue from there and we'll revisit that example, so if you didn't catch all that you won't be left out. Then we'll look at coloring the bar chart. How do we actually use data to change the color of the bars? We'll talk about adding labels and how do we do that? Then we'll get building a line chart. Line charts are a bit different than bars in how the shapes are rendered and how we place them on the page and then we'll look at a scatter plot. Scatter plots are a real great way of comparing multiple measures, profit versus sales for example and seeing how things cluster together and where the outliers might be.
DEMO: Building a Bar Chart
DEMO: Coloring Your Bar Chart
DEMO: Adding Labels
In this section, we're going to look at adding labels to our bar chart. I'm going to jump back to what we've been working on in our jsbin and in here we'll make a it a little bit more interesting, let's just add some more data. You can see that our data again is doing this kind of scaling to whereas we add data elements it automatically adjusts to the size because of our functions down below and you could see the coloring is still working using our colorPicker function. Now if we wanted to do something here where we added the labels, all we really need to do is add another SVG element of text. We're already adding the rectangles, now it's time to add the text, which will act as our labels. Here again, I'm going to svg.selectAll this time we're talking about text, we want to pull in the dataset again. We use Enter to make sure that it'll add the elements if they don't exist. We're going to append text, the text of it is actually going to be the data itself. Now we'll pass in our attributes here, just like we did before we're going to use a more complex way of doing this that actually simplifies the display which is nice and I always like to get all my open and closed parentheses first that way I don't get a ton of errors and stuff as I'm going and I forget one somewhere along the way. So here, we're going to say, text-anchor middle and the x and y functions are going to be pretty similar to what we had before because we basically need to put them in the middle of the bars, so the x is going to be a function, which is going to be d and i just like the other one. This time though, we're going to do return i set the position, w / dataset.length just like the other one, we'll indent this a little bit, give these a y position, which matches what we have already in the bars. The text-anchor 1 because it has a dash in it needs to actually have quotes around it so you can see what it did there and the Excel value is kind of funny, but we have to do a little bit more because we have to adjust where it lives within the bar essentially. So when I fix my quotes there around text-anchor telling me where to go and I fix my formula to match what I have up above, you can see the numbers appear. One of the issues might be that their falling outside of this, so let's go ahead and increase the height just a little bit and you can see now my numbers pop-up for those top bars. Remember, we're doing *4 so that means at 25, it would take up the entire height of the SVG window. So let's add a little bit on there so it will actually be able to see those numbers. So it's still not centered properly, so instead of just doing exactly where the x is, I have to add a little bit more of a calculation here to divide where it is and what this is, is to figure out to basically account for the padding and add that to it, and then find the middle. So to my function down below I'm going to hit x I'm going to do +, the width / by the length of my dataset - padding / 2. There you go, so I have now the labels basically sitting right on top of my bars and if I wanted to I could also play with where these start from, notice the y is sampling using the same function that we used to draw the baseline for the bars. I could add something here based on maybe the font size to where they fit inside of the bars like that. Now if I were using color wisely, I may have to have another function that basically says if it's inside of the bar, also figure out what color the bar is and then that may adjust the font color. So for now, we'll just leave it like so and if I wanted to get more stylized on it, I could add a font-family. Remember when you have a - in it, you have to put the actual quotes around it and we need a comma between each one, so I have a sans-serif font, which is a little bit cleaner. If I wanted to adjust the size, this is basically just adding CSS properties now. Something like that, and again, we could change the fill of this object if I wanted to make them white like that. Okay, so, we've look at how to add labels, it's essentially adding another text SVG that follows basically the exact same x and y as our bars, the difference here, we're going to manually adjust them and stylize it little bit differently. I could add more of these and place them below, if you wanted multiple labels like percent + or -, but this should illustrate at least now how to draw a bar, how to color the bar, and how to label the bar. Labeling essentially will be the same for almost all the other objects. You follow a similar pattern as the shape you're drawing and you adjust it based on where you want it to appear on the top, on the bottom etc.
DEMO: Building a Line Chart
DEMO: Building a Scatter Plot
In this section, we're going to look at how to build a scatter plot. Now first, I'll just talk about what a scatter plot is. It's a good way to put dots on a page to see where things cluster or to identify outliers. Typically, we're looking at two measures, let's say sales and profit and how they relate to each other and maybe where are the outliers or where are the clusters of sales and profit combinations. In this example we're just going to continue using the dataset we've built because we're already familiar with it and we're going to put dots on a page, which are similar to what we see in line, except it's just not connected. So imagine the first time you drew a line chart you essentially put the dots first and then drew the line. We're essentially now just going to do that except we're just drawing the dots, we're not connecting them to build the line. Let's jump back over to jsbin and I'll start off where we left with our line chart and so for here what I'm going to do is I'm just going to wipe out everything that creates the chart and just leave our data. So we're essentially working with the same data that we were before and to create it, it's very simple. First, we create our SVG, just like we've been doing, d3.select body, append an SVG with the attributes, width of w, height of h, that gives us an SVG. Now we essentially just need to add dots or add those circles where the points would be. So I'm going to call this dots =svg.selectAll circle is the shape we're looking for, the data is going to be monthlySales, we'll hit Enter, then we'll append circle. We'll give it some attributes, cx instead of x. We'll use our data by calling a function and we'll return d.month*3, cy also a function this one's going to be return the height of our SVG -sales. The radius of our circles we'll just put it at 5 for now, and the fill of that dark gray that we like. Let's close out our attribute and viola, we now have the basic scatter plot. If I right click on this and take a look, Inspect Element, I'll drill down into my SVG, you can see what's doing here. So it's basically creating a circle for every data point in our dataset and it's going to use the attributes I give it. Now let's do something a little interesting and let's set up a key performance indicator that we'll use to color the different dots. Now key program indicator could be anything, but in the context of a business this is something that you would use to identify qualitative attributes of your data, not just quantitative like the numerical values or where the fit in a line, but the qualitative attributes. Are they good or are they bad? How do we define that? Usually, it's defined by the business in some context, but we can actually code that into our visualizations to make thing a little bit easier for users to understand. So I'm going to create a function here, I'm going to call it salesKPI. It's going to take our data, and it's pretty hardcoded at this point. If the data is >250 return, I have a nice color here of 33CC66 else if d<250 return the gray that we love so much. Okay, so we have a function now that will actually color code our data points or our circles and we need to change the fill down below from the being a static color to calling our function. So what I'll do is I'll create a function call, and I'll return salesKPI and I'll pass in the sales value and there you have it. So now, those points that are above or equal to 250 in sales are this bright green and the other ones are this dark gray. So when you look at this, what we're doing is we're coding into our data, a way for users to easily consume the data, we're highlighting the data points that are following some logic, in this case it's rather arbitrary, but you similarly could, and as we will later on in the course, add in more complex logic derived from other datasets and other rules. So this is just one way we can make our visualizations more meaningful to our users by using color , as well as the position on the page. Now what I'd like to do is add the quantitative attributes here as well by showing our hiding labels based on this KPI and for this we're going to create some more functions here. So we're create a function called showMinMax, it'll take our dataset, the column in our array, the value, and that type of label we want to show, so it's a little bit complex and there are many ways to do this. This is just one fun example that I like use when first explaining how to make things a bit more interactive and as we get into this later, we'll actually show how to give the user controls for this. So here, I'm going to have a couple variables the first one is going to be max and I'm going to say d3.max, which is a function that we can use, we're going to take our dataset and then we're going to have function, which is going to return whatever column is being passed in and we've learned that we can reference things with a dot as in d.sales, we can also reference them this way and this way if there were a space or any other kind of funny character in there, which is not recommended, but if there were, our functions would still process it correctly. Okay, so we have our max, which will take our dataset and find the max of the array essentially. Now we'll do a min, now we'll have a simple if function, if the type = minmax && val = max or val = min, then return val else if type = all return val. Add our final curly brace and we now have a function. Okay, so what this is going to do, we're going to call this when we want to add some labels. It's going to find the min and the max and then if the type equals the min and the max and the values are those min and max values, it'll return them, otherwise if the type is all it'll them otherwise it won't return anything. So we have two options here, we can say show all labels or show just the min and the max. Now let's go add our labels here, so I'm just going to drop this down at the bottom like we have with all the other functions, svg.selectAll text the data is going to be monthlySales, use our Enter operator, and then append text. For the text itself we'll actually call our function, so first we do the regular function call we use. Now we say showMinMax, give it our dataset, monthlySales, sales is the column we want to look at d.sales is the value and for now let's do min max. So that's our text function. Now let's do some attributes be we need to tell it where to put them and what they should look like, x function it's going to be very similar to what we did before, return d.month, we're going to multiple this *3 and then if you recall we had an offset off set -25, we can play with that later and see how it all lines up. For the y, we'll do very similar function d return this time the height-d.sales and you can see our labels have now appeared. Let's style this a little bit more, font size 12 px, font-family sans-serif, fill let's use that dark gray and we'll set the text-anchor to start, and there you go. So we now have a dynamic function which will allow us to manipulate what type of labels we'll see. We're playing with colors here and we're adjusting those to show our users the qualitative side of things and we're using our labels as a way to show the quantitative side of things. So maybe give it a little bit more space and what if we did all instead of min max? Now they all showed up. So imagine we could build a control, and we will later to do things like this, that would allow users to adjust this here and as you see it updates in real-time. So our data visualization can be highly interactive and that's really the nature of why we're doing this. If all we were doing is generating a single image, that's much simpler and takes a lot less coding to be honest, but what we're trying to do is make things interactive and fun in ways that people can touch and feel the data, so that they can really get connected to it and try to answer questions and learn something hopefully. Now let's recap what we've done in this module.
We started off by looking at how to build a bar chart and then we looked at coloring the bar chart and adding some labels. These are the common paths and methods that we use to manipulate a lot of our visualizations. So starting out with the bar chart, made a lot of sense because it's a very basic shape that we can all conceptualize. Then, we took a look at a little bit of a complex thing with a line chart and in the line chart it got interesting because we learned something new, something called path, which allowed us to draw polygons or in this case a simple line, but trust me that'll come in handy later when we try to draw things like maps that are more interesting, and lastly, we looked at building a scatter plot and some of the different ways we can use functions to dynamically show and hide labels, as well as adjust things by color.
Working with Data Part 1 - External Data Sources
External Data Sources
DEMO: Working with CSV Data
DEMO: Working with JSON Data
So we started this module talking about external data sources and the different types there were. You have the flat files, the static files that you're working with that are a local resources on your server. Then we also talked about APIs and the external dynamic data sources that we can reference using AJAX methods GET or POST. Then we took a look at a deep dive in working with CSV data, actually working with that data on our local server and all the different ways to parse that and draw things using it. Then we took a look at JSON data and JSON data is very similar to CSV other than it can be nested and it can have multiple levels in it so working with it can become a little bit more complex, but really is going to be the focal point for the rest of the data we use throughout this course because that's what you'll see most likely on the web as it really has exploded as the most common way to transfer data around because all programming languages can work with it very easily and a lot of programmers like it because it's very easy to read and consume visually.
Working with Data Part 2 - Getting Data from Web APIs
Web API Overview
DEMO: Calling a Web API for Data
Now let's take a look at actually calling web API for data. The first thing I want to mention though is that there's something we're going to run into very quickly when we do this and we need to be aware of this, it's called a Same Origin Policy. This is something that is built-in to web browsers and built-in to web servers and its long-standing and what it basically says is when you try to access something that's external, something that's not hosted on your own domain or on your own server, you could be injecting or opening up your code for hacks and malicious attacks. So let's take a look at some examples here. If I was at bensullins.com and I was trying to access bensullins.com/data, this would work. It's the same domain, it's just a different page. Similarly, if I was trying to get at bensullins.com/data?page=2, totally works. If I'm trying to pass in a user name and password to bensullins.com/data, still works, same domain, everything's good. Now what if I was trying to hit bensullins.com on port 81, now, it's a different port. If I was trying to https versus http, it's a different protocol and lastly, if I was trying to get data from a completely different site, the obvious answer is no. Now this is what the same origin policy dictates and like I said there, it's a configuration setting in your browser and on the web servers themselves. So it's possible to get around this by changing the config or in the newer way of transferring data on the web, there's other protocols that don't get blocked by this because they have a bit of a more complex way of handling the security. Now I'm not going to dive deep into how web security works here, I just wanted to introduce this as something that you need to be aware of because you're probably going to hit it very, very soon as you start to develop here. Now in this example I'm going to use, we're actually going to go get data from GitHub, but GitHub has an actual API and most things that see label API usually have the built-in protocols necessary to work around the same origin policy. So we shouldn't hit that error and with shouldn't have to worry about this now, but just know as you get into this, there's a lot of other things to consider besides just the code that it takes to actually make something happen. So let's dive in, let's go back to our Cloud9 environment and start coding. Here I am back in the Cloud9 environment and what I'm going to do basically is try to rebuild this exact same chart that we had or these two charts that are being generated by this monthlySales by category multiple JSON file and instead of using it here, I want to pull it directly from GitHub. So let me switch over and show me GitHubs API. Here under developer.github.com/v3 or if you just for it you'll get this page has all of this documentation on how to use GitHub to actually make requests and actually do things and just like I said before, it's basically hitting a URL and parsing the response. Now, fortunately, we're looking for one called Git Data and we're going to pullback what is considered a blob and a blob is essentially, it used to stand for binary large object, essentially now what it is, is a bit of data you want to retrieve and you can see the example here, GET which is a type of request if you remember from our last module when we talked about the different types, a repo which is a repository on GitHub, the owner, the repo name, get blobs and then sha which is a hash value that represents essentially the name of it. So what we can do is I've actually uploaded this already, so let me show you the repository and you can follow this along and I'll leave this up here for you to use and you can try it with your own GitHub repository. So if I go to github.com and I login you can see my account there. I can actually go down to my repositories and I have one here called d3js-resources and in here I have a couple different things. I have an image I have the CSV that we used, and have this JSON file, which is the one we're actually going to use for this module here and if you can remember it's actually the exact same thing that we had in the other one, it's that contents with the categories of furniture and technology and then the monthlySales embedded in there. So what I want to do is I want to actually pull this data live from the web, which means that if this were to change, it would actually change my chart as well. So in order to do that, I need issue that API command and so what I'll type in here, I'm going to go to the beginning of this URL, I'm going to leave the https, I'm going to add api.github.com, this time it's going to be repos/bsullins/name/contents and then the path to the file essentially. So this is another way to get the data back and when I hit this, you'll see some JSON that pops up. Now, remember, just like we had before, we have the header information, name, path, that hashed value, different URLs, and then we have the content. Now the content here is essentially that file. This is the file that we're looking at and this is the data we want. You can see the /n for newline characters, and all those embedded in there and then you see just what looks like a bunch of jibberish a bunch of mixed up hexadecimal characters and then I get a clue here at the bottom that there's actually something that is encoding this. So what I need to do is decode this data before I'm able to use it in my visualization. So let's take a look at how to decode some data now.
DEMO: Decoding Data
Public Data APIs
We started by taking a look at the web API overview. I showed you some examples of that on the web, gave you some context, looked at some of the different options that are out there. Then we dove into actually calling a web API for data using GitHub's API to have data that's stored in a repository accessible inside of our application. We looked at decoding that data and one of the key functions that you'll need to know when you deal with a lot of the data that comes from these APIs, and then we had some fun taking a look at some of the Public Data APIs out there.
Enhancing Your Viz Part 1 - Scales and Axis
Hi, this is Ben Sullins and welcome to this module on Enhancing Your Visualizations using D3. This is a two-part module and the first part we're going to talk about scale and axes. We're trucking along here getting towards the second half of the course and this is where we're going to really try to fine tune our visualizations and make them presentable to our end users. First we're going to talk about scaling. What are we talking about when we say scaling and what does that mean in D3? We'll actually go into an example of it. We'll talk about adding axes and referencing those in D3 and how we create them, and then we'll going to through a functional example of actually doing it. Let's get started.
First, let's understand what scaling is in D3 and to do this, I'll pull up a quote by Mike Bostock who's one of the founders of D3 and he says that "Scales are functions that map from an input domain to an output range." So those are the key things here we have an input domain and an output range. Let's take a look at an example. Let's say we have some sales data here and we have Year and Sales in thousands. We'll the input domain is going to be the min and the max values of our sales and that's going to give me something of a number line like this from 130 to 350. Now the output or the range is going to adjust that 130 to 350 into a pixel size that I can use to draw my visualizations. So imagine if as we've been doing far we are setting the width and the height of our SVG and then we're manually dividing and calculating where things should appear within that window, as it relates to the data, but instead what's going to happen, imagine if our data next year was at 5000 or it just exponentially grew, we'd have no way of dynamically adjusting our visualizations so you'd see the data, the data would appear lost, and so domains and ranges or scaling is the way that we can adjust the data values to fit within our expected output range. Let's take a look at an example here. First, we start by creating a scale and in D3 there's a function called scale and then you tell it what type of scale. We'll use linear for this course, but also look at the log or the power and there's also many other ways of creating different types of scales. For most cases that I come across in the real world, I use linear because it's the one that makes the most sense. Sometimes I do the log scales and those are if I'm doing some more statistickal things or my data has a very wide distribution, something that's in the billions, but everything else is in thousands. Once we create the scale, we assign the domain and the range, so if we looked at our previous example with the sales data, our domain, that the min and the max of the input data we're getting, of our sales values, and the output range, how big is our SVG going to be. Well let's say the minimum is going to be 10 pixels and largest one is going to be 100 pixels, so this will give us that scale of what it looks like and if we wanted to use this, we would simply write it out by calling our function and it would output the values there that you can see. Let's do this real basic example and then we'll get into some more tangible ones and actually using the visualizations we've been build this whole time. Let me switch over now and I'm going to go to jsbin.com.
DEMO: Scaling Data
So I'm going to talk about adding an axis, we're talking about the labels that go along the bottom and the edge to give context about what the data is and what we're looking at. So to create an axes in D3, we start by calling a function called axis and you need to reference the SVG first. Usually we put this into a variable, which is also turns into a function that we can call later. Once we do that, we add the scale, which we just finished building and this tells the axes essentially the min and the max values and what that looks like. We give an orientation, in this case for x axes we'll do a bottom. If we wanted to do a vertical axes we'd do left to right, and then we add it to our SVG, pretty straightforward. Now let's take a look and add one to the chart that we've been building.
DEMO: Adding Axis to Charts
So in this module, we took a look at scaling what that is and how that works with the domain and range. We've actually done some examples of scaling, that way the charts can, no matter what the data is, fit with inside of the window that we're trying to draw. We've looked at adding an axis and what that is and we've looked at the couple different options and examples of converting a date value and then me showing that using some formatting, as well as adjusting the number of ticks that show on the different labels. I hope you've been having fun so far, now it's going to get even better as we're going to look at ways to make things interactive and fun for our users.
Enhancing Your Viz Part 2 - Interactivity
Hi this is Ben Sullins with Pluralsight and welcome to the second part of this module on Enhancing Your Visualizations using D3 on interactivity. We're getting towards the end of our middle section here on Enhancing your visualization a and we're going to start by looking at adding a filter. We'll look at how to animate things, animations usually detract from visualizations, but in some cases when we're adding a filter or changing the data it's really important to make that smooth and feel natural to our uses so that way the overall experience is positive and lastly we'll look at adding some tooltips, ways that users can hover over things and see some more detials. Let's get started.
DEMO: Adding a Filter
DEMO: Animating Transitions
In this section we're going to look at animations and the transitions between things and how the viz may change and what we can do to make that a little bit smoother for our users eyes. I'm going to switch back to the viz we've been working on, the one we just finished adding the filter too, and in here, we have our transition that goes for changing the axis and changing the line. What I'm going to do now is just make that a little bit smoother for our users. So on the part of the update function that actually changes it, where we do the selectAll path and we change the dataset by calling the line function. I'm actually just going to add something in here right before that, that's called transition. If I go ahead and Save this, Preview it, try it again, look at that, it's a bit more animated. See how it's not just switch instantly between it, but it's actually drawing it slowly. Well that's what a transition is, it's a way to change state from one path to the other and draw that in a way that seems that somewhat natural to the eyes. Now, there's a lot of different ways you could do this. We can also add something here called duration and if we wanted to make it let's say really slow, it's in milliseconds, so we'll add 5000, I'll save that hit Preview. Now, it should just take it's sweet time getting over there and you can see that, and the third thing that we might want to consider here is the type of transition. What we're doing now is called linear and so we add an operator called ease and this controls the quality of the transition. So now, when I change it, it should take 5 seconds and be this slow linear progression to get there. Some other fun ones are elastic and I'll change this to 3 seconds, it's a little bit less painful to watch. I'll Save that Preview it, now this one is kind of spongy, kind of bouncy, so it jumps into position and then bounces back and if we go back the other way, you can see it there. Another one to explore is circle. Circle is almost imagine if the transition were on a water wheel that doesn't move linearly like as it gets heavier on one side it moves faster, you can just see what that looks like here, slow and then it speeds up toward the end and just lands right in position. There you go. You can see how it redraws history and the last one is a bounce. You can probably take a guess at what this one looks like, kind of bounces off the endpoint and ends up in the right position. So these are just some fun ways that we can animate things. Here I'm doing it on a change even for a lot of cases I may do this on load, so when the page first loads, things get animated from the bottom or the transition where it comes from and the type. All of this is just other ways to effect how the presentation is perceived in the overall experience for your end user.
DEMO: Adding Tooltips
So in the second part of this module on Enhancing Your Visualizations, we looked at adding filters. There's different ways to add filters a common one I like to do is to give my users a drop down and then have all the logic built-in to my code to handle what that means on the frontend. We looked at animating transitions and different options we have for transitions, just another way to make the overall experience quite good for our users, and lastly we took some fun examples of adding tooltips, as well as I left you off with some homework there to try to figure out how to update the tooltips based on the results of a transition.
Hi. This is Ben Sullins with Pluralsight, and welcome to this module on Mapping using D3.js. We're heading in the home stretch here, and we're getting into some really fun stuff where we can draw maps using all kinds of interesting new stuff built into D3. We'll take a look at the first part of that, which is called GeoJSON. Then we'll get into some demos actually drawing maps, show you how to add color to the map or what's also know as a choropleth, and we'll talk about adding points as in cities on states. Let's get started.
DEMO: Drawing Maps
DEMO: Adding Color