Skip to main content
Script of the Day D3 js 2

Welcome to D3

If you’re looking to make data visualizations on your web app, then look no further than D3.js! This popular library is the industry standard for making beautiful visualizations. See some examples here: https://github.com/mbostock/d3/wiki/Gallery

What is D3?

D3 is a front-end/client-side technology. It lets you append, remove and style DOM elements. It can be used to read in external data and manipulate DOM elements based on that data. It can also do these things independently of any data.

A Simple Exercise

Copy the following html and load the page (beware reformatted quotes if you’re copy-pasting). Notice how D3 selects the ‘h1’ element and changes the text. See if you can do something similar to the other headers (hint: We can target the other headers by replacing 'd3.select('h1’)’ with 'd3.select('h2’)’ or 'd3.select('h3’)’ and then change the text and color as desired).

<code><html>
 <head>
 <title>D3.js in 10 minute</title>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 <h1>This is a h1 header.</h1>
 <h2>And a h2 header.</h2>
 <h3>Lastly, a h3 header.</h3>
 <script type="text/javascript">
 var h1 = d3.select('h1');
 h1.text("This is h1 text replaced by d3");
 h1.style('color','red');
 </script>
 </body>
</html>
</code>

Binding Data

What if we actually wanted to do something with data? Let’s look at how to create DOM elements based on data.

<code><html>
 <head>
 <title>D3.js in 10 minute</title>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 var dataArr = [1,2,3];
 d3.select('body').selectAll('p')
 .data(dataArr)
 .enter()
 .append('p')
 .text(function(d){
 return "I'm 'p' element number "+d;
 })
 .style('font-size', function(d){
 return d*10;
 });
 </script>
 </body>
</html></code>

What are we doing the code above? We select the body and then we select all paragraph elements in the body (even though there are none yet!). Selecting all paragraphs returns an empty selection, which you can think of as a reference to the paragraphs which will soon exist.

Next in the chain, ’.data(dataArr)’ counts and parses the values. Each command in the rest of the chain will be executed 'dataArr.length’ times.

The ’.enter()’ command will create placeholder DOM elements and return a reference to the placeholder to the next step in the chain.

Next, ’.append('p’)’ appends paragraph elements for each placeholder DOM element given by ’.enter()’.

And finally, we set the text content and size of each paragraph by a function of the data value which is bound to it.

Because each element of 'dataArr’ is bound to a unique DOM element, we can reference that value and manipulate the DOM element with functions of that value.

SVG and Visualizing

But how do we actually visualize our data? Visualization is generally done with an SVG object (Scalable Vector Graphics). You can think of it like a canvas on which other things are drawn.

<code><html>
 <head>
 <title>D3.js in 10 minute</title>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 var canvas = d3.select('body') 
 .append('svg') 
 .style('background',"LightGray") 
 .attr('height',150) 
 .attr('width',150);
 </script>
 </body>
</html>
</code>

Above we create a 150x150 SVG with a light gray background. If you run the code above in a browser you should see a page with a gray box. That box is our canvas.

<code><html>
 <head>
 <title>D3.js in 10 minute</title>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 var data2 = [20,45,30,90];
 var canvas = d3.select('body').append('svg').style('background',"LightGray").attr('height',150).attr('width',150);
 canvas.selectAll('rect')
 .data(data2)
 .enter()
 .append('rect');
 </script>
 </body>
</html></code>

Above, we bind the data to previously non-existent rectangle elements (exactly the same way we did for paragraph elements before). Finally, we can set the attributes of the rectangles to size them based on the data.

<code><html>
 <head>
 <title>D3.js in 10 minute</title>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 var data2 = [20,45,30,90];
 var canvas = d3.select('body').append('svg').style('background',"LightGray").attr('height',150).attr('width',150);
 canvas.selectAll('rect')
 .data(data2)
 .enter()
 .append('rect')
 .attr('y',0)
 .attr('x', function(datum,index){
 return index*20;
 })
 .attr('width', 15)
 .attr('height', function(datum){
 return datum;
 })
 .style('fill','red');
 </script>
 </body>
</html></code>

We set the x attribute based on the index (so that each rectangle is 20 pixels to the right of the last one), we set y to 0 (so that each rectangle is connected to the top of the canvas), we set the width to 15 pixels, and - most importantly - we set the height according to the value of the datum which is bound to that rectangle!

And, sure enough, if you run the above code in the browser you will see 4 rectangles whose height correspond to the values in 'data2’.

To Conclude

You now know the basics of manipulating DOM elements, data binding, and rendering data on the DOM. These skills are foundational to D3 and will serve you well in developing data visualizations of your own. There’s still plenty to learn beyond this introduction but this should be a useful start!

Get ready for success.

Join our Bootcamp Prep course and learn the skills you need to get started in our bootcamp programs.