Posts labeled "Graph Drawing Contest"

‘Game of Thrones’ Relationship Graph

Every year, the Graph Drawing conference organizes a contest which sets the task to visualize predetermined graph data. This year, the data consists of a graph that presents the relationships between 84 characters from the popular TV series ‘Game of Thrones’. Since our yFiles diagramming library is designed to arrange and visualize graph structures, we decided to participate in the contest. The image above shows a preview of our contribution. Read on if you want to find out how we created it or skip to the final result.

yFiles for HTML layout Graph Drawing Contest

Popular Blog Posts

Case Study: JetBrains

As codebases grow larger, it becomes more and more important to keep an overview - especially for large software companies that work with big development teams on their software. Automatic UML and class diagrams can help with getting this overview. Integrated Development Environments (IDEs) are an essential tool for professional software developers. They bring together various development tools and integrate them seamlessly into one integrated application to maximize the efficiency of developers around the world. At the forefront of IDEs for almost any coding language: JetBrains. Since 2000 they are dedicated to make professional software a more productive and enjoyable experience. They achieve this by maximizing the efficiency of the workflows of their customers by integrating many aspects of a developer’s workflow into one single platform.Throughout the last decades, more and more people are coding for a living and software keeps expanding and evolving. Part of that is the increasing size and complexity of their codebases. Adding new developers to the team and refactoring existing code becomes more challenging every day. To help developers understand and explore the structure of code, they can use UML-Diagrams (Unified Modeling Language). Although UML diagrams are not meant to be used as a single source of analysis, these diagrams can enable developers to see connections between classes of their codebase and quickly understand the interactions. The UML standard can be used with all the major objective and component software development approaches, making it very use-case independent. Class diagrams are one common example of the many different UML structure diagram types. They are suitable for overlooking the structure of classes and show their properties, constraints, and relationships. "UML Editor" DemoJetBrains uses UML diagrams in their IDEs to visualize codebases for their users. See for yourself, how UML Editors can visualize your information!Back in the early 2000s, JetBrains recognized the value of UML class diagrams for the workflow of developers. Every IDE started incorporating diagrams into their platform, so they, too, evaluated their options for an implementation. The free visualization libraries did not offer satisfying solutions and developing an intern solution was not cost-effective. JetBrains was looking for a professional solution that required as little work as possible. They decided to use yFiles, the diagramming SDK, and integrated it in their IntelliJ platform.Class diagrams in the editor. Source: JetBrainsUsing yFiles as their visualization library provided them access to the most sophisticated and complete automatic layout and visualization technology on the market. JetBrains decided to fully integrate the yFiles API into their IntelliJ API to make sure plugin developers could make use of the new diagramming capabilities, too. Now, they have a framework based on yFiles for creating diagrams for almost any purpose and do not have to invest much effort in diagramming nowadays. yFiles takes care of any type of diagram JetBrains needs and they can concentrate on what they do best: Improving the workflow of developers."yFiles meets the highest standards we maintain in all JetBrains products. We can offer our customers effective, great-looking diagrams with minimum effort spent on programming them."Konstantin Bulenkov, Project Manager JetBrainsThe automatic layouts of yFiles automatically generate clearly structured diagrams from the source code projects without users having to manually untangle or rearrange the diagrams. This allows developers to quickly gain an overview and understand complex relationships in their projects. When they update the code, the diagrams automatically adjust. Developer's don't need to worry about diagrams becoming outdated. The customizability of yFiles allowed JetBrains to seamlessly integrate it into their applications: By adding custom shapes, logos, and colors, many different types of diagrams could be integrated into their IDEs. With the help of yFiles, e.g., the integration of keyboard shortcuts was a walk in the park and allows power users to keep their efficient workflow even while interacting with the diagrams.Implementing yFiles into your own application can be as easy as this: Add the UML-style into the project, then create the corresponding drag and drop palette for the user to choose the elements from. Connect the UI and add the UML-layout configuration from one of the many source code demos that come with the yFiles library and the most difficult part of the work is done. When questions arise, the yWorks support team can guide developers along their way. This enabled JetBrains to implement the diagramming functionality into their products exactly how they had envisioned it.Since 2008, JetBrains has been using yFiles as the visualization solution in their products. yWorks is happy about the smooth cooperation with one of the finest IDE makers of the last decades: "We're looking forward to the next decades!"Getting started with yFilesLearn more about yFiles, the diagramming SDK, and it's powerful and flexible features for HTML, Java, .NET, and WPF here!JetBrainsSince 2000, JetBrains strives to make the strongest, most effective developer tools and speed up the workflow for developers around the world.Their mission is to make professional software development a more productive and enjoyable experience. JetBrains won over 80 industry awards and more than 8 million customers trust their tools.https://jetbrains.com

