How To Draw A Chart In D3

Learn to create a bar chart with D3 - A tutorial for beginners

8dC3-aSGvqDWCs-25l0ny4Un8uV7ujrgEEoG — Want to learn D3 properly? Check out our free class likewise.

D3.js is the most popular JavaScript library for creating visual representations of your information. Nonetheless, information technology's a chip catchy to learn, so I recall information technology's of import to start softly.

In this tutorial, you'll learn how to create your very first bar nautical chart with D3. It'll give you an intro to the most of import concepts, while still having fun edifice something.

We've also created a free D3.js grade on Scrimba. Bank check it out here.

At present let'southward go started.

The setup

We'll utilise the simplest setup possible, simply importing the D3 library from a CDN.

                <html>     <head>       <link rel="stylesheet" href="alphabetize.css">     </head>     <body>       <svg></svg>       <script src="https://d3js.org/d3.v4.min.js"></script>       <script></script>     </body>   </html>

We'll write our D3 code in the script tag. Secondly, we've added an <svg> chemical element to the DOM. If you want to play around with the code as you read this tutorial, check out this Scrimba playground, which contains the concluding version of the code.

The first thing we're going to practise is select this chemical element, and manner it a piddling chip.

                var svgWidth = 500;   var svgHeight = 300;  var svg = d3.select('svg')       .attr("width", svgWidth)       .attr("top", svgHeight)       .attr("class", "bar-nautical chart");

We're giving information technology a width and height, plus a .bar-chart class. In our CSS, we've styled the grade like this:

                .bar-chart {       background-color: #C7D9D9;   }

Hither'due south the result:

Now we have a nice SVG container where nosotros can draw our bar nautical chart. The code for doing so is a bit complex, and then let'south first look at the entire matter and so walk through each step:

                var dataset = [lxxx, 100, 56, 120, 180, 30, forty, 120, 160];  var barPadding = 5;   var barWidth = (svgWidth / dataset.length);  var barChart = svg.selectAll("rect")       .data(dataset)       .enter()       .append("rect")       .attr("y", part(d) {           render svgHeight - d       })       .attr("height", office(d) {           return d;       })       .attr("width", barWidth - barPadding)       .attr("transform", function (d, i) {            var interpret = [barWidth * i, 0];            render "translate("+ translate +")";       });

selectAll()

The first thing we do might seem a bit weird, we're doing .selectAll("rect"), however, we haven't notwithstanding created whatever <rect> elements yet. And so this method returns an empty choice (an empty array). However, we're going to create <rect> elements soon using enter().suspend().

This might seem a fleck confusing. Simply explaining how selectAll() works in combination with enter().append() is exterior of the telescopic of this tutorial. If you desire to understand information technology properly, read this article very carefully.

data()

We then chain the data() method and pass in our dataset. The information will finish up dictating the height of each bar.

enter()

The next pace is to chain the enter() method. The enter() looks both at the dataset you passed into data()and at the selection we did with selectAll('rect'), and then information technology tries to look for "matches." Then information technology creates a mapping between your data and the DOM.

But recall, the selectAll('rect') method returned an empty selection, as there are no <rect> elements in the DOM yet. However, the dataset has nine items. So there are no "matches."

The enter() method so allows yous to create a new <rect> element in the DOM for each detail in the dataset which doesn't nonetheless take a respective <rect> element.

append()

On the next line, we append a <rect> element for each of the items. Every bit this method follows after enter(), information technology will actually be executed nine times, ane for each data bespeak that lacks a corresponding <rect> in the DOM.

attr()

The next step is to decide the shape of each of the rectangles (our bars). We need to give it four attributes: meridian, width, x-position and y-position. We'll apply the attr() method for all of these.

Let's start with the y-position:

                .attr("y", part(d) {       return svgHeight - d   })

The first parameter dictates which attribute we want to add: in this case, the y-coordinate of the bar. In the 2nd, we become admission to a callback function in which nosotros're going to return the value we desire our attribute to take.

Hither, we go admission to the data indicate at this pace of the iteration process (recall, this method is invoked in one case per item in the dataset array). The data point is stored in the d statement. We'll then decrease the given data point, d, from the top of our SVG container.

X and y-coordinates are e'er calculated starting from the top left corner. So when we decrease the height of the container with the d value, we get the y-coordinate for the top of the bar.

To make the bar stretch from this point and down to the bottom of the SVG container, we'll demand to give it a height equivalent to the value of the data betoken:

                .attr("top", function(d) {       return d;   })

The adjacent step is to give it a width:

.attr("width", barWidth - barPadding)

Hither, nosotros're merely passing in a simple expression every bit opposed to the callback function, as nosotros don't need access to the data point. Nosotros're simply taking a basis in the barWidth variable which we created further up, which is the total width of the container divided by the number of bars. In order to go a small gap betwixt each of the confined, we'll also subtract padding, which nosotros've defined as v.

The terminal stride is to ready the ten-coordinates. This expression is a bit more than complex:

                .attr("transform", role (d, i) {       var xCoordinate = barWidth * i;       return "translate("+ xCoordinate +")";   });

Here, we're commencement of all taking advantage of a second parameter in the callback, i. This is the index of the given item in the array.

To set up the coordinate for each of the confined, we'll simply multiply the alphabetize with the barWidth variable. We'll then return a string value which describes the transformation for the x-axis, for instance "interpret(100)". That would button the bar 100 pixels to the right.

And just like that, y'all accept your very first bar nautical chart in D3.js.

If you're interested in learning more than nigh D3.js, be sure to check out our gratis course on Scrimba.

Thanks for reading! My name is Per Borgen, I'grand the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive spider web design bootcamp if want to learn to build modern website on a professional level.