Cigar box guitar

I made a cigar box guitar for my daughter using only items we found in the house. The body is made out of a cookie tin box.

The bridge and nut use color pencils and we reused the old tuners from a classical guitar. The beautiful red color on the head is just a little blood. Because making a guitar is hard.

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.

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 

Modding the DS-1 Orange Boss distortion

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. So I tweaked it. Here is what I did.

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.

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 change 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.

VisMTL #9 et #10

Voici un résumé des meetups VisMTL #9 et #10, en français avec vidéo en anglais.

VisMTL9

Le meetup VisMontreal #9 portait sur l’écosystème de la datavis, rapportant les dernières nouvelles de l’industrie, les studios, les outils, les tendances, les conférences, etc. Le premier invité était Ian Johnson, en direct de San Francisco. Ensuite je donnais des nouvelles de l'industries, suivi de Jean-Hugues Roy qui nous parlait de l'état du journalisme informatique au Québec.

https://medium.com/@christopheviau/vismtl9-des-nouvelles-de-lindustrie-ef47608d3669

VisMTL10

Le meetup VisMontreal #10 a profité du passage de conférenciers de réputation internationale qui étaient à Montréal pour présenter leur recherche à CHI, une des plus importantes conférences en datavis et Interaction Humain-Machine.

https://medium.com/@christopheviau/vismtl10-la-recherche-a018e4cb64ee

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.

VisQuebec meetup #7

Quelle est la place de l'animation en visualisation de données? J'ai présenté des exemples (et des contre-exemples) d'utilisation de l'animation en datavis pour illustrer certaines possibilités et la façon d'en évaluer la pertinence. Ce fut l'occasion de visiter des types de visualisation moins connues, come le diagramme noeuds-liens, le Sankey, le sunburst et les bulles flottantes.