Case Study: Connect Our Kids

Visualizations can be found in places where you would not expect them in the first place. In one of our latest partnerships, we team up with Connect Our Kids, a non-profit organization based in Virginia, USA. Their mission is to create freely available tools that help child welfare professionals quickly and efficiently connect children in foster care faster with permanent loving homes. In the USA, about one hundred thousand children are in need of a permanent so-called “forever family”, as this is a crucial factor for the well-being of children growing up. The Families First Act, a bipartisan reform that provides more resources and treatment for families in need, encourages the reunion and placement in extended families of the children.Typically, adoption social workers divide their working hours between their office, foster homes, interviewing prospective adoptive families and talking to people around the foster children (e.g. teachers, neighbours, and doctors). But tracking down suitable members of the extended family circle can be a very challenging and time-intensive task for social workers and only few children can receive this level of effort. The process of interviewing people around the children, gathering information about the extended family, and assessing which relatives are the best foster-family for a child is usually a very tedious and slow process. Information gathered has to be manually stored, edited, and connected, which made the paper-based process inefficient in its nature. Paper-based social work. Source: Connect Our KidsConnect Our Kids seeks to change that through technology. Their free tool Family Connections simplifies the process involved by enabling social workers to create and keep editing a support map for each child. A support map not only shows the connection tree for every child, it also serves as an automatic contact information discovery, and it helps social workers to easily document their contact with members of the network. Connections that are typically mapped can range from direct and extended family, over doctors and teachers, to any other important person in the child’s life.Searching for contact information is as easy as possible with their automatic search tool, that goes through information from over 300 publicly available sources. This helps social workers to quickly find physical addresses and other contact information, such as phone numbers, email addresses, and even the social media pages. Furthermore, it also features example letters and example call scripts to simplify day-by-day tasks. But, the most crucial benefit is the ease of sharing the knowledge, by having a single online place for teams of social workers to visualize their work of discovering and engaging extended family members. Working collaboratively on one network is made possible by the great documentation of Family Connections: It allows social workers to share their notes directly in the support map, leaving a trail of knowledge for other workers involved. Hide DescriptionOpen in yEd LiveDownloadComputer-based social work. Source: Connect Our KidsFor the visualization component, Connect Our Kids chose to use a diagramming SDK, thereby reducing the time and cost of the development. SDKs are libraries full of pre-made code that allow programmers to take individual building blocks and integrate them into their own software, without having to program a part (in this case: the visualization) of their software entirely from scratch. The first prototype was built with a different SDK, GoJS. To generate the specific layouts needed and make the prototype market-ready, they made the switch to yFiles. The transition to yFiles was easy and, due to the similarity of the architecture, the data storage architecture and frontend framework did not have to be changed significantly."yFiles is tremendously flexible, allowing us to create the exact experience that our customers desired."Travis Collins, CTO Connect Our KidsThe "Zoom to Render" feature in Family Connections. Source: Connect Our KidsHowever, the greater flexibility of yFiles allowed the developers at Connect Our Kids to create specific network layouts and rendering features, crafting the exact experience that they desire. One of the most popular features now available with yFiles is the “zoom to see more information” feature, which allows social workers to see more information by zooming into the support map. The tool greatly cuts down the time spent tracking down individual connections and enables social workers to increase the time directly with the children, finding them permanent families.Demo "Level of Detail".Connect Our Kids makes perfect use of yFiles' "level of detail" style in their "zoom to render"-feature. See for yourself, how yFiles enables you to display your data interactively.For us, helping Connect Our Kids reach their goals is a matter of heart. They committed to the goal of helping social workers help children find forever-families. Their software is not for sale, they committed to sharing it freely with those working in the foster care system. We are looking forward to the future of our partnership. The tool will be made available nationwide in the US in 2020 and be perhaps one day even internationally available for social workers around the world.Connect Our KidsConnect Our Kids is a non-profit organization based in the US-state of Virginia. Their goal is to achieve an easy and fast connection between child welfare related professionals or CASA volunteers and possible reception facilities. Visit ConnectOurKids.org to see more information, request free access to their Family Connections tool, or support them.https://connectourkids.orgyFiles - the diagramming SDKLearn more about yFiles, the diagramming SDK, and it's powerful and flexible features for HTML, Java, .NET, and WPF here. Sources: Connect Our Kids; nacac.org; socialworkdegreeguide.org; The AFCARS Report No. 26

