LineUp: Visual Analysis of Multi-Attribute Rankings

---

• Source Code: http://github.com/lineupjs/lineupjs
• Website: https://lineup.js.org
• Demo: https://lineup.js.org/app
• Project Date: since 2013
• Tags: publication, multi-attribute, library
• Technologies: javascript, es6, babel

LineUp is a visualization technique for multi-attribute rankings. It is implemented as reusable JavaScript library available at lineup.js.org. It won the best paper award out of 152 submissions at IEEE InfoVis 2013 when it was orginally published. The paper and more information can be found on its Caleydo Website. Taggle is a recent publication about the new advanced features of LineUp.

LineUp is my hobby project that I maintain since 2013. It started as a Java extension to the Caleydo framework but soon be rewritten to a JavaScript libraries. Since then, the library and LineUp has changed a lot and is now in version 4. The latest version is written in clean TypeScript and uses a custom rendering engine the LineUpEngine. The latest version can utilize web workers such that it works with one million rows in an interactive way.

The LineUp App is a web application that allows the user to manage and upload CSV files and explore them using LineUp. It has several example dataset one can play around with. Moreover, any ranking can be downloaded as CSV or JSON or exported to e.g. CodeSandbox to be embedded in other websites.

Besides the library itself, I implemented several adapters to other frameworks such as React lineupjsx, Vue.js vue-lineup or Angular ng-lineup. Moreover, there are bindings to R Shiny Widgets lineup_htmlwidget or Jupyter Widgets lineup_widget.

Close

UpSet.js

---

• Source Code: https://github.com/upsetjs/upsetjs
• Website: https://upset.js.org
• Demo: https://upset.js.org/app
• Project Date: since 2020
• Tags: upset, library
• Technologies: typescript, sass, react, preact, yarn

UpSet.js is a JavaScript re-implementation of UpSetR which itself is based on UpSet.

It allows to interactively explore large set intersections. The library is written in TypeScript and the core as a Pure React component. However, in additional a bundle version is available allowing to use it without React. The main source code in in the mono repo located at https://github.com/upsetjs/upsetjs. This repository contains the library itself (@upsetjs/react) along with a bundle wrapper (@upsetjs/bundle), a demo application (@upsetjs/app) and a Vue.js wrapper (@upsetjs/vue).

In addition, at upsetjs_r an R HTMLWidget wrapper and at upsetjs_jupyter_widget a Jupyter Widget are available.

Close

Slack Cleaner

---

• Source Code: https://github.com/sgratzl/slack-cleaner https://github.com/sgratzl/slack_cleaner2
• Project Date: since 2017
• Tags: open source, slack
• Technologies: python3, docker

I took over the orphaned slack-cleaner project. The project aims to easily clean up slack messages which is especially useful for people just using the free account. Besides maintaining the existing code base, I created a modulized version of it at slack-cleaner2 that allows an easy scripting, deletion, and archiving of messages.

Close

MiniZinc Constraint Program Solver

---

• Source Code: https://gitlab.com/minizinc/minizinc-webide
• Demo: https://minizinc-ide.netlify.com/
• Project Date: May 2019
• Tags: minizinc, constraint programming, emscripten
• Technologies: react, mobx, emscripten, d3

MiniZinc is a constraint programming language and solver developed by the Monash university in Melbourne, Australia. Based on a simple language, MiniZinc allow to solve problems such as scheduling problems or travelling salesman problems. During my research visit at Monash university, I contributed to porting MiniZinc to the web using Emscripten and developed tools around that to simplify its usage including a Web IDE for the language or an easy integration to create interacive tutorials. For example this CodePen shows how to embed MiniZinc into a website to solve a problem.

One application that I implemented and migrated using this new MiniZinc.js is a case study for solving the vehicle routing problem with time constraints. In this web application users can explore and optimize the routing schedules of delivery trucks in the Monash university area.

Close

Chart.js Plugins

---

• Source Code: https://github.com/sgratzl?q=chartjs
• Project Date: since 2018
• Tags: open source, chart.js, box plot, map, graph, tree, pcp
• Technologies: es6, babel, rollup.js, jest, canvas, d3

Chart.js is a JavaScript charting library based on HTML Canvas. It support various basic chart types but also allow developers to extend the framework using plugins. Over the last two years I created several plugins that improve the library and add new chart types as well as contributed to Chart.js itself:

The Box Plot plugin allows user to create box and violin plots. Box Plots allow to quickly summarize distributions by showing the most important staticical values such as the median value and several quantiles. I also created a Hierarchical Scale Plugin that extends for example bar charts to group, collapse, expand, and focus on hierarchical data. It is an advanced version of the grouping feature in Microsoft Excel.

