Net zero interactive viz with Voilà

I had the chance to collaborate once again with Voilà on a scrollytelling project for CPP Investments about their goals to be carbon neutral. I'm pretty good at animating gooey blobs now. Try it here and see how it was done: https://chezvoila.com/project/changingworld/

The Strasbourg shooting

I illustrated a long-form article about the shooting on the Christmas market in Strasbourg. It was a collaboration with the excellent Le Lab des DNA et de L'Alsace with Emmanuel Viau's team.

https://www.dna.fr/faits-divers-justice/2023/12/10/attentat-de-strasbourg-les-10-minutes-qui-ont-bouleverse-l-alsace

Climate change viz with Voilà

I had the chance to collaborate once again with Voilà on a scrollytelling project for the Canadian Climate Institute about the cost of climate change on the infrastructures. I helped with the scrolling animations. Try it here and see how it was done: https://chezvoila.com/project/infrastructure/

Crash du Mont Sainte-Odile

 

I illustrated a long-form article about the crash of Mount Sainte-Odile. It was a collaboration with the excellent Le Lab des DNA et de L'Alsace with Emmanuel Viau's team.

(Paywalled) https://www.dna.fr/faits-divers-justice/2022/01/17/une-histoire-vraie-dans-le-cockpit-de-l-airbus

Interactive dashboard for political surveys with Voilà

I had the chance to collaborate with Voilà on a dashboard project for an important client doing political surveys analytics. I can't disclose much about it. But it was a nice collaboration on a tool to filter stacked viz.

Camp Fire project

We made a prototype to visualize the 2018 Camp Fire, "the most destructive wildfire in California's history, and the most expensive natural disaster in the world in 2018 in terms of insured losses" [Wikipedia].

The Landsat pictures are stunning.

We needed a precise view of fire damage with vegetation fire index as a context.

The dataset is pretty big, but zooming and filtering on large dataset on maps is one strength of the OmniSci platform. So we can filter by damage level and zoom down to individual buildings.

Switching to a sattelite basemap, we can see how much the shapefiles match the buildings. This tool could be used in rescue missions or even to prevent fires in the future by scheduling maintenance or turning off parts of the electrical grid in high-risk areas.

Sankey from a Google Sheet

For a collaboration with the excellent information design firm Voilà, I needed to generate some fairly complex Sankeys. I made this example of a Sankey pulling data from a Google Sheet as a template to generate some of the visualizations from the report Understanding the impact of a low carbon transition on South Africa.

 

SQL Editor redesign

Immerse SQL editor is very useful to test some queries, build views, etc. It needed a redesign. Here are some details of the redesign process.

We needed some new functionalities like:

• Better syntax highlighting, autocomplete, SQL formatting and validation
• Better table/column browser with filtering
• Query history with preview data
• Reusable query snippets
• Run multiple queries in the same context instead of notebook-style
• Notifications
• Shapefile query results

So after the phase of requirements gathering and research, we started wireframing.

At OmniSci, we maintain a nice set of Figma components that we use to compose mockups quickly.

Here is the result of the SQL Editor redesign. 

Before:

After:

If you don't see a big difference, that's a good thing. All the barely visible features that facilitate editing, like key shortcuts, notifications, simplified flow, automatic formatting, validation, query history and snippets makes a big difference in usability without adding much cognitive load.

Seashell pattern generator

The beautiful book The Algorithmic Beauty of Sea Shells demonstrates how an impressive variety of seashell patterns can be described with a fairly simple activator-inhibitor function. I rewrote the book's algorithms in Javascript and made an interactive notebook for anyone to generate a great variety of seashell patterns.

D3.js 10th anniversary website

I started a simple website for the 10th anniversary of D3.js. For the occasion, I made an interactive timeline listing some key moments, like our first tutorial, website, gallery, event, etc. I started a newsletter that I was not able to manage for long. 

Blip!

 I'm doing a lot of scientific projects and tinkering with my kids. We started a blog to document them a while ago. It currently has more than 90 projects and counting. Check it out: http://www.blipblip.net/.

Looking back at my 1st project as Product designer at OmniSci

I just celebrated my 3 years at OmniSci (formerly MapD). Looking back, my biggest highlight was to move from Frontend engineering to Product design. 22 years ago, the same year I founded my UX design company BioDesign, I started teaching programming, so I always had both interests. 

My first project in that new role was to convert the app to dark mode. I always vaguely dismissed the request for dark mode UI as a trend. But then I got a very specific use case: the condition for our app to be displayed on the giant screen of the NVIDIA GTC conference was that it needed to be in dark mode, light mode simply blasts way too much on these giant screens.

It was a Sunday and the conference was on the next day so no time for a new build. I wrote some javascript to run in the browser console to override the css on-the-fly. Here's the result:

I developed dark mode screens before, mostly for monitoring apps where users have to stare at it all day, to relax the eye. But my manager Christian Baptiste showed me how to use Material guidelines for dark themes which really added some structure to UI patterns I was mostly improvising until then. From there I developed Omnisci-ui, which is our in-house theme for RMWC, an excellent React Material library. We also developed, with Chrstian and my colleague Duncan lane, a set of reusable Figma components for our mockups to match our javascript components.

