Posts

Paths to Power: How Every Member Got to Congress

Image
An interesting visualization from the New York Times, showing the education and career path of each member of the 116th congress. It outlines how a large number of representatives go through similar milestones, which are divided in three categories (education, career, government).  I was surprised to see that party affiliation does not appear to make a big difference in a representative's career path. With the exception of a few steps like non-profit work, milestones are distributed equally between democrats and republicans. The horizontal axis is not meaningful: I wonder if this would be easier to read as a simple parallel coordinates visualization. The large number of paths also makes it difficult to unveil relations between milestones: did more representatives with career in private law attend public or private college? It would be cool to be able to select a single milestone and see all paths going through it (the visualization allows to hover and view a single path at a ti

Vis Critique: Farmland usage change in the US

Image
Bloomberg Graphics is one of my favorite places to check when looking for example of visualizations used in storytelling. Most of their articles are well done but the example below is an exception. The author wanted to show how farmland usage changed changed across US counties in the last 20 years. Each chart presented in the article showed the increase or decrease for a specific crop such as wheat or soybean. A cloropleth map would have worked fine here. But instead of using a color scale to represent percentage change, we have thin bars centered on each county, making the overall visualization busy and difficult to read. Original Article :  https://www.bloomberg.com/graphics/2018-crop-shift/

Flickering 2D transform elements in Chrome: a simple fix

This quick post is to point out a fix to an issue I had to deal with a few weeks ago and was caused by a Chrome update. Components with absolute positioning and a 2D CSS transform started flickering when placed inside a scrollable component. A brief search online revealed several people with similar problems, but the suggested fixes were all very different. I tested several of them (including obvious changes to the z order) before finding the one that actually did the trick. What eventually worked for me was adding an empty 3D transform to the same elements with 2D transforms: transform:translate3d(0,0,0); I guess the reason why this works is that it forces elements to be drawn via a different rendering / compositing path than standard 2D elements.

Organizing the React render method

Image
One common way to organize React render methods is to split the returned JSX into several smaller pieces, which are then assembled in the final JSX before returning. This makes the overall structure of the render function easier to understand. Note that the objective isn't to obtain JSX fragments we can reuse elsewhere, we just want our JSX to be split into bite-size, one-off sections that have a clear function in the component markup. Now, look at the two examples of a simple render method below. Which one would you use? Both approaches yield the same result and you would be tempted to use stateless components here, as the resulting all-JSX return statement looks better. But using stateless components defined inside your render method is a big no-no. Why? Because they will be re-rendered to the DOM from scratch every time the parent container renders. Keep in mind how reconciliation works. It will traverse your JSX tree, adding and removing nodes as needed. If a component in

Omegalib v13 released

This release adds 64bit build support on Windows. We also include an extended camera streamer API and double precision support on GPU buffers. A lot of internal changes and code reorganization are also included in this relase. https://github.com/uic-evl/omegalib/releases/tag/v13

Supporting Co-Located Collaboration in Large-Scale Hybrid Immersive Environments

Image
These are videos from my talk for the 2016 Media Arts & Technology Seminar Series @ UCSB. While at UCSB, I had the chance to walk in the Allosphere : it's by far the most immersive large scale system I've ever seen!   Abstract: In the domain of large-scale visualization instruments, Hybrid Reality Environments (HREs) are a recent innovation that combines the best-in-class capabilities of immersive environments, with the best-in-class capabilities of ultra-high-resolution display walls. Co-located research groups in HREs tend to work on a variety of tasks during a research session (sometimes in parallel), and these tasks require 2D data views, 3D views, linking between them and the ability to bring in (or hide) data quickly as needed. Addressing these needs requires a matching software infrastructure that fully leverages the technological affordances offered by these new instruments. I detail the requirements of such infrastructure and outline the model of an operati

glVertexAttribPointer and double precision buffers

Image
This post will hopefully help people avoid a mistake that cost me several hours of debugging. In one of my projects I have been working with OpenGL 4 double precision vertex buffers. As the buffer data was passed to the shader as a generic attribute, I have been using  glVertexAttribPointer  to specify the attribute location in the data stream. This worked fine with floating point data. When I needed to switch to double precision, I checked the glVertexAttribPointer specification: this function accepts GL_DOUBLE as an input type: therefore, I assumed that change was all I needed to pass double precision data to my shader. I noticed two other version of the attrib pointer function existed ( glVertexAttribIPointer and  glVertexAttribLPointer ) but I thought they were just legacy functions or alternatives to using glVertexAttribPointer with GL_DOUBLE or GL_INT type specifiers. Things did not work as I expected. trying to pass double precision data to the shader caused a crash de