Auf dieser Seite stellen wir euch unsere Basketball Bundesliga App “BBL Liga Graph” vor.
On this page we would like to introduce you to our interactive app for the German basketball league (English version here).
- Deutsch
- English
Worum gehts?
yWorks ist ein weltweit agierendes mittelständisches Softwareunternehmen mit Sitz in Tübingen. Unsere Heimatstadt ist auch das Zuhause der Bundesligabasketballer “Walter Tigers” und nicht wenige unserer Mitarbeiter sind auch Basketballfans. Ich bin der technische Geschäftsführer dieser Firma und seit einigen Jahren treuer Fan der Tigers.
Vor einem Spiel stelle ich mir immer wieder die Frage: “Wie stehen heute denn eigentlich unsere Chancen zu gewinnen?” Nicht immer ist die Frage schnell und einfach durch einen Blick auf die Tabelle beantwortet. Gerade zu Beginn der Saison spiegelt der Tabellenplatz nicht unbedingt das genaue Kräfteverhältnis zwischen den Teams wieder und gegen Ende der Saison stellt sich dazu oft diese Frage: “Wie hat denn der heutige Gegner gegen andere Teams im Vergleich mit meiner Mannschaft in dieser Saison bereits gespielt?”
Antworten kann man sich mit etwas Fleißarbeit aus den offiziellen Tabellenlisten und vielleicht noch mit Stift und Papier zusammensuchen; als Programmierer und Softwareentwickler versucht man aber schnell, sowas mit weniger Handarbeit automatisiert zu erledigen.
Als neuer offizieller Partner der “Walter Tigers” Tübingen 2017 haben wir uns gedacht, dass es doch ein perfekter Anwendungsfall für unser Produkt “yFiles” wäre, wenn wir eine App erstellen könnten, die die offiziellen Ergebnislisten der “easyCredit BBL” direkt verarbeitet und dann Antworten auf eben diese Fragen leicht verständlich grafisch aufbereitet.
Mit der Idee wandten wir uns an die Walter Tigers. Der Funke sprang sofort über und man half uns, Kontakt mit den entsprechenden Verantwortlichen bei der Basketball Bundesliga aufzunehmen. Dies war Voraussetzung dafür, dass wir unser Vorhaben rechtlich abgesichert in die Wirklichkeit umsetzen konnten. An dieser Stelle gilt unser herzlicher Dank all jenen, die dies möglich gemacht haben und uns das Recht eingeräumt haben, sowohl die Ergebnisse automatisiert zu verarbeiten, als auch die Logos der Vereine für die App zu diesem Zweck einsetzen zu dürfen!
Heraus kam eine kleine Webapplikation, die auf jedem halbwegs modernen Browser sowohl auf Mobilgeräten als auch auf dem Desktopcomputer ohne Installationsaufwand direkt genutzt werden kann. Für ungeduldige erklärt das folgende Video kurz, wie die App zu bedienen ist.
Die App kann die tagesaktuelle Tabellensituation in der Bundesligatabelle anzeigen und generiert automatisch ein interaktives Diagramm in dem die einzelnen Mannschaften dargestellt werden. Jede Mannschaft wird durch ihr Logo repräsentiert und farbige Linienverbindungen zwischen den Mannschaften zeigen an, welche Mannschaft bereits gegen welche andere gespielt und gewonnen hat.
Der Clou an der Sache ist, dass nicht alle Spiele als Linienverbindung angezeigt werden. Das würde bei mehreren Hundert Spielen in der Saison recht schnell sehr unübersichtlich werden. Stattdessen werden Verbindungen weggelassen, welche keine Überraschung mehr darstellen sollten: Wenn zum Beispiel -wie in der letzten Saison geschehen- Bayreuth gegen Würzburg gewonnen hat und Würzburg gegen die Walter Tigers gewonnen hat, dann wäre die Information dass Bayreuth auch gegen die Tigers gewonnen hat nicht mehr wichtig genug um angezeigt zu werden, da bereits ein “Pfad” von Bayreuth über Würzburg nach Tübingen angezeigt wird. Auf diese Weise bleibt die Zahl der Begegnungen, die im Vergleich der Mannschaften angezeigt wird niedrig, und es ergibt sich eine gute Übersicht über die zu diesem Zeitpunkt herrschenden Kräfteverhältnisse in der Liga.
Wie kann ich die App verwenden?
Die App kann mit jedem modernen Webbrowser auf dem Desktop oder von Mobilgeräten genutzt werden. Nach dem Öffnen kann man zwischen der einfachen Tabellenansicht und einer grafischen Ansicht wechseln. Bei großen Geräten werden die beiden Ansichten gleichzeitig nebeneinander dargestellt.
Vor Beginn der Saison gibt es natürlich nicht viel zu sehen; alle Teams haben die gleiche Punktzahl und Ergebnisse zu Begegnungen gibt es noch keine. Deshalb hat uns die easyCredit BBL freundlicherweise die Daten der vergangenen Saison ebenfalls zur Verfügung gestellt. Nach dem Start der App kann man im Menü oben in der Ecke der App (oder durch Hereinwischen von links) über den Punkt "Rückblick Saison 2016/2017" die Ansicht auf die historischen Daten wechseln.
In der grafischen Ansicht (Reiter "Vergleich" in der Mobilansicht) sind die Teams als Kreise mit ihren Logos dargestellt. Eine Linienverbindung zwischen den Kreisen deutet auf eine vergangene Begegnung hin. Eine Pfeilspitze zeigt an, welche Mannschaft die jeweils andere besiegt hat. Dicke Verbindungslinien stehen für einen deutlichen Sieg, dünnere für ein knapperes Ergebnis.
Mit der Maus oder über Wischgesten mit den Fingern kann die Grafik verschoben und in der Größe geändert werden. Bei der Mausbedienung am Computer geht das mit Hilfe des Mausrads.
Mit den Pfeiltasten am unteren Rand der Darstellung auf dem Bildschirm kann man die Zeit vor- und zurückdrehen, um sich die Situation am Ende anderer Spieltage der Saison anzeigen zu lassen. So kann man dann einfach den Verlauf der Saison nachvollziehen.
Ein Anklicken oder Antippen einer Mannschaft zeigt deren Rang in der Rangliste für den angezeigten Spieltag an.
Ein Klick auf eine Verbindungslinie zeigt das genaue Ergebnis zu dieser Begegnung an.
Durch die zwei Auswahlmenüs an der oberen Seite des grafischen Vergleichs kann die Anzeige auf den Vergleich zweier Mannschaften beschränkt werden. In dieser Ansicht wird angezeigt, wie die beiden Mannschaften im Netz der vergangenen Begegnungen zueinander in Beziehung stehen. Wenn die beiden Mannschaften bereits direkt aufeinander getroffen sind, dann wird diese Verbindung in dieser Ansicht nicht dargestellt. Stattdessen kann man sehen, ob es eindeutige Pfade zwischen den beiden Kontrahenten gibt, die einen Hinweis darauf geben, wie die Mannschaften zueinander im Kräfteverhältnis einzuschätzen sein könnten.
Gibt es keine Pfade zwischen den Kontrahenten, werden andere Begegnungen mit einem Dritten Gegner angezeigt, gegen den beide Mannschaften verloren oder gewonnen haben.
Wie funktioniert das Ganze technisch?
Für die Umsetzung der App haben wir unsere kommerzielle Software “yFiles” verwendet. Sie erlaubt es, Programme zu erstellen, die Daten automatisch analysieren, und Diagramme und Grafiken ohne manuelles Zutun erzeugen. Alle Darstellungen in der Webapp werden komplett automatisch erzeugt und berechnet. Das passiert “live” in dem Moment, in dem Benutzer der Applikation die Kriterien für die Anzeige auswählen. Auf dem Gebiet der automatischen Diagrammerzeugung ist yWorks mit dieser Software weltweit führend.
Die App verarbeitet direkt die Rohdaten, wie wir sie von der easyCredit BBL zur Verfügung gestellt bekommen. Diese Daten enthalten die Ergebnisse aller bereits gespielten Partien. Daraus errechnet das Programm dynamisch die jeweils aktuelle Ergebnistabelle und das Netzwerk, welches sich aus den Mannschaften und den Begegnungen ergibt. Aus diesem Netzwerk werden dann redundante Informationen herausgefiltert und eine automatische Anordnung der Elemente zueinander in einer Diagrammdarstellung berechnet.
Was kommt noch?
Die App wird im Laufe der Saison weiterentwickelt werden und neue Funktionalität erhalten. Einige Ideen für Verbesserungen haben wir bereits gesammelt:
- Ein “Was wäre wenn...?”-Modus: Benutzer könnten die Möglichkeit bekommen, Ergebnisse in der Vergangenheit zu verändern oder Vorhersagen für anstehende Begegnungen machen, um dann zu sehen, wie die Tabelle und das Vergleichsnetzwerk beeinflusst wird.
- Eine Einschränkung der Ergebnisberechnung auf einen kürzeren Zeitraum: Für anstehende Begegnungen ist es vielleicht interessanter, nur die letzten Spieltage und nicht die ganze Saison zu berücksichtigen.
- Man könnte neue Diagramme erzeugen, die einzelne Begegnungen grafisch darstellen: Welcher Spieler hat welchen gefoult? Wer hat wen geblockt, oder an wen Assists verteilt? Wer wurde gegen wen eingewechselt?
Wenn du weitere Ideen oder Verbesserungsvorschläge haben solltest, dann lass es uns wissen: Hinterlasse uns doch einfach eine Nachricht über unsere Webseite!
Wenn du auf dem Laufenden bezüglich der App bleiben willst, dann folge uns doch einfach auf Twitter! Über einen Tweet freuen wir uns immer!
English Introduction
yWorks is a globally operating software company located in the city of Tuebingen. There is a basketball team in our hometown that plays in the german national basketball league: The “Walter Tigers” . Many of our employees love basketball. I am the CTO of yWorks and I am huge fan of the Tigers for a couple of years, now.
On game day, I often ask myself: “What chances are there for our team to win this game, today?” Simply looking up the positions on the ranking table does not always give a satisfying answer. Especially in the early season, the ranking table does not really tell you much about the relative strengths of the teams and at the end of the season, often there is this question: “How did today's opponent relate against other competitors during the season which we already played against?”
With a lot of paper work you can find answers to these questions if you examine the official statistic tables. Being a programmer and software developer we always try to automate these kind of manual and tedious processes, though.
Since this season, yWorks is an official partner of the “Walter Tigers” and we thought it would be a perfect match for our product “yFiles” if we created a web application that could query and use the official ranking data from the “easyCredit BBL” (the German basketball league) to help us get answers to these kind of questions in an intuitive and interactive, graphical manner.
With that idea in mind we approached the Walter Tigers. They were immediately excited and helped us make contact with the officials at the basketball league. This was a precondition for us so that we can legally reuse the official ranking data. A big “thank you” to all those who helped in the process to grant us the right to both use, process, and reproduce the official data sources, as well as the logos of the various teams for the visualization purposes in the app!
What we created was a small web application which can be run on any modern desktop or mobile browser.
The app displays the current ranking table and automatically generates and displays an interactive diagram. In the diagram teams are represented as circles. A line between two teams represents a match. An arrowhead indicates which team won over the other one. The thickness of the lines indicates whether it was an easy win or not.
What's special about the visualization is that not all matches are shown. With several hundred matches per season this would quickly become a messy and hard to understand diagram. Instead the app leaves out certain matches in the visualization: If for example, team A won both against team B and C, and team B also won against team C, it's not a surprise anymore that team A won against team C and we can omit this connecting line in the diagram, because there is already a “path” displayed between team A and C. This results in a much more compact and easier to understand visualization.
How to use the app
Start the app using a modern browser on your mobile device or desktop computer. You will see a ranking table and the graphical network. On smaller devices these will be on two separate tabs, whereas on larger screens both will be visible at the same time side-by-side.
At the beginning of the season there may not be much to look at so you may use the menu to switch to the past season which we got permission from the easyCredit BBL to present, too.
Use the mouse and the mouse wheel or touch gestures respectively to navigate in the diagram.
Click, tap, or hover over team nodes and match connections to reveal more details and highlight the teams in both the table and the diagram.
Using the two drop down menus at the top, you can choose to put two teams in a heads-up comparison. This view shows the network of the matches that connect the two chosen teams. If the two teams already played against each other, that connection is not shown in this visualization. Instead an algorithms looks for paths between the two opponents that clearly indicate the domination of one team over the other.
If there are no such paths, the app tries to find another team which already won or lost against both teams and then displays these connections.
How does all of this work?
For this app, we used our commercial software “yFiles”. With it, you can write computer programs to automatically analyze data and to create diagrams and graphics without any manual work. All visualizations in the app are created and calculated fully automatically. This all happens the moment that the user makes the choices for the visualization criteria. With this kind of software tool, yWorks is the world-wide leader in the domain of automatic diagram creation software.
The app directly digests the raw data that we get from the easyCredit BBL. This data contains all the results of the games that have been played. This is what the program uses to dynamically calculate the ranking and the visualized network of the teams and the matches played. From the network, it removes redundant information and automatically calculates a nice drawing and arrangement of the elements on the screen.
What else could we do?
We will be improving the app during the course of this season and we will add more functionality to it. We already have a number of ideas:
- A “what-if?” mode: We could give the user the option to change results of past games or make predictions for future games to see how that would influence the ranking and the network.
- We could restrict the calculation to a shorter time span: If you want to predict the outcome of a match, it may be more important to focus on the last couple of weeks or months rather than looking at the complete season.
- We could create completely different diagrams, each of which concentrating on a single match: Which player committed a foul against which other player? Who blocked another player? Who gave assists to other players and who substituted for which other player?
Do you have ideas for improvements, too? Let us know! Just leave us a message in the social media or using our contact form.
If you want to stay up to date, just follow us or leave us a comment on Twitter!
