Jump to main content - accesskey 2

Data Art project sponsors

Data Art with BBC Backstage

NewsTraces 1.0

  • Traces of news headlines with Chavez and Venezuela in BBC Americas News Traces of news headlines with Chavez and Venezuela in BBC Americas News

The project allows you to search through the history of BBC News headlines over the last 10 years. When you type in a search term you're presented with a timeline of relevant news items showing the pattern of reports as they unfold over time. Where clusters of reports emerge, they often mirror historically significant events.
Individual news items are displayed as small blocks laid out in a series of bars, so its easy to see the troughs and spikes in the keyword's history. When you rollover a news block the title and summary outline the context of the story, and clicking links through to the full text of the News page on the BBC.

Launch NEWSTRACES //

In this first version of the project we're using stories from BBC Americas news, so only searches relating to current affairs in North and South America are likely to return good results. Try, for example, the names of countries or political leaders. If you type in 'Chavez' you see a large spikes in April 2002 at the time of the coup attempt, and later in December 2002 during the general strike. In August 2004 coverage is given to the Venezuelan recall referendum. Peaks in December 2007 and February 2009 represent constitutional referendums to eliminate presidential term limits.

On the subject of climate, a distinct pattern can be seen if you search for 'hurricane'. The most prominent is Katrina in 2005, the coverage for which trails off for the following year in the aftermath. In 2008 Gustav and Ike are the most destructive, and Ivan in 2004.

To draw comparisons and see how subjects relate, you can also use multiple search terms. The names of political figures are a good example.

Try the lists of names below. Use commas in the search box for separate terms :

  • Rumsfeld, Cheney, Rice, Powell
  • Clinton, Gore, Kerry
  • McCain, Palin, Obama, Biden
  • Fujimori, Toledo, Alan Garcia
  • Cardoso, Lula

 

  • Clinton, Gore, Kerry, Biden
    Clinton, Gore, Kerry, Biden
  • Rumsfeld, Cheney, Rice, Powell
    Rumsfeld, Cheney, Rice, Powell
  • Terror, 9-11
    Terror, 9-11
  • Earthquake, hurricane
    Earthquake, hurricane

More general thematic terms can be used to bring together instances of a type of story. Try the searches below. Some highlight specific events, others prevalent issues.

  • election
  • 9/11
  • oil
  • border
  • terror
  • drugs

Its worth noting that the data the visualisation is based on represents a large sample of North and South America news, rather than the complete archive. Also, the search is on news titles and descriptions only, not on the full text of the stories, so if you use the BBC or another search engine you'll get more results.

Instructions //

  • Type in a search term, or list of search terms separated by commas. eg. 'Iran, Iraq'
  • Roll over the coloured blocks to see the story title, description and date.
  • Click on the coloured blocks to open the BBC story page in a new window.

How it was Built //

If you want to experiment with modifying the visualisation, the following section outlines how it hangs together. The project was developed in Actionscript 3 and can be built using any Flash or Flex development environment. Some development tools are listed here.

Get the source code for the projects here:
news_traces_01.zip

And the Americas News XML dataset here:
bbc_americas_2000_2010.zip
You need to unzip the file and put it in a folder called 'data' alongside the compiled SWF (Follow the instructions in the readme.txt file).

Two versions of the project are included: news_profiler_basic.as, and news_profiler_multi.as:
The basic version is the minimum required to present the data, and is restricted to a single search term and organising the data by month.
The multi version has multiple search terms and the bars can represent different time scales, e.g. 1,2,3, or 4 months. When function names appear in the description below, they refer to either version since the overall structure is the same.

Getting the data

The dataset is in XML format and contains a list of news items with title, description, link to the BBC News page, and publication date. The link tag is named 'guid', the unique identifier, so that the link data corresponds with the 'guid' tag in the BBC RSS feeds.

<item>
<title>Thousands celebrate Panama Canal handover</title>
<description>The United States formally hands over the Panama Canal to Panama, ending nearly a century of American jurisdiction over one of the world's most strategic waterways.</description>
<guid>http://news.bbc.co.uk/2/hi/americas/585562.stm</guid>
<pubDate>Sat, Jan 1 2000 03:49:00 GMT</pubDate>
</item>

The data was created by combining searches made with Yahoo Search API with metadata in Jungle. As mentioned above, this produces a large sample of BBC Americas news, but doesn't represent the full archive, so the search results are indicative rather than complete.
At this stage the data is retrieved locally rather from an online service.

When the app starts the data loading is initialised in startLoad, parsed in parseXml, and stored in _rssItems. The multi version enables you to load multiple sources specified in the array of data file paths _dataUrls.

Filtering the data

When a search term or list of terms is entered the full search string is passed to searchByString. In the multi version the search string is separated by commas. Matches are found in each of the news item title and description text, and the list of results stored in _searchItems. The regular expression for the search matches the beginnings of words, so that 'America' will also pick up 'American'. Commented in the code is an alternative that finds exact matches only.

The next step is to organise the search results into chronological bars. In the basic version this is stored in _monthArray where each month contains a list of items. In the multi version _barArray is used, where the time period of each bar is set in _monthsPerBar. So if each bar represents 3 months, in the init function set:

_monthsPerBar = 3;

For the year axis at the bottom to work, set the months per bar to a factor of 12. To alter the time period for the visualisations you can set the minimum and maximus date. Use UTC, since the news items are in GMT. See the following lines in init:

_minDate.setUTCFullYear(2000,0,1);
_maxDate.setUTCFullYear(2009,11,31);

Visualisation

To maximise screen estate the visualisation layout adapts to the pixel resolution available. The layout function first finds the largest bounding size available with a lower threshold of _minBounds. Bars are then drawn, composed of blocks of individual news items. In the basic version the news item blocks are simply stacked vertically, the multi version finds the squarest block dimensions, allowing blocks to be stacked as a grid within a bar. The colours for the search terms can be set at the top of the script:

private var _boxCols:Array = [0xdd1e5f, 0x00aa00,0x559eb1,0xfd6b45,0xe8bf06,0x866ba4,0x50c184];

For the tweening, credit to the Greensock Tweenlite library that's included in the download.

Adding interaction

Rather than adding event listeners to each of the news item blocks, of which there may be many thousand, the application finds which block is under the mouse in each frame, and handles rollovers and mouse clicks accordingly. See handleRollover and onClick functions.