Network Visualisation

1

1. D3js

2. VISjs

Outline

2

1. D3js

2. VISjs

Outline

3

- Data-Driven Documents

- A set of libraries for data visualisation

- JQuery + HTML5

- Open Source

- Free

D3js

https://d3js.org

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML tablefrom an array of numbers. Or, use the same data to create an interactive SVG bar chart withsmooth transitions and interaction.

4

D3js- HTML elements

Code elements:

● CSS style

● SVG container

● D3 script

● JSON data

5

D3js- HTML elements

Code elements:

● CSS style

● SVG container

● D3 script

● JSON data

6

D3js- HTML elements

Code elements:

● CSS style

● SVG container

● D3 script

● JSON data

7

D3js- Force-Directed Graph

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/force-

directed.html

Source page:

https://bl.ocks.org/mbostock/4062045

8

D3js- Fisheye Distortion

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/fisheye.html

Source page:

https://bost.ocks.org/mike/fisheye/

9

D3js- Directed Graph Editor

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/directed-

graph-editor.html

Source page:

http://bl.ocks.org/rkirsling/5001347

10

D3js- Other

- Labelled Force Layout: http://bl.ocks.org/MoritzStefaner/1377729

- Force editor + PAN/Zoom: http://bl.ocks.org/benzguo/4370043

- 3D force layout: https://vida.io/documents/N4jSip7n68yQ48DXp

- The Movie network: http://bl.ocks.org/paulovn/9686202

- Collatz Graph: https://www.jasondavies.com/collatz-graph/

- Collapsible Force Layout: http://mbostock.github.io/d3/talk/20111116/force-collapsible.html

- Radial Tydi Tree: https://bl.ocks.org/mbostock/4063550

- Tree: http://mbostock.github.io/d3/talk/20111018/tree.html

11

1. D3js

2. VISjs

Outline

12

- A set of libraries for data visualisation

- JQuery + HTML5

- Open Source

- Free

VISjs

http://visjs.org

The network visualization works smooth on any modern

browser for up to a few thousand nodes and edges. To handle

a larger amount of nodes, Network has clustering support.

Network uses HTML canvas for rendering.13

VISjs provides with:

● Modules

● Options

● Methods

● Events

● Tools for importing data

VISjs- Components

14

VISjs provides with:

● Modules

● Options

● Methods

● Events

● Tools for importing data

VISjs- Components

15

VISjs provides with:

● Modules

● Options

● Methods

● Events

● Tools for importing data

VISjs- Components

16

VISjs provides with:

● Modules

● Options

● Methods

● Events

● Tools for importing data

VISjs- Components

● Network● Canvas● Clustering● Layout● Manipulation● Information from nodes/edges● Physics/simulations● Nodes/edges selection● Zoom/animation● Configuration

17

VISjs provides with:

● Modules

● Options

● Methods

● Events

● Tools for importing data

VISjs- Components

● click/doubleClick● select/deselect● drag/drop● hover/blur● zoom/resize● show/hide● init/before/after drawing● physics● animation● configChange

18

VISjs provides with:

● Modules

● Options

● Methods

● Events

● Tools for importing data

VISjs- Components

● from Gephi

● from DOT language

19

VISjs- HTML elements

Code elements:

● CSS style

● DIV container

● VIS script

● JSON data

20

VISjs- HTML elements

Code elements:

● CSS style

● DIV container

● VIS script

● JSON data

21

VISjs- HTML elements

Code elements:

● CSS style

● DIV container

● VIS script

● JSON data

22

VISjs- Basic graph

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/basic-

vis.html

Source page:

http://visjs.org/examples/network/basicUsage.html

23

VISjs- Node properties

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/node-

properties-vis.html

Source page:

http://visjs.org/network_examples.html

24

VISjs- Edge properties

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/edge-

properties-vis.html

Source page:

http://visjs.org/network_examples.html

25

VISjs- Labels

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/labels-

vis.html

Source page:

http://visjs.org/network_examples.html

26

VISjs- Layouts

Download the example:

https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/layout-

vis.html

Source page:

http://visjs.org/network_examples.html

27

VISjs- Events

Download the example:

https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/events-

vis.html

Source page:

http://visjs.org/network_examples.html

28

VISjs- Physics

Original example:

http://visjs.org/examples/network/physics/physicsConfiguration.html

Source page:

http://visjs.org/network_examples.html

29

VISjs- Navigation buttons

Download the example: https://s3-eu-west-

1.amazonaws.com/autoritas.academy/EuroStat/navigation-

buttons-vis.html

Source page:

http://visjs.org/network_examples.html

30

● D3 Tips and Tricks. Malcolm Maclean.

https://leanpub.com/D3-Tips-and-Tricks

References

31