D3 Tutorial Javascript Visualization

1. Awalin Sopan
FAAS Enginnering
awalin.sopan@fireeye.com
D3: DATA DRIVEN DOCUMENTS

2. 2 Copyright © 2014, FireEye, Inc. All rights reserved.
D3
• JS library, now at version 4
• Creates Interactive svg or html elements,
DOCUMENTS based on supplied DATA
• Select DOM elements: Selection are arrays.
• Bind data with them, data are also arrays.
• Each such elements corresponds with a data point.
• Used for data viz: control the VISUAL ATTRIBUTES:
position, color, size, shape, layout based on the data

3. 3 Copyright © 2014, FireEye, Inc. All rights reserved.

4. 4 Copyright © 2014, FireEye, Inc. All rights reserved.
Grouped bar chart:
Alerts over time by priority
Treemap:
Alerts: grouped by
iBackend> Priority >
then by State

5. 5 Copyright © 2014, FireEye, Inc. All rights reserved.
Node-link graph:
social/ ip network

6. 6 Copyright © 2014, FireEye, Inc. All rights reserved.
D3: EXAMPLES
http://mbostock.github.io/d3/talk/20111116/force-collapsible.html
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-
graphic.html?_r=0
https://bost.ocks.org/mike/nations/
http://bl.ocks.org/mbostock/1256572

7. 7 Copyright © 2014, FireEye, Inc. All rights reserved.
D3
var data = [1, 2, 3, ,4 ,5]
var more_data = [
{name: ‘a’, age: 27},
{name: ‘b’, age: 24}
]
var monthly_temp_data = [
{month: ‘january’, avg_temp: 27},
{month: februaryb’, avg_temp: 34}
]

8. 8 Copyright © 2014, FireEye, Inc. All rights reserved.
SELECT ELEMENTS FROM THE DOM:
BIND DATA WITH THE SELECTION :
CREATE NEW ELEMENTS IN THE DOM:
var data_divs = svg.selectAll(“div”);
# say, the dom has 4 divs, so data_divs is a size 4 array of divs
data_divs = data_divs.data(data_array);
# the data array has 6 elements
data_divs = data_divs.enter().append(“div")
# enter is the surplus data,
# append 2 new divs to the dom
# now data_divs is a size 6 array of divs
# exit is the surplus elements.

9. 9 Copyright © 2014, FireEye, Inc. All rights reserved.
ADD VISUAL ATTRIBUTES TO THE ELEMENTS:
BASED ON THE DATA:
With Method Chaining:
data_divs
.style(‘width’, 200)
.style(‘height’, 100);
data_divs
.style(‘width’, function(data, index){
return data* index; }
)
.style(‘height’, function(data, index){
return 10*index; }
);
data_divs.style(‘width’, 200);
data_divs.style(‘height’, 100);

10. 10 Copyright © 2014, FireEye, Inc. All rights reserved.
http://jsfiddle.net/asopan/72f8kxmm/

11. 11 Copyright © 2014, FireEye, Inc. All rights reserved.
unbound elements
=>the exit selection
=>elements to be
removed.
unbound data =>
enter selection=>
New elements to be created
Data points joined to
existing elements
=>update selection.

12. 12 Copyright © 2014, FireEye, Inc. All rights reserved.
D3: SCALE:
Create a scale with
• Domain (input values from our data)
• Range (output pixel in the dom)
• Use scale object to calculate visual attribute
values
var scale_width = define a d3 scale to compute width of each div
data_divs.style(‘width’, function(value){ return scale_width(value);})

13. 13 Copyright © 2014, FireEye, Inc. All rights reserved.
• Linear:
• Sequential data, order matters
• Time scale:
• When data is temporal: date, timetsamp etc.
• Ordinal/categorical :
• When data is random strings, so order does not matter.
scale_width = d3.scaleLiner()
.domain([0, 2000]) # our data ranges from 0 to 2000
.range([0, 400])
# our screen real state for the data ranges from 0 to 400 pixel width
scale_width(100) = 20.
#that means a data with value 200 will be mapped to width 20 pixel
data_divs.style(‘width’, function(value){ return scale_width(value);})

14. 14 Copyright © 2014, FireEye, Inc. All rights reserved.
D3: LINKS OF GOOD TUTORIALS
https://square.github.io/intro-to-d3/data-binding/
https://bost.ocks.org/mike/d3/workshop/#0
https://www.safaribooksonline.com/library/view/inter
active-data-
visualization/9781449340223/_the_web.html