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!
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.
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.
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. He clearly wasn’t aware of this beautiful graph I had crafted which celebrated the fact that he was the longest serving leader by almost 30 years. Unfortunately he passed away during the project but luckily my graph could handle him being taken out of the equation. It just didn’t look nearly as impressive anymore. I had to spend some time rejigging the axis to make it work for the new longest leader.
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.
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.
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.
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.
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!