Recently I created several new plugins that further extend Chart.js to draw more visualization types. The Graphs plugin allows developers to show graphs/networks and trees, either using using a force directed layout or a fixed tree layout. The Error Bars plugin extend several standard plot types (bar chart, scatterplot, radial charts) to render error bars to show distribution and error ranges. The Geo Plugin allows developers to render choropleth and bubble maps, such as showing information on a world map about population densities. The PCP Plugin allows developers to create interactive parallel coordinate plots with optional bezier curves support. The Word Cloud Plugin allows developers to create word clouds based on d3-cloud.

I’m happy that all my plugins are now listed on the official chart.js awesome list. Moreover, I started contributing to Chart.js itself by being the main contributor to its new TypeScript typings as well as their efforts for ESM Treeshaking support.

Close

Telegram Bots

---

• Source Code: https://github.com/sgratzl/developer_webhook_bot https://github.com/sgratzl/yet_another_rss_bot
• Demo: https://t.me/developer_webhook_bot
• Project Date: since October 2019
• Tags: telegram, bot, rss, webhook, github
• Technologies: typescript, serverless, netlify, telegraf, mongodb

Telegram is a sweet instant messenger with various different security features. However, from a developer point of view the most interesting part is the easy development of custom Telegram Bots. Bot are really nice especially when it comes to developer information such as Github notifications.

Based on an existing Github Bot implementation I created my own version the Developer Webhook Bot. It is a stateless bot which acts as a webhook sink. Each message the bot receives via the webhook will be parsed and forwarded to the configured channel. So far Github, Bitbucket, and CircleCI are supported. The bot itself is implemented in a serverless manner, thus when the bot receives a messages from Telegram or an incoming webhook it will trigger a serverless function hosted on Netlify. The advantage of this approach is that it avoid binding ressources that would be used for polling and checking for updates. Moreover, in this case the deployment is for free.

Based on this initial experience I created another Telegram bot for parsing and forwarding RSS messages. The Yet Another RSS Bot is an experiment for a stateless RSS Bot. Tho, RSS requires polling. I’m using the free Cron Job website to trigger my stateless function regularly. Moreover, to store the configuration I use MongoDB Atlas. The main application of this job is to give me updates on sites like heise.de.

Close

Cytoscape.js Plugins

---

• Source Code: https://github.com/sgratzl?q=cytoscape
• Project Date: since 2020
• Tags: open source, cytoscape, cytoscape.js
• Technologies: es6, babel, rollup.js, jest, canvas, d3

Cytoscape.js is a JavaScript network visualization library. It support various basic node customizations but also allow developers to extend the framework using plugins. Over the last two years I created several plugins that improve the library:

The Layers plugin simplifies the creation of addition layers in SVG, HTML, or HTML Canvas form. This can be used in various ways from using HTML nodes for the labels on nodes to smooth animated edges.

The Bubblesets plugin is an adapter to BubbleSets library for rendering bubble paths underneath nodes creating set like relationships in graphs.

The Overlays plugin allows to render bar, boxplots, histograms, and sparklines next to nodes which can be used to show data associated with nodes. Like showing experimental data in pathways.

Close

YaCoBo

---

• Source Code: https://github.com/sgratz/yacobo
• Demo: https://yacobo.vercel.app
• Project Date: September 2020
• Tags: covid-19 data, next.js, vercel
• Technologies: next.js, typescript, react, vega, vercel

YaCoBo (Yet another COVID-19 Board) is a dashboard application visualizing COVID-19 data for the US. YaCoBo is hosted at https://yacobo.vercel.app/. It shows data from the Delphi Group at Carnegie Mellon University which they collect as part of the COVIDCast project.

YaCoBo is implemented using Next.js, hosted on Vercel, and uses Lambda Store for caching. The charts are created using Vega statically on the server side with the option to enable interactivity on the client.

Close

Abandoned Projects

---

• Source Code: https://github.com/girder/viime
• Demo: https://viime.org
• Project Date: since 2020
• Tags: bubblesets,venn.js
• Technologies: babel, es6, typescript

Another area of my projects is to maintain abandoned projects or improve by applying latest best practices. Among others, I start to maintain venn.js a JavaScript library for rendering euler diagrams. bubblesets-js for rendering bubble sets paths. Lastly, I forked WebCola and improved its overall infrastructure. The corresponding PR is still pending.

Close

Caleydo

---

• Category: Research Collaboration
• Website: http://caleydo.org
• Demo: http://caleydo.org
• : https://github.com/Caleydo
• Tags: project, research

Caleydo is a research collaboration among Johannes Kepler University Linz, the University of Utah, Graz University of Technology, Harvard University and Harvard Medical School. I joined the team during his Phd studies and together we developed a series of awarded publications in the area of information visualization with a focus on biomedical data.

Close

Vistories: From Visual Exploration to Storytelling and Back Again

---

