This document discusses D3 data visualization and the process of acquiring, parsing, filtering, mining, representing, refining, and interacting with data. It covers basic building blocks like adding DOM elements and SVG elements. It also discusses concepts like selecting data, entering and appending elements, using scales to map data, and creating reusable frameworks with D3.

1. D3 Data Visualization
Presented By Vinod – Architect – Crestron Electronics

2. Visualizing Data Process Steps
• Acquire
• Obtain the data, whether from a file on a disk or a source over a network.
• Parse
• Provide some structure for the data's meaning, and order it into categories.
• Filter
• Remove all but the data of interest.
• Mine
• Apply methods from statistics or data mining as a way to discern patterns or place the data in mathematical
context.
• Represent
• Choose a basic visual model, such as a bar graph, list, or tree.
• Refine
• Improve the basic representation to make it clearer and more visually engaging.
• Interact
• Add methods for manipulating the data or controlling what features are visible.

3. Basic Building Blocks
Adding Dom elements using D3

4. Adding an SVG Element

5. Select/Data/Enter/Append

6. SelectAll/Data/Enter/Append
• D3.js SelectAll Method
• The D3.js SelectAll method uses CSS3 selectors to grab DOM elements.
• But wait! The basic HTML page doesn't contain any <p> yet. What is it actually
doing?
• What it is doing is selecting all of the <p> available on the page. Which in this
case is none. So it returns an empty selection.
• Later use of .data(theData) and .enter( ) will allow us to bind the data to the
empty selection.

7. SelectAll/Data/Enter/Append
• D3.js Data Operator
• The data operator joins an array of data (which can be numbers, objects or
other arrays) with the current selection.
• The first element 1 is assigned to the first <p> element, the second to the
second, so on and so forth.
• But wait! The basic page doesn't contain any <p> yet. What is it actually
doing?

8. D3.js Virtual Selections (Thinking with Joins)
• The D3.js Data Operator returns three virtual selections rather than
just the regular one like other methods.
• The three virtual selections are enter, update and exit.
• The enter selection contains placeholders for any missing elements.
• The update selection contains existing elements, bound to data.
• Any remaining elements end up in the exit selection for removal.

9. D3.js Virtual Selections (Thinking with Joins)
• d3.select("body").selectAll("p") => was empty
• The virtual enter selection now contains placeholders for our <p>
elements.

10. D3.js Enter Method
• The D3.js Enter Method returns the virtual enter selection from the
Data Operator.
• This method only works on the Data Operator because the Data
Operator is the only one that returns three virtual selections.
• Only allows chaining of append, insert and select operators to be
used on it

11. D3.js Append Operator Revisited
• var p = d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")
For each placeholder element created in the previous step, a p element
is inserted.

12. D3.js Text Operator

13. D3.js Data Operator Revisited
You can also see that the last (third) paragraph element has
the __data__ property with a value of 3.
Which came from our data set!

14. Using Data Bound to DOM Elements

15. Variables Available inside D3.js Operators
• The are two other variables provided to us by D3.js - this and i.
• this => refers to the current DOM element being evaluated.
• i => refers to the index of the current HTML element being evaluated
in the selected elements selection.

16. Variables Available inside D3.js Operators

17. Creating SVG Elements Based on Data

18. Using the SVG Coordinate Space

19. Data Structures D3.js Accepts
• Loading External Data Resources
• D3.js has built in functionality to load in the following types of external
resources:
• an XMLHttpRequest
• a text file
• a JSON blob
• an HTML document fragment
• an XML document fragment
• a comma-separated values (CSV) file
• a tab-separated values (TSV) file
• The only thing to pay attention to is to make sure you construct an array
out of the data.

20. Using JSON data

21. SVG Paths and D3.js
• Accessor Function

22. Different types of line interpolations

23. Dynamic SVG Coordinate Space
• Three SVG Rectangle Example
• The SVG Viewport (container)
has a width of 100 units and
a height of 100 units.

24. Dynamic SVG Coordinate Space
• What if our purple
rectangle x-coordinate,
suddenly quadrupled
from 40 to 160?

25. Dynamic SVG Coordinate Space

26. D3.js Scales
• what if our data attributes suddenly quadrupled. And then,
quadrupled again. And then....etc.
• This is a problem once the SVG Viewport/Coordinate Space is bigger
than the browser window.
• The purple rectangle would be so far to the right that it would be
practically impossible to see.

27. D3.js Scales
• D3.js provides functions to perform data transformations.
• These functions map an input domain to an output range.

28. D3.js Scales

29. SVG Group Element and D3.js

30. SVG Transformation and D3.js
• Transformation
• Translate
• Scale
• Rotate
• Skew

31. D3.js based reusable visualization frameworks
• DC.JS => https://dc-js.github.io/dc.js/
• Dimple.js => http://dimplejs.org/
• Dance.js => https://github.com/michael/dance
• NVD3 => http://nvd3.org/index.html
• C3.js => http://c3js.org/

32. Thank You