yWorks releases version 2.3 of yFiles for HTML!

The series of new releases in 2020 of the yFiles family of diagramming software libraries starts with the 2.3 release of yFiles for HTML. With this release, once more, yWorks shows that it's the leading provider of professional high-quality graph diagramming software libraries. The 2020 set of releases contain break-through features that have not been available to software developers before. They enable both existing yFiles customers and software developers new to the product to create stunning new diagram visualization applications that have not been possible before. I'll show you some of the highlights of the 2020 releases in this post. If you are new to yFiles and interested in a more general introduction to the product and also want to learn more about the many other features that have been part of the library for the previous releases, I highly recommend visiting the yFiles overview page, first.A new visualization technique will enable the creation of apps that weren't possible before As with every yFiles release, we make sure that there are improvements and new features across the product: Developers will be delighted that we were able to again improve their development productivity, but many of the new features, of course, will be visible to end-users, too. Most notably new graph analysis features and improved automatic diagram layout. One particular game-changing new visualization technique and other viewer and interactivity API improvements will enable new and existing yFiles customers to create applications that weren't possible before. The 2.3 release is a stable API release, almost completely backward compatible with older releases. New and hugely improved migration tools will help with updating to the new version, even for users switching from the old 1.x branch.New Source Code Demos As with every new release, we have added a set of interactive online demos that show the new functionality in action.RUN NEW DEMOSInteractivity and VisualizationThe new releases include two major new features in the area of visualization and interaction: Editing Diagrams in Isometric ViewsFor some kinds of technical diagrams, people have been using isometric views where the users see the diagram from an angle from above in a 3D-like perspective. yFiles had a demo of how to render these diagrams for a couple of releases, now. But users where not able to use the full editing convenience that yFiles usually provides, and which are especially important for editing isometric diagrams: Snapping and orthogonal editing, as well as orthogonal edge creation, are just a few examples which need to take into account the isometric projection to create properly looking isometric visualizations. RUN DEMOWith the new release, developers can let their users not just view and explore, but also create and edit their diagrams in an isometric view and yFiles doesn't just support one isometric view, but any isometric projection transform can be employed and end-users may switch seamlessly between isometric and regular 2D view. Bezier Edge Style Visualization and EditingThe 2020 releases contain a new Bezier Edge Style implementation that works perfectly with the new curved layout edge routing algorithms. It renders smooth spline curves efficiently and makes intuitive editing gestures possible. A new matching label model allows for dynamically placing and aligning labels on these curved edges. RUN DEMOExplicitly User-defined Z-Order EditingyFiles usually automatically handles the rendering order of elements, but sometimes end-users want to have manual control over the ordering. This release contains a demo that shows how to adjust and modify z-order in the context of a clipboard, serialization, and undoability.RUN DEMOUsing Markup for Rendering LabelsWhile developers have always been able to use the full power of the SVG, HTML5 Canvas, and WebGL engine to render labels, yFiles for HTML did not contain a convenient style for rendering and editing labels with a rich-text editor. The 2.3 release now comes with a style for rendering labels that support Markdown and HTML syntax.RUN DEMOImprovements for Graph Analysis The existing suite of graph analysis algorithms now also contains efficient implementations for these additional graph clustering algorithms:Page Rank algorithm Louvain ModularityLabel PropagationEigenvector Centralitydetecting cliques, chains, cycles, stars, and treesWe believe that the biggest improvement to graph analysis algorithms, however, was the inclusion of an algorithm that makes all of these rather academic or special purpose algorithms usable for developers: The new node aggregation algorithm automatically analyzes the structure of the graph, testing various clustering and centrality algorithms to find the one that can best be used to hierarchically nest and aggregate the graph so that it can be intuitively explored by end-users who usually don't know the meaning of the raw values and implications of using the various graph analysis algorithms.Finally, developers can easily unleash the power of graph algorithms for clustering their networksFinally, we can provide developers a tool to deal with even large datasets and create helpful visualizations for data for which there is no inherent structure in the data that allows for intuitively drilling into the data.Hide DescriptionOpen in yEd LiveDownloadRUN DEMOSupport for Analyzing SubgraphsyFiles comes with a wide range of efficient graph analysis implementations. Often, graphs contain items that should not be considered when calculating the results. E.g. in case you need to calculate centrality values for only a subset of the elements, ignoring nodes and edges of a certain type or with a certain attribute. For this release we added support for easily restricting the calculation of analysis results to a subset of the graph. Developers may explicitly declare which elements to consider and which ones to exclude, using both sets and convenient predicate functions.// Calculate centrality values const centrality = new EigenvectorCentrality({ subgraphNodes: { // only for the nodes that are currently visible on the screen includes: node => node.layout.toRect().intersects(graphComponent.viewport), // but not for group nodes excludes: node => graph.isGroupNode(node) } }) const result = centrality.run(graph) Improvements for Automatic Layout There has never been a release of a new yFiles version that did not contain many improvements or even new algorithms in the area of automatic layout. The 2020 releases are no exception to this rule. To the existing graph layout and edge routing algorithms, we added the following new features, mostly around the topic of rendering smoothly curved bezier edge styles. Bezier Routing for the Hierarchic Layout In less technical diagrams, rendering edges without sharp bends helps to remove visual clutter from a diagram visualizations. There are fewer places in the diagram that will attract attention to the eye and intersections between edges can be seen more easily. To the orthogonal (90-degree bends), octilinear (45-degree bends), and polyline (bending points with varying angles), we have now added built-in support for routing edges with smooth bezier curves.These types of edge visualizations lend themselves very well for example for the visualization of state-machines, but Sankey-diagrams, Mind-maps, and similar visualizations also benefit a lot from this style. Of course, as always the various routing styles may be mixed and match with each other in the same diagram if required.Advanced Edge Routing for Circular Layout The circular layout style is a style that highlights clusters and communities in networks. Closely connected groups of nodes are rendered in separate, interconnected circles.Just because a cluster is tightly connected, though, doesn't mean that every node is connected to every other node in the same circle. Therefore seeing which node is connected with which other nodes in a cluster can still be very important. The new advanced edge routing options for the edges within a cluster in a the circular layout now make it a lot easier to understand the connectivity between the elements. And it sure looks nice, too!Clear Area Layout and Fill Area LayoutWe implemented an algorithm that clears a user-specified area by moving away intersecting elements while minimizing the changes in the given layout. This helps users to keep their mental map of the layout and works just as well with automatically generated layouts as with manually or semi-automatically arranged diagrams. Applications for this type of layout utility are manifold: Expand collapsed groups of nodes in place without causing overlaps or destroying the mental map of the diagramInteractively make room for inserting new elements from a palette in a given diagramLet the user resize an element while avoiding the creation of new overlaps with existing elements RUN DEMOWe also added the inverse variant of the clear-area-layout that will automatically compact a diagram when there is abundant space available, e.g. after elements have been removed or resized to smaller sizes.RUN DEMOGeneric Bezier Edge Routing The generic edge routing algorithm can be used in those situations where the locations of the nodes are fixed and where there is no layout algorithm that has an integrated edge routing along. Starting with this release, the integrated edge router now also supports the routing of bezier style edges and edges can be routed with curves as a post-processing step with other existing layout algorithms:New Features for Developers It would not be a typical yFiles for HTML release if we had not spent a lot of energy in yet again improving the productivity of the developers working with the library and the new features. Of course, we make sure that yFiles works well with all the major frameworks, browsers, and new APIs in the ever-changing web development world, but we are also improving the way our APIs work and how the features work together in customer applications. We want to make it a pleasure for the software developers to create awesome, use-case specific apps that make use of the existing and new features in yFiles.New ways for loading your data into yFilesThe new API contains completely rebuilt classes for loading data from multiple sources into your diagrams. We added convenient APIs that allow for connecting to different data-sources in a declarative way to populate your diagrams. Binding visual styles, node sizes and locations, and any number of labels, has never been easier. Perfectly working TypeScript bindings will provide code completion down to the custom data-level. Loading complex data from multiple sources into your diagrams has never been easierconst graphBuilder = new GraphBuilder(graph) // any number of sources can be used to create nodes const nodesData = await getNodesData() const nodesSource = graphBuilder.createNodesSource( nodesData, // nodes data nodeDataItem => nodeDataItem.nodeId // node id provider ) nodesSource.nodeCreator.defaults.style = new ShapeNodeStyle({ fill: 'lightYellow', shape: 'roundRectangle' }) // change the style with a binding nodesSource.nodeCreator.styleBindings.addBinding('stroke', employee => employee.position.contains('Chief') ? 'darkRed' : 'darkOrange' ) // ... and edges const edgesData = await getEdgesData() const edgesSource = graphBuilder.CreateEdgesSource( edgesData, edgeDataItem => edgeDataItem.sourceNodeId, edgeDataItem => edgeDataItem.targetNodeId ) Developer and Production Builds Our customers quickly adopted the convenient npm-packaging of yFiles for HTML, which made integrating the library into modern build tool-chains like Angular CLI, Vue CLI, ReactJS and more as easy as calling npm install. The new release builds upon that functionality but this time adds the convenient runtime-type checking and debugging facility right into the package without having the user to manage an extra script import. The npm package automatically detects whether it is run in a production or development build and dynamically includes the debugging and runtime type checking mechanisms in the bundle.Formatting Objects in the Console and Debugger Debugging and inspecting objects at runtime is a task that many developers need to frequently do. yFiles works with complex objects which provide various utility methods and many properties that sometimes make it hard to find the important properties in a debugger. Properties are usually simply sorted by name rather than importance and private state is also visible in the debugger and console view.The new built-in developer mode now solves this problem by hooking into a mechanism that is part of modern browsers to help developers quickly see important information about the objects they are looking at.Collection-like objects automatically unfold and the most important properties are listed first for easy inspection. This dramatically improves debugging performance when IDEs and code-completion cannot help.More TypeScript Demo Sources yFiles for HTML comes with more than 200 source code demos examples that developers can use to learn about the API and features. Most of them are explicitly implemented to make it easy to copy the functionality into custom applications.While most of these sources are agnostic to the framework that will be used by our customers, the majority of the sources are provided as modern EcmaScript 2015+ sources. Many of our customers in larger corporations, however, use TypeScript and although JavaScript easily and seamlessly integrates with TypeScript and modern tool-chains, modifying our demo sources forces them to switch the programming languages.Many of the demos are provided both as TypeScript and JavaScript versions. With the 2.3 release of yFiles for HTML we are now providing many of the demos both as TypeScript and JavaScript versions and we will convert more of the existing demos to TypeScript in the following minor releases.Find a complete list these and many more new features in the yFiles for HTML release notes.If you want to see some of the features explained in more detail and in action, feel free to check the recording of our webinar What's new in 2020? on YouTube: If you haven't played with yFiles for HTML, before or want to try out the new version, we invite you to try yFiles for HTML, today! Happy diagramming!EVALUATE NOW

Case Study: Visualizing Digital Innovation

The Story behind the yWorks Logos

yWorks' first logoyWorks exists for almost 20 years now and has a long history of developing diagramming software. We started as a spin-off of the Eberhard-Karls-University in Tuebingen and grew over the last 20 years to a leading company in the diagramming world. After all these years of evolving our products, our corporate design had to evolve, too! The company used an iteration of the classic logo with a "y" in front of the blue circle for its entirety of existence - until 2019. We started with a blue ball with white lines and green shading, then transitioned away from the shading and lastly evolved it into a plain blue ball. Transiton from second to third logoSince yWorks started back in 2000, we focused solely on evolving our products. Now, we want to evolve the company as a whole. As a first step, we thought about our Corporate Identity and our core values and motivation: We want to enable everybody to use the power of beautiful graphs and diagrams. This message has to be incorporated in the new logo for the company as well as the product logos. We worked together with our marketing agency to create ideas and prototypes of how our new logos could look like. We went through a couple of iterations of logos, then, after we settled on one design, we had to make it pass the "yWorks challenge": Can we recreate it with our professional graph visualizing tool, yFiles? Yes we could! Our CTO, Sebastian, scripted an application with which our logos could be sketched out quickly and precisely. Our logo generated with the tool made with yFilesThe tool allowed us to manipulate the graph interactively, to find different styles and alterations. The “y”-graph was quickly made, but the size, shape, and thicknesses of the nodes and edges had to be adjusted until we found the perfect balance. The other product logos were made with the same tool by adjusting the number of nodes, changing their connectivity and placement,and finding different combinations to represent the products as best as possible. We are very happy to have found a set of wonderful logos and colors for our corporate design, which represent our core value: enabling everybody to use powerful and beautiful graphs and diagrams. And, as a bonus, our logos look great in different color combinations!