The document is a presentation about D3 and SVG technologies. It includes sections on networking opportunities, an interactive presentation format, polls about experience levels with D3 and SVG, examples of force-directed graphs and animated SVGs using D3, and details on implementing drag and drop as well as mouseover highlighting in a D3 visualization. The presentation source code is provided on GitHub and other examples are referenced, including alternatives to SVG. It concludes with another poll and a question and answer period.

1. Welcome!

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

4. – Woody Allen
“80% percent of success
is showing up.”

5. 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

6. 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?
H
ands
up
please!
KAROL
DEPKA

7. D3.js
DATA
DRIVEN
DOCUMENTS
KAROL
DEPKA

8. Data-to-Documents
DATA DOCUMENT

9. SVG
SCALABLE
VECTOR
GRAPHICS
KAROL
DEPKA

10. 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

11. 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

12. Scaling & Resolutions
KAROL
DEPKA

13. Zoom in

14. The final product that we want to achieve
KAROL
DEPKA

15. The features that we want to achieve
• Physics-based automatic layout
• Drag-and-drop
• Automatic layout
• Zoom
• Pan
• Mouse-over highlight
KAROL
DEPKA

16. Our example is on GitHub
https://github.com/karol-depka/D3SVGTechnologyGraph
KAROL
DEPKA

17. https://bl.ocks.org/mbostock/4062045
Force layout
KAROL
DEPKA

18. D3 modules visualized in D3 :-D
KAROL
DEPKA
http://bl.ocks.org/alisd23/5762cc5912253c4febeb

19. Animated SVG
How do I animate SVG?
KAROL
DEPKA

20. Declaring nodes
// …
JavaScript: {
id: JavaScript,
body: "viewBox="0 0 256 256" v
"<path d="M67.311746,21
"</svg>n",
sizeMult: 1.2
},
KAROL
DEPKA

21. 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

22. Declaring links between nodes
var 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},
];

23. 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

24. Where to handle mouse events
Layer for drag&drop
and mouse-over
KAROL
DEPKA

25. Add drag&drop
https://github.com/d3/d3-drag
KAROL
DEPKA

26. Add drag&drop
function 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;
}

27. Add drag&drop
nodeCircleOverlay.call(
d3.drag()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded));
KAROL
DEPKA

28. 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 "";
}
});

29. Add HTML foreignObject
perNodeMainGroup.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>";
});

30. 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

31. Tested on browsers
• Chrome
• Firefox
• Safari
• Opera
• Edge
• Internet Explorer

33. 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?
H
ands
up
please!

34. https://github.com/eisman/neo4jd3
KAROL
DEPKA

35. Cool D3 Examples
https://bl.ocks.org/mbostock/
2990a882e007f8384b04827617752738

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

37. Gallery of
D3
Examples
URL:

38. Alternatives to SVG
• Font Awesome (only monochrome?)
• Canvas? (not scalable?)
• Adobe Flash? ;-)
• PDF
KAROL
DEPKA

39. A little poll - after the
presentation
• On SVG:
• who has plans to learn / use SVG?
• On D3
• who has plans to learn / use D3?
H
ands
up
please!
KAROL
DEPKA

40. Q
und
A

41. THANKS TO
Ewa, Rafa
Antonio, Guillermo, Abigail
Ania, Greg