blogging, infofails

ūüéĶ I can see clearly now the rain is gone…

Last July was a crazy month full of flood news all over the world. I remember seeing impressive videos and images of the floods in China and Germany, and digging a little deeper I found many more reports about it from around the world. I tried to put some things together, but time and other projects played a trick and the project became material for #infofails.

Some times taking notes of things isn’t enough for me. One or two illustrator artboards with basic ideas have become the new “office whiteboard sessions” since we started remote work. Quick sketches and some data samples usually help me to organize myself better.

Sampling flood reports and daily precipitation data.

I collected some data from NASA including the PPS and MERRA-2 to visualize precipitation. It was so cool when I saw the data of total rainfall in a month over the planet. Is curious to see how dynamic our planet is isn’t?

July’s total precipitation. Data by NASA’s Precipitation Processing System (PPS)

Whenever I have a global data set, I always look at how things are for my family and friends in Costa Rica. I remember that in July I had seen videos of flooded areas in Turrialba, a region in the Atlantic region of the country. And yes, the accumulated data showed that intense blue layer near the border with Panama.

Detail of the precipitation data. NASA PPS.

Of course, there were other much worse areas that saw terrifying amounts of precipitation causing dozens of deaths, western India for example was one of those areas. I continued to explore a bit more on the map and checking against the flood reports I found to find points of interest and to highlight later in the story.

Detail of the precipitation data. NASA PPS.

The testing continued

One aspect to consider was how to visualize the data in the end. There was even a 3D spinning globe in the process… As you can imagine it was chaos displaying flood reports, animated rain data, and 3D navigation all at the same time.

However, one of my favourite pieces was not the maps. There were some small graphics to condense powerful messages had something interesting too. Within them was this simple stacked bar chart where each block showed the total precipitation each month in Zhengzhou, just by putting the amount of water they received on July 20 next to it was really impressive. This is real evidence of how extreme our planet’s climate is becoming.

BTW, there’s also a great graphic from the South China Morning Post friends explaining the huge amount of water that Zhengzhou received over the downpours [ check that story here ]

Extremes

A few years ago I was working on a graphic about extreme temperatures of the earth, it was happening the 2019 polar vortex in the US and at the same time Australia was on 40¬į C on the other side. In my head, the perfect title was “Earth’s Goldilocks Climate.” It sounds crazy but it is actually very common, our planet is full of those strange contrasts all the time.

In July China was having its own ‘goldilocks’ event, or kind of, because wasn‚Äôt temperature. As enormous amount of water flooded train stations and caused chaos in Henan, south of there a nine-month drought hit Fujian province.

July total precipitation in China. Data by NASA PPS

Similar situations occurred in the Middle East, in Afghanistan a long drought was worsening the already difficult situation of the Afghans. Ironically, extreme rains in the border areas also caused flash flooding, while the country as a whole has not seen any rain for months.

July total precipitation in the Middle East. Data by NASA PPS

NASA’s MODIS/Terra offers also daily and monthly averages of surface temperature. This was some other stuff I was considering for this story. It’s incredible to see how high the temperatures go in the region. There’s also an other cool data set of monthly temp. anomalies here in case you want to explore the world too.

Temperature anomaly for Feb. 2021. Red areas show were the temp. was higher in comparison with the averages of 10 years ago. Afghanistan was about 12C warmer in average according to NASA Earth Observations data. LPDAAC and MODIS.

Anyway, none of these charts, maps or data made it into a true story on Reuters, but it was fun collecting, preparing and sketching ideas for it. And of course, in the end it became an average #infofails story here. Maybe later we will take back again this story, unfortunately extreme weather events are becoming more and more frequent

About #infofails post series:
Graphics that are never formally published. Those are maybe tons of versions of a single graphic or some floating concepts and ideas, all part of my creative process. All wrapped up in #infofails, a compilation of my creative process and failures at work.

Did you like #infofails?
Have a look to other #infofails ūüĎá

1: Wildfires
2: Plastic bottles
3: Hong Kong protest
4: The Everest
5: Amazon gold
6: The world on fire
7: A busy 2021 kick off
8:Olympics

Standard
Digital works

Nerd facts: Asian American population

US elections are coming and here in Hong Kong we want to see it from an Asian perspective. Some weeks ago I start this project to collect the data of Asians in US and visualize it.

boundaries

The map in first instance is nothing more than a choropleth map, I start from a black map as the one in the top, then one by one I manually add a grey value in five clusters, white for 0% and so on to +25% as the dark grey.

The US Census Bureau has a very specific data for Asians in US, but I use data also from the APIA and AAJC Asian organizations in US as well, the research phase takes me about a week, producing the graphics and coding it was about four days, and about an other week making edits and corroborating each small graphic and each word in the special feature. I must highlight that this graphic was not just a map, each state in the US has a detail of text and graphics so it was not ease to check, edit and revise.

screen-shot-2016-10-20-at-1-00-48-pm

Early version of the country over view. As you may note, beyond color the elevation is different, my first data set was for total population instead of percent of the population

