After the post Guns vs Sports vs Wars I wanted to test news by location: local, for news related to the city or region where the newspaper is published; national for US news; and continent (as Ethan suggested). This visualizations fits pretty well with the previous one, as it fills the gaps of the more locally oriented newspapers like The Boston Globe and LA Times.
I do not think I will use this approach in the final PageOneX real size version, but it is interesting to view the same newspapers coded by different ways. I can imagine a par of special glasses that would allow the viewer shift from one visualization to another.
Note: I have only coded the main news (only the big ones).
I am preparing a project for a physical display of a PageOneX visualization at the MIT Media Lab Festival for April 2013. I blogged about it and also gathered some references about front pages in art and cinema.
Front page analysis references
We’ve opened (with Rogelio López) a section of the website to gather articles and books related to front page analysis.
In the last post I’ve did an overview of how Coding works, so in this post I’ll walk you through the Display view and how it works
Let’s start with the basic structure of the display view it self;
Display view is divided mainly into three horizontal sections
First section; contains information about the thread, basic information (name, description, status, starting date and ending date) and then number of boxes representing the codes and their colors
Second section; contains the bar chart of the calculated “Surfaces Percentage”, it’s not working in this snapshot but it will be working soon.
Last section which showing the the highlighted images, each newspaper images appears in an individual row
I’ll try to explain here how we load this images and arrange them in rows and calculate the size of highlighted areas and their position;
First how to calculate the size of the images based on the size of the page, specifically the size of the div which contains the images of a newspaper:
gets the width of the row div which contains images for any newspaper
gets the number of images in a row
divide this width by the number of the images, to specify the height of each image
then calculate the ratio between the original image and the new image size
based on this values I do set the images size and highlighted areas
Try to zoom in and out and you will see how the images and the highlighted areas are calculated, that is happen because I’ve also bind the handler with resize event on the window object