Introduction to D3.js

d3network


Overview

Getting Started

  1. Visualization, why?
  2. What is D3.js?

Introduction

  1. Thinking D3.js
  2. HTML, CSS, JavaScript, SVG and DOM
  3. Project Setup

This will be a n-part series about my adventures in D3.js. This is the first part of the series which basically gives an overview of D3.js and how a short introduction to the language. Later parts will include project setup (in detail) and how to create your first visualization, and maybe some more advanced stuff after that. 🙂

 

Getting Started

1. Visualization, why?

Visualization is nice and all, but do we really need it? Looking back 50 years ago, the answer might have been a “Well, I guess it’s nice to have.” With today’s ever faster (growing and) advancing technology, though, managing more and more data (Big Data) plays an (unprecedentedly) important role in our society. Old, inefficient static systems are being thrown into the dustbin, giving rise to the era of efficient, selfoptimizing Smart Systems [4], that (are supposed to) ease our everyday life (in virtualy every sector) with increasing precision and speed, enabling us to be more productive (and creative) than ever. This does not only apply to the private sector though. Especially the 4 big sectors Environment, Healthcare, Industry and the Internet of Things [4] (note: all buzzwords) thrive off the development of these modern systems. To be smart, these (non-intrusive) systems often make use of and collect massive amounts of data and heuristics (statistical data) in order to be as efficient and optimal as possible.

While collecting massive amounts of data is important for more precise and decisive calculations (and thereby increasing predictive capabilities), another challenge is the visualization of said data. The enduser, e.g. Management Sectors, might not be interested in whole gigabytes or even terabytes of datasets, but instead are looking for (formatted) information that is detailed and yet presented in such a way, that the data shown is expressive enough to give insightful information on the matter at hand. Especially the developments of recent years (from both the professional and private sector) have spawned many (creative) new ideas in information presentation techniques (e.g. Windows Metro UI), clearly trending towards simple (styled) UIs, yet include ingenious ways of navigating through large amounts of data.

 

2. What is D3.js?

This is where D3.js [3][5] comes in. While similar technologies do exist, D3.js (in my opinion at least) excels at showcasing data in a dynamic way (even realtime data, also called streaming data). According to Mike Bostock, the creator of D3.js, it is

a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Apart from the dynamic features of D3.js, it is based on JavaScript and uses CSS, HTML and DOM [1] to create (web-based) SVG [2] graphics that can be embedded practically anywhere. D3.js is data-driven, i.e. it can transform your graphics into interactive (animated) layouts responding to either static or streaming data by binding data to DOM elements. D3.js’ Website [5] shows us some of the core features, which include Selections, Dynamic Properties, Enter&Exit behavior, Transformation and Transitions (which will be explained later on). Furthermore, D3.js is also supported by a lot (and I really do mean A LOT) of examples and tutorials on the internet [6][7].

“D3.js should be used when your webpage is interacting with data” [11] and is added to the front-end of your web application (i.e. the user-interaction part of your webpage).

 

Introduction

1. Thinking in D3.js

So how do we go about when wanting to create a new graph? Usually when coding some program, we actually think in the language we are currently programming in. As D3.js encapsulates more than just one language this thinking shifts towards (what I like to call) layered thinking. (In my opinion) The most important aspect of this is represented by the HTML part of D3.js: Depending on the order elements are added to the HTML, certain elements will be layered on top of others (this is what is know as z-Axis). In D3.js, elements that are added last will be displayed on top (similar to a stack structure), e.g. defining graph nodes first and then links (edges) will result in the links being displayed on top of nodes (though there are workarounds to this restriction). This is due to the fact that D3.js manipulates the DOM directly. Another aspect is the CSS part: Elements can be styled either directly via D3.js or by defining style via CSS. For my purposes, using CSS for defining static styles and using D3.js for defining dynamic style behavior has worked out greatly in my favor. Please note that using CSS styling will not work when you want to open the SVG render in programs such as Adobe Illustrator. For this you will need to use the  .attr(...) property of the SVG element [10]. As for the third part, understanding how D3.js Selections [8][9] work is (in my opinion) key to getting into the proper D3.js workflow. Last but not least, understanding the Enter/Update/Exit-Paradigm is especially important when handling streaming data.

For now, though, let’s start with:

 

2. HTML, CSS, JavaScript, SVG and DOM

HTML

HTML is the Web’s core language for creating documents and applications for everyone to use, anywhere.

CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

JavaScript

JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.

SVG

[pullquote align=”full” cite=”W3.org, ‘Introduction – SVG 1.1 (Second Edition)’, 2015. Accessed: 21- Nov- 2015.” link=”http://www.w3.org/TR/SVG11/intro.html” color=”” class=”” size=”12″]

SVG is a language for describing two-dimensional graphics in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects. SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.

[/pullquote]

DOM

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

 

3. Project Setup

To code in D3.js, all you need is a basic text editor (I recommend Notepad++) and a WebBrowser (we will be using Firefox here). In Notepad++, create a new HTML-file, let’s call it d3vis.html. The basic structure of the HTML-file looks like the following:

  • Insert picture here …

The following chapter will give a more detailed look at D3.js using a Force Directed Graph Layout as an example. Afterwards, the difference between a Force Directed Layout and a normal layout will be highlighted and explained.

 


References

[1] P. Le Hégaret, L. Wood and J. Robie, ‘What is the Document Object Model?’, W3.org. [Online].

[2] W3.org, ‘Introduction – SVG 1.1 (Second Edition)’, 2015. [Online].

[3] GitHub, ‘mbostock/d3’, 2015. [Online].

[4] Wikipedia, ‘Smart system’, 2015. [Online].

[5] M. Bostock, ‘D3.js – Data-Driven Documents’, D3js.org, 2015. [Online].

[6] Christopheviau.com, 2015. [Online].

[7] GitHub, ‘mbostock/d3’, 2015. [Online].

[8] M. Bostock and M. Bostock, ‘How Selections Work’, Bost.ocks.org, 2015. [Online].

[9] M. Bostock and M. Bostock, ‘Thinking with Joins’, Bost.ocks.org, 2015. [Online].

[10] Dealloc.me, ‘D3.js is Not a Graphing Library, Let’s Design a Line Graph — dealloc.me’, 2011. [Online].

[11] https://www.dashingd3js.com/why-build-with-d3js

[12] https://www.dashingd3js.com/why-build-with-d3js