Introduction to D3.js

DC.js – Introduction to D3.js ”; Previous Next D3.js is a JavaScript library used to create interactive visualizations in the browser. The D3 library allows us to manipulate elements of a webpage in the context of a dataset. These elements can be HTML, SVG, or Canvas elements, and can be introduced, removed, or edited according to the contents of the dataset. It is a library for manipulating DOM objects. D3.js can be a valuable aid in data exploration. It gives you control over your data”s representation and lets you add data interactivity. D3.js is one of the premier framework when compared to other libraries. This is because; it works on the web and data visualizations and is of enterprise grade. Another reason is its great flexibility, which enables developers around the world to create many advanced charts. Also, it has extended its functionality to a great extent. Let us understand the basic concepts of D3.js, which are as follows − Selections Data join SVG Transition Animation D3.js API Let us understand each of these concepts in detail. Selections Selections is one of the core concept in D3.js. It is based on the CSS Selector concept. Those who have used and are aware of JQuery already can easily understand the selections. It enables us to select the DOM based on CSS selectors and then provide options to modify or append and remove the elements of DOM. Data Join 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 dataset (a series of numerical values). By default, D3.js gives dataset the highest priority in its methods and each item in the dataset corresponds to a HTML element. SVG 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. Transformation SVG provides options to transform a single SVG shape element or group of SVG elements. SVG transform supports Translate, Scale, Rotate and Skew. Transition 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. Animation D3.js supports animation through transition. Animation can be done with the 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 properties you specify. Transitions are well suited for transitioning to a new view without a complicated code that depends on the starting view. D3.js API Let us understand some of the important D3.js API”s methods in brief. Collections API A collection is simply an object that groups multiple elements into a single unit. It is also called as a container. It contains Objects, Maps, Sets and Nests. Paths API Paths are used to draw rectangles, circles, ellipses, polylines, polygons, straight lines and curves. SVG Paths represent the outline of a shape that can be stroked, filled, used as a clipping path, or any combination of all three. Axis API D3.js provides functions to draw axes. An axis is made of lines, ticks and labels. An axis uses scale, thus each axis will need to be given a scale to work with. Zooming API Zooming helps to scale your content. You can focus on a particular region using the click-and-drag approach. Delimiter-Separated Values API A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions in plain text or other data. A field delimiter is a sequence of comma-separated values. In short, the delimiter-separated values are Comma-Separated Values (CSV) or Tab-Separated Values (TSV). Print Page Previous Next Advertisements ”;

DC.js – Home

DC.js Tutorial PDF Version Quick Guide Resources Job Search Discussion DC.js is a charting library built on top of D3.js and works natively with crossfilter, which is another popular JavaScript library used to explore millions of records in a short period on the client side. DC.js is a JavaScript library used to make interactive dashboards in JavaScript. This tutorial will give you a complete knowledge on the DC.js framework. This is an introductory tutorial, which covers the basics of DC.js and explains how to deal with its various modules and sub-modules. Audience This tutorial is prepared for professionals who are aspiring to make a career in online data visualization. This tutorial is intended to make you comfortable in getting started with the DC.js framework and its various components. Prerequisites Before proceeding with the various types of concepts given in this tutorial, it is being assumed that the readers are already aware about what a Framework is. In addition to this, it will be very helpful, if the readers have a sound knowledge on HTML, CSS, JavaScript and D3.js. Print Page Previous Next Advertisements ”;

Introduction to Crossfilter

DC.js – Introduction to Crossfilter ”; Previous Next Crossfilter is a multi-dimensional dataset. It supports extremely fast interaction with datasets containing a million or more records. Basic Concepts Crossfilter is defined under the crossfilter namespace. It uses semantic versioning. Consider a crossfilter object loaded with a collection of fruits that is defined below − var fruits = crossfilter ([ { name: “Apple”, type: “fruit”, count: 20 }, { name: “Orange”, type: “fruit”, count: 10 }, { name: “Grapes”, type: “fruit”, count: 50 }, { name: “Mango”, type: “fruit”, count: 40 } ]); If we need to perform the total records in a group, we can use the following function − var count = fruits.groupAll().reduceCount().value(); If we want to filter by a specific type − var filtering = fruits.dimension(function(d) { return d.type; }); filtering.filter(“Grapes”) Similarly, we can perform grouping with Crossfilter. To do this, we can use the following function − var grouping = filtering.group().reduceCount(); var first = grouping.top(2); Hence, Crossfilter is built to be extremely fast. If you want to recalculate groups as filters are applied, it calculates incrementally. Crossfilter dimensions are very expensive. Crossfilter API Let us go through the notable Crossfilter APIs in detail. crossfilter([records]) − It is used to construct a new crossfilter. If the record is specified, then it simultaneously adds the specified records. Records can be any array of JavaScript objects or primitives. crossfilter.add(records) − Adds the specified records to the crossfilter. crossfilter.remove() − Removes all records that match the current filters from the crossfilter. crossfilter.size() − Returns the number of records in the crossfilter. crossfilter.groupAll() − It is a function for grouping all records and reducing to a single value. crossfilter.dimension(value) − It is used to construct a new dimension using the specified value accessor function. dimension.filter(value) − It is used to filter records for dimension”s match value, and returns the dimension. dimension.filterRange(range) − Filters records for dimension”s value that are greater than or equal to range[0], and less than range[1]. dimension.filterAll() − Clears any filters on this dimension. dimension.top(k) − It is used to return a new array containing the top k records, according to the natural order of this dimension. dimension.bottom(k) − It is used to return a new array containing the bottom k records, according to the natural order of this dimension. dimension.dispose() − It is used to remove the dimension from the crossfilter. In the next chapter, we will understand in brief about D3.js. Print Page Previous Next Advertisements ”;