Arteries of the city

I created this graphic back in October shortly after Hong Kong's Transport Department released their annual traffic census. The 182-page report was packed with statistics and useful information but the best data was a thorough breakdown of daily traffic on almost every stretch of road. The territory has hundreds of counting stations. We thought the chance to do something with these numbers was too good to miss so we pitched an analysis to the Editor who was keen to give it a good space.

The thickness of each line represents the average daily number of vehicles traveling on that stretch of road. The colour represents the percentage change on last year. This helps the reader to explore the data in two ways. You can clearly see that the main roads along the front of Hong Kong Island are still the busiest. But by the colour, the traffic has also mostly decreased compared to last year. You can also see that a lot of the roads in Kowloon have become busier. In particular the area up to the left, Tsuen Wan, the three tunnels north and the major highways to the east.

There is also a clear change in the cross-harbour tunnels. The Eastern and Western Harbour Tunnels have increased in traffic compared to the central tunnel which has decreased. But they still see less traffic.

The graphic is also a fun way for the reader to take a look around their neighbourhood or route to work.

Roadside pollution in Hong Kong hit a record high this year, on August 2 in Central, with the index reaching 212. As the year drew to a close, we took a look at how the air had fared in every hour in the year up to the publishing date.

Each day is represented by a row of 24 squares, one for each hour of the day. The shade of the square indicates the pollution reading at Central monitoring station.

The idea was to give the reader an overall glance at the year so they can see the worst and clearer periods, but also the opportunity to dig a little deeper into the hourly data. We also added some text pointers to explain some probable contributing factors to clearer air such as typhoons.

Hong Kong’s air pollution is often blamed on its proximity to mainland China’s industry. Wind direction each day is included as small arrows to the left of each row in order to gauge, if any, the relationship between northerly winds and bad air.

We wanted the reader to come to their own conclusion about the relationship with wind direction but it turns out a lot of the bad spells coincide with winds from the North (black arrows). See below.

The graphic was published as a full broadsheet back page near the end of December.

As the government considers a revamp of electricity tariffs, we took a look at Hong Kong's power consumption. Who uses all the electricity in our city and what is it used on? This graphic was printed last week as a full broadsheet back page. Data set was provided by the government's Electrical and Mechanical Services Department.

This type of chart is known as a Sankey diagram. The thickness of each line reflects a value. In this case, an amount of electricity in terajoules. All of the lines add up to give subtotals and totals by users (grey) and end use (coloured).

Wages in Hong Kong

As Hong Kong’s wealth gap widens, who is on which side of the growing divide? This graphic shows which industries pay the most and which have the biggest discrepancies between their highest and lowest earners. The dataset was provided by the Hong Kong Census and Statistics Department and covers all official employment in HK. This graphic was printed as a full broadsheet page.

Each industry is represented by a series of 3 connected dots. The middle dot is the median wage for that sector and the top and bottom dots are the averages for high and low earners (90th and 10th percentile). This shows some industries have a huge difference between top earners and what most others are paid.

The height of the dots reflects the hourly wage in HK$. The industry, or green line/dots, is also placed left to right along the x axis according to how many people work in that industry. You can see Import and Export Trade alone out to the right of the chart. By far the biggest employment sector in Hong Kong.

Restaurants and estate services had the lowest two averages.

Combining hand drawn illustration with vector

This piece from a few months ago shows a slightly different approach to our graphics. We don't often get to combine soft hand drawn illustrations with vector drawings. But sometimes, instead of the two styles fighting for attention in the graphic they can compliment each other well.

This graphic was created to accompany a story covering the first implantation of a subretinal microchip in Asia. Mrs TSANG WU Suet-yun had been legally blind for 15 years. The operation at the Eye Institute of The University of Hong Kong restored her sight in one eye.

In this case we used a black and white pencil style of sketching by senior graphic artist and Illustrator Adolfo Arranz. Then the graphic was put together and vector illustrations finished by myself in Adobe Illustrator. 

Using the softer hand drawn illustrations for the face and skull allowed the major highlights like the eye and the technology to stand out more and be the main focus. The drawings served their purpose of locating the device around the skull and eye socket but also gave it a more human touch as the face drawn is an actual portrait of the lady who received the operation.

First we found good visual reference for the skull. Facing a good angle so we can show all the elements in the right eye and the eye socket and also the battery near the ear. Then drew the sections of the skull needed on one file and the portrait of Mrs Tsang at the same angle on another file. Overlaid the two and erased the parts not needed. Then we included the illustrator drawings of the eye and the device and then layered them accordingly. A few more smaller diagrams were added to explain the device and disease.

Mrs Tsang

Portrait

Skull/eye socket

Eye and device

The story was a breaking news piece so we finished and published the graphic in around 5-6 hours.

The page

Euro 2012 football graphics

Here are a couple of examples of graphics we created during the Euro 2012 football (soccer) championships. We published a preview supplement which contained some smaller graphics on individual team performance during qualifying and venue maps etc. 

I then created this graphic below as a stand alone feature in sport just before the tournament kicked off. It shows all of the goals scored during the qualifying rounds and where they were scored from. The red lines also highlight the top scorer's goals for that particular team.

For the data we worked with Opta, a UK based sports data service. They can help with almost any request for sports data and also have a subscription service if you're serious about sports graphics.

Portugal and Ronaldo detail showing all those long range goals 

This second graphic was printed before the final between Spain and Italy. A lot of press had been given to Spain's brilliant passing game. And Pirlo was also playing well and pulling the strings for Italy. After speaking to sport we decided this was a good place to start and worked on a review of all the passing, defending and attacking from the two teams so far in the finals.

For this we used a Euro2012 ipad app no longer available which was also powered by Opta. There are lots of free or reasonably priced apps available rich in sports data and often powered by great sources. This particular one even had pass tracking features so we were able to get every pass, screen shot it at high resolution and then trace them. Though it did take a long time for us to trace 6,000 passes!

On the spread

Xavi detail

Local issues - Public identity

In the last couple of posts I've shown graphics covering big international stories. In contrast, here is a recent graphic we created which looks at a local issue. This was part of our coverage of Hong Kong's 15th anniversary of the handover from Britain back to China. In the last 15 years  a local university has been keeping a running survey on how people would identify themselves. Either as a Honk Kong citizen or a Chinese citizen or somewhere in between. This has swung back and forth over the years for a number of possible reasons. We created this graphic to show the results over time.

We stuck with a similar solution for the interactive version. We created this one for the site so it could stay up longer and let people explore the data for themselves. This one generated the largest number of clicks to date on the paper's Facebook page. 

Interactive version can be viewed here