Which World Leader Are You?

A Project in the Life of a Visual Journalism Trainee

Screen Shot 2016-11-22 at 14.16.05

A few months ago, I completed my first big project for the Visual Journalism team at BBC News. I worked alongside another developer to create the ‘Which World Leader are You?’ piece.

I was brought into the project as it looked like one which I could learn a lot from it, buddy up with an experienced developer and, given the scale of the project, it would probably benefit from an extra set of hands.

I joined it at a stage where a designer had fleshed the project out. I was presented with an a3 sheet divided into columns to represent the page flow, filled with professional illustrations, graphs and text. Our first task was to see how feasible each aspect was and estimate how much time it would take to create. This was only my second or third week on the job so I stayed very quiet feeling rather overwhelmed and very inexperienced. At this point though I was glad I had studied project planning at uni (despite hating it at the time) as it gave me an understanding as to what the point of this part of the process was and how I could best help (multiplying all my estimates by 1.5 or 2 to counter my inexperience seemed to be the best course of action).

I was assigned certain parts of the project, initially these were the basic markup for the page and the graphs. Originally, there were to be three different types of graph, this was quickly rethought as we weren’t sure if this was the best use of developer time or way of presenting the data, 2 block charts and a stack chart were decided upon instead.

From the start I was anxious to get stuck in with the graphs. It seemed like a massively daunting task and worried I wouldn’t be able to do it. I spent a day looking into different libraries (such as D3 and charts.js) but none had examples of the type of graph we wanted. I took some time to toss up the pros and cons of D3 vs hand-coding them, but in the end opted for the DIY approach.

Once I got stuck in, I was surprised how quickly I managed to generate a set of blocks which visually represented the data. I encountered a number of issues trying to make them all fit on one row at mobile size though. For help with this I consulted with the designer to see exactly what dimensions he had used for his mock-up. After much fiddling I managed to get it to fit (hooray!). Then came labelling it. I had pretty much ignored this part of making the graphs because I was too busy internally panicking about building the blocky bit. Turns out labels are waaaaay more complicated. Especially with the original design. It is really fiddly to try and get the labels on the axis match up to the exact position they represent.

Originally, there was to be dynamic labels as well. These hovered above a column of blocks and indicated which blocks represented where ‘you’ were and where your country’s leader was on the graph. They were dynamic in that, if you changed the age or country you inputted  the labels would reposition themselves on the graph. The ‘you’ label in the live project still does this if you want to see what I mean. Trying to create both of these involved a lot of complex logic, particularly to deal with occurrences where both fell in the same column. It took many attempts to make it work, followed by discussions with the lead dev on the project, the journalist and the designer before realising that the logic involved in this to make it always work was slightly too complicated. We ended up simplifying the idea and using a key to indicate the leader of the user’s country rather than attempting to dynamically label them. It was good this decision was taken, but it would have saved a lot of time if we had realised the sheer complexity of this issue and decided on this alternative possibility earlier. It was relief that the designers were happy to compromise on their original design though otherwise I’d probably still be tinkering with it!

Screen Shot 2016-11-16 at 11.28.13

During the time I was getting stuck on the graphs I took a bit of a brain break and inserted some content and built the stack chart. These didn’t take as long as expected which had the helpful result of making me on track for my estimations overall despite the fact that the graphs were taking more time than allocated. This included the SVGs used for the maps. I had thought SVG was an image format, didn’t quite realise it was but in the form of code!

By this point we’ve been working on the project for a few weeks, I have some graphy looking things on the screen and I have become much more confident in myself and with talking to the different members of the team and actually answering their questions rather than just referring them to Steve, the other dev.

Somehow I wasn’t far off the estimates we had set so some of the tasks originally delegated to Steve were reassigned to me, including the slow reveal, the factbox and istats. The idea of the slow reveal was very daunting to me. The slow reveal is the minimising of each section until the user has filled out the form related to it (see the image below). It sounded really complicated and I had originally refused to estimate it having little clue about how it would be implemented. I think we had suggested it might take 2 days. One morning, because I was encountering some issues with the trivia factbox I decided to try and attempt it. I figured out where the separate sections would need to be and just gave it a go using ‘display: none’. To my surprise my initial idea worked. And as ridiculous as it seemed I’d managed to complete it in about half an hour – therefore shaving almost 2 days off our schedule and taking a step toward getting us back on track. In all honesty, I was slightly surprised that any of my work came in under the time I had estimated – I was convinced everything was going to take me ages. The graphs definitely took a lot longer than we had originally anticipated, so it was a relief that other things weren’t quite as hard as expected so it all balanced out in the end.

