Welcome!

“Networking”

There is a “networking table” near the entrance to the lecture room, where you can put your business cards and prospects :-)

KAROL

DEPKA

– Woody Allen

“80% percent of success is showing up.”

About the presentation• As interactive as possible

• Questions welcome

• Feel free to interrupt at any time

• We can spend as much time as you want, on any slide

• I assume that the most active audience members are the most interested and therefor should be able to control the presentation flow

KAROL

DEPKA

A little poll• On SVG:

• who has used SVG?

• who considers themselves proficient with SVG?

• who has plans to learn / use SVG?

• On D3• who has used D3?

• who considers themselves proficient with D3?

• who has plans to learn / use D3?

Hands upplease!

KAROL

DEPKA

D3.js

DATA DRIVEN DOCUMENTS

KAROL

DEPKA

Data-to-Documents

DATA DOCUMENT

SVG

SCALABLE VECTOR GRAPHICS

KAROL

DEPKA

Why should you care about D3 and why is it better?

• Interactive, unlike static images

• Open-source

• Good merits and Eye-candy

• Super flexible

KAROL

DEPKA

Why should you care about SVG and why is it better?

• Web standard (unlike Flash)

• Runs in the browser without a plugin (unlike Flash)

• Scales well

KAROL

DEPKA

Scaling & Resolutions

KAROL

DEPKA

Zoom in

The final product that we want to achieve

KAROL

DEPKA

The features that we want to achieve• Physics-based automatic layout

• Drag-and-drop

• Automatic layout

• Zoom

• Pan

• Mouse-over highlight

KAROL

DEPKA

Our example is on GitHubhttps://github.com/karol-depka/D3SVGTechnologyGraph

KAROL

DEPKA

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

Force layout

KAROL

DEPKA

D3 modules visualized in D3 :-D

KAROL

DEPKA

http://bl.ocks.org/alisd23/5762cc5912253c4febeb

Animated SVG

How do I animate SVG?

KAROL

DEPKA

Declaring nodes

// … JavaScript: { id: JavaScript, body: "viewBox=\"0 0 256 256\" version= "<path d=\"M67.311746,213.932292 "</svg>\n", sizeMult: 1.2},

KAROL

DEPKA

Declaring nodes, part 2

Inkscape: {id: Inkscape}, Illustrator: {id: Illustrator},AffinityDesigner: {id: AffinityDesigner, html: "Affinity<br/>Designer"},

// …

var nodesWebOnly = [ nodes.SVG, // … nodes.NodeJS, nodes.JavaScript, ];

KAROL

DEPKA

Declaring links between nodesvar linksWebOnly = [ {source: HTML5, target: Angular2}, {source: Ionic, target: Angular2}, {source: HTML5, target: Angular2}, {source: D3, target: SVG}, {source: JavaScript, target: HTML5}, {source: JavaScript, target: TypeScript}, {source: JavaScript, target: jQuery}, // … {source: Angular2, target: TypeScript}, {source: jQuery, target: HTML5}, {source: HTML5, target: CSS, thick: 10}, {source: SVG, target: HTML5, thick: 10, distance: 1.5}, ];

Setting up the D3 force simulation

/* Base Example: Force-Directed Graph: https://bl.ocks.org/mbostock/4062045 */ var simulation = d3.forceSimulation() // .force("gravity", 3) .force("link", d3.forceLink().id(function(d) { return d.id; }) .strength(function(d) { return 3; })) .force("charge", d3.forceManyBody().strength(-1000)) .force("center", d3.forceCenter(width / 2, height / 2));

KAROL

DEPKA

Where to handle mouse events

Layer for drag&drop and mouse-over

KAROL

DEPKA

Add drag&drop

https://github.com/d3/d3-drag

KAROL

DEPKA

Add drag&dropfunction dragStarted(d) { isDragging = true; if (!d3.event.active) { simulation.alphaTarget(0.3).restart(); } d.fx = d.x; d.fy = d.y; } function dragged(d) { isDragging = true; d.fx = d3.event.x; d.fy = d3.event.y; } function dragEnded(d) { isDragging = false; unHighlightHover() if (!d3.event.active) { simulation.alphaTarget(0); } d.fx = null; d.fy = null; }

Add drag&drop

nodeCircleOverlay.call( d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded));

KAROL

DEPKA

Add SVG icons

perNodeMainGroup.append("g").html(function(d) { var bodyText = d.body || ""; var size = d.sizeMult ? d.sizeMult * defaultSize : defaultSize; if (bodyText.trim().endsWith("</svg>")) { const htmlContent = '<svg ' + 'width=\"' + size + 'px\" ' + 'height=\"' + size + 'px\" ' + 'x="' + (-size/2) + '" ' + 'y="' + (-size/2) + '" ' + bodyText /* also contains </svg> */; return htmlContent; } else { return ""; }});

Add HTML foreignObjectperNodeMainGroup.append("foreignObject") .attr("style", "pointer-events:none;") .attr("width", foreignObjectW) .attr("height", foreignObjectH) .attr("height", foreignObjectH) .attr("x", -foreignObjectW/2) .attr("y", -foreignObjectH/2) .style("font", "9px 'Helvetica Neue'") .html(function(d) { if ( d.body ) { return ""; // has icon: no need for text } var bodyText = d.html || d.id; return "<div style='display: table;" + "text-align:center;" + "height:100%; width:100%'>" + "<p style='display: table-cell; " + "vertical-align: middle'>" + bodyText + "</p></div>"; });

ticked() function function ticked() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); nodeG1.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); }

KAROL

DEPKA

Tested on browsers• Chrome

• Firefox

• Safari

• Opera

• Edge

• Internet Explorer

Browsers, Browsers, Browsers!

• Who here uses IE as their main browser?

• Who here uses IE as their main browser and is not afraid to admit it?

• Who here uses Microsoft Edge as their main browser?

Hands upplease!

https://github.com/eisman/neo4jd3

KAROL

DEPKA

Cool D3 Exampleshttps://bl.ocks.org/mbostock/

2990a882e007f8384b04827617752738

Cool D3 Examples• http://bl.ocks.org/rkirsling/5001347 - directed graph

editor

KAROL

DEPKA

Gallery of D3 ExamplesURL:

Alternatives to SVG

• Font Awesome (only monochrome?)

• Canvas? (not scalable?)

• Adobe Flash? ;-)

• PDF

KAROL

DEPKA

A little poll - after the presentation

• On SVG: • who has plans to learn / use SVG?

• On D3• who has plans to learn / use D3?

Hands upplease!

KAROL

DEPKA

Qund A

THANKS TO

Ewa, Rafa

Antonio, Guillermo, Abigail

Ania, Greg