Tag Archives: experiment

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.

Infographic: Flowering periods of invasive species – Calendar

working draft of the calendar. click on the image for larger version

Calendars can be wonderful, and not just misunderstood objects of impending doom. Time is a measure that has been designed so many times it is hard to come up with new, interesting ideas. There are many ways to visually present a one year period and the contained events, and this is my attempt to convey a specific cyclic phenomenon.

This is a list of invasive plant species in Portugal, and their flowering cycle. The colors represent the main flower color, or its approximate tone. It needs some work, and I really want to add some interactivity to it, so I’m open to suggestions.

The Madeira Floods: GoogleMaps, GoogleDocs, Twitter and community


Last weekend’s floods in Madeira became a case study on the role of social media and common citizens in spreading news and data in case of disaster. I’ll be writing a few posts about some things I did to help cover the event, and how traditional media was left far behind in the stream of information. Again.

The Event

Saturday, 20th February. Madeira island is hit by a storm, raining more in two hours than in a whole month. Waves of mud drag rocks, houses and cars down the hills, ending up in downtown Funchal where the rivers meet, flooding buildings, and swallowing whoever failed to escape the fury of the waters.  Twitter was hectic with accounts of destruction, questions about what was going on, and, maybe a sign to take in consideration, videos. The traditional media was slow to respond: besides a few breaking news stories in some news websites, there wasn’t much for the information starved users. If you wanted to know what was going on you had to follow the #tempmad hashtag, fed by descriptions of locals that witnessed tragedy unfold right on their doorstep.

Lots of links to YouTube started to appear in the timeline – there were NO photos available in the first hours, and pictures wouldn’t make any justice to the dimension of the disaster. Video was the first instinct for the majority of users – and there was constant retweeting of the scarce information available, most of it provided by one user, @lindamachado, that became the main figure in the eye of the Twitter storm. But besides Twitter, there were no news to be found anywhere else. Portuguese public cable news channel was the only main media trying to do a coverage of the events, resourcing to – guess what? – Twitter, my map (i’ll talk about it in a bit), YouTube videos, and phone interviews, that were hard to make because the storm disrupted the service in many parts of the island.

We have to look at the specific circumstance that allowed social networks to become the main source and channel for all the news about the flood: it was Saturday, shortly after lunch. People had free time, they didn’t have to go to work, and the newsrooms were in weekend mode, which means even more understaffed. To tell you the truth, for most televisions and newspapers, real coverage began on Monday. Until night news around dinner time, there was almost no new data  about the tragedy in mainstream media, while was starting to gain unforeseen proportions.

Google maps and docs

When I saw the first tweets i immediately thought about creating a Google map to aggregate some information and videos, so people could see all the available information that was getting diluted in the Twitter stream (it’s the map above). All i had to do was to fish for YouTube links and relevant info, and asked users following  #tempmad to contribute. Although in the beginning i didn’t have many contributions, the map generated lots of interest: it showed up and was referenced in the public national TV live coverage, and it was embedded in two major newspaper websites. In the first hours it had more than 10.000 views, reaching 30.000 in the first 48 hours. This proves how huge was the demand for information that traditional media weren’t able to provide.

Then i noticed there was a website created on Netvibes that was also trying to gather all the scattered information on twitter, other websites and forums. I joined efforts with the author of the website, a process i’ll explain in a different post, and added my map to the website. Recently, i added a few more features using mapping tools and google forms and docs.

Since there was a problem with the number of victims (bodies keep showing up but the numbers are going down) we decided to ask the community to report the deaths they knew. For that I built a small form, to cross-reference with the official data. It took 5 minutes to set up the form, and feed the results into the page. I also wanted to use a map for the official results, and i created a new one, based on a spreadsheet. Every time the number changes, all we have to do is to edit the spreadsheet, instead of a live edit on GoogleMaps. What i’ll try to do is to layer the different information in one single map, if you have any ideas to do that let me know.

Another novelty I read about yesterday and just had to use, was the Umapper feature that allows to get tweets from a specific location. I used it to show tweets with #tempmad from Madeira, as you can see below:

With the perspective of more rain for this weekend this map might come in handy to visualize the ongoing events.

This series will continue with the analysis of the work of an improvised team. Stay tuned.