Introduction To The D3 JavaScript Library

Click to share! ⬇️

This Introduction To The D3 JavaScript Library will have us learning about some really cool visualization effects available to us. D3 is a powerful data driven visualization library written in the ever popular JavaScript language. It was created by Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, and a community of open source developers. This allows us to build data driven graphics that use common web standards which can be interpreted by any of the popular modern web browsers. This enables you to use JavaScript to build HTML and CSS visualizations, in addition to SVG graphics, or Scalable Vector Graphics. D3 makes use of familiar conventions such as traditional CSS selectors and a jQuery like syntax. Let’s have a look at how to start using the D3 JavaScript library now.

Familiar Selector Format

Just like in CSS and jQuery, you have a familiar selector format for working with data in the DOM. With jQuery, we prefix selections with the dollar sign and then the selector inside the parenthesis something like jQuery('.someclass'). With D3, you replace the dollar sign with the d3 prefix. Here are a couple of examples of selecting one, or all, elements on a page and then updating their html.

How to select an element and update the HTML with D3

<html>
<head>
    <title>D3 JavaScript</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>

<div class="welcome"></div>

</body>
</html>

d3.select('.welcome').html('Welcome to D3
');

Introduction To The D3 JavaScript Library

How to select multiple elements and update the HTML with D3

<html>
<head>
    <title>D3 JavaScript</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

d3.selectAll('ul li').html('Welcome to D3
');

How To Select Multiple Elements With D3

Function Chains With D3

Just like with jQuery, and Laravel for that matter, you can chain functions together using the dot . operator. As you likely know, this is a super convenient way to combine a sequential list of actions to take on one element or instance of data, in one fell swoop. Let’s see an example of what we’re talking about with D3.

How To Make A Circle With D3 JS

<html>
<head>
    <title>D3 JavaScript</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>

<div id="circle"></div>

</body>
</html>

d3.select('#circle').append('svg')
    .attr('height', 200)
    .append('circle')
    .style('fill', 'blue')
    .attr('r', 50)
    .attr('cx', 60)
    .attr('cy', 60);

How To Make A Circle With D3 JS

Pretty Cool! With just a small snippet of scripting, we are able to select a DOM element, append an SVG to it, and then draw a circle and make it blue using a sequence of chained commands. This is the very basic idea of how D3 works. You’ll note that we can use basic CSS to style the elements we create with D3. Any SVG element can be styled with JavaScript and D3 or whatever CSS stylesheet you wish to use. You can simply choose what makes sense to you when you are creating your graphics.

Data Handling With D3

D3 has a built in parsing engine to be able to parse data from various data formats like json, text, html, tsv, and csv files. In addition to being able to handle the parsing of your data, D3 also provides a mechanism for data binding. This might happen using something like a call to json interface via an URL, and then completing a callback function to process that resulting data. We’ll take a look at both examples of how to do this in later episodes of D3.

Interactivity With D3

The D3 library also provides ways to enable advanced interaction with the graphics on the page. A built in physics engine is also part of D3 and it can account for things like friction, bounce effects, force driven graphics, and gravity. Beyond this, D3 has an eventing system much like jQuery and JavaScript itself to provide click and drag behavior, as well as various touch behaviors.

The D3 API Structure

D3 has many hundreds of functions, and it would be hard to memorize them all. We can however group them into related categories like so.

Selections
Arrays
Transitions
Color
Math
Time
SVG
Scales
Layouts
Geography
Geometry
Behaviors

Introduction To The D3 JavaScript Library Conclusion

In this tutorial, we had a look at the D3 JavaScript framework which enables us to build data driven SVG graphics in our web applications. D3 is very powerful, and there is a lot to learn, so we’ll break this out into several tutorials covering the various aspects of the framework. D3 is also hugely popular, and is one of the most starred repositories on the popular social coding site Github.

Click to share! ⬇️