Post on 11-Apr-2019
- 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- 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
- 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- 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