Screen Shot 2016-11-16 at 11.27.19

Istats is a tool we use to track user engagement with a piece. It allows to count how many times a specified button has been pressed, the city a user is in and the device they’re accessing it from. It was my job to insert code to utilise it into specified places and make sure it was being called correctly.

Whilst I’m busy doing this stuff, Steve had the far more complicated jobs of writing the feature file (a list of scenarios that could present and how the application should handle them, used for testing purposes) and all the logic for the comparisons and the form inputs to do these.

Screen Shot 2017-01-14 at 13.01.41

At some point during this process it was starting to take shape and actually look like the mock up we’d been provided by the designer. I’d also started to hate the whole thing, even more once I’d put the slow reveal in because you’d have to type data into it to reveal the section that you wanted to check something in. I got to the point where my own date of birth was boring/irritating me, but it was the date I could type with the least thought so I continued to resentfully type it out hundreds of times a day. (In hindsight, we could have put values into in in the code for testing so we only had to click submit…).

At this point something had to go wrong surely? Of course. Enter, the King of Thailand. I had crafted a beautiful graph which celebrated the fact that he was the longest serving leader by almost 30 years, bu unfortunately he passed away during the project. It just didn’t look nearly as impressive anymore.

The deadline was fast approaching and there were still a few things which needed to be done, but more pressingly we needed to see how much it broke when we translated it into other languages. 20 other languages to be precise. I was particularly scared as to how disastrously the graphs would break. Luckily nothing too horrendous happened in that respect. 

Speaking of which, right to left styling. Never considered that before! There was a few stylistic changes which needed to be made in order for the piece to make sense (and look visually appealing) in languages such as Arabic and Persian. Most of these were covered with the CSS ‘direction’ property (which I’d never heard of before) with ‘rtl’ being applied to the main page and the graph section being specified as ‘ltr’ since the use of latin numerals in the graph across all languages meant that they would read it left to right according to our translators.

Arabic

In the final push toward the deadline we encountered some major issues. The most confusing of which was that the entire project was broken in Hausa and Ukrainian, and separately that some odd characters were appearing in place of apostrophes in every language. After much confusion and talking to the other devs we managed to fix both of these just in time. It turned out it was due to a templating issue – in these languages the translations of country names included apostrophes, which as any programmers reading will know often signals the end of a string/input. This meant that some when we fed the data into the templating engine it was ending prematurely and catastrophes were caused. Once we figured out that this was the problem we were able to take steps to fix it (we re-evaluated if we actually needed to use the templating engine for this section at all, and decided we didn’t).  Our next problem was that it managed to break in IE9. This was due to an update in the way our internal tooling handles JSON data, we had updated our code to handle this but had overlooked that our method wouldn’t work in IE9. Steve rewrote it in a way that older versions of Internet Explorer would support and managed to fix it just a few hours before launch. It was a pretty stressful day!

We hadn’t managed to make all the tweaks we had intended which was slightly frustrating but at least it was now working and everyone was happy with it. On that note, I went to the pub with my project manager and failed in a pub quiz. Cut to a few hours later, all the trains had been cancelled so I was stranded in London. Yay! I decided to crash at a hostel and all was good.

The next morning it was live! It was all very exciting. I had posted it on Facebook and Twitter and was receiving lot’s of lovely comments from people.

Screen-Shot-2016-12-08-at-09.36.13-852x1024_censored

Nassos, the journalist I had been working with, then explained Chartbeat to me and showed me how the page was currently doing on the site. Chartbeat is a tool that shows you live data about how many people are on your webpage and the level of interaction with certain parts of it. It was 10am, there were 40,000 people on the page at that moment and it was number 7 most read on the site. Mind blowing. 40,000 people were at that very moment looking at the content I had helped make.

Screen Shot 2016-12-08 at 09.37.20

The next day we were updated with how many people had been looking at it over the course of the first day. Around 750,000 people had been on to the page in the first day. I was also sent some screen grabs from Steve, the other developer, of it reaching number 2 in most read (!!!) and being at the top of the front page in Uzbekistan! It was all very surreal to say the least.

number2 uzbek

With that project under my belt, I am eager to see what else I get my hands on whilst I’m here. It was such a fantastic project to work on and a brilliant experience to have had!

100 Women Hack

 

100Women

