Infographics, dataviz and interactives

Category Archives: Digital works

It has been a long time since my last post here, we got a lot of projects this year and there are few more to finish before the end of the year but I’m back anyway.

This time I’ll like to share a little about this project I made about electric cars, actually I made this “backstage” because some guys in Germany ask me to, I’m looking forward to see it in their website too. Anyway, here it is:

China’s electric cars map range

THE BACKSTAGE

The stones in the road for China’s 2025 plan on electric vehicles

This article is part of a series of visual stories we decide to cover about the Chinese Government plan to develop the country in the following years and set China as the top country in key areas. I assigned the topics to four of our colleagues and at the same time two topics to myself

Most of the data about electric cars was about sales, markets and boring stuff. It is important to explain why is important but not to create a visual story of it. That was a problem because the initial the idea came through that in particular

My solution was to complement that part with something else. Usually I make a document with everything I can find, any single topic, reference or interview then I pick the good ones to develop the analysis on it

After that, I split-up the topic in to mini-sections:

Why is important (the boring part mostly done in small charts)

Why is a problem (raw material providers)

Why is difficult to achieve (findings watching a map)

How it works (again small charts and diagrams)

ICOA car sales report. One of the needed boring charts to complement the story

So, first section was done with the boring data. But when I was making more research I found this story about the Cobalt precedence, many data of production, the mix of minerals needed to the industry and how the minerals extracted manually in Africa will end-up in Europe or USA

Sketches of the cobalt extraction and trade flow.

Trying to understand this, I create a few sketches to myself, there I realised that was a nice idea to explain that part quick and ease and focus my effort into the maps section

Open Street Maps Tag info preview

My curiosity lead me to check if China had a public network of stations to recharge the cars. I now that USA have a lot of stations, but I never expected to find that few stations across the country, so I realise I have something nice to show

OSM stations imported into QGIS as vectors

I get there using the info tag website of Open Street Maps, funny I began with a huge area extension, but there was nothing around so, I just one more thing to get a nice story, the context in the visual

By the data sales (the boring data at the beginning) I confirmed that the BYD electric car, particularly the E6 was the most popular car in China, according to the company, BYD’s E6 car model have a 300km battery range, so all I need to do was to trace 150km and 300 ranges from the stations over the roads of China to get a nice graphic

QGIS preliminary preview

I did this in QGIS, then I recoloured the map sections in photoshop to give it the desired aspect. For the print version I decided to leave only the range maps, but in paper the style doesn’t work so I create new versions of each of the maps. At the end I create four maps for desktop views, four to the mobile devices and five to the print version. Maybe is nice to mention I had a tight deadline, a week to do research, write the article, make the graphics, do the coding and make a print version of it.

Readers reaction was really good, the graphic reached the average views for our stories very fast, even becoming in one of the most read of this series. The print also was good, people in China got a copy and enjoyed, but I’m not sure how because the SCMP is banned in Mainland China

About a year ago I move to Hong Kong from Costa Rica, in this crowded city I found many inspiration topics to do graphics, like lighting, statues, languages etc, but one of the biggest changes for me was Asians in self. I admire that many aspects of Asian culture that makes them unique, having that many different things around I was about to get crazy, even this simply every day stuff when I was traveling in the metro, walking in a street or wherever else, in my mind I was asking the same question:

What’s in the Asian face that makes them look Asian?

In all Asia are lots of cultures, ethnic groups with different characteristics, so I not ease to say Asians all together have this or that. So I try to look for major groups to talk about main groups.

The project to geo-reference ethnic groups conducted by Weidmann, Nils B., Jan Ketil Rød, and Lars-Erik Cederman in 2010 was very useful as a start point and to get a better understand of the topic. I use also plastic surgery medical articles to understand the structures and as a complement I collect samples of those major ethnic groups mentioned in the GREG project and Joshua project.

This are the samples of eyes of the major 63 ethnic groups in Asia based in data from GREG & Joshua projects

I use the eye samples to create a graphic measuring the eyelid gap, inclination and length of the eyes based in the same iris size of each sample, the idea was to show that some times the inclination makes look narrower the eye.

Bottom section of the graphic showing from the narrower eyes to the wider gap.

I have to say that the suggestions and support of Marcelo Duhalde in this graphic makes the project a better final product. I believe that show the work and talk without filter is the best to create a better graphic, is a fresh new point of view and will improve your ideas.

Graphic process from sketch to published version

The online version of this graphic was the same information as the print, it have a small variations in the mobile including a few different graphics and shorted storytelling but at the end was just jpg images.

The funny part of this was that this graphics stays for a few days as the most read article of the scmp website and shared more then 10k times.

Print full page version, desktop version and mobile version on the day of publication.

For this project I did the research in free short times in between other projects. I did keep hold this information for about a year awaiting for a chance to work on it and publish because we are just a few in our unit and there are many projects in the way. The production time was about a week, plus an other 10 days of research spread in to short times in a year.

Every month have a particular celebration, or as I like to call it “a nice excuse to create a graphic”.