The map was generated with Cinema 4D, based on a grey scale county map, then styled with Illustrator and photoshop and coded with Brackets io trough SVG, Jquery, JS…

This slideshow requires JavaScript.

The color code is very important because the position of camera will change in perspective, so the color make easier to visually determinate the height of each area no matter the position. In the following image the camera position affect the way we perceive the height of the counties, just because the matter of point of view, but when color is on… well, see your self:

color

Brown means Asian population over 25% in the specific county (as well the height), I call that to perceive data in multidimensional ways, but keep it understandable

The position of cameras will change for each state, as for the videos and other sections using the specific portions of the map to tell different stories.

Following the 3D idea, the complementary graphics was also generated in C4D and the layout phase begin.

screen-shot-2016-10-20-at-12-57-26-pm

Some graphics display scroll-trigged video on desktop versions, then for mobile switch for static renders because IOS don’t allow autoplay videos or video out side the native player

hi_motion

This is one of the city spinners, all of them uses an image like this, is positioned by the mouse drag final position and makes the 3d effect

Hope you as reader enjoy the project much as I enjoy to make it, please visit the special feature here http://multimedia.scmp.com/news/world/AsianAmerican/

Standard
Digital works

Pokemon invasion

The Pokemon fever runs out the whole world, here in Hong Kong the people also was infected with the Pokemon global madness, so we in the SCMP graphics want’s to offer something different to our readers, and that was a detailed map of the Hong Kong Pokemon spots and a plus graphic about the¬†Skills and weaknesses of each class of Pokemon.

 

folder

The map was a hard work, to get all this data the folder of Pokemon project reach about 12 Gigabytes of my computer, but off course the final application on line is just about 500KB, I catch this information from an other game in which the creators was based to create the Pokemon virtual world, the whole process takes me 5 days including the new design and the development phase.

When I finish the data catch phase and clean it, the points shows a really nice pattern, following the urban areas but also reveals by him self the Islands shapes.

vector_10pc

10% map sized of the original data. In the bottom right corner the most concentrated area of Pokemon spots, corresponds with the Hong Kong Island districts and the Kowloon territory crossing the bay area.

My first design was a purple points for the spots over a grey map, to give it a high contrast, but, then turns green and blue to keep it closer to the actual game interface. Usually I wrote my own text, but as you may know my english is not the best so, the layouts and the final product changes a bit on that also.

layout_vrs2

Illustrator layouts for Pokemon project. Version 2.2

The bottom section has a graphic about some characteristics of each¬†class of Pokemon, the dropdown menu allows readers to switch the class and display different graphics, I have to say that I don’t like the Pokemon at all, even when I was younger, but I love¬†to create¬†data visualizations and offer to the people an other way of stories… visual stories; so Yes, I enjoy this project much as the Pokemon lovers has enjoy it also.

pokemon_types

All the small graphics for Pokemon skills. Red for attack, blue for defence.

If you go inside a region of the map, the graphics will show you how dense are the spots in that area, how many spots are there and how big is in square km, ho! and also will allow you to zoom in just hovering the mouse in the map.

sitezoom

Area in detail, you can access by clicking areas in the main map, clicking the half circles of the top graphic, or choosing an specific region in the drop down menu.

You can find and enjoy the infographic in this link http://bit.ly/2aFU7W8

Standard
Digital works

The Hobbit: The Battle of the five armies

El Hobbit, Erebor

The gate of Erebor. 3D Model by Edgar Jiménez; Art direction by Marco Hernández and Manuel Canales.

In the eve of the final movie of the Hobbit trilogy, we decide to give to our readers at nacion.com a new perspective of the scenary. Edgar Jim√©nez an terrific 3D artist, Alexander S√°nchez the journalist of films and myself works together to develop this special site of the Hobbit’s Lonely Mountain, the field of the Battle of the five armies.

This its part of the promotional pieces:

nacion.com post for social media

nacion.com post for social media

nacion.com post for social media

nacion.com post for social media

Screen Shot 2014-12-14 at 3.42.35 PMThis site its a scroll controlled experience that allows to explore the Lonely Mountain and the city of Dwarves, Erebor. There you will find, besides, the 3d model, short texts hidden about key points of the movie. Hope you will enjoy it!
Here’s the link:¬†http://goo.gl/8TMVKw¬†

Standard
Digital works

Cuna de un sociedad antigua

1500 a√Īos de historia, este es un especial sobre los descubrimientos arqueol√≥gicos en el sitio Nuevo Corinto, publicado en nacion.com

Cuna de una sociedad antigua. Especial en nacion.com sobre los descubrimientos en el sitio arqueológico Nuevo Corinto.

Cuna de una sociedad antigua. Especial en nacion.com sobre los descubrimientos en el sitio arqueológico Nuevo Corinto.

Standard

Recent work: Macondo

Reconstruction of the imaginary town of the book “Cien A√Īos de Soledad” by Gabriel Garc√≠a M√°rquez.

Digital works

Recent work: Macondo

Image