D3: Data-Driven DocumentsMichael Bostock, Vadim Ogievetsky and Jeffrey Heer

Prepared by : Mohamed Sweelam

1

2

3

Data Visualization• What is data visualization ?

• Why is data visualization important?

• What is the power of using data visualization ?

4

Abstract• Data-Driven Documents is a novel representation-transparent approach to visualization for the web.

• D3 enables direct inspection and manipulation of a native representation: the standard document object model (DOM).

• With D3, designers selectively bind input data to arbitrary document elements.

• applying dynamic transforms to both generate and modify content using DOM.

5

Good Graphic• Presentation ( What to Whom, How and Why ).

• Graphical Display Options:

$ Sorting and Ordering.

$ Adding Model or Statistical Information.

$ Captions, Legends and Annotations.

$ Positioning in Text.

$ Colors.

$ Scales (Using data standardization).

6

Good Graphic

7

Introduction• Building visualizations requirements.

• Visualization toolkits problem due to encapsulation

of the DOM with more specialized forms.

• The need of balancing expressiveness, efficiency and accessibility with taking in account three objectives :

$ Compatibility.

$ Debugging.

$ Performance.

8

Document Transformers• Browsers Built-In APIs for manipulating the DOM

these interfaces are verbose and cumbersome.

• Enhancing these techniques using smart libraries as JQuery, JS and CSS.

Tree Map

9

Graphics Libraries• Low level graphics are tedious for complex visualization tasks as they lack convenient abstractions.

• The lack of supporting debugging is also a problem.

• Toolkit specific scene graph abstractions diminish compatibility and expressiveness.

10

Design• D3 atomic operand is Selection: a filtered set of elements queried from the current document .

• Operators act on selections, modifying content.

• Data joins bind input data to elements, and producing enter and exit sub-selections for the creation.

• Animated transitions are applied by default.

• Numerous helper Modules such layouts and scales simplify common visualization tasks.

11

Visualization Problem

• The basic problem in visualization still is the physical limitation of computer screens.

• Some solutions are invented to overcoming the restrictions of two-dimensionality:

I. Using virtual reality environment with rotation principle.

II. Project high-dimensional data onto 2-D coordinate system using data-reduction method such as principal component analysis (PCA).

III. Using parallel coordinates system.

IV. Link view displays.

12A smart technique to interact with micro and macro features

simultaneously.(Focus + Context) 

13

Selections • Selections are a core concept in D3.

• Based on CSS selectors. Selection in d3 is a filter that manage every element inside the data, It is also serving as namespace.

14

Data• The data operator binds input data to selected nodes.

• Once data is bound to elements, it is passed to functional operators as the first argument (by convention, d), along with the numeric index (i).

15

Interaction and Animation • The DOM supports event listeners.

• D3’s focus on transformations simplifies the specification of scene changes in response to user events;

• The major point is events always involves with transformation “Animated transitions” .

16

Animation

17

Modules• D3’s kernel achieves flexibility through representational transparency; this also minimizes the library’s conceptual surface area by presenting less to learn.

• “ Don’t get it original , Get it right “ .

• D3’s optional modules encapsulate reusable solutions to common problems like “SVG” module.

18

Design Rotation• Unlike Protovis excels at concise specifications of static scenes and it is a declarative language for visualization design with browsers .

• D3’s transformations make dynamic visualizations easier to implement. By adopting immediate evaluation of operators and the browser’s native representation.

19

TransformationProtovis: D3

• Implicitly.

• Changing data and prosperities are slow.

• Re-evaluate all properties, even those whose definitions or input data have not changed.

• Propagate the changes to the intermediate scene graph out to the native SVG.

• Explicitly.

• Specifications are data-driven. • Transformations better enable

dynamic visualizations.

• Eliminate redundant computation touching only the elements and attributes that

need updating.

20

Immediate EvaluationProtovis D3

• Implicit re-evaluation of properties. this can cause errors if references captured via closure change or disappear.

• Has hidden control flow that is fired when the system crashes .

• Can’t generate arbitrary hierarchical scene graphs because

the hierarchy depth is fixed to the number of nested panels.

• Applies operators to tighten the scope of reference capture,.

for example: D3’s attr operator.

• Reduces internal control flow, moving it up to user code.

• D3’s stateless evaluation allows transforms to be refactored

into functions invoked recursively by the each operator.

21

Native RepresentationProtovis D3

• Its choice of graphical primitives, called marks.

• selections can be retrieved from the document at any time.

• Marks are homogeneous: properties have the same meaning across mark types.

• Almost the same work and output , except native elements improve tool compatibility and debugging and slight decrease in notational efficiency.

• uses selectors to identify document elements through a variety of means (such as tag names, class attributes, and associated data).

22

Thanks