Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understanding Connected Data through Visualization

391 views

Published on

Connected Data wants to be visualized. There are various options data-scientists, application-developers, and end-users have at their disposal. Finding the best option for your specific use-case is not always easy. There are simple options that can help you quickly get some results, but the possibilities become endless, as soon as you add sophisticated diagramming solutions and toolkits to your toolbox.

In this presentation, you will learn about “yFiles”, which is a family of software development kits for the visualization of graphs, diagrams, and networks. Most developers who know it, consider it the most complete, most sophisticated diagramming solution available. Hundreds of companies worldwide use it to create highly specialized, customized white-label diagramming integrations for their applications.

This talk tries to shed some light on the question, why instead of going with a prebuilt solution, they choose to create and implement a unique user experience and when you should do that, too.

You will learn what tools you can use to get the most out of connected data visualizations:

* Why you should not always visualize connections in your data as connections in a diagram

* When simply getting the graph on the screen is not enough

* Why detailed custom item visualization makes a difference

* How customized interactivity can improve the user experience of your apps

Join the talk and discover the possibilities you get with a sophisticated diagramming toolkit. You will see visualization and interaction options that you probably haven’t even thought of, before, and learn how to create great applications for creating, displaying, understanding, and interacting with your connected data.

Published in: Data & Analytics
  • Login to see the comments

  • Be the first to like this

