Web based graphics: Election 2017

Web based graphics: Election 2017

In my first blog post as Technical Officer I’m going to begin (again) the discussion surrounding graphics for live broadcast as used by a few TV stations in the UK. I won’t do too much history, rather focus on the NaSTA Broadcast for the General Election that happened in June 2017. The whole project discussed below is available on GitHub.

The graphics system was initially developed for the Roses sports weekend competition between York and Lancaster. The package had a simple controller and displayed graphics that could be added to the broadcast. The original package contained the fundamentals included scoring, lower thirds and timers. An amended package was developed for the Roses 2017 broadcasts, mainly adding more sport types and changing the design of the elements. Let’s take a look at what was done for the General Election.

The Technical Bit

The framework for the graphics package was designed by members of the LA1:TV (Lancaster) team. This is a package built using a local NodeJS server and Angular, which is mostly special HTML, CSS and Javascript. From a graphics operators point of view the system consists of a ‘back-end’ that users interact with to add scores, and a ‘front-end’ which renders HTML/CSS elements. The backend is designed to be run in any web browser while the front-end is rendered by an engine.

This engine is typically either CasparCG which has a modified, slightly old, Chrome based engine or OBS which can run slightly more advanced, newer code. CasparCG has the benefit of being able to be played out of a PC using a SDI playout card into a physical vision mixer and used with a down-stream key to be overlayed on the program. Using OBS to overlay the graphics is typically done downstream of the mixer or as part of the mixer if OBS is being used. Other options are available – but the key point is that the system generates elements of dynamic HTML which are then placed on top of parts of the broadcast.

On-Screen Graphics

For the main on-screen graphic elements of the broadcast are built up using a number of controllers. More than one element can be onscreen at a time. Most of the elements use various bits of external data in JSON format. At the end of this post I’ll add a list of data files that were used and their contents. For the majority of the broadcast the time, a location, a logo, the current status of the parties and specific constituency gains were shown, but the graphics package offered the director quite a bit more than that. I’ll now take you though the main elements. (Click images below to show full-sized versions).

Elections Broadcast Elements

‘General’ Elements

The general elements section controls the logo visibility (top right, with transparency) and a bar that has multiple dynamic elements. This bar contains:

  • Clock showing the current time
  • A ‘live’ tag, with dynamic text for the word Live (such as ‘2015’, ‘last week’ etc)
  • A location tag which is totally dynamic
  • A dynamic timer to polls closing. These closed at 10pm on election night, after which the graphics displayed ‘Polls Closed’ without any user input.

General elements

General Elements displayed in the top left

Lower Thirds

The lower thirds section controls any lower thirds added to the broadcast. Any number of lower thirds can be saved and displayed on demand. Each lower third has a heading and a subheading. If the subheading isn’t entered, the subheading row is now displayed. In the list of saved lower thirds is the display controller which allows the graphics operator to set the lower third to the left, right or be full width. For the General Election version of the broadcast an additional setting is presented allowing the operator to raise the lower third above the Live Seats graphic, explained next.

Lower Thirds Controller

Live Results Counter

One of the most famous graphics used in elections broadcasts is the current tally of seats each party has. For the broadcast this graphic was on the screen for the majority of the time and was constantly being updated. In the controller the seven major parties are shown alongside an ‘Other’ parties section. This was an editorial decision and technically all parties who won seats could have been presented instead. The controller is more complex than the Lower third controller so I’ll break it down. See the image below for the controller:

The top bar controls elements visibility, which side of the screen, and the subtitle. Show Seats Score is the master switch which turns the element on or off with an animation. Show Party Names switches the party code names on and off, switching between the numbers on a colored background and bars with the party names shown (as seen in the screenshots below). The subtitle block allows a message to be added, so if the Exit Poll was being show the viewer could be informed. Show xxx announced controls whether or not to show the total number of seats called in the subtitle. The purple Get Latest Data button gives the graphics operator the chance to load in the most recent JSON file containing the up to date seat score. If this JSON was out of date (each broadcaster / data service were usually a few seats out from each other) the section below overrides those scores.

The seven parties expected to win the most seats are then listed with a simple + or – button for the number of seats one, and the option for the graphics operator to manually enter the number. The Change was always manually entered in this case as we valued getting the number right over knowing specific constituency winners, but in future versions each seat that was won or lost would be added together based on the previous years, to get the change value automatically.

The very bottom section automatically ranks the parties by largest number of seats and allows the graphics operator to turn that specific party on or off in the list of parties. To begin the night it was common to have just CON, LAB and OTH.

2017 live results block backend

Lower Third and Results showing seats

Lower Third and Results showing seats change

Lower Third and score bar showing party names. Subtitle & seats announced

Automated Grids

The automated grids were designed to show large amounts of data on the fly, typically the political parties and their seats for the exit poll, current live seats, 2015, 2010 results etc. In the backend the user defines the title and sets each row with a main column and a seats number column, or can load any one of the predefined datasets. In future versions any JSON file with certain keys should be accepted.

Automated grid backend

Automated Grid Frontend

Constituency announcements

Constituency announcements showed the viewer which specific constituencies had just been called. Many of these were held, but major upsets in the night saw major swings. When reporting live it’s often the case that specific vote numbers or percentages aren’t directly available in our data streams until a few minutes after the announcement is made (Twitter was full of ‘xx held for yy’). To generate the graphic, the graphics operator searched for the constituency by typing the first few letters, and then either left the option ticked ‘seat held’ or, if the seat had changed hands, selected from the list of available parties (whoever was standing in that constituency) as to who had won the seat. If the seat was held the graphic displayed as such and if the seat changed hands it displayed which party had won. In future systems the ability to display the new person’s name from the candidates JSON would be added.

Constituency announcement backend

Constituency announcement graphic frontend

Constituency Overview

This element of the graphics package gives a the viewer an overview of the candidates in each constituency. It can be used before the results are in to give a list of candidates and a split of how the constituency voted in the EU Referendum (with a 3D pie replacing the space of the winning candidates’ photo), or it can be used with the results to give an overview of how that constituency voted, and gives viewers a look at the face of the new MP for that area! The graphics operator simply selects the constituency and all the data about that constituency is loaded. The graphics operator then enters the votes cast for each candidate and the graphics package sorts the candidates and displays whether it’s a hold or party gain. Turnout and the new majority are presented, calculated by the votes that are entered.

Constituency overview backend

Constituency overview frontend

JSON Data Files

Constituency Info JSON



Candidates Info JSON



Live Seats JSON