
<button href="https://flowmap.city">Try live</button>

[Flowmap City](https://flowmap.city)
is an analysis tool for cities, transport and mobility providers for understanding travel demand.

![Flowmap City – Passenger traffic in Switzerland](flowmap-city-npvm.jpg)

![Flowmap City – Zurich public transport](zurich-transport.jpg)


Flowmap City


As part of the Unfolded/Foursquare team I am contributing to the development of [Foursquare Studio](https://studio.foursquare.com).

Here are some of the features I've worked on:

<i>Trip layer with 3D models and labels – Flights in Europe</i>
<embed src="flights-with-clouds-50.mp4" />

<i>Swipe mode – Eagle Creek fire vegetation loss</i>
<embed src="Eagle-Creek-Fire-33.mp4" />

<i>Annotations – US Census 2020 - Population and Race</i>
<embed src="fsq-annotations.mp4" />

<i>Annotations – Editing</i>
<img src="annotations.jpg">

<i>Annotations – Editing</i>
<img src="annotations-2.jpg">

<i>Flow layer – Bike sharing in Montreal – </i>
<img src="unfolded-flow-layer-bixi.jpg">

[](2.jpg)

<i>Layer config JSON editor</i>
<embed src="layer-config-json-editor.mp4" />


Foursquare Studio


<button href="https://flowmap.blue">Try live</button>
<button href="https://github.com/FlowmapBlue/FlowmapBlue" variant=outline>GitHub</button>

[FlowmapBlue](https://flowmap.blue)
is a free tool for representing aggregated numbers of movements between geographic
locations as flow maps. It is used to visualize urban mobility, commuting behavior,
bus, subway and air travels, bicycle sharing, human and bird migration, refugee flows,
marine traffic, freight transportation, trade, supply chains, scientific collaborations,
epidemiological and historical data and data on many other topics.

The project [won bronze](https://twitter.com/kachkaev/status/1197262339935997952)
at the [Information is Beautiful Awards](https://www.informationisbeautifulawards.com/showcase/3815-flowmap-blue)
in 2019.

<embed src="flowmapblue-palermo-anim-4mapbox.mp4">

Until recently making flow maps has involved manual drawing, knowledge of programming or
specialised software.
I had learned from my experience developing
[flow](https://github.com/ilyabo/jflowmap)
[mapping](https://github.com/ilyabo/jflowmap.js)
[libraries](https://github.com/teralytics/flowmap.gl)
that there was a need for an _easy-to-use_ tool with which people without special
knowledge could make flow maps.
This is why I decided to develop flowmap.blue.
The tool makes it possible to publish interactive flow maps from data uploaded to Google Sheets.
It's free, it requires no installation and allows anyone to create a flow map in no time.

<embed src="flowmapblue-brisbane-zoom-anim-4mapbox.mp4">

![New York Citi Bike trips 2018](ny.jpg)

![BIXI rides Montreal](bixi.jpg)
![Cyclable trips in Waterloo Region](waterloo2.jpg)

<iframe src="https://player.vimeo.com/video/378757494" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen style="width:100%"></iframe>


FlowmapBlue


<button href="https://supplychains.resourcematters.org">Try live</button>

Data visualization made for [Resource Matters](https://www.resourcematters.org/) showing where the cobalt produced by certain companies ends up, to identify potential levers and pressure points, in hope that this helps improve corporate behavior on the ground.

Testimonial from <a href="https://resourcematters.org">Resource Matters</a>:

<blockquote>
We collaborated with Ilya on the development of a platform visualizing transactions along the supply chains of several cobalt-containing products. We were very satisfied with the results. After a quick introductory call, Ilya presented a mockup that ended up being pretty much the final version, while also resolving a major issue we initially had with our data. Further work involved expanding our initial data display ambitions. The back and forth was always speedy. By asking the right questions, Ilya easily understood (and helped us understand, which is more complex as we are not visualization experts) what we wanted to communicate and how to make it clearer and more user-friendly. The final product achieves a balance between being lightweight, beautiful, and self-explanatory, surpassing our expectations. We intend to continue collaborating with Ilya for future iterations of this platform and other projects. We highly recommend other companies to consider his services."
</blockquote>

![](01-cobalt-screenshot.jpg)

![](0.jpg)

![](1.jpg)

![](cropped.jpg)

![](2.jpg)

![](3.jpg)

![](4.jpg)

![](map.jpg)


Cobalt Supply Chain


Prototype of interactive notebooks with SQL queries and map visualizations of the query results

<img src=workbook.png>

<embed src="workbook-us-hospitals5.mp4" />

<embed src="workbook-explorer-2.mp4" />


SQL Workbooks


An example app built using [Foursquare Map SDK](https://docs.foursquare.com/developer/docs/studio-map-sdk-introduction) showcasing [Foursquare Places](https://location.foursquare.com/products/places/).
It shows a selection of restaurants in Paris with respect to distance from the 2024 olympic venues, their type, price range and rating.

<img src="fsq-paris-2024.jpg">

<embed src="fsq-olympics2.mp4" />


Paris Olympics Places


<button href="https://graphnavi.vercel.app/">Try live</button>
<button href="https://github.com/ilyabo/graphnavi" variant=outline>GitHub</button>

Network analysis tools can be intimidating, and especially, the data preparation in the form that these tools expect (which often involves combining multiple datasets) can be very time-consuming. SQL is a very powerful and quite popuar language for data analysis and manipulation which can be of immense help for the data preparation. However, setting up a database with an SQL query engine is often a tedious process. Thanks to [DuckDB](https://duckdb.org/) we can now run an efficient SQL database, execute queries directly in the browser and pass the results to a graph layout engine to visualize them as a network.

<embed src="graphnavi-video.mp4" />

![](graphnavi-preview.jpg)

![](graphnavi-screenshot.png)


Graphnavi


<button href="https://www.makutayamaendeleo.org/">Try live</button>

Data visualization made for [Resource Matters](https://www.resourcematters.org/) with the goal of increasing the tax accountability of the mining companies in the Democratic Republic of the Congo:

![](makuta-production-zoomed-selected-material.jpg)
![](makuta-production-zoomed-materials.jpg)
![](makuta-production-zoomed-selected-material-tooltip.jpg)

![](makuta-companies.jpg)


Makuta Ya Maendeleo


<button href="https://ukraine-civilian-harm.vercel.app/">Try live</button>
<button href="https://github.com/ilyabo/ukraine-civilian-harm" variant=outline>GitHub</button>



An interactive map showing incidents that have resulted in potential civilian impact or harm since Russia began its invasion of Ukraine in 2022. The incidents have been collected by [Bellingcat researchers](https://ukraine.bellingcat.com/). Included in the map are instances where civilian areas and infrastructure have been damaged or destroyed, where the presence of civilian injuries are visible and/or there is the presence of immobile civilian bodies.

Or check the source code in the [GitHub repo](https://github.com/ilyabo/ukraine-civilian-harm/).


See also:
[by weapon and area type](https://observablehq.com/@ilyabo/bellingcat-civilian-harm-in-ukraine-beeswarm-timeline)


<embed src="ukraine-civilian-harm.mp4" img="0.jpg" />



![](2.jpg)





Civilian Harm in Ukraine


<button href="https://flight-replay.netlify.app">Try live</button>
<button href="https://github.com/ilyabo/flight-replay" variant=outline>GitHub</button>

Replay GPS paraglider flight data showing detailed 3D terrain and flight trails.

<embed src="flight-replay-cut-50-30.mp4">

![](0.jpg)

![](1.jpg)


Flight Replay


<button href="https://studio.unfolded.ai/public/8adc5c29-0d2b-437d-8f61-54ff4c51f6e0" >Try live</button>

Detailed results of the parliamentary election in 2021 in Russia.
The dark red regions reported unlikely high vote for the government party.

The map was made in [Unfolded Studio](https://studio.unfolded.ai/).

Check also the [Election fraud 2012](/p/election-fraud) project.

![](election-fraud-2021.jpg)


Election fraud 2021


<button href="https://navalny-230121-map.netlify.app/?2021-01-23">Try live</button>

The map represents the numbers of detainments
during the peaceful protests in early 2021 across cities in Russia.

![](map.jpg)


<embed src="flatbush-labels.mp4" img="flatbush-labels.jpg"/>
</video>




Map of detainments

<button href="https://covid19-russia.pages.dev/">Try live</button>
<button href="https://github.com/ilyabo/covid19-russia" variant=outline>GitHub</button>

Showing how the excess mortality in Russia changed over time and space during the COVID-19 endemic.

[Choropleth version](https://covid19-russia.netlify.app/)


![](covid-19-rus-bubbles.jpg)

![](covid-19-rus-choropleth.jpg)


COVID-19: excess mortality


<button href="https://github.com/ilyabo/covid19-charite-lus" variant=outline>GitHub</button>

This was a project I volunteered to help with to help medical researchers during the outbreak of COVID-19.
I built a simple video annotation tool used for a medical study
carried out at [Charité – Universitätsmedizin Berlin](https://nephrologie-intensivmedizin.charite.de/).

The full title: [“Point-of-care lung ultrasound in COVID-19 patients: inter- and intra-observer agreement in a prospective observational study”](https://www.nature.com/articles/s41598-021-90153-2).
The results of the study were published in [Nature - Scientific Reports](https://www.nature.com/articles/s41598-021-90153-2).

Testimonial from <a href="https://www.linkedin.com/in/frederic-muench-md-72b56042/">Frederic Muench, MD,
Resident Physician, Nephrology & Intensive Care at Charité</a>:

<blockquote>
We collaborated with Ilya in a COVID-19 intensive care unit project at the university hospital Charité Berlin and were thrilled by his work. Within a week after kick-off we had a working and stable online tool which incorporated more functionalities than expected and its usability and design (which was crucial to the project) was just great! Ilya had additionally optimised our initial idea which in the end resulted in a much more broadly usable tool. He also agreed to modify the tool for a follow-up study. The results of the projects are currently in review and will be published for the medical community soon. This would not have been possible without Ilya's commitment and effectiveness. We definitely endorse Ilya and his work, and really hope to further collaborate!
</blockquote>

<embed src="grading.mp4" img="grading.jpg"/>

![](home.jpg)
![](intro0.jpg)


Charité lung ultrasound study


I developed several interactive maps showing the effect the lock-down had on mobility.
This was a part of
[Teralytics' supporting effort to arrest the spread of the pandemic](https://www.teralytics.net/mobility-and-covid-19/).

The maps were published in
[La Repubblica](https://lab.gedidigital.it/repubblica/2020/cronaca/coronavirus-mappa-italia-impatto-sulla-mobilita/?ref=RHPPLF-BH-I252606083-C8-P3-S1.8-T1%E2%80%A6),
[Forbes](https://www.forbes.com/sites/jeremybogaisky/2020/04/14/coronavirus-united-states-movement-map/#3d1941615d2f),
[Daily Mail](https://www.dailymail.co.uk/news/article-8222805/Map-shows-peoples-movements-dropped-87-parts-lockdown.html),
[Osnabrücker Zeitung](https://www.noz.de/deutschland-welt/gut-zu-wissen/artikel/2035155/interaktive-landkarte-so-sehr-steht-deutschland-still).

The map of Germany was also featured in the
[COVID-19 Mobility project](https://www.covid-19-mobility.org/)
from [Robert Koch Institute & Humboldt University of Berlin](http://rocs.hu-berlin.de/covid-19-mobility/team/)
with the following [scientific publication](https://arxiv.org/pdf/2007.01583.pdf).

![Effect of COVID-19 on mobility in Italy](it.png)
<embed src="larepubblica-covid.mp4" />

<button href="https://larepubblica.mobility-covid19.teralytics.net" align=center variant=outline>Try live</button>

![Effect of COVID-19 on mobility in Germany](de.png)
<button href="https://mobility-covid19.teralytics.net/?dataset=de" align=center variant=outline>Try live</button>

![Effect of COVID-19 on mobility in United Kingdom](uk.png)
<button href="https://mobility-covid19.teralytics.net/?dataset=uk" align=center variant=outline>Try live</button>

![Effect of COVID-19 on mobility in USA](us.png)
<button href="http://forbes.mobility-covid19.teralytics.net" align=center variant=outline>Try live</button>


Effect of COVID-19 on mobility

This is an interactive web application we developed at [Teralytics](http://teralytics.net)
for representing and analyzing mobility data in cities and countries (origin-destination data). 
The scalability - supporting large OD-datasets with billions of rows - was a challenge. 
Read [the blog post](https://medium.com/teralytics/visualizing-mobility-data-the-scalability-challenge-2575fe819702) to learn more about 
 how we addressed it.

![](atlanta00.jpg)
![](atlanta0.jpg)
![](atlanta-corridor.png)
![](bayern.jpg)
![](choropleth.jpg)
![](stad.jpg)
![](irma0.png)



Teralytics Matrix

<button href="https://deutschland-bleibt-zu-hause.teralytics.net/">Try live</button>

This map showing the effect the lock-down had on mobility was published in
[Bild](https://www.bild.de/news/inland/news-inland/corona-krise-interaktive-karte-26prozent-weniger-bewegungen-69569116.bild.html).

![](bild-de.png)





"Germany stays at home"


<button href="https://stellar-commutes.boyandin.me/">Try live</button>
<button href="https://observablehq.com/@ilyabo/animated-flow-map-of-commuters-in-the-netherlands-in-2016" variant=outline>Source</button>

This is an experimental shader-based demo using
Mapbox GL JS [custom style layer API](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/)
showing commuters in the Netherlands in 2016. Inspired by the [cf. city flows](https://uclab.fh-potsdam.de/cf/) project.
The data is from [Statistics Netherlands](https://opendata.cbs.nl/#/CBS/nl/dataset/83628NED/table?dl=F076).

Or check the [Observable notebook](https://observablehq.com/@ilyabo/animated-flow-map-of-commuters-in-the-netherlands-in-2016)
with the source code.

![](0.png)

<iframe width="846" height="556" src="https://www.youtube-nocookie.com/embed/ZmbT06xajik?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


Stellar Commutes


Unfinished project representing the last statements of the death row inmates in Texas before they were executed. Design mood board was made by
[Stephanie Carleklev](https://lnu.se/en/staff/stephanie.carleklev/).
The data is from [here](http://www.tdcj.state.tx.us/death_row/dr_executed_offenders.html).

<button href="https://final-words.netlify.app/">Try live</button>
<button href="https://github.com/ilyabo/final-words" variant=outline>GitHub</button>

Final Words

![](final-words.png)

![](screenshot.png)

![](drafts.png)


Final Words


Interactive dashboards 
for monitoring, incident analysis 
and planning for the public transportation network in Singapore:

![](alerting-new.jpg)

![](trains-2.jpg)

![](first-mile.jpg)

![](od-2.png)

![](route-options.jpg)

![](route-options-2.jpg)


Singapore Trains


<button href="https://flowmap.gl" variant=outline>Project page</button>

[Flowmap.gl](https://flowmap.gl) is a library
for visualizing movement of people (e.g. migration) or objects between
geographic locations:


![Flowmap.gl](flowmap-gl.jpg)

![Flowmap.gl – Swiss migration flow map](swiss-cantons-new.png)

The library uses WebGL for rendering. Hence, it can handle relatively
large numbers of flows with a good rendering performance:

<embed src="nl-relocations-animation-lighter.mp4" maxwidth=500 />

Morning and evening peaks:

<embed src="morning-evening-peaks.mp4" maxwidth=500 />



Flowmap.gl

I designed and developed 
[the website](https://www.freie-schule-bergmeilen.ch/)
 for the private school Freie Schule Bergmeilen:
                                
![](fsb1.jpg)
![](fsb2.jpg)
![](fsb3.jpg)





Freie Schule Bergmeilen


Working at <a href="http://www.teralytics.net" target="_blank">Teralytics</a>
I developed exploratory tools for the analysis of geographic movement of people.

The following dashboard allows the users to analyse movement of people
 in a city or a country:


<img src=img/transport-berlin.png>
<i>Movement of people in Berlin</i>

<img src=img/od-sacramento.png>
<i>Sacramento, US</i>

<img src=img/transport-us-w-border2.png>
<i>Transport dashboard US</i>


<img src=img/georg-od.jpg>
<i>Georg Polzer, Teralytics founder, presenting Tera Transport dashboard</i>



An exploratory tool for the analysis of geographic movement of people.

TeraTransport



How many people pass by ATMs on the streets of a city:

![ATMs dashboard](atms-dashboard.png)


Visualizing people passing by ATMs in Zurich

Street Flow

<button href="https://beta.observablehq.com/@ilyabo/weighted-bipartite-graph-colored-by-source">Try live</button>
<button href="https://github.com/ilyabo/d3-bipartite" variant=outline>GitHub</button>

A D3 plugin for rendering weighted bipartite graphs. Available from  [github.com/ilyabo/d3-bipartite](https://github.com/ilyabo/d3-bipartite)

![](d3-bipartite.png)

![](d3-bipartite-1.png)

![](d3-bipartite-color.png)


d3-bipartite


<button href="https://manymizers.netlify.com/">Try live</button>


This is an experimental tool for helping to structure decision making written in Clojure.
It was a way for me to learn this beautiful language. 
The tool was largely inspired by the original version of 
[ChoiceMap](https://techcrunch.com/2014/01/09/meet-choicemap-a-new-app-that-helps-you-make-better-decisions/).

The source code is available at [github.com/ilyabo/manymizers](https://github.com/ilyabo/manymizers).

![](manymizers.png)

         







Manymizers

A zoom-adaptive hexagon overlay for representing density heat maps 
with a self-developed slippy map engine. 
Here we also used [our](https://github.com/teralytics/geohex) hierarchical hexagonal system based on 
[Geohex](https://github.com/ilyabo/geohex.js)
for geospatial indexing: 

![](germany.png)

<embed src="hex-zoom.mp4">

Here are [Geohex](https://github.com/ilyabo/geohex.js) hexagons on several levels: 
![](geohex.png)

Each hexagon has a unique code.
We can reconstruct the geometry of a hexagon from its code.
Smaller hexagons within the larger ones have codes prefixed by the codes of their "parent" hexagons.
The nesting is not perfect, though. 

 
[Z-curve](https://en.wikipedia.org/wiki/Z-order_curve) for the hex codes:
![](hex-codes-zcurve0.png)

![](china-hexagons.png)


![](germany2.png)


Hex density map

<button href="https://galaxy-of-covers.interactivethings.io/">Try live</button>

As a member of the team at <a href="http://interactivethings.com">Interactive Things</a>
I participated in the development of the [Galaxy of covers](https://galaxy-of-covers.interactivethings.io/) visualization:
           
The project was in the longlist of the 
[Information is Beautiful Awards 2015](https://iibawards.herokuapp.com/showcase/820-galaxy-of-covers).   

<embed src="galaxy-of-covers.mp4" maxWidth=500>

![](galaxy1.png)

![](galaxy2.png)

![](galaxy3.png)

Some experiments with the data:
![](experiment-3.png)



![](experiment-2.png)

![](timelines.png)


Galaxy of covers

Different approaches to representing the density of people in Berlin: 

Street counts shown by color: 
![](edge-map.png)

Aggregated into a regular grid: 
![](dot-map.png)

Showing changes during the day for each grid cell:
![](tseries-map.png)

Cross-visitorship with the recursive [OD-map](https://openaccess.city.ac.uk/id/eprint/537/1/wood_visualization_2010.pdf): 
![](od-map-30.png)




Berlin streets


<button href="https://lab.interactivethings.com/global-trade-africa/">Try live</button>

<embed src="global-trade-africa-50.mp4">

An interactive visualization representing the aggregate amounts of trade between the world's countries and Africa in the year 2012.
Developed as a personal project at <a href="http://interactivethings.com" target="_blank">Interactive Things</a> 
together with <a href="https://twitter.com/taniaboa" target="_blank">Tania Boa</a>.




[](0.png)

![](1.png)

![](2.png)

![](3.png)

![](4.png)


Global Trade: Africa

<button href="http://maps.nzzdali.ch/nzzdata/erster-weltkrieg/">Try live</button>


An interactive storytelling piece engaging the audience to explore the events of the World War I. 
Produced in collaboration between
<a href="http://interactivethings.com" target="_blank">Interactive Things</a> and <a href="http://www.nzz.ch" target="_blank">Neue Zürcher Zeitung</a>.



<embed src="ww1-anim.mp4" maxwidth=471 /> 

![](ww1.png) 


![](ww1-2.png) 




An interactive storytelling piece for Neue Zürcher Zeitung  engaging the audience to explore the events of the World War I.

NZZ: History of WW1


<button href="https://www.gemeinwohl.ch/en">Try live</button>

As a member of the team at <a href="http://interactivethings.com">Interactive Things</a>
I worked on the development of the [Public Value Atlas](https://www.gemeinwohl.ch/en/),
a representation of the perception by the public of the values and the contributions
to the society of various companies and organizations.

The project was in the shortlist of the 
[Information is Beautiful Awards 2014](https://iibawards.herokuapp.com/showcase/552-public-value-atlas).   

![](gemeinwohl-en.png)

![](gemeinwohl-en-grid.png)

![](gemeinwohl0.png)


Public Value Atlas

<button href="https://www.swissinfo.ch/eng/vote-results--june-13-2021-switzerland-co2-pesticides/46631396">Try live</button>

![](ballot3.png)

![](ballot11.png)

![](ballot13.png)

![](ballot4.png)

![](ballot5.png)

![](ballot6.png)

![](ballot7.png)


![](ballot9.png)




Swissinfo ballot results


As a member of the team at <a href="http://interactivethings.com">Interactive Things</a>
I worked on the development of the [ZHAW Competence Browser](http://expertisenkarte.zhaw.ch/):


<embed src="comp-browser.mp4" maxwidth=400 /> 

![](comp-browser-1.png)

![](comp-browser-2.png)


ZHAW Competence Browser


As a member of the team at <a href="http://interactivethings.com">Interactive Things</a> 
I worked on a series of twenty visualizations called "Swiss maps" for <a href="http://www.nzz.ch/aktuell/inland-sommerserie-schweizer-karten-interaktiv/">Neue Zürcher Zeitung</a>.
The series won the first prize in the category of interactive graphics in the German Press Agency <a href="http://www.blog.wan-ifra.org/de/articles/2013/10/24/preistraeger-des-dpa-infografik-awards-2013-ausgezeichnet">dpa-infografik award 2013</a>.

![](img/restaurants.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#restaurants" align=center variant=outline>Try live</button>

![](img/migration.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#migration" align=center variant=outline>Try live</button>

![](img/strompreise.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#strompreise" align=center variant=outline>Try live</button>


![](img/wald.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#wald" align=center variant=outline>Try live</button>


![](img/porsche.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#porsche" align=center variant=outline>Try live</button>


![](img/distanzen.jpg)]()
<button href="https://storytelling.nzz.ch/2013/sommerserie/#distanzen" align=center variant=outline>Try live</button>

![](img/schweizen.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#schweizen" align=center variant=outline>Try live</button>


![](img/religions.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#religions" align=center variant=outline>Try live</button>


![](img/gliederung.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#gliederung" align=center variant=outline>Try live</button>


![](img/legislative.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#legislative" align=center variant=outline>Try live</button>


![](img/matura.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#matura" align=center variant=outline>Try live</button>


![](img/wohnraum.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#wohnraum" align=center variant=outline>Try live</button>


![](img/polizisten.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#polizisten" align=center variant=outline>Try live</button>


![](img/sbb.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#sbb" align=center variant=outline>Try live</button>


![](img/verkehr.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#verkehr" align=center variant=outline>Try live</button>


![](img/wetter.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#wetter" align=center variant=outline>Try live</button>


![](img/anthems.png)
<button href="https://storytelling.nzz.ch/2013/sommerserie/#anthems" align=center variant=outline>Try live</button>



A series of twenty visualizations for Neue Zürcher Zeitung  telling stories about Switzerland.

NZZ Summer Series: Swiss maps

Creative hub


As a member of the team at <a href="http://interactivethings.com">Interactive Things</a>
I worked on this exploratory tool for the Swiss National Foundation. 

![](snf.png)



SNF funding analysis


<button href="https://ilyabo.github.io/remittances/?en">Try live</button>

Visualizing flows of money sent by migrants to their home countries. 
Together with <a href="http://www.davidbauer.ch/">David Bauer</a> and 
<a href="http://renestalder.me/">René Stalder</a>.

The visualization was published by the newspapers
<a href="http://www.tageswoche.ch/de/2013_19/schweiz/540004/milliarden-aus-der-fremde.htm">TagesWoche.ch</a>
and <a href="http://derstandard.at/1363710784566/Wieviel-Geld-Migranten-zurueck-in-ihre-Heimat-schicken">derStandard.at</a>.
It was also <a href="http://visualizing.org/visualizations/incredible-rise-migrants-remittances">featured on Visualizing.org</a>
as one of the highlights of May 2013.


 ![](intro.png)
 
 ![](kaz.png)



Remittance Flows


<button href="http://aiddata.boyandin.me/">Try live</button>
<button href="https://github.com/ilyabo/aiddata" variant=outline>GitHub</button>

Visualizing flows of financial aid donated to countries by international organizations and by other countries. In collaboration with [AidData.org](http://aiddata.org).

<embed src="aiddata.mp4">

![](bubbles.png)

![](horizon3-tooltip.png)

![](Argentina-correlation.png)

![](flowprints.png)


Visualizing flows of financial aid donated to countries by international organizations and by other countries. In collaboration with AidData.org.

AidData


<button href="https://ilyabo.github.io/jflowmap.js/">Try live</button>
<button href="https://github.com/ilyabo/jflowmap.js" variant=outline>GitHub</button>

Flow map visualization showing refugees data by UNHCR using tapered arrows and
the "flying meteor" metaphor to show the directions of the flows.

![jflowmap-js: flow map showing refugees data by UNHCR](refugees-js.png)


jflowmap.js

A simplistic web app for annotating emotions in human speech video recordings. 
The tool was used for 
[this publication](https://www.researchgate.net/figure/ANNEMO-web-based-annotation-of-affective-and-social-behaviors_fig2_261121552).
Check [this page](https://diuf.unifr.ch/main/diva/recola/annemo) for more detail.
The tool is available at [github.com/ilyabo/annemo](https://github.com/ilyabo/annemo/).
                
![](annemo.png)


Annemo


<button href="http://flows.transport.opendata.ch/">Try live</button>

Animated interactive visualization of train flows in Switzerland showing the numbers and the speeds of the trains during different time of the day.
Developed in a team of fellow hackers during the [make.opendata camp](http://make.opendata.ch/)  in Zurich.

![](trains.png)

![](trains-stations.png)

![](trains-stations-zoom1.png)

![](trains-stations-zoom2.png)


Swiss train flows


<button href="http://public.tableausoftware.com/views/russian-presidential-elections-2012-map-orange/sheet1?:embed=y">Try live</button>

  The presidential election in 2012 in Russia was clearly fradulent.
  Despite manipulating the results the authorities published very detailed data on the elections
  which made it possible to analyse it and find traces of fraud.

![Vote for Putin in 2012 presidential elections in Russia.](2012-orangevaya-zaraza3-crop.png)

The dark blue dots show polling stations which reported unlikely high votes for Putin:
![](orangevaya-zaraza-large-3.png)


The above visualization was used by the Danish online magazine Europa in [this article](http://translate.google.com/translate?sl=auto&tl=en&js=n&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fmagasineteuropa.dk%2F%3Fp%3D5544&act=url) (translated from Danish).



## Vote for Putin vs Turnout

Each dot is a polling station, x-axis is the turnout, y-axis is vote for Putin. Here you can see that there is a very high correlation between the turnout (the percentage of people who voted) and the vote for Putin. This correlation is most probably due to the fact that in the polling stations where the turnout was reported as unlikely high votes for Putin were injected.
Anoter anomaly is “the grid pattern”, that is, the higher concentration of reported turnout and vote for Putin around 75, 80, 85, 90, 95%. This is a clear evidence of fraud.

![Vote for Putin in 2012 presidential elections in Russia.](vote-to-turnout-sm.png)


## Estimating the amount of fraud

This simple visualization allows to estimate the amount of fraud by eliminating one of the suspicious anomalies of the vote distribution, namely, the correlation between turnout and vote for Putin. Click for the interactive version:

[![Estimating the amount of fraud in 2012 presidential elections in Russia.](estimate.png)](http://diuf.unifr.ch/people/boyandii/pub/elections/2012/)


Visualizing traces of fraud in Russian presidential election in 2012 and estimating the amount of fraud.

Election fraud


In this research study we analyzed ﬁndings made by the participants with ﬂow maps using animation and small-multiples as two alternative ways of representing temporal
changes. 

![](interaction-timeline.png)

The goal was to ﬁnd out whether there are qualitative differences between the types of ﬁndings users make with these two representations. 
This required a deep analysis of the collected ﬁndings and the interaction logs. To enable this analysis
I developed web based tools for collaborative  classification of the findings, resolving disagreements in the classification and a visualization of the interaction logs.

Check [our publication](/assets/jflowmap-user-study.pdf) for more details.

![](sm.png)

![](anim.png)


![](anim-actions.png)



![](tool-crop.png)

![](agreement.png)


User study on visualizing temporal changes in flow maps

Flow map user study


Flowstrates extend the idea of a [flow map](http://en.wikipedia.org/wiki/Flow_map) (which are used for representing entities flowing between geographic locations) to the temporal dimension and allow to analyze the changes of the flow magnitudes over time. In Flowstrates the origins and the destinations of the flows are displayed in two separate maps, and the temporal changes of the flow magnitudes are displayed between the two maps in a heatmap in which the columns represent time periods.

![](Flowstrates-2012.png)

<iframe width="560" height="315" src="https://www.youtube.com/embed/nij8OUyiaV0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

As in most flow maps which focus on representing the flow magnitudes, the exact routes of the flows are not accurately represented in Flowstrates. Instead, the flow lines are rerouted so that they connect the flow origins and destinations with the corresponding rows of the heatmap, as if the flows were going through it. The flow lines help to see in the geographic maps the origins and the destinations corresponding to each of the flows shown in the heatmap.

<iframe width="560" height="315" src="https://www.youtube.com/embed/UQPN7o6A3Cg?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Flowstrates are meant for interactive exploration. Unlike OD-matrices which represent exactly one flow in each matrix cell, in Flowstrates every flow occupies one whole row of the heatmap for showing how the flow changed over time. Hence, much more screen real estate is used to represent the same number of flows, and for many datasets it is impossible to display all the flows simultaneously on the screen without filtering or aggregating them. Therefore, to allow the users to explore the whole data in every bit of detail Flowstrates provide interactive support for performing spatial visual queries, focusing on different regions of interest for the origins and destinations, zooming and panning, sorting and aggregating the heatmap rows.

You can also read our [paper on Flowstrates](/assets/flowstrates-eurovis11-fin.pdf) published in Computer Graphics Forum.

Flowstrates is a part of JFlowMap, an open-source tool for the analysis of spatial interactions.
JFlowMap can be downloaded from [here](https://code.google.com/p/jflowmap/downloads/list).
The source code is available at [github.com/ilyabo/jflowmap](https://github.com/ilyabo/jflowmap/).
 
Here is a promotional video about the project: 
<iframe width="560" height="315" src="https://www.youtube.com/embed/ntY2i7toBPo?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>




![](flowstrates2.png) 

![](lasso.png) 

![](flowline-coloring.png) 

![](totals-in-maps4.png)

![](ethiopia-somalia-diff-staircase-full2--with-rect.png)


An interactive technique for analyzing temporal changes in origin-destination data, that is, flows of entities between geographic locations.

Flowstrates

A historical spatio-temporal visualization showing how architects from Europe participated
in architectural competitions in Switzerland. Built for a project led by
[Sofia Paisiou](https://fhnw.academia.edu/SofiaPaisiou) 
resulting in [this publication](https://www.researchgate.net/publication/265140793_Moving_architectures_Visualizing_and_Analyzing_Relationships_in_19th_century_Architectural_Competitions_in_Switzerland). 

![](arch-comps.png)


Moving architectures


Edge bundling can help making a cluttered graph visualization more readable by rerouting the edges so that they form bundles emphasizing the high-level graph structure.

![](us-migrants-complexity.png)
![](us-migrants-complexity-bundled.png)

JFlowMap has an impementation of Danny Holten's [force-directed bundling algorithm](https://www.researchgate.net/publication/220506264_Force-Directed_Edge_Bundling_for_Graph_Visualization).

JFlowMap can be downloaded from [here](https://code.google.com/p/jflowmap/downloads/list).
The source code is available at [github.com/ilyabo/jflowmap](https://github.com/ilyabo/jflowmap/).


Edge bundling


<button href="https://github.com/ilyabo/jflowmap/" variant=outline>GitHub</button>

A visualization tool in which we experiment with various visualization techniques for spatial interactions, i.e. interactions between pairs of geographic locations. These can be migrations, movement of goods and people, network traffic, or any kind of entities "flowing" between locations. Spatial interactions are often represented as origin-destination data, meaning that only the origins, the destinations and the magnitudes of the flows are known, but not the exact flow routes.

JFlowMap can be downloaded from [here](https://code.google.com/p/jflowmap/downloads/list).
The source code is available at [github.com/ilyabo/jflowmap](https://github.com/ilyabo/jflowmap/).

![](refugees-2008-light.png)

![](jflowmap-desktop.png)

![](refugees-bundled.png)

![](us-migrations-bundled.png)

![](refugees.png)

![](slo-commuters.png)


JFlowMap


[BirdEye](http://code.google.com/p/birdeye/) is a Flex visualization library which follows the approach to building visualizations described by Leeland Wilkinson in his book "[Grammar of Graphics](http://www.amazon.com/Grammar-Graphics-Statistics-Computing/dp/0387245448)". BirdEye can be seen as a language for creating visualization which not only provides a set of predefined visualization types, but also allows the users to create new kinds of visualizations easily.

My contribution to BirdEye so far has been to make the animated graph layouts from the previous library version work within the new framework based on the Grammar of Graphics.


![](birdeye-graphs-3.png)

![](birdeye-graphs-4.png)

![](birdeye-graphs-1.png)

![](birdeye-graphs-2.png)


BirdEye


PicBack is an app for making backups of large collections of photos. The app was developed in Java.

More details and the source code: [https://code.google.com/archive/p/picback/](https://code.google.com/archive/p/picback/)

![](backup_progress.png)
![](scanning.png)
![](scanning_settings.png)


PicBack


A web application for collaborative data collection and consolidation to provide a statistical overview of study- and research-relevant indicators.

The app was developed for the 
Graz University of Applied Sciences [FH JOANNEUM](http://www.fh-joanneum.at).
 
![](wb-stoka.png)
![](wb-stoka-wbs1.png)
![](wb-stoka-wbs2.png)
![](wb-admin-kzlist.png)
![](wb-admin-kzedit.png)
![](wb-admin-kzedittab.png)
![](wb-ma.png)
![](wb-ma-kz.png)


Wissensbilanz

An app for the online administration used at the 
Graz University of Applied Sciences [FH JOANNEUM](http://www.fh-joanneum.at). 

![](cert.png)
![](coursedetails.png)
![](coursedetails_copy.png)
![](courses.png)
![](marks.png)


Joanna


Screen or presentation manager which allows to create layouts from videos, images, flash movies and other media for a screen and then to schedule them. 

My contribution to this project were the visual layout and schedule editors, that is, the most interesting parts of the UI :)

![](about.png)

![](layout_editor3.png)

![](new_command_off.png)

![](calendar.png)

![](export_playlist.png)

![](layout_editor.png)

![](new_sequence.png)

![](new_wizard2.png)

![](schedule_context_menu.png)

![](schedule_sm.png)


FHLiteEditor

A Web version of [ProClassify](/proclassify) developed to facilitate sharing of datasets and computational capacities by the users. The features of the web version are mostly identical to the standalone version except the data visualization which is missing in the web version. 



![](addhealthysamples2.png) 

![](crossvalidationresults.png) 

![](classifyResults.png)  

![](crossvalidationresults2.png) 

![](help.png) 

![](login.png) 

![](multipleupload.png) 

![](myjobs.png) 

![](newaccount.png) 

![](samplelib.png) 

![](trainprogress.png)


ProClassify Web

An implementation of the feature selection and classification method which was developed at the Institute for Genomics and Bioinformatics (TU Graz). The method was meant originally for cancer detection on proteomics mass-spectroscopy data, but appears to be useful for completely different datasets too. 

ProClassify is free for non-commercial use and can be downloaded from [this website](http://genome.tugraz.at/proclassify/proclassify_description.shtml). 


![](about.png) 

![](dim_reduction_progress.png) 

![](classification_results_deta.png)

![](cross_valid_params.png) 

![](help.png) 

![](model_training_params.png) 

![](plot_input_data__zoomed.png) 

![](plot_input_data.png) 

![](plot_processed_data.png) 

![](table_view.png) 

![](trained_model_wth_grid.png) 

![](xv_results_detailed.png) 

![](xv_results.png)




ProClassify


<button href="https://github.com/ilyabo/cgvis" variant=outline>GitHub</button>

CGVis is an open source generic data visualization tool with an innovative zoomable user interface and animations which help the user find particular features in his data. The tool is available for download from [here](http://code.google.com/p/cgvis/).

![](cgvis_onmac7.png)

<iframe width="560" height="315" src="https://www.youtube.com/embed/uNuOjlZ0Rdw?rel=0&amp;showinfo=0&amp;start=10" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

![](four_views4.png)

![](cgvis_onmac3.png)

![](two_views.png)


CGVis


I designed, developed and maintained the
[website of the Russian Information Retrieval Evaluation Seminar](http://www.romip.ru/en/index.html).

For that I developed in Java an XSLT-based static web site generator tool.

![](romip.jpg)


ROMIP

I participated in the development of a system of intelligent agents
capable of chatting to visitors of a website in a natural language and
promoting its products.
I implemented a highly dynamic web-interface for the subsystem that
controlled the chats and let operators intervene in a chat
if a bot was in trouble.
                            
![](ashton_home.jpg)
![](after_takeover.jpg)
![](chatlog.jpg)
![](chlistmenu_custlist2.jpg)
![](workflowhistory.jpg)
![](workflow_mainandedit.jpg)
![](report.jpg)


ALife

An e-commerce system with
order tracking, credit card processing, back-office,
inventory, statistical reports, etc.
I developed the whole system from scratch, supported
and customized it adapting it to changing requirements. 
As of 2020, the system is still in use on several e-commerce websites.
                
![](daisy_home.png)
![](product_details_fish.png)
![](products_glass_figurines.png)


Daisy

I developed and open-sourced [phpObjectForms](http://pof.sourceforge.net),
an easy-to-use library for building user-friendly web forms.
                                
![](pof-code.jpg)
![](pof1.png)
![](pof2.png)


phpObjectForms


<button href="https://pipsi-game.netlify.app">Try live</button>
<button href="https://github.com/ilyabo/pipsi" variant=outline>GitHub</button>

One evening my 8 year old asked me to make a game with her plush guinea pig. Few hours later, this is what we came up with.
It is not just about reacting quickly. To succeed you need to plan ahead to minimize the distance traveled.

I made an original [music track](https://soundcloud.com/ibananti/control-seq) for the game.

<embed src="pipsi.mp4">


Traveling Guinea Pig


Slot machine and roulette implemented in JavaScript with 3D-rendered parts.

<embed src="slot-machine.mp4"  img="slot-machine.jpg"/>



![](roulette.jpg)


Slot machine


Just a small demo app showing platonic solids written in C++

<embed src="platonic.mp4" img="platonic.jpg"/>



Platonic

A chess app with 3D-rendered figures:
![](java-chess.png) 
![](chess5.png) 


Chess app


![](118582714_763335074426340_4709987786345445076_n.png)
![](118700731_351297969583976_7492925842306389099_n.png)
![](118705331_312034163415248_5861381809110837592_n.png)
![](118749875_2482752928691816_2267736161198541667_n.png)
![](118761411_378746029781699_7743491922727306462_n.png)
![](118763005_665288491075745_7980414208023576599_n.png)


Maze game


As my school graduation project I implemented a simple debugger for MS-DOS programs:

```sh

```

![](pe_debugger1.png)
![](pe_debugger2.png)
![](pe_debugger3.png)

```sh

```
