Digital works

Nerd facts: The Rule of Law World Index

score

Rendered view of the World rank of rule of law 2016

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.

screen-shot-2016-11-02-at-10-00-23-am

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.

screen-shot-2016-11-02-at-9-59-58-am

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.

screen-shot-2016-11-02-at-10-00-41-am

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

rank

First version of the index change (2015-2016)

Hope you enjoy the graphic story, please take a look in to the final version here: http://multimedia.scmp.com/news/world/article/rule-of-law/

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

Hong Kong’s ageing population

A few days ago this project about the ageing population goes live at scmp.com

This slideshow requires JavaScript.

Here is a lot of information to explore, the interactive special feature have plus 40 years of population forecast for Hong Kong, there, you can explore how the population will be conformed for the next years a how will be getting older and older.

Usually I don’t use or make much illustration by my self, but I been losing fear about, I have the intention to use illustration to make a balance of the serious and hard data-viz.

Take a look in to the project trough this link http://multimedia.scmp.com/2016/ageing/ comments always welcome.

 

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
Awards, Digital works

SND Digital Awards

SND

Two of our digital works published at nacion.com wins an Award Of Excellence in the 2015 edition of the contest. The first one is the project in celebration of the “75th anniversary of the National Symphonic Orchestra” the design and development of this projects set a starting point to the trends of our unit.

The second project awarded this February in Washington D.C. was the “Birth of a Century“, I was invited to work in this project for the unit of Data from La Nación, and I have the fortune of the collaboration of the development unit as the artist Augusto Ramírez.

I have to say that I’m very very happy to get this awards of the Society for News Design in his digital contest, but this is a team work, and I must say thanks to my partners in the infographics unit, the Data Team of LN, the Development area, my Editors, and many many people who supports me last year.

This slideshow requires JavaScript.

 

 

 

 

 

 

 

 

 

Standard
Digital works, Motion graphics

Quick graphics for social networks

Last year (2015) I start many new projects, some of them are still progress, but one of these are the quick graphics for social media.

At the unit of infographics and datavisualization, we spend many time in daily production and in special huge projects, I believe that we have enough time and muscle to produce frequently these small graphics,  every single infographic must have a print version, desktop digital versión, mobile version but also, i like to choose some of these to develop a social media version, sometimes a gif, or an image or even a short video with a compact version of the main graphic.

So, here is some of my favorites picks:

The spooky asteroid:

In october 31, an asteroid pass near the earth (near in space terms), this asteroid was renamed “the spooky asteroid” and take the attention of the world by the time of his visit, so it was a nice opportunity for a quick graphic for social media:


Compact version for social media. Motion-Infographic by Marco Hernández.

spooky

Gif version for social media. Infographic by Marco Hernández.

pesoInfo_spooky

Desktop digital version for article. Infographic by Marco Hernández.

The MAVEN findings:

The NASA made the announcement of the Maven mission findings about what happened with the atmosphere and magnetic fields of the red planet. We are awaiting the press release with a stock of pieces to develop soon as we can a simply animation for social media:

ARTpieces

Illustrations by Dominick Baltodano and Marco Hernández.


Compact version for social media. Motion-infographic by Marco Hernández.

MAVEN-Marte_LNCIMA20151105_0084_1

Desktop version, infographic by Edgar Jiménez, Carlos Fonseca and Marco Hernández.

Hope in this 2016 have many more of these chances to create more quick graphics for social media, these are a great way to engage readers with content made exclusively for consumption on social networks.

Standard
Digital works

The birth of a century visualized: Backstage

Illustrations by Augusto Ramírez

Illustrations by Augusto Ramírez

A few days ago We published at nacion.com this special feature analyzing the data of 115 years of births in Costa Rica. We decide to take this special as an opportunity to explore the deep exploration of data visualizations with the efficiency and impact of illustrations. But besides the style and interface, the production process its the most interesting story.

One of the most complicated pieces of the special its the section of conceptions, we have all this data about the births, and the necessary references to relate it with the conception, so, We wanted to create a customized visualization to navigate through a 115 years of the country history and relating how the people gets pregnant.

We begin with a model of variation per decade, where we can see the balance in favor or against each decade in births. We use this chart as a navigator to show in the bottom detail of those ten years. By this time we have the idea of linking these points with major events taking place in the country and the region to relate the behavior of people with some important facts in time.

first version of the visualization of conceptions

First version of the visualization of conceptions. Note the dummy text 🙂

This special was an conjunction exercise with the Data Team of La Nación, I made my part in visualization and other support, but it because the skillfully profesional of they, it’s that the final product becomes properly. In spite of I have a small part of the special, the versions of the charts, the motion graphics and some other assets take about 1.1 GB of space. This is it because I made so many versions and testing design to find the better way to present the findings in the data.

I start with this horizon chart to visualize the concentration of conceptions, it was fun because i start thinking that i’m seeing in the moment in which the persons did their things in their beds conceiving new compatriots. So I could be seeing as in some parts of the graphics I surprised myself with what they meant those lines.

Full visualization by decade of conceptions in Costa Rica

Full visualization by decade of conceptions in Costa Rica

Obviously we not publish comments like the next ones that I’ll score when analyzing the chart in search of curiosities, but between the equipment if the process is to make more fun, I must say that is a personal process and does not refer to style publication of our environment here at La Nación.

in the top graphic I wrote "The begin of the Century, our grandparents also was having fun" the data reflects that they in the early century don't discriminate the time to get pregned

in the top graphic I wrote “The begin of the Century, our grandparents also was having fun” the data reflects that they in the early century don’t have prefers or discrimination of the time to get pregnant

Findings

in the top graphic I wrote “five months giving it!!!” the data show periods or season of conceptions, the behaviour changes through the time, the late conceptions prefers the 3 or 4 last months of the year to get pregnant. At the bottom I wrote “the early ones” for 2011

Also i add some drafted emoticons, at the top a sad face because the high season is only of 2 months, but for 2006-2007 the high season extended for 6 months OMG a lot of time enjoying the bed time!

Also i add some emotions, at the top a sad face because the high season is only of 2 months, but for 2006-2007 the high season has a prolongation of 6 months OMG a lot of time enjoying the bed time!

This if the full visualization if the 115 years of data of baby conceptions in Costa Rica, then i split it by decade.

This if the full visualization if the 115 years of data of baby conceptions in Costa Rica, then i split it by decade.

 

The final version have the instructions to read the horizon graphic and the indications of each space that will change when the reader click the upper menu by decade, then, the dashboard change the data according the user interest.

The main graphic is the conception concentration, at the bottom the decade resume, and the percent variation between decades

The main graphic is the conception concentration, at the bottom the decade resume, and the percent variation between decades

How to read the graphic, the title show a legend "before you start, you must know"

How to read the graphic, the title show a legend “before you start, you must know”

PLUS EXPERIENCE

We add some hide effects to give different experiences of navigation to the readers, if you use the side menu to navigate each section is preceded by an animation like the next one, if you want a see more of this project please visit it here http://bit.ly/1kpN45p  hope you enjoy the data experience.

 

Illustration by Augusto Ramírez.

Illustration by Augusto Ramírez, Motion by Marco Hernández.

Standard