D3 workshops (VisQC #6 et MTLDATA/VisMTL)

I gave two D3 intro workshops: one with VisQC and the other with MTLDATA+VisMTL. In both cases I didn't succeed to turn it into a good coding session, but it ended up being an intro to datavis and D3.

VizQuebec Meetup #5

À ce 5e meetup de datavis à Québec, mon bon ami Jean-François Lahos présentait son travail utilisant la programmation de formes 3D pour construire des sculptures déployant le plan dans l'espace et des installations où la temporalité sert de matériau brut.


Pour ma part, je présentais différents types de graphiques tirés d'une galerie de 12000 exemples de visualisations. Le but était de montrer que certains graphiques se ressemblent mais sont en fait fondamentalement différents et surtout que certains graphiques différents sont en fait équivalents.

Voici les diapos utilisées ainsi que quelques liens vers des visualisations méconnues mentionnées durant la présentation.

• Gallery with 2500 examples: http://christopheviau.com/d3list/gallery.html
• Gallery with 12000 examples: http://blockbuilder.org/search#text=sankey
• Geneaquilts: http://www.aviz.fr/geneaquilts/
• Adjacency Matrix: https://bost.ocks.org/mike/miserables/
• Bertin's Matrix: https://github.com/jdfekete/reorder.js/wiki/Introduction
• Horizon Charts: http://vis.berkeley.edu/papers/horizon/
• Bullet Graph: https://www.perceptualedge.com/blog/?p=217
• Sunburst: https://www.jasondavies.com/coffee-wheel/
• Ternary Plot: http://bl.ocks.org/biovisualize/c43740892e8f96769084bcf3e0bb7839
• Marimekko Chart: http://bl.ocks.org/mbostock/1005090
• Radviz: https://github.com/biovisualize/radviz
• Parallel Coordinates: http://exposedata.com/parallel/

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 wrote a blog post about it on Planet OS blog.

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

Here's a blog post illustrating when to use a heatmap that I wrote after adding a heatmap component to Cirrus.js.

Cirrus.js

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

VisQuebec

After the datavis meetups in the Silicon Valley and in Montreal, we started a new one in Québec City, in French. Here are the videos of the first 3 meetups.

Coderre Tweets

I built a simple charts library for Radio-Canada called Moby, which we used in an article about Montréal's mayor, Denis Coderre, who is using Twitter quite a lot. As usual, the library is open source and available on Github. One interesting aspect of Moby is that it uses plain HTML, no SVG or Canvas, even line charts and this bubble chart.

The visualization below is interactive! Or tweak it on Blockbuilder.

Firespray: a streaming chart library

Working with Boundary, I developed Firespray, a nice chart library for streaming data.

Magnotta visualization

I worked with an awesome team at Radio-Canada on visualizing a complete Twitter coverage of the Magnotta trial.

Visualization Montreal

We started a new visualization meetup in Montreal. Our first meetup had more than 100 attendees and a series of awesome speakers. Here is a summary.

Micropolar

I developed a polar charts library named Micropolar for Plotly, a visualization platform for science.

The visualization below is interactive!

Hackathon Québec Ouvert

We won a prize in the Hackathon Québec Ouvert with an application for mapping your own constellations with the Québec Open Data. I worked as part of the Chambre Blanche team with Nataliya Petkova, Jeanne-Landry-Belleau and Pierre-Luc Lapointe. More details coming soon.

Developing a D3.js Edge

I co-authored a D3.js book with Andrew Thornton, Ger Hobbelt, Roland Dunn and Troy Mott. It was a book sprint: writing the core of it over 2 week-ends. We focused on how to write production D3.js code with the reusable API. The e-book is available on Bleeding Edge Press and on Amazon.

Products made with D3.js

Here is a short list of companies using D3.js in production:

https://addepar.com/

https://plot.ly/

http://blog.datawrapper.de/2013/datawrapper-crosses-mark-of-10-million-visits/

http://www.zoomdata.com/

https://www.polychart.com/

https://www.statwing.com/

https://boundary.com/
http://www.ebench.com/

http://trifacta.com/

http://chartio.com/

http://trisul.org/

http://infoactive.co/

http://ffctn.com/

http://create.visual.ly/

https://www.moh.io/

http://www.clearstorydata.com/

http://www.alpinedatalabs.com/product.html

https://www.simple.com/blog/Simple/announcing-reports/

http://corner.squareup.com/2012/04/building-analytics.html

http://www.datameer.com/product/data-visualization.html

https://www.youtube.com/user/plotcasts

http://www.platfora.com/

http://scn.sap.com/community/abap-for-hana/blog/2012/11/02/analytical-abap-for-hana-applications-characteristics-unique-selling-points-and-first-programming-idioms

D3 meetup: integrating D3 with MV* frameworks

I gave a talk at OpenDNS with Miles McCrocklin and Jyri Tuulos. It was about a D3 book that we are writing with Andrew Thornton, Roland Dunn, Ger Hobbelt and Troy Mott and that will be launched soon.

Datameer Designer

It's been almost a year since Datameer launched its 2.0 version, featuring a new Business Infographics Designer. Lots of polishing and improvements went into the product. You can download a free trial at http://www.datameer.com/product/data-visualization.html. Take a look at the documentation, not the best examples around, but shows the diversity of chart types available: https://www.datameer.com/documentation/current/Visualizing+Data.

D3 Alternative Gallery

I just launched an alternative D3 gallery with almost 2500 d3 examples. The goal is to be able to easily filter to find D3 examples by author, visualization type, title etc. This is a front-end to the spreadsheet used as a database. Help me update the entries, build your own gallery UI and build the most impressive visualization gallery only possible in the D3 community!

http://christopheviau.com/d3list/gallery.html

Getting involved with the D3 community

I gave a talk about getting involved with the D3 community at Trulia for the Bay Area D3 User Group, with Scott Murray and short talks by Jérôme Cukier, Santiago Ortiz, Jyri Tuulos, Alex Johnson, Amelia Greenhall, Mike Travers and Péter Boda. My slides are here and it was recorded on video. I launched my alternative D3 gallery made with D3 and based on a Google Spreadsheet.

Here is the talk in a blog post format. It is mostly a collection of links for getting started with D3 and contributing to this awesome community.

Embedding D3.js in a blog post

Here is a simple test showing how to running a basic interactive D3.js code from a Gist using Bl.ocks as well as embedding the source code.

The visualization below is interactive!

Datameer 2.0 visualizations

I worked on the new visualization system for Datameer 2.0 we just launched at Hadoop summit.

Eurovis2012

ConnectedCharts, presented at Eurovis2012, Vienna.

Constant Anisotropic Mean Curvature

Here is a parametric tool to generate Constant Anisotropic Mean Curvature (CAMC).

Try D3 Now

I wrote a very simple D3.js tutorial called "Try D3 Now".

Scripting Inkscape with D3.js

Here's a workflow I like to use, starting from a simple sketch on paper, vectorizing in Inkscape and scripting using D3.

Morphogenesis ISEA2011 Istanbul

Paper about Morphogenetic Arts published at the 17th International Symposium on Electronic Art

Visualisations hybrides

Article sur les visualisations hybrides soumis à Infovis2011.

Genoma

Résidence de production au Musée de l'image et du son de São Paulo.

FlowVizMenu

Visualisations multidimensionnelles pour l'exploration de graphe en bioinformatique présenté et publié à InfoVis 2010.

Genoma.Mercato.0610

Installation solo à l'Ex Lavatoio Hall, Mercato Saraceno (FC), Italie, le 6 juin 2010 organisé par The Rad’Art Project – Association Artéco, en collaboration avec La Chambre Blanche, l'Association Aidoru et la Municipalité de Mercato Saraceno.

Surface multitactile ETS

Surface multi-tactile fabriquée pour l'École de technologie supérieure pour l'enseignement et la recherche en interaction humain-machine.

Orbes

Exposition Médium && outil. Troisième volet de la série «géométries sphériques», «Orbes» nous amène dans un cycle cosmique, d'un simple mouvement giratoire jusqu'à une représentation géométrique de l'univers.

Cubes Olap

Travail de recherche pour SAP Business Objects.

Produit sphérique

Résidence à la Chambre Blanche. «Produit sphérique» explore la géométrie complexe en sculpture et en technologies.

Harmoniques sphériques

Exposition Art-Faune-flore. Art génératif basée sur une formule d'harmonique sphérique présenté au château de Saussignac, Dordogne, France.

Surface multitactile CCA

Surface multi-tactile fabriquée pour une soirée bénéfice au Centre canadien d'architecture de Montréal.

Visualisation de graphes

Série de prototypes sur la visualisation de graphes dans le cadre de mon doctorat en génie logiciel de l'École de technologie supérieure. 

Architecture générative

Exposition «SmartArt/Science et art». Automate cellulaire générant une architecture en 3D d'après une analyse musicale pour une installation de Nicolas Reeves.

Murales de neurones

Exposition «Neurones en action». Murale lumineuse illustrant les neurones pour un espace découverte au Musée de la civilisation.