The embed code we announced two weeks ago is now available to everyone.

embed-code-arrow
Copy paste the embed code!

Now you can copy paste directly from the the embed code to insert a PageOneX visualization in your site. Check at the bottom right and share your PageOneX dataviz where you need them.

It still needs some fixes of height and zoom level, but I am sure you will work it out.

Besides, we’ve also redesigned the display view to make it more compact and show the dataviz in a more prominent way. We’ve also avoided the duplication of the topics list.

Tell us how do you like it.

new-display-design
Old and new designs.

 

new-display-design-2

Now you can embed a PageOneX thread in your site:

You can check this thread at PageOneX > Corrupción España. Octubre 2013.

To get the embedded version you just need to add “/embed” at the end of the url http://pageonex.com/numeroteca/corrupcion-espana-octubre-2013/embed
and embed that web page with an iframe.
This version of the display view is the same as the normal thread, but wihout the header (navigation bar, description, vertical legend) and footer.
You will have to play with the scale and height of the div and iframe to make it look good.

Code to embed:
<div id="wrap" style="width: 100%; height: 490px; padding: 0; overflow: hidden;">
<iframe style="width: 1280px; height: 700px; -ms-zoom: 0.68; -transform: scale(0.68);
-moz-transform: scale(0.68); -moz-transform-origin: 0 0; -o-transform: scale(0.68);
-o-transform-origin: 0 0; -webkit-transform: scale(0.68); -webkit-transform-origin: 0 0;
max-width: none; overflow: hidden; border: 1px solid white;"
src="http://pageonex.com/numeroteca/corrupcion-espana-octubre-2013/embed">
</iframe></div>

Another example about Coverage of Gezi Park protests in Turkish newspapers last June.

The front page images in the display view are displayed differently if they have been coded or not. It makes easier for the user to know intuitively which images have been coded (more transparent) with the ones that hasn’t (more opaque).

I’ve been testing with different opacities: make both uncoded and coded images lose opacity, and color codes to lose transparency. Related commit.

Check the tests:

results-0
Coded: 0.65
Uncoded: 1

 

results-1
Coded: 0..3
Uncoded: 1

 

results-2
Coded: 0.15
Uncoded: 1
Opacity of color codes: from 0.5 to 0.6

and the finaland chosen selection:

 

results-3
Coded: 0.15
Uncoded: 0.6

visitor-1

I finally installed the PageOneX real size project with stories related to guns, wars and terrorism. Come visit the display this week to the second floor of building E14 at MIT Media Lab. Thanks all of you that helped in this process: Adrienne, Luis, Álvaro, Nacho and Matjaz!

What follows is a photographic guide to the PageOneX real size installation. Continue reading