Author: Awais Farooq

D3.js is used to create a static SVG chart. It helps to draw the following charts − This chapter explains about drawing charts in D3. Let us understand each of these in detail. Bar Chart Bar charts are one of the most commonly used types of graph and are used to display and compare the…

D3.js supports animation through transition. We can do animation with proper use of transition. Transitions are a limited form of Key Frame Animation with only two key frames – start and end. The starting key frame is typically the current state of the DOM, and the ending key frame is a set of attributes, styles and other…

Transition is the process of changing from one state to another of an item. D3.js provides a transition() method to perform transition in the HTML page. Let us learn about transition in this chapter. The transition() method The transition() method is available for all selectors and it starts the transition process. This method supports most of the…

SVG provides options to transform a single SVG shape element or group of SVG elements. SVG transform supports Translate, Scale, Rotate and Skew. Let us learn transformation in this chapter. Introduction to SVG Transformation SVG introduces a new attribute, transform to support transformation. The possible values are one or more of the following, An example of the SVG rectangle with…

SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility. Features of SVG Some of the salient features of SVG are as follows − A Minimal Example Let…

Data join is another important concept in D3.js. It works along with selections and enables us to manipulate the HTML document with respect to our data set (a series of numerical values). By default, D3.js gives data set the highest priority in its methods and each item in the data set corresponds to a HTML…

Selections is one of the core concepts in D3.js. It is based on CSS selectors. It allows us to select one or more elements in a webpage. In addition, it allows us to modify, append, or remove elements in a relation to the pre-defined dataset. In this chapter, we will see how to use selections…

D3.js is an open source JavaScript library for − Web Standards Before we can start using D3.js to create visualizations, we need to get familiar with web standards. The following web standards are heavily used in D3.js. Let us go through each of these web standards one by one in detail. HyperText Markup Language (HTML)…

In this chapter, we will learn how to set up the D3.js development environment. Before we start, we need the following components − Let us go through the steps one by one in detail. D3.js Library We need to include the D3.js library into your HTML webpage in order to use D3.js to create data…

Data visualization is the presentation of data in a pictorial or graphical format. The primary goal of data visualization is to communicate information clearly and efficiently via statistical graphics, plots and information graphics. Data visualization helps us to communicate our insights quickly and effectively. Any type of data, which is represented by a visualization allows…