Understanding Connected Data through Visualization

  1. 1. Understanding Connected Data through Visualization ConnectedData London | October 4th, 2019
  2. 2. Sebastian Mueller – CTO yWorks – /yworks/in/yguy/@yworks , @ySebp contact@yworks.com
  3. 3. Agenda • Visualization – what types of tools are there? • How can we do better? • Use-case specific automatic layout • Transforming graphs on the fly • Detailed node visualization • Customized user interactions • Integration with third party systems • Q&A
  4. 4. Who is this talk for? • People working with connected data • Data-scientists and engineers • Project managers • Software developers
  5. 5. Tools for Visualizing Connected Data • Low-level database/data-source viewers • Pros: • Raw data access • Readily available • Cons: • Hard to interpret and navigate the data • Can be dangerous to use • May not be accessible to users
  6. 6. Tools for Visualizing Connected Data • Generic visualization applications • Pros: • Easy to get started • Little low-level knowledge required • Some analytics included • Cons: • Does not work with all schemas • Costly for many users
  7. 7. • Scientific tools • Pros: • Good flexibility • Many analytics • Cons: • Often focusing on scalar, rather then connected data • Hard to use for end-users • Difficult or costly to deploy as solution Tools for Visualizing Connected Data
  8. 8. • Visualization Software Libraries • Pros: • Best possible end-user experience • Most flexible • data acquisition • transformation • display • interaction • integration • Cons: • Initial software development work required Tools for Visualizing Connected Data
  9. 9. software libraries for the visualization of graphs, diagrams, and networks • Most complete set of automatic layout algorithms • Available for all major software platforms • Graph analytics and algorithms included • Viewing, editing, and creating diagrams • Generic visualization engine for all diagramming needs • Extreme customizability and extensibility
  10. 10. Importing the data • Any source and format is possible: • JSON, XML, text, binary, database- connectors, etc. await graphMLIOHandler.readFromURL(graph, './marvel-graph-raw.graphml') const graph = new GraphBuilder({ nodesSource: jsonData.nodes, edgesSource: jsonData.edges, nodeIdBinding: 'id', sourceNodeBinding: 'from', targetNodeBinding: 'to', }).buildGraph() const node1 = graph.createNode({tag: data1}) const node2 = graph.createNode({tag: data2}) graph.createEdge(node1, node2)
  11. 11. Getting an initial layout await graphComponent.morphLayout( new OrganicLayout({ minimumNodeDistance: 20, preferredEdgeLength: 100, compactnessFactor: 0.3 }), '2s' ) • Organic (force directed) • Hierarchic • Orthogonal • Tree • Circular • Balloon • Radial • …
  12. 12. Adding text labels graph.nodes.forEach(n => graph.addLabel(n, n.tag.name)) await graphComponent.morphLayout( new OrganicLayout({ considerNodeLabels: true }), '2s' ) • Any number of labels • Any color, font, size • icons • On nodes, edges, ports, background…
  13. 13. Styling different node types const heroStyle = new ShapeNodeStyle({ shape: 'octagon‘, fill: 'lightblue‘, stroke: null }) graph.nodes.filter(n => n.tag.type === 'hero‘) .forEach(n => graph.setStyle(n, heroStyle)) • Different shapes • colors • fills • opacities • strokes • icons • badges • …
  14. 14. Graph analysis addHeatMap(graphComponent, item => (item instanceof INode ? 1 - Math.pow(0.9, graph.degree(item)) : 0) ) • Centralities • Clustering • Paths • Flows • Reachability • Root-cause analysis • Cycle detection • …
  15. 15. Nesting and Grouping • Arbitrary nesting depths • drill-down • Expand/collapse • Any visualization graph.groupNodes(movies).tag = { type: 'group' } graph.groupNodes(heroes).tag = { type: 'group' } await graphComponent.morphLayout( new OrganicLayout({ groupNodeCompactness: 0.9, }), '2s' )
  16. 16. Metaball Blob Groups • Multiple parents • Overlaps allowed await graphComponent.morphLayout( new OrganicLayout(), '2s', new OrganicLayoutData({ partitionGridData: new PartitionGridData({ rowIndices: node => (node.tag.type === 'hero'?0:1) }) }) ) graphComponent.backgroundGroup.addChild( new BlobBackground( graph.nodes.filter(n => n.tag.type === 'movie'), new Color(255, 255, 128, 196), ) )
  17. 17. await graphComponent.morphLayout( new HierarchicLayout(), '2s', new HierarchicLayoutData({ givenLayersLayererIds: n => (n.tag.type === 'hero' ?0:1) }) ) Bi-partite Layout Hierarchic Layout: • Any number of layers • Automatic layer assignment • Highlights flow • Reduces crossings • Optional fixed layering
  18. 18. More layout constraints • (Partial) orders for layers • Nested Graphs • Optional fixed layering • Integrated labeling • Edge connections and directions • Incremental, partial, from sketch… await graphComponent.morphLayout( new HierarchicLayout(), '2s', new HierarchicLayoutData({ sequenceConstraints: { itemComparables: n => (!n.tag || !n.tag.year ? null : n.tag.year) }, }) )
  19. 19. Transforming the graph 1. Augment movie data 2. Sort movie nodes according to data 3. For each hero participating in two movies, create edge between pairs of sorted movies 4. Render as flow-graph from left to right movies.forEach(n => { n.tag.year = movie2year[n.tag.name] }) heroes.forEach(heroNode => { graph .outEdgesAt(heroNode) .map(e => e.targetNode) .orderBy(node => node.tag.year) .reduce((a, b) => { graph.createEdge({ source: a, target: b, tag: { hero: heroNode.tag }, labels: [heroNode.tag.name] }) return b }) })
  20. 20. Transformed graph result await graphComponent.morphLayout( new HierarchicLayout({ considerNodeLabels: true, integratedEdgeLabeling: true, layoutOrientation: 'left-to-right', }), '2s', new HierarchicLayoutData({ edgeLabelPreferredPlacement: new PreferredPlacementDescriptor({ placeAlongEdge: 'at-center', sideOfEdge: 'on-edge' }) }) ) • Far fewer edge crossings • Flow is easy to follow • More information visible
  21. 21. … with time constraints This visualization reveals: • Parallel time-lines • The flow of characters between franchises • The “big picture” of the story await graphComponent.morphLayout( new HierarchicLayout(), '2s', new HierarchicLayoutData({ layerConstraints: { nodeComparables: n => n.tag.year } }) )
  22. 22. • Scalar values • Color coding • Gauges • Extra texts • Animations • Icons, Badges • … Sample Custom Visualizations I
  23. 23. • Complex Data- Binding • Level of Detail • Interactive elements Sample Custom Visualizations II
  24. 24. • Custom labels, ports, edges, nodes, groups • Animated layouts Sample Custom Visualizations III
  25. 25. • Background graphics • Isometric views • Overlays • Hover effects • Highlighting • Selection Sample Custom Visualizations IV
  26. 26. • (Custom) search • Context menus • Keyboard, multi- touch, pen input • Editing • Clipboard • Input validation Sample Custom Interactions I
  27. 27. • Birds-eye view • Filtering • Utility views • Interactive analysis algorithms • Printing • Custom export Sample Custom Interactions II
  28. 28. Integrating 3rd Party Systems • Connect to any available service • Push/pull live-updates • Access all kinds of data storages • Automate processes
  29. 29. • Added an interactive legend • Aligned incoming and outgoing edges • Colored connectors • Added icons to connectors • Using screen-time data for line-thicknesses • Added interactive filtering and highlighting options • Added background showing the time-line The Marvel Universe: What we made of it …
  30. 30. Online for everyone to play with at yworks.com/marvel Other demos: yworks.com/demos
  31. 31. Any Questions? /yworks/in/yguy/@yworks , @ySebp contact@yworks.com www.yworks.com
  32. 32. yfiles.com yWorks GmbH, Vor dem Kreuzberg 28, 72070 Tuebingen, Germany Thank you and happy diagramming with !

×