February is a love and music month, so a month earlier I started planning to create a way to visualise the language thought music, I have to admit that the SCMP is very open mind to explore new ways to tell stories or even just experiments like this…

Speech spectrum of “I Love You”, the red dots are my key points to make a new sound.

Anyway, the idea came while I watched the spectrum of a voice record; there I began to think what if the instruments can be adapted to languages, how can sound a phrase of an instrument in Spanish, French, German, Chinese… and, if already some instruments have particular sound linked to a particular culture and language.

I started by adding key points to phrases like “I love you” in different languages, and then I should try to explain that to musicians, editors and partners (that does not goes very well at the beginning), but after many sketches they got the idea and the process began.

Sounds synthesized from voice recordings

Synthetized instruments spectrum

I create a few concepts for this graphics before get the final data using Google translate, with the inspector tool I catch the speech, then I create a new sound with synthetizers, and back to the visuals again to work with an approximate spectrum.

Google translate, voice render.

Visual layouts for the project.

The results were interesting, so next we make records of some people speaking in the final selected languages (English, Spanish, French and Cantonese) that suppose to be reference point to the musician, but we didn’t use his interpretations because the deadline was approaching and he don’t send us the files on time. So at the end the instrumental interpretations were made by synthetizers. If you are interested in learn more about the making of the sound, visit to the special feature and tap on “How it works”

This is a project based in data of the “World Justice Project Rule Of Law Index, 2016″ by the SCMP infographics team. Our goal was to show the information in a simply visual interactive tool, to give our readers also a perspective of Hong Kong and the world overview.

This was a very fast-build graphic, the idea was to show the world rank moving up and down from the last year to this year and also a visual report of each country/region.

Country report assets. The graphic is generated by json data thought js, this svg assets are rotated, scaled and positioned according the country data.

This graphic is a combination of css, svg, js, and json data. But only uses 8 files of a simply vector shape, so load very fast. The main idea was to give a comparison tool, to view the countries of interest side-by-side but also their position related to other countries in the region, that is the irregular shape, according to the scale, the average of each of the 7 regions is added via js to every country.

Seven region average index layers

The graphics evolved to an more effective visual representation, in my work is usual to create at less five previous concepts, from data reports like excel pivot tables to paper concepts and finally to vector graphics. The most effective way to show the data, some times come on the fifth or seventh iteration, but is the best way to create some informative and usable infographic.

Early concepts for the Rule of Law global index

Also, maybe thats the reason of some mistakes in the data, text or color codes in this images, the building up of this graphics always have the main ideas to guide the next versions, so it needs the text and visuals in more than simply Lorem Ipsum

A few months ago I start this project about the tallest statues in the world. My intention was to show in someway the tallest structures without the noise and distortion of pictures. I love photos, but for this things is really hard to get a full picture of structures from different countries in the same conditions, so the solution was to make drawings of more than hundred statues around the world.

Illustrator process, fist stage.

The Gutenberg project has a collection of tall statues from all over the world, that was my first source, but a corroboration of each of the 125 statues founded was just the begging. High resolution images of reference, hours of google earth to get a location in a interactive pop up map, data of completion, theme, date of build start… When all those data facts was corroborated 98 statues was the result of two months of investigation (not at full time of course).

Every country section has a sort information about the statues located there, but also is popup launcher for an interactive map.

I start the drawings in Illustrator, on the maximum canvas size to be sure to capture many details as posible, then I move to photoshop in layered document for each group of statues by country, day and day of drawings almost make me crazy but at the end I trust the result will be nice.

Statues drawing and painting process

Even on a spread page on the SCMP the print version will never be enough to fit all the 98statues with all this data, this project born on digital but also was required a print version, so I take China -the top country builder- and the local Hong Kong statues, some facts around the graphic are only in the print version because the idea was to make it complementary rather than same graphic in different platform.

Print version of the statues project

This project shows the statues grouped by country, from the top quantity country to a group of only one statue per country, but also has interactive maps and a little things like the rank in the bottom, you can click each and the page will scroll to the statue position.

This are the images used for the world rank, 98 in total

It was a very long project, but not the last one. Hope you can enjoy all version of this project (Print, Desktop and Mobile) all of them different, take a look at the main project here:

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.

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.

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:

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.

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

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

Here is some of the work progress behind the China Cities project, released last week at scmp.com the first thing was the idea on a quick draft:

Concept layout for the special feature at scmp.com

This infographic about the China’s Cities classification was made must as a simply data graphic, it loads .json data for each city in to an html-svg graphic. All the 613 cities loads very fast, maybe the most heavy piece of this special feature is the China county map.

This is the look of each city behind the graphic

The map of China was no ease to make, on that level of detail seems is not available public any where so from a Chinese cartographer library I get a non labeled county map, well not in english at less, so for the next 3 days I spend my time looking for each county division corroborating and adding names to specific regions of this new vector map of China.

The map has 4 different configurations for each county, sounds like a few but actually that means 4x 613 different counties to check because China counties English map doesn’t exist here so two days more of checking added.
Then was time for fist section, the simplest graphics but the first ones that people will see, this graphics will show what’s a tier and how China’s cities are sorted in to: