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: 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!

Hackathon at Stackoverflow Offices

The GraphConnect 2018 – the gathering of graph enthusiasts in Times Square, New York City – featured a special gem for developers. The friendly guys from Stack Overflow opened their offices and invited developers and hackers to a “Hackathon” all around Neo4j. The task of the Hackathon was to play “buzzword bingo” from a set of awesome, graph-related buzzwords and technologies on a bingo card, where participants had to come up with a technology “BINGO.” There were prizes for the winning teams in the categories of Best Use of Cypher, Best Visualization, Best Fully Functional Application and a prize for Most Buzzword Technologies Used. yWorks is a proud member of the Neo4j graph community. We build the graph visualization library “yFiles” – a great tool for developers to create interactive visualizations on top of their Neo4j data. Of course, we had to participate in the event. The event attracted many developers from diverse industries, and a larger part of the audience had only briefly worked with Neo4j before, so realizing a project with a new team (and just a little more than four hours time) was quite a challenge. For us at yWorks, it was very interesting what kind of results we could expect to see from developers that had little to no knowledge of Neo4j and visualization, let alone our diagramming library yFiles. To get something up and running in such a short amount of time, it was an obvious choice for multiple teams to reuse an existing solution for their visualization needs, instead of doing all the work from scratch. Three developers from yWorks helped the teams with their visualization task. However, since we did not want to give some teams an unfair advantage in the category for best data visualization, we restricted ourselves to consultancy work and did not write any code. Before the teams actually started with the hackathon, they could participate in a one-hour crash course on working with Neo4j and Cypher, or how to build their own yFiles-powered visualization app as a white-label solution on top f the Neo4j graph database. There were more than half a dozen projects pitched and many of the teams decided to put visualization on their bingo cards – obviously because visualization and graph databases go very well together. You can achieve great results and you will be able to understand your data much quicker with visualization. And, of course, sophisticated visualization lends itself perfectly for communicating the results of your projects and proof-of-concepts to your non-developer colleagues. Because of the limited time the teams had, those who chose to put visualization on their bingo card were able to simply use yFiles. They didn’t have to spend too much time on getting the application to run, determining where and how to place the elements on the screen, do the styling and configure the interactions. They were happy to be able to reuse sensible default settings and could base their work on existing code samples that come with the library. Also, if time permits, any of these aspects can be improved later on without having to rewrite the rest of the application. I offered my help to the “Spatial Graph App” team led by Craig Taverner. They had a very interesting project where they wanted to create a custom app that integrates with the Neo4j Desktop. That app should use the new geo-spatial features that have become available with the latest Neo4j release. They had a huge dataset in their Neo4j database that consisted of the geographic data of the routes through Manhattan. It consisted of several ten thousand routing points and connections. They knew there were some problems with the dataset, but without an effective visualization it was impossible to debug the problem efficiently. So their choice was obvious: Their buzzword bingo card was about Neo4j for the storage of the data, the spatial functions in Neo4j to query the datasets, yFiles for the visualization and ReactJS for creating the Neo4j Desktop application using JavaScript. Importing the data into Neo4j turned out to be super easy with the built-in geo-spatial support: > LOAD CSV WITH HEADERS FROM 'file:///routingGraph.csv' AS line > MERGE (a:Routable {location:point({latitude:toFloat(line['p_lat']), longitude:toFloat(line['p_lon'])})}) > MERGE (b:Routable {location:point({latitude:toFloat(line['x_lat']), longitude:toFloat(line['x_lon'])})}) > CREATE (a)-[:ROUTE]->(b); Surprisingly, the team’s greatest problem was neither the seemingly complicated technologies of Neo4j, Cypher or the visualization. It was a tool that hundreds of thousands of developers use all the time that slowed them down the most. The ReactJS tool-chain and some incompatibilities between minor React versions turned out to be the greatest pitfalls! So time passed and almost no time at all was spent on the visualization. I really wanted to help them with the coding and integration of the visualization, but I had promised not to write any code. Twenty minutes to go until the presentation and we had not even started to connect the data with the visualization component! Ten minutes left to go and the team cheered when we finally saw the data on the screen for the first time. This was after almost three hours fighting with the React build-system and other issues that were totally unrelated to the actual task. Time was running out and we had to quit and prepare the presentation for the judges. Laughs were definitely on our side when we presented our the data set to the jury. We had not managed to configure the coordinates for the visualization in time, so even though we were able to present the routing graph of the streets of Manhattan to the jury – queried from a Neo4j database with a custom geo-spatial query – all of the ten thousand elements and connections where still rendered on top of each other in the same location on the screen. Although technically a success, obviously our chances to win the prize for best visualization were close to zero. After we left the stage, I decided I could now intervene and helped the team add the two (!) missing lines of code to the project to actually get a nice visualization of the streets of Manhattan. > graphBuilder.locationXBinding = node => node.properties["location"].x * 100000; > graphBuilder.locationYBinding = node => node.properties["location"].y * -100000; We still did not win the prize for the best visualization, but the jury decided that the “Spatial Graph Apps” team had won a special prize for their outstanding perseverance and agility. On my way back home from the conference, I decided I wanted to polish the app a little more. Graph visualization is fun when you have the data and it didn’t take long to incorporate a few more nifty features. The spatial app feature in Neo4j really makes working with geo-spatial data a breeze: I was able to easily modify the Cypher query to show exactly the data that I was interested in. Also calculating shortest-paths directly on the database is possible! I changed the visualization to use WebGL for rendering of the routing graph and used SVG to render high-quality shortest-path visualizations on top of it. With a few simple mouse-clicks in the app it was now possible to interactively explore the data set and calculate a routing through Manhattan.So who won the price for Best Graph Visualization? It was the team “BrowserBuddy” who also decided to use yFiles for their visualization. The team around Benjamin Squire was able to reuse a generic yFiles/Neo4j demo and created a visualization around website domains and http sub-paths. The diagram represented multiple domains, which were connected to various sub paths. The highlighted subgraph shows a single domain and a few of its first-level subpaths, which are also shared among other domains. They used a customized layout algorithm to automatically arrange the elements in the diagram and easily convinced the jury with their presentation: Congratulations to Ben and his team for winning the contest! We had a terrific time at the Stack Overflow offices that day and once again we were shown what great visualization can do with the data in your Neo4j database. If you would like to play with the tools yourself, feel free to evaluate yFiles at no cost. You can create awesome visualizations quickly and integrate them as white-label components into your existing dashboards and applications. What are you waiting for? Happy diagramming!