D3.js and SVG
•
0 gostou•842 visualizações
Using D3 with SVG as rendering target and using force simulation layout.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a D3.js and SVG
Semelhante a D3.js and SVG (20)
Último
Último (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