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/

Advertisements
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