Tag Archives: interactive

Eurosport’s Data World Cup infographic is great

Simple, usable, beautiful. Eurosport’s latest infographic “Data World Cup” correlates which clubs provided more World Cup winners, how far did the Ballon d’Or laureates get in the World Cup (none, which doesn’t bode well for Ronaldo), and other interesting information about the competing teams in Brazil 2014.

countries
Click to visit the infographic

What I like the most – besides the design – is how so much information is compressed to such a minimalistic presentation. The animations are tasteful, and they bring dynamic.

It is one of those examples that prove how infographics with dynamic design can be better than any other format.

The Guardian creates the refugee game

Again, The Guardian. They have a new interactive story dedicated to Syrian refugees situation, and their hardships to find a safe haven far from the civil war afflicting their homeland.

The premise is that you are “a 28-year-old Sunni woman from Aleppo, and you have two children, a girl aged eight, and a 10-year-old boy. Your husband was killed in a mortar attack three months ago. The air strikes have continued – a recent bomb, you hear, killed 87 children – and you now feel you must try to leave Syria.”

At the end of each section, describing different scenarios faced by real refugees, dictated by legal, logistical and political parameters, you are presented with options. You have to choose carefully, to find refuge. The results are – to say the least – bleak.

The game logic applied to this story is a good way to empathize with the refugee situation, it looks simple, and it’s frustrating enough to gain awareness about the issue and, in the comfort of our homes, step into the refugees’ shoes.

Interactive Radial Calendar – SVG / HTML5 / CSS3 / Javascript

SVG/HTML5/CSS3 project – Acacia longifolia Interactive Phenological Radial Calendar from Alex Gamela on Vimeo.

I’ve experimented recently with ways to create interactive visualizations using HTML5 and CSS3. Starting with a SVG based design, I used HTML/CSS to animate and create transitions for specific items of the visualization. SVG is quite useful, because we can have more control over the design, while establishing classes and id’s for elements that can become alive with CSS3 magic.

check the interactive calendar in English or in Portuguese – works better in Firefox

Here we have the phenological cycle for the Acacia longifolia, one of the most problematic invasive plant species in Portugal. How do I know that? It’s my current job. And like most scientific subjects, data and good visual elements are aplenty. This information and the images were provided by my colleague Cristina Morais, that included this calendar in her PhD thesis presentation.

I love a well designed calendar or any other time related object (I have deadline issues…)because, in spite of time’s linear, progressive motion, it’s also cyclical (…and hamster syndrome as well).  I found some creative, stunning, stylish layouts and the radial stuck with me, since we’re conveying the idea of a cycle, after all. This  here and this one too cleared any doubts.

I had already tried this concept, but this time I wanted to take it a step further. I’m not a designer so I tried my best to make it look not really ugly, and adapted the code from this great tutorial from Codrops, which is one of the best interactive design websites ever. Follow them.

The popup images are activated through a pressbox .js script, placed in the index.html file. Neat and simple.

Even so, my coding skills weren’t enough to create all the actions I wanted, and I failed to make it cross-browser compatible: it only works 100% on Firefox. Chrome and IE do not render the calendar as seen on the video above.

For this project I used Adobe CS6’s Photoshop and Illustrator (which could have been replaced by Inkscape and GIMP, both free powerful alternatives to the Adobe products), and edited a lot of code on Notepad++.

It was an interesting project, and I’m planning to do a few more. If you have any suggestions or ideas send them to me.

Interactive Infographic: Torre dos Clérigos by JN

screenshot.1Jornal de Notícias (JN) built an interactive infographic celebrating the 250th anniversary of the iconic Torre dos Clérigos (Clérigos Church), in Porto.

They used Flash but it incorporates some navigational devices used with HTML5/CSS3, like vertical scrolling. I got the tip they’re moving into that direction, and sometime soon maybe we’ll see pure HTML/CSS coded interactive narratives.

They incorporated 360º panoramas from the top of the tower and video. It’s simple, cool, I’m not a big fan of their design style but it works pretty well.

JN is one of the few media organizations that consistently create interactive and multimedia narratives in Portugal.

Recommended: Into the Arctic

Interactive narratives are more interesting each day, and are not limited to news websites. Quite the opposite. Greenpeace created this amazing package dedicated to the Arctic, and it’s a feast to the eyes. I’m going through the code and I’m delighted to see how  the HTML5 /Css3 /Javascript has been put to work so beautifully like this.

How I wanted to do stuff like this. All I need is a coder and a designer…

Via CoDrops