D3.js and SVG
•
0 likes•842 views
Using D3 with SVG as rendering target and using force simulation layout.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to D3.js and SVG
Similar to D3.js and SVG (20)
Recently uploaded
Recently uploaded (20)
D3.js and SVG
- 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
- 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
- 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
- 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
- 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!
- 36. Cool D3 Examples • http://bl.ocks.org/rkirsling/5001347 - directed graph editor KAROL DEPKA
- 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