I still need to learn more facts about the benefits of dark mode. But at the end of the day, a big part of making our users successful is to make them happy. We delivered dark mode with the next release of OmniSci Immerse and it was a great success. So I have to thank a giant screen for forcing me to learn how to properly design dark themes.

Graphiques Dégénérés: An Exhibition of Datavis Failures

Data visualization is the art of turning data into meaningful graphics. But sometimes, this process doesn’t go as planned. When it fails in style, the results can be surprisingly beautiful. I come from an art background, so I asked myself the question: can we present datavis failures in an art gallery and treat it as a form of Glitch art? That’s what we did. And it was fun. 

Read the article on Medium

A common language for product specifications

A complete product development flow involves multiple people in interaction. Each stage of the process can sync-up by sharing specific deliverables. Typically, product managers will write down a set of user stories and feature lists, Designers will turn them into wireframes and flow diagrams, project managers will break the features down into tasks, etc. It can be hard to translate these documents across the pipeline. What if we could find a common language, so everybody can collaborate on building a shared vision of the product?

Read the article on Medium 

Get started making and modding guitar pedals for cheap

One of my hobbies is to build and mod distortion pedals. I really enjoy exploring how iconic guitar sounds are shaped just by varying a few electronic components. It's also surprisingly cheap once you know how to find cheap parts. Here are some of my tricks to get started modding and building.

Modding the Orange Boss and Peavey amp to sound like my 90's rig

That orange pedal is a classic. That's the sound I had when I started playing guitar. Out of nostalgia, I bought an old Peavey from the 80's as well as a used DS-1. It sounds like the glorious garbage from my teenage years. But something was off. The amp was even worse. So I tweaked them. Here is what I did.

Modding a 18$ Tube Screamer clone

The Tube Screamer (TS) is an excellent overdrive platform for modding. Some versions of it like that one are still in production. There's a cult around the TS and when you look at modern overdrive and distortion schematics, you will see that a lot of them are mostly glorified TS mods. If you want to get started modding pedals, instead of destroying a 250$ pedal, this 18$ CAD clone is very close to the original. In my case, I changed the range of the drive and tone, added more bass and replaced the useless switch to toggle clipping diodes instead, which completely changes the drive structure.

MapD3

I'm currently working on datavis for MapD Immerse and collaborating on a new charts library codenamed MapD3. It's in an early stage, but we are already using it in production and it's available on Github.

Insights from designing Datahub UI

I wrote a blog post about some code architecture insights I got from building the visualizations for Datahub-ui, a ui platform we are using at Planet OS.

D3 Modular

I wrote a blog post about code modularity in D3.js, where I give some tricks I learned from 5 or 6 different charts library design.

Chart optimization

I wrote an article about optimizing chart performance, with tricks like canvas buffering, progressive rendering, stream loading, using Web Workers, GPUs, bisection/quadtrees, etc.

Estonian diaspora visualization for the President

Here is a gift we made to the president of Estonia, Toomas Hendrik Ilves. It's a data visualization of Estonian populations around the globe.

Planet OS Exchange

We delivered a search engine for environmental sensor data called Planet OS Exchange.

I learned a lot about maps visualization and sensor data. Here is an early prototype.

That's where I developed Cirrus.js. Most data we currently have is raster data, but there's always the occasional time series.

And temporal coverage chart.

But most of the visualization work is on map polygons and raster data. Here is for example a screenshot of the colour palette dropdown.

Bionic eyes

Scientists are developing bionic eyes to give sight back to patient with macular degeneration. This visualization shows the difference between seeing the world with a technology that provides a grid of 64 pixels and another one that would boost the resolution to 1024.

The visualization below is interactive!

I also made an illustration for one of these bionic eyes company called iBionics.

Radviz

I implemented Radviz in D3.js. See the documentation and examples for more details about this interesting chart type.

The visualization below is interactive!

Histogram equalization

Choosing the right color palette for visualizing data on a map can be tricky. But when what you need is to improve local contrast to better see the details, you can use a technique called histogram equalization. I implemented one version with D3 and describe the experiment here.

Temperature-salinity plot

Working with ocean data is fun, and I get to build very specific charts, like the T-S plot I explain in this blog post. "Plots of salinity as a function of temperature, called T-S plots, are used to delineate water masses and their geographical distribution". You can take a look at the code here.

Food security visualization

I had the chance to work on some datavis for a conference about food security. Here's a blog post about it.

Heatmap

We launched Cirrus.js a few weeks ago to share some technologies we are developing at Planet OS (now Intertrust). We recently had the need to visualize some datasets on a heatmap, so we added one to Cirrus.js. What is a heatmap? What kind of data can it visualize? Read on.

Cirrus.js

I implemented a new charts library called Cirrus.js for my work at Planet OS (now Intertrust). The goal is to have a very simple pipeline pattern to easily compose modules together. Here's a short explanation.