Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Installation and Configuration

In this lesson, I'm going to show you different ways of adding D3 to your project. We'll start with a simple chart to kick off the course.

2.1 Installation and Configuration

Hi, and welcome back to Learn Data Visualization With D3.js. In this lesson, we are going to learn how to add the D3 Library to your project, and create a very basic usage example. There are multiple possibilities on how to include D3.js in your website or app. The first one is just to import the JavaScript file provided by the project. Just add the script tag using the distributed version to your page's head. There are also versions on CDNJS and unpkg. Another possibility is to download the source and host it along side your app. This is useful if you want to control availability yourself. Finally, if your project is larger, you can use to publish npm package named d3 and install it either with or npm as a node module. Besides the card d3 library, the project is organized in micro-libraries that add different functionality. If you use only a few of them and want to reduce your dependency size, it might make sense to include the ones manually. The JavaScript file I showed you earlier includes all of d3. Let's start with something simple but interesting. I'm going to create a bar chart for the frequency of letters in the English language to get you started using d3.js. If I'm going over to code two quickly, don't worry. You'll get the more detailed explanation in the anchoring lessons. Right now, I want to get something on the screen, so let's get started. Here I have a boiler plate, HTML page. Just the and body tag. First, let's dd the JavaScript library by using the official D3 URL. Then we need an SVG element to draw our charts on. I'm going to give it an ID so we can easily reference it later, as well as a width, and height. This is going to be the canvas we are going to draw on. We also need a script tag where we write the code to display our chart. First up is the data. I'm going to copy it in a list of letters and the relative frequency. Now let's do some graphing. First, we need to charge canvas, d3 offer some help of functions to work of a dome. I'm going to use d3.select to select the element with the ID chart. The d3 variable is available globally because of the import. Next we're going to need some variables to use later on. First, a margin object that defines margins for top, right, bottom and left. Then we're going to use that to calculate our effective chart width and height. We're also going to need some access. I'm going to talk about them a lot more in the respective lesson. But let's add the band scale for the letters. A band scale simply put is a discrete scale with a continuous output. That's why we are using a range form a zero to the calculator with, each scale has a domain that maps the data to an output range, which can then be withdrawn. For the band scale, that's simply the individual letters. We can map through from the data set. Note that I'm using the newer ES6 syntax with arrow functions. This might not work in an older browser, and it's definitely not recommended to use without a transponder like Pebble in your release production version. The y axis is a linear scale using the height first and going to zero. Otherwise, it would align the chart from the top. It also gets a domain, which by default would be between zero and one. But since none of our data points are going to be close to that value, we're just taking the maximum. Now comes to interesting part. We are going to draw our chart. First, I'm going to add a g element which is a grouping element. To offset the charts from the edges we are going to translate it tight margins. Note that in SVG land the origin of the coordinate system is on the top left opposed to the bottom left we're used to use in graphs and charts. Now we're going to add to the horizontal or x axis. I'm going to use a group element again and translate it downwards to the bottom of the canvas. To help of the axis generation, I'm also going to add a generated address the axis below the chart. Next up is the left or vertical or y axis. It's going to get the left access get generator, and we're also going to add text every 10% of the scale. This time we're also going to add a label using a text element. The label gets rotated and translated to show frequency left of the axis. Finally, we have arrived at the point where it is time to draw the data. First, we're going to select all elements of clause bar in the SVG to get an initial selection. This is done so new elements get merged with new data points if some all ready exist using the data function. Here we're passing in the dataset. Now we're going to enter the data. This is used to create missing elements. In our case that's a rectangle that gets the clause of var, and some x, and y values. Those are generated from the scales by passing in the data values. Likewise for calculating the width and height, we're using the scales as well. For the height, we have to work out the height to the bottom because the offset is going to be the upper bound of the rectangle. Let's have a look at our finished chart. It shows all the bars now. But it's a little bit boring with just the black bars. Luckily, we can use CSS to style those elements. Let's add a style tag in the head section of the HTML document, and add a fill color of orange for the bar class. And just for fun, let's also make it red on hover. You might have also noticed that the frequency label was missing. That's because it has no filled color. Let's make it black. Now the chart looks much better and when you have individual class, it gets highlighted. Not bad for a first example. As you can see there are a lot of moving parts to simple chart like a bar chart. And you have to do a lot of it yourself using a Spreadsheet. This also means that you can customize it to your very specific needs. And it enables you to create some truly amazing graphs. In the next lesson, I'm going to talk about SVG since it's the most important building block when doing data visualization with D3. See you there.

Back to the top