• Category: Model and JavaScript library
• Website: https://vistories.org
• Demo: https://vistories.org
• : https://github.com/phovea/phovea_clue
• Tags: publication, reproducibility, provenance, storytelling

Visualization is an important data analysis method that allows scientists to explore a dataset without preconceived questions, and is thus crucial for hypothesis generation. When combined with algorithmic approaches, it bridges the gap between exploration and confirmation. Visualization is also essential in communicating research findings.

Current visualization tools, however, have a crucial shortcoming: the interactive visual exploration process is not captured, which means that the analysis steps cannot be shared. Being able to reproduce visual analysis sessions and enabling third parties to understand, modify, and extend analysis sessions can have a significant impact on transparency, reproducibility, and innovation of analysis processes. Furthermore, there is enormous potential to utilize visual analysis sessions to efficiently communicate data.

In this paper we introduce a prototype that is a first step towards making this vision a reality. We capture the visual analysis process and enable users to comment on their decisions to make visual analysis reproducible. We leverage the data about the analysis process to allow scientists to create “Vistories”, which are interactive and narrated figures, to communicate their findings. Vistories do not only efficiently communicate the findings, but also give audiences the ability to retrace and modify an analysis. Demos for our prototype for this approach are accessible below.

Close

covidcast

---

• Category: consulting
• Website: https://covidcast.cmu.edu
• Demo: https://covidcast.cmu.edu
• : https://github.com/cmu-delphi/www-covidcast
• Tags: visual analytics, COVID-19, research

I recently joined the COVIDCast project by the Delphi Team at Carnegie Mellon University. The Delphi Team has a reputation for forecasting flu spread in the US in previous years and started the COVIDCast project for collecting, providing, analyzing, visualizing, and forecasting the COVID-19 pandemic. I joined their visualizing efforts as a consulting contractor applying my engineering and visualization skills.

Close

Target Discovery Platform

---

• Project Date: since December 2015
• Category: Web Platform
• Website: https://www.datavisyn.io/#tdp
• Demo: https://www.datavisyn.io/#tdp
• : https://github.com/datavisyn/tdp_core
• Tags: platform, typescript

I developed the Target Discovery Platform (TDP) during my PhD as part a research collaboration with Boehringer Ingelheim. The platform and its application like Ordino or dTiles build the foundation for the spin-off company datavisyn. In October 2016, I co-founded the datavisyn GmbH spin-off company together with my professor Marc Streit, Alexander Lex, and Nils Gehlenborg. From 2016 till 2019 I acted as the CTO, head developer, and software architect in the company. Datavisyn develops data visualization solutions for applications in pharmaceutical and biomedical R&D.

Close

Teaching

---

• Project Date: 2016 - 2019
• Category: Teaching
• : https://github.com/sgratzl/d3tutorial
• Tags: tutorial, D3, lecturer

Besides development new techniques and tools I was a lecturer at the Hagenberg University of Applied Sciences from 2016 till 2019, where I taught students the fundamentals of information visualization with a focus on web based visualizations using D3. Moreover, I wrote and maintain a open D3 v5 tutorial hosted on Github.

Close

Visually Guiding Users in Selection, Exploration, and Presentation Tasks

---

• Project Date: April 2017
• Category: PhD thesis
• Pdf: PhD thesis
• Tags: thesis, guidance

In my PhD thesis I describe models, techniques, and tools that supports and guides users in selection, exploration, and presentation tasks encountered during an visual analysis. It can be summarized as:

Making scientific discoveries based on large and heterogeneous datasets is challenging. The continuous improvement of data acquisition technologies makes it possible to collect more and more data. However, not only the amount of data is growing at a fast pace, but also its complexity. Visually analyzing such large, interconnected data collections requires a user to perform a combination of selection, exploration, and presentation tasks. In each of these tasks a user needs guidance in terms of (1) what data subsets are to be investigated from the data collection, (2) how to effectively and efficiently explore selected data subsets, and (3) how to effectively reproduce findings and tell the story of their discovery. On the basis of a unified model called the SPARE model, this thesis makes contributions to all three guidance tasks a user encounters during a visual analysis session:

The LineUp multi-attribute ranking technique was developed to order and prioritize item collections. It is an essential building block of the proposed guidance process that has the goal of better supporting users in data selection tasks by scoring and ranking data subsets based on user-defined queries. Domino is a generic visualization technique for relating and exploring data subsets, supporting users in the exploration of interconnected data collections. Phoeva is a novel open-source visual analytics platform designed to speed up the creation of domain-specific exploration tools. The final building block of this thesis is CLUE, a universally applicable framework for capturing, labeling, understanding, and explaining visually driven exploration. Based on provenance data captured during the exploration process, users can author “Vistories”, visual stories based on the history of the exploration. The practical applicability of the guidance model and visualization techniques developed is demonstrated by means of usage scenarios and use cases based on real-world data from the biomedical domain.

Close