PageOneX: timeline for a work in progress

I’ve been reorganizing all the material related to PageOneX in this timeline, made with the amazing TimelineJS. The idea is to move forward and have a first beta version, the alpha is having too many bugs, report them if you see some!

Find more info about the project at

For better navigation you can see a full screen view of this timeline.


PageOneX Version 1.0 – An Overview

We have just release the version 1.0 and deploy it on Heroku we’ll walk you through this release and the features available and which will we planning in the next release.


At the top you can see the main bar, and the important item is the first one which “Threads” menu, that give you a link to all your threads, and all the threads that have created on application


Listing all your threads, and you can show, delete or edit them, and you can also browse all threads on the application, but you’ll just be able to show them

New Thread:

Creating a new thread requires few information about that thread, most important fields is start date, and end date, which depend on status option, if it’s an opened or closed.

What is meant by “Opened” and “Closed” threads:

  1. Opened thread: This option means each day PageOneX, will scrape the latest newspapers front pages related to the thread automatically
  2. Closed thread: This option means the created thread will not be updated and PageOneX will not scrape any newspapers front pages automatically

And then you can select multiple newspapers, and the topic name and color.


Coding images, or in other words highlighted related news, there is multiple parts in the coding view, first at the top you can see is the progress bar which is showing; how many images that you have coded, and how many are left.

Then; on the left side there is information about the current image, and the codes, and on the right side there is some helping tips

How coding works


  1. Drag the mouse over the related news box
  2. Release the mouse when you have covered the box
  3. If there is nothing to code, you can press the button at the bottom “Nothing to Code”


  • The progress bar at the top page shows how many images have been coded, and how many is not yet coded
  • You have two highlighted areas to use
  • If you cannot highlight a long news box, you can zoom out and highlight and then zoom in, or you can start with small highlighted area and then resize it


Showing the coding result with bar chart visualization, this view is divided in two main parts, first part which is at the top, contains the basic info of the thread and a button for downloading the thread in image form, then the part at the bottom consist of two parts the first part is the bar chart of the surface percentages, and the second part is matrix of all the images with the highlighted areas.

Features will be available in the next version:

  1. Allow multiple user to code in the same Thread
  2. Allow multiple topics code
  3. Users will be able to create more than two highlighted areas
  4. Scrape over multiple months



PageOneX, ready steady go!

Crossposting from

View this datavis full size at gigapan.

Today’s post is to present the tool we are building this summer: PageOneX. The idea behind is to make online and easier the coding process of front page newspapers. Make  this visualization process available for researchers, advocacy groups and anyone interested. I’ll will give some background about this process.

How things started
Approximately one year ago I started diving in the front page world. It was days after the occupations of squares in many cities from Spain, and I was living in Boston. I made a front page visualization to show what people was talking about: the blackout in the media about the indignados #15M movement. You can read more about Cthe story in the ivic Media blog. Since then I’ve been making more visualizations around front pages of paper newspapers, testing different methods and possible ways to use them. I’ve also made a tool, built in Processing, to scrap front pages from and build a .svg matrix.


Mediameter connection

I’ve met with Nathan Mathias, who is developing Media Meter (development version, please do not share the link yet), a tool built on Ruby on Rails to crowdsource the analysis of news, and able to test the intercoder reliability. They are offering their code (the github link will come soon). We still have to figure out if we go for it, and if we do how the collaboration will be: fork it or stay in the same platform. Nathan, the main developer, is offering online support and to be on the conference calls once a week. He is willing to expand the use of the tool for more uses.
I think it is a great idea to not start from scratch and to have Nathan’s help. At the same time I am worried about starting our project with many things that we do not need. Any thoughts on this?