
# Geographic data visualization with deck.gl

<button  variant=outline href="https://youtu.be/G58beQZlMxg">Slides Video</button>


I gave a guest lecture at the [ETH Zürich Institute of Cartography](https://ikg.ethz.ch/en/) by invitation from [Andreas Neumann](https://www.linkedin.com/in/andreas-neumann-a10114277/).  In the lecture I discussed geo data visualization using [deck.gl](https://deck.gl), [kepler.gl](https://kepler.gl) and [Foursquare Studio](/p/fsq-studio). I also covered using the AI code editor, [Cursor](https://cursor.com), to assist in coding, as well as [spatial indexing with H3](https://h3geo.org/) and efficient data processing with [DuckDB](https://duckdb.org). The second half of the talk focused on flow map visualization and the tools I've developed for it: [flowmap.gl](/p/flowmap.gl), [flowmap.blue](/p/flowmap.blue) and [flowmap.city](/p/flowmap-city). 

There is no talk recording, but I exported a video from the Keynote presentation, which includes many high quality screen recordings:
<iframe width="560" height="315" src="https://www.youtube.com/embed/G58beQZlMxg?si=GGvF3uRfBr4ecEX9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>



ETH Zurich guest lecture


# Real-Time Collaborative Map Drawing with deck.gl

<button href="https://mapcanv.com">Live demo</button>
<button href="https://github.com/ilyabo/mapcanv" variant=outline>GitHub</button>
<button  variant=outline href="https://www.youtube.com/watch?v=feMRman7iSo&list=PLyspMSh4XhLN1_EQY-_eyg_gs8z3psSJ2&index=17">Video</button>
<button href="https://vimeo.com/1027410793">Video #2</button>
<button href="https://docs.google.com/presentation/d/1MYJyhuwWawoC4MRmYsPxAwblP1QxNGY6A6l6ogeyvZc/edit?usp=sharing" variant=outline>Slides</button>

![MapCanv collaborative map drawing app](mapcanv.png)

In his groundbreaking 1968 presentation, which was later called the "Mother of All Demos", Douglas Engelbart introduced many fundamental technologies which were years ahead of their time but are now common in modern computing.
Engelbart demonstrated the use of windows as a visual interface. It was the first public demonstration of the computer mouse. He showcased a hypertext system that allowed users to link between documents which laid the groundwork for what would eventually become the World Wide Web. He demonstrated early forms of what we now call video conferencing and collaborative editing, where two users could edit the same document in real time.

Engelbart's presentation showed how computers could be used as a communication tool for collaboration, envisioning many of the ways in which we use computers today.
The modern internet's role in teamwork is enormous. People often work in teams and these teams are becoming increasingly distributed. At least since the COVID-19 pandemic remote work is the norm. But despite being available online to anyone at any time, most of web applications do not support real-time collaboration.
When collaborating remotely on the same piece, document, spreadsheet, or code versioning is a major challenge.

Real-time collaborative apps like Google Docs, Notion, and Figma have set new expectations for seamless teamwork, particularly among distributed teams. These apps have made collaboration feel natural, but building such systems comes with significant technical challenges, particularly around data synchronization and conflict resolution. Fortunately, modern tools such as Firebase, Liveblocks, and Replicache, along with conflict-free data structure implementations like Automerge and Yjs, are making it easier to tackle these issues. The highly concurrent Phoenix framework, which powers platforms like Discord and Felt, also plays a crucial role by enabling real-time message exchange between users.

By leveraging these technologies, I developed a collaborative GeoJSON editor. In this talk, I will share the implementation details using deck.gl, Phoenix, Elixir, and Yjs, delve into real-time messaging, conflict resolution with CRDTs, and scalability, and demonstrate how these modern tools are transforming the way we build real-time, multi-user geo-visualization applications.

Video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/feMRman7iSo?si=rOH_ho9EQpPS8OQn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Video 2 (same talk, different venue):

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

Slides:

<iframe src="https://docs.google.com/presentation/d/1MYJyhuwWawoC4MRmYsPxAwblP1QxNGY6A6l6ogeyvZc/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen={true} mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


OpenJS Visualization Summit London

<button href="https://docs.google.com/presentation/d/1MqGaL5rzBoCmV-xjuwlCfOupZ3anqNp0Lh6ckjh14FM/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>


["Efficient data analytics and visualization in the browser"](https://docs.google.com/presentation/d/1TkTiaL3gK8e9Nj5O4DXDxSZkpww86ovx08ihMErXa2o/edit?usp=sharing) presented at the [Armada JS conference](https://armada-js.com/) in Novi Sad.

Talk abstract:
> Making sense of data requires adequate data analysis and exploration tools. Modern browsers offer an increasingly rich and powerful platform for application development. We can now deal with larger amounts of data in the browser with performance very close or equal to native applications. We'll discuss how JavaScript typed arrays, Apache Arrow, WebGL, workers, WebAssembly and other technologies make it possible to run data analytics queries over millions of data points and to visualize the results directly in the browser.


Slides:

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTxOGJjvTxsrHsa5CeJyrqMtiRjuHYSZRWPnPTTZuCpskNxAS17UXkjQVE6t9dzMbLoq03Z4mVAFc84/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


![](novi-sad.jpg)
![](novi-sad-3.jpg)
![](novi-sad-2.jpg)
![](novi-sad-4.jpg)


Novi Sad JS conference

<button href="https://www.youtube.com/watch?v=MCA6jIdxqt8&list=PLGi6hymK320gP5l7qy6-AESTASRaHmain&index=2&start=15">Video</button>
<button href="https://docs.google.com/presentation/d/1MqGaL5rzBoCmV-xjuwlCfOupZ3anqNp0Lh6ckjh14FM/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>

["Dynamically adaptive Deck.gl layer
for mobility data in FlowmapBlue"](https://docs.google.com/presentation/d/1MqGaL5rzBoCmV-xjuwlCfOupZ3anqNp0Lh6ckjh14FM/embed?start=false&loop=false&delayms=3000) presented at the [Open Visualization Collaborator Summit](https://deck.gl/events/madrid-summit-2022/) in Madrid.

Talk abstract:
> FlowmapBlue is a free tool for rendering origin-destination data (counts of movements between pairs of locations). Geographic networks often contain large numbers of connections and displaying them on a map presents significant challenges both in terms of the rendering performance and the map readability. To address these challenges in FlowmapBlue we decided to not always show the data in full detail, but instead to present useful and readable summaries which constantly adapt to the map viewport. In this talk, we'll discuss the motivation behind this approach and describe the inner workings of the FlowmapLayer implementation in FlowmapBlue.


Slides:

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRa4YCOTG_LOxBb2xf7GEkF4zvdR-YNuLs602ZxHs6K1bJYQhtdm4aIWiQRP2NCpPlfY4cj_IszPEi3/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


Video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/MCA6jIdxqt8?start=15" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



Deck.gl Summit

<button href="https://www.youtube.com/watch?v=21im47hpxR8">Video</button>

Fireside chat with past Information is Beautiful Award winners
with [Sonja Kuijpers](https://www.linkedin.com/in/sonjakuijpers/), [Amy Cesal](https://www.linkedin.com/in/amycesal/), and [Jill Brown](https://www.linkedin.com/in/jillannebrown/).

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




DVS Fireside Chat

<button href="https://vimeo.com/737977605">Video</button>

Talking about the tools for mobility data analysis in [Unfolded Studio](https://studio.unfolded.ai/)  together with [Xun Li](https://www.linkedin.com/in/xun-li-794a5b18/) who spoke about cluster and outlier analysis at the [Foursquare webinar](https://connect.foursquare.com/2022-08-Unfolded-Toolbox-Geospatial-Solutions.html).



<iframe src="https://player.vimeo.com/video/737977605?h=1b6540aac5&color=F9CA48&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>


[![](fsq-webinar.jpg)](https://vimeo.com/737977605)
![](fsq-webinar2.jpg)

FSQ/Unfolded: Mobility data analysis

<button href="https://drive.google.com/file/d/1jeuCsF8dkGh476PbKQr_4Pdf7RO3eyw2/view">Video</button>

"Einführung in Unfolded" presented at [CartoHack #07](https://visualisierung.dgfk.net/de/events/cartohack/07-unfolded/)
organized by the [German cartographic society](https://visualisierung.dgfk.net/en/).

Here's the abstract of the talk:

> <p>Moderne WebGL-basierte Lösungen ermöglichen es seit einiger Zeit auch größere Datenmengen performant und ansehnlich in Web-Kartenanwendungen darzustellen. Ilya Boyandin von <a href="https://www.unfolded.ai/">Unfolded.ai</a> wird zeigen, was <a href="https://deck.gl/">Deck.gl</a>, <a href="https://kepler.gl/">Kepler.gl</a> und <a href="https://www.unfolded.ai/studio">Unfolded Studio</a> so können und auch einen Einblick in sein speziell für aggregierte Bewegungsdaten entwickeltes Tool <a href="https://flowmap.blue/">FlowmapBlue</a> geben.</p>


![](cartohack1.jpg)


Introduction to Unfolded (in German)

<button href="https://www.youtube.com/watch?v=BduSKMaMAsg&t=215s">Video</button>
<button href="https://docs.google.com/presentation/d/1SXsvvx9ePPcIo26jLA-8SD9EVohIBe9srR0ykQIs93M/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>


"Tools for Geo Data Visualization from the Unfolded team" presented at [Geo.Hackmin Week](https://cividi.ch/geohackmin-en/).

<iframe width="560" height="315" src="https://www.youtube.com/embed/BduSKMaMAsg?start=215" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Slides:
<iframe src="https://docs.google.com/presentation/d/1SXsvvx9ePPcIo26jLA-8SD9EVohIBe9srR0ykQIs93M/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


Geo Visualization Tools from Unfolded

<button href="https://docs.google.com/presentation/d/1U8mybyOWGlgen8w4hsLm0Br_xOQb6W9N-fOvHK46IBg/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>

 Presenting [FlowmapBlue](http://flowmap.blue) at 
 the [Urban Computing Foundation](https://uc.foundation/) Technical Advisory Council meeting.

Slides:
<iframe src="https://docs.google.com/presentation/d/1U8mybyOWGlgen8w4hsLm0Br_xOQb6W9N-fOvHK46IBg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


FlowmapBlue at Urban Computing Foundation

<button href="https://docs.google.com/presentation/d/15peaRD9ccPx9LfE1OC5ktpU4ChDKkhqCSLTPd00LWLQ/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>


The talk was given in German at the [AGIT](https://agit.at/) symposium.

Here's the [abstract](https://www.conftool.com/giweek2020/index.php?page=browseSessions&form_session=156):
> FlowmapBlue ist eine Open-Source Webapplikation mit der man einfach interaktive geografische Flow Maps erstellen kann, mit Daten, die auf Google Sheets heraufgeladen werden. Das Tool hilft dabei wichtige Erkenntnisse über Mobilitätsdaten zu gewinnen. Es wird für sehr unterschiedliche Use-Cases verwendet: z.B. Migration, Flüchtlingsdaten, Pendlerverkehr, öV-Nutzung, Bikesharing, Vogelwanderung, Güterverkehr, Liefer- und Handelsdaten, epidemiologische Daten. Die Darstellung von vielen Flows auf einer Karte ist keine einfache Aufgabe. Damit das Tool gut skaliert und auch für grössere Datensätze brauchbar ist, musste ich bei der Entwicklung einige innovative Lösungen finden. Im Vortrag werde ich darüber berichten wie das Tool entstanden ist, wie es verwendet wird und wie die Herausforderungen gelöst wurden.

Slides:
<iframe src="https://docs.google.com/presentation/d/15peaRD9ccPx9LfE1OC5ktpU4ChDKkhqCSLTPd00LWLQ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


AGIT Symposium talk (in German)

<button href="https://www.youtube.com/watch?v=9vcELfXdp6I">Video</button>
<button href="https://docs.google.com/presentation/d/1MV51jJJX9Q0lYusd-35u1VhFeXs0ivmvdV2ximYtddM/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>


The talk was presented at 
the [DataCouncil Zurich](https://www.meetup.com/fr-FR/DataCouncil-AI-Zurich-Data-Engineering-Science/events/267081855/) meetup.

How ClickHouse enables us at Teralytics to develop products for interactive exploration and visualization of data representing aggregated movements of people.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9vcELfXdp6I?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Slides:
<iframe src="https://docs.google.com/presentation/d/1MV51jJJX9Q0lYusd-35u1VhFeXs0ivmvdV2ximYtddM/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>




ClickHouse talk at DataCouncil

<button href="https://www.youtube.com/watch?v=BEkvW5cB3XA">Video</button>
<button href="https://docs.google.com/presentation/d/1NLrWQCfOSvZXlpmCeOOvMe6bJD1nUzCp40JTp9uCmEk/embed?start=false&loop=false&delayms=3000" variant=outline>Slides</button>


The talk ”Flow Maps” was presented online at 
the [Data Visualization Zurich](https://www.meetup.com/datavis-zurich/events/270384574/) meetup.

What are flow maps? Where do they come from and what are they used for? How can they help understanding mobility patterns or migration? What specific challenges do they represent and what are the alternatives? How do they scale to very large datasets?

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BEkvW5cB3XA?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Slides:
<iframe src="https://docs.google.com/presentation/d/1NLrWQCfOSvZXlpmCeOOvMe6bJD1nUzCp40JTp9uCmEk/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>




Flow Maps talk at the DataVis Meetup

The talk "Visualizing mobility" was presented at 
the [DataFest conference](http://datafest.ge) in Tbilisi, Georgia.

Slides:
             
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSrqRWfrDKDRw6EW7SlHCbqeRb_Qa4PQhynhS9QU7u84ntm99Ae222jKXSc12xFzdwTTACyE96Exkr5/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


Internal migration in Georgia:
![Internal migration in Georgia](georgia.jpg)


Visualizing Mobility talk at the DataFest

The talk "Visualizing mobility" was presented at the [ondata and design Meetup](https://www.meetup.com/de-DE/ondataanddesign-Switzerland/events/265947767/) at the 
[YAAY studio](http://yaay.ch/) in Basel.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8HvtlZg9MKU?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Another video recording I took from my laptop with the QA after the talk:              
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/tBDdtykkO7s?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Slides:     

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ5stcOk_72D2iuyI7guvJoQuaNgJKvyfpmjxWTrLdiOnhbuaUcLSB5sRksgjyhph6R0xcg-qcow72K/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>



Talk at the "On data and design" meetup


The talk "Scalability of OD-data visualizations" was presented at the [Urban Mobility Symposium](https://www.citylab-berlin.org/events/mobilitysymposium_en/) at CityLAB Berlin.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Cr6JtLRmSa8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Slides:

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSQh9EZUB3p4NX1SiikVnhCq5-g0SDid4oS6lbz3Boezb6NrGEzSCUqv67uctVXLGJHmAfGAoC5ITch/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

You can also read the short paper ["Scalability of OD-data visualizations"
](/assets/od-scalability_mobility-symposium.pdf)" written as a submission to the Urban Mobility Symposium.


Talk at the Urban Mobility Symposium

              
This talk was presented (in German) at the 
[Data Visualization Group meeting](http://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/index_ger.html):
at the University of Bern.
             
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRGLq5FvKTPO1-re_7OfQv8NARy-iGpBysAjJzEGEZxKzdB_D52khHto5sivXs_V7zesZ6e5AyPyY89/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
              


FlowmapBlue talk at the University of Bern

              
Presented at the UPS Advanced Technology Group seminar.
              
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQINrKnrNmRYelPQ5AuJnuPRpUQwLMRBils4OcRdLdxMuf0dFr6qvwxRnFX-n-XDYHcYAul0BvvbkAZ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>



Visualization of OD data at UPS


[Slides](https://docs.google.com/presentation/d/1bDZfB-g2AXBU_ExY3ho_HJGDderJygdk935V8rWhjXA)
for my presentation at the interdisciplinary 
workshop on [Environmental Changes and Human Mobility](http://www.clisel.eu/Ascona)
in Ascona.              
              
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSxLKdtLQVPXVdU5FxtgMFptwGDdOsv4kQOdnOpLvE85ZDNumDxdjxk3cb7vqh8l5doh81Tp7M8VLTW/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>


Here's the abstract of the talk:

> Understanding human mobility patterns is important in fields like migration studies,
> urban and transportation planning, epidemiology, and disaster response. Data on
> human mobility are often voluminous and difficult to interpret in tabular form; therefore, visualisation plays an important role in their analysis. One of the most widely
> used visualisations of such data are flow maps that represent movement between
> geographical locations as lines of varying thicknesses. Flow maps usually do not accurately depict the exact movement routes. Instead they are aimed at answering questions such as: Where are the origins and the destinations of the flows on the map?
> What are the magnitudes of the flows? Where are the largest flows? Or more complex
> ones like: What is the spatial structure of the flows network?
>
> Until recently, making flow maps has involved manual drawing, or knowledge of programming or specialised software. I had learned from my experience developing flow
> mapping libraries that there was a need for a tool with which people without special
> knowledge could make flow maps and share them online. This is why I decided to
> develop FlowmapBlue. It is a web application for publishing interactive flow maps
> from data uploaded to online spreadsheets. It is free; it requires no installation and
> allows anyone to create a flow map in no time. Since the tool was released, people
> from different parts of the world have started using it to visualise various human mobility datasets and are sharing them with the general public.
> In the talk I will demonstrate the tool, show example datasets and discuss a few interesting patterns that can be discovered in them. I will speak about the challenges of
> visualisation of human mobility flows and about overcoming them. I will touch on the
> analysis of changes over time, on representing flows with attributes, and on the scalability of the general approach to very large datasets.


Human Mobility talk at CLISEL

I was invited to give a talk
at the <a href="https://gflowizworkshop.sciencesconf.org" target="_blank" rel="noopener">GFlowiz workshop</a>
at <a href="http://www.ifsttar.fr/en/welcome/" target="_blank" rel="noopener">IFSTTAR</a>
about the  tools we build for exploring large OD-datasets with hundreds of millions of records.
In the talk I demonstrated the dashboard we are developing at 
<a href="https://www.teralytics.net" target="_blank" rel="noopener">Teralytics</a>
for the analysis of this kind of data.
(<a href="https://goo.gl/D36oSi" target="_blank" rel="noopener">Slides</a> and <a href="https://www.youtube.com/embed/WZpFXLhleEQ?rel=0" target="_blank" rel="noopener"> video recording</a>).

![](whole-germany.png)

![](irma.png)

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTqB406jn_4-B0T4ZepPdcyw3_98ST-zeEId9jm_6atMn8FdZGq-QviH_acODs_aSGTbCcJtadTtrvZ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

Here's the abstract of the talk:

> Origin-destination (OD) data represent numbers of movements of people or goods between locations. The size of such data depends quadratically on the number of locations involved. It can quickly grow to hundreds of millions of rows when flow attributes like time, mode of transport, duration are added to the dataset. Such large datasets cannot be entirely visualized in one image. Their analysis requires the use of summarization or interactive exploration techniques.
>
> I will speak about the web applications we are building at Teralytics for the analysis of movement of people in cities and countries. Scalability to the always growing data is an important challenge we are facing. I will discuss how we are using geographic flow map visualizations and other representations in this context, how we support querying across space and time and how we apply techniques like cross-filtering and on-the-fly aggregation for slicing and dicing the data. I will elaborate on choosing the right tools and the system architecture to ensure smooth interactivity and short query response times necessary for such interactive analysis.


Here are <a href="https://goo.gl/D36oSi" target="_blank" rel="noopener">the slides</a>
and a video recording:

<iframe width="560" height="315" src="https://www.youtube.com/embed/WZpFXLhleEQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



Scalable OD-data visualization at IFSTTAR

<button href="https://ilyabo.github.io/graphics-with-react/#/">Slides</button>
<button href="https://github.com/ilyabo/graphics-with-react" variant=outline>GitHub</button>

Talk "Graphics with React"
 in which I discussed the tradeoffs and some good practices about the use of SVG, Canvas and WebGL 
 (presented at [Zurich ReactJS Meetup](https://www.meetup.com/Zurich-ReactJS-Meetup/events/251517816/)).  


![](react-meetup-2018.png)

![react + svg](react-svg.png)

![react + canvas](react-canvas.png)

The source code for the slides (which are a React app) is available at 
[github.com/ilyabo/graphics-with-react](https://github.com/ilyabo/graphics-with-react).


Zurich ReactJS Meetup


I gave an introductory workshop into programming for kids
at [Freie Schule Bergmeilen](http://freie-schule-bergmeilen.ch/)
with the Lego Boost robot:

![](robotics-workshop2.jpg)

![](robotics-workshop3.jpg)

![](robotics-workshop4.png)




Robot programming workshop


The talk "Visualizing People Movement with React" presented at the Zurich ReactJS Meetup: 

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRx3Ga4JtzgQQw9bTKVBa8cg6z6POF_YGzo_Vccoa9ZNuJ2z8kCTkJ-LArU_QXzU3Ie0JxQbxZax9Iq/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="749" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

The slides are available [here](https://docs.google.com/presentation/d/19cYsulg6fS_cO1u5DL-iUmzS6n3H9hwFned0jpnNQrY/edit?usp=sharing).

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




Visualizing People Movement with React

I gave a talk at the <a href="https://openvisconf.com/2015/" target="_blank" rel="noopener">OpenVis conference</a> about 
using React for data visualization. Here are the [interactive slides](http://ilya.boyandin.me/openvis-react/) and 
a video recording:
 


<div style="text-align: center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dcLrbiHIX5M?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Check <a href="https://github.com/ilyabo/openvis-react" target="_blank" rel="noopener">this page</a> for the source code of the slides.


I had the great pleasure to speak at the OpenVis conference about  using React for Data Visualization.

DataVis with React talk at OpenVis conf

"Making Sense of Data with Visualization" presented at [SICHH Forum Data on Visualization & Big Data](https://www.sichh.ch/about-us/events).

<embed src="sichh-talk-datavis-animation.mp4" alt="Data visualization animation">

<embed src="sichh-talk-datavis-animation-zoom.mp4" alt="Semantic zoom">

