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

Nerd facts about China’s Cities classification project

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:

screen-shot-2016-10-07-at-7-36-32-pm

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.

screen-shot-2016-10-07-at-7-38-59-pm

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:

Screen Shot 2016-10-07 at 7.32.12 PM.png

As a summary this project take a 7 days of my life hahahah, but it was funny take a look in to the final product here: http://multimedia.scmp.com/2016/cities/

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

G20 meeting – Hangzhou –

Some days ago, the SCMP special package about the G20 meeting in Hangzhou, China was released. I must admit, I would have liked to have more time to intervene in the design, but I have a graphics queue waiting in other projects, so, I focused particularly on the graphics for this time.

hz_img3

Illustrator layout for the first graphic.

There are 3 graphics, all them with small simply animations. Usually, I start analyzing the data on excel, or numbers in Mackintosh. Then I go to the paper, the scheme, aspect, interaction, variables and even animation is defined in the phase, thats the reason why this is the crucial part, and the harder one.

Next, is the vector time. I start the translation from paper to Illustrator, in this case, take the paper ideas to illustrator is just one day of work, but all the assets will be ready to the develop phase, is just a thing of order in the groups, layers and documents. That, because I take the illustrator files to generate the svg base for coding through javascript.

image4

Initial scheme for the second graphic. This is a guide to take the idea. Some point forward the graphic change to an partial version with more interactive options by editors observations.

image5

Here is the second proposal of the graphic 2, including the editors request.

The next step was the development phase.
I work with Brackets, an open source software to edit text code, it have a nice extensions to make the life simpler 🙂
If the asset don’t need to interact with js, I just call it as images, but if this asset needs to be transformed on color, position, size, opacity, content, shape… then a take the code from the svg file, which is very similar to an xml file. In this way I will be allowed to select parts of the svg and change it by coding instructions for the user interaction.

hz_img1

The first graphic has 191 posible configurations. At the bottom of this image, also is all the population density por all the G20 country members.

The process includes files such as .css .html .js .svg and some times depending on the functions or effects images, audio or video. Both versions (desktop and mobile) are working simultaneously, but some times different browser testing (cross browsing) and some queries remains to the end o the digital process.

Finally, when the digital product is ready, I have to make some smaller versions for the print, in this time, I take the graphics #1 and #3 to integrate in a very compact version, in total five graphics for different days of publications.

 

hz_img2

3 col graphics for 5 days of different publications

If you want to see the final product, you may find the interactive graphics here

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

2016: Mayor elections

The end of the 2015, and the beginning of 2016 becomes a hard work time here at La Nación, for this special event was required a full time dedication for about 3 months, but I enjoyed a lot.

With the Data Team, we create a tool for citizens that will gives them a chance to know more about the 605 candidates for mayors in all the Costa Rican territory. Segmented by province, the citizens can easily find their candidates, which in many cases , are completely unknown by his own voters, also this tool has the candidates complaints, money penalties or debts to social security, if there is some. http://goo.gl/6ZNVdp

But, there it was just a part of the planed work, all this data has tons of interesting points, ways to be visualized, and those were the deliveries of parallel information, every day… Here some of these pieces:

 

This slideshow requires JavaScript.

All the pieces goes to different publications, embedded in the reportage of the day, a few days after the elections day we released this special site [ http://bit.ly/1PMvuGG ] to join all this small pieces of the elections data.

When the elections day finally arrives, we change the attention to this other special production of live data visualization [ http://bit.ly/1Xg6A1A ] all the regional divisions was have the results just an hour after the voting centers closed his doors, updated in realtime.

 

Standard