Last week I had the opportunity to attend a hack event put on in collaboration by the BBC and Facebook. Exciting, right? Even better, was that the purpose of the hack was to create a social media product that would be used to promote the new 100 Women season for the BBC.

100 Women is a series of programmes, features and interviews based around a list of 100 inspirational global women, named by the BBC every year. The new season starts on November 21st but until then you can check out 2015’s season.

The hack was a female only event – the participants were all female coders from various companies such as BBC and Citymapper, and were supported by BBC editors, Facebook developers etc who were also all female. It was great to be in a room filled with such confident and inspiring women.

Anyway, after an interesting introduction from a few of the faces behind the hack and 100 Women as a whole, we got to work. Myself and Agata from Citymapper decided to join forces and create something, we just weren’t sure what… With facilitation from Laura and Fiona we did some ideas generation and eventually decided on something.

Our idea was a data visualisation / meaww quiz style app to plug into Facebook. It allowed users to log in with Facebook, where it would then grab data from their profile and compare it to data about the 100 women for the season. The user would then be shown their closest matches on various categories on a web page. The idea of this was to engage and empower women by showing them how they could easily be one of the 100 Women selected for the campaign. Unfortunately we hosted this locally across two laptops – the front end on mine and the back end on Agata’s. This means I can’t link to it (and stupidly didn’t screenshot it).

The winners were going to be announced in a talk about 100 Women on Monday which I was planning to go to – especially since I had to dash early so missed some of the pitches.

Imagine my shock when I was in a sleepy Monday meeting and suddenly my email starts pinging and my phone ringing from the hack organisers trying to contact me. Turned out, our idea had won (jointly) and they waned me to represent the team in the talk. I’m going to admit, in my overtired state I didn’t really know how to react to any of this, but less than an hour later I found myself being called up on stage in front of about 40 people (including my boss’s boss) and being live streamed trying to articulate my thoughts on the hack and explain our project. Luckily, it seemed to go okay (and there doesn’t seem to be any lingering video evidence that I could find so far!)

So, this week I’ll be starting work with the other winning team to combine our ideas and actually create this product in two weeks. I’m simultaneously excited and terrified but mostly just pretty daunted by the whole thing, but I’m sure it’ll be fine! Watch this space!

 

For more details of 100 Women checkout their Facebook page or keep up with the hashtag #100women on Twitter
To find out more about the hack check out Simi’s blog (she was from the other winning team and has written a much fuller account of the whole thing here.

It Lives!

Almost exactly a month after I started at BBC News my first project has gone live!

http://www.bbc.co.uk/news/election-us-2016-37385625

You can see it by following that nice little link above. You can also see it featured in another news article too!

The bit I made was the search box, where you can type in a keyword and it’ll search the data for the definition.

I got a bit excited when I saw this too:

Screen Shot 2016-09-21 at 16.30.43

That’s all – just a short and sweet post from my over excitable self.

First Week at The BBC

I’m currently sitting on a train home after the first day of my second week at the BBC.

I’m shattered to be honest. But already I’m having a great time, learning loads and actually feeling like part of the team.

I’ve ended up in the Visual Journalism Team (Yay!) which mostly creates bespoke interactive content for news articles. Things such as the Olympic Face Wall and Will a robot take your job?. This is probably the team I was hoping to get the most (well, tied with Politics) and I genuinely think it’ll teach me the most too.

I’m not sure how much detail I can give about what I’ve been working on but I’ve already got the basics of my first project done (and that was only my second day!). It’s a little something for the US election, I’ll share it and describe it properly when it’s published.

Since then, I’ve been mostly finding and solving problems with another project which is due to be released into the big wide world next week. Again, I’ll try and share it and give a little more details when it’s ready.

I’ve spent a lot of the time getting used to using the Terminal and Git, as well as the way the team approaches and builds content. It’s very different to anything I’ve worked with before, mostly due to it being such a big organisation who put an emphasis on automating as much of the development process as possible so we can spend more time creating and developing awesome content.

The team are lovely and haven’t hesitated to include me and make me feel welcome. They’re happy to answer any of my questions (no matter how silly) and we all go to lunch together everyday. This in itself has been why I’ve settled so quickly and enjoyed my first week so much.

Weirdly, although this has been a major week for me, there doesn’t seem to be much for me to say… I’ll try and blog regularly with any exciting updates!

Oh! And I have already had a couple of celebrity spots – Miriam Margolyes (Hilarious on Graham Norton and Professor Sprout in Harry Potter) and Charlie McDonnell (CharlieIsSoCoolLike).