Data Visualization practices

A map projections comparison


An opposite diagram to compare the US states



A protein radar chart



A printed visual storytelling to point the French events of May 68

While I focused on Graphic Design and academic activities, I found data visualization to act as the bridge from design into the realms of educating, assisting, and empowering users to navigate an increasingly dynamic world. Here are some exercises I’ve been doing to get closer to the field.

A map projections comparison


An opposite diagram to compare the US states



A protein radar chart



A printed visual storytelling to point the French events of May 68

While I focused on Graphic Design and academic activities, I found data visualization to act as the bridge from design into the realms of educating, assisting, and empowering users to navigate an increasingly dynamic world. Here are some exercises I’ve been doing to get closer to the field.

Map projections comparison


Parsons Data Visualization
Postgraduate Program
Dec 2023



Representing a spherical object into a bi-dimensional surface is not an easy task. So much so are hundreds of map projections that choose to prioritize or shape, distance, area, etc. This interactive data visualization compares the Mercator and Gall-Peters projections.

To focus on the distortions of the projections rather than the maps themselves, I adopted an intentional no-map as background. And so, there are three primary geometric forms besides three representative territories. With such well-known shapes, observing how each projection distorts them is easy.

Because of the shape’s particularities, the user can learn some of the projection’s behaviors. For instance, the base of the equilateral triangle is unaltered in the equatorial line, or better said, the only line with no distortion at all.

To build this interactive comparison, I started with the Google Maps documentation as my base and manipulated the code from there. In addition, interactiveness was developed on the Webflow platform. The result is a clear, helpful, and easy-to-use tool.

To check it out:
undr.construction/map-comparisons

US States Population Concentration
in an Opposite Diagram


Cooper Union course Introduction
to Information Design and Data Visualization
Aug 2022



How do you explore maps without necessarily staying on a map? This chart attempted to explore comparisons between the US states by disassembling the country map and reorganizing the states in a chart in name to compare each one with the country average. The solution was to make use of the structure of an opposite diagram, but adopting the average of the population and area criterions as the origin point. In that way, it’s easy to visualize the under and over-average states.

Moreover, by crossing the absolute population number with each state area made it possible to discover the state population concentration. Such information is reinforced by extreme examples such as Alaska, which is well known for its emptiness despite its giant territory.

The infographic was built with Processing in p5.js. The biggest challenge was coordinating the vector images with the datasets.

Protein Radar Chart


Parsons Data Visualization
Postgraduate Program
Oct 2023



This interactive radar chart helps one decide the best source of protein from a holistic point of view, relating to the amount of fat and carbon footprint cost in a 100g portion. For a better comparison, the user can turn on and off and overlay each of the 20+ foods classified as animal, dairy, and plant-based.

The radar chart was designed at Figma, and built at RawGraphs application. The interactiveness was built on Webflow.

To check it out:
undr.construction/nutrition-chart

A Storytelling about the
May 68 French Events


Faculty of Architecture and Urbanism
of the University of São Paulo, FAU USP
Dec 2014




As a final work for the Bachelor grad, it was produced a storytelling about the May 68 French events. Each one of the five posters represents a milestone of what happened. When juxtaposed, they conform at the same time to a visual overview and a timeline on opposite sides of the poster, connected by the transparency of the tracing paper.

The continuous dialogue between text and image was the conductor of the graphic design project. To reinforce such a bond, the posters were printed in silk in solid colors, ensuring to have good legibility while showing the pairs on the other side.