automation, data journalism, data visualization, instagram, social media

Instagram sketches: How can chatbots be more friendly?

Chatbots are on the first stage of experimenting through APIs, voice and messaging apps. However, last conferences such as the Web Summit in Portugal, the Chatbot Conference in Vienna or the API days in Barcelona have raised awareness on design and personalities to create more human interactions:

Efforts on choosing platforms or technologies to build chatbots shouldn’t override the conversation between the robot and a human. For this reason, accessing the chatbot is as important as drawing the conversation through flowcharts, mindmaps or storyboards. Could “Sorry, I didn’t understand your reply” be more friendly and approachable?

Instagram is an interesting platform that not only focuses on photography but also drawings. Below I have gathered some examples of chatbot storyboards that present customised scenarios between bots and users:

1.The Sun’s Messenger bot


Possibly, it’s a draft for the below Facebook Messenger chatbot:


2. User Interface and conversational engagement

3. Storyboard – food bot

4. Can robots be evil?

5. Landscape of bots, technologies, and integrations


Do you know some examples? Let me know in the comments or at @mcrosasb

data, data journalism, data visualization, HTML, instagram, Interactivity, Javascript, maps, social media

[MUSIC MAP] My summer through Instagram pictures and Spotify songs

I have been experimenting with Instagram, again. This time, I have established a relationship between a picture of the day and a song recently discovered on Spotify through the Discover Weekly feature. The below post would be an example:

Picture + Name/lyrics of the song  + 🎶  + hashtags


After gathering the data, I mapped these posts using the Mapbox JS library and I made each song playable on the same window. This is the result:


Below I explain the process of collecting and mapping the data: 

Continue reading

CSS, data, data journalism, data visualization, HTML, Javascript, maps

How to: build and customise interactive maps on Mapbox

Mapbox is an open source platform that allows users to create, customise and embed maps on websites and visualisations. Their developing tools such as APIs and libraries offer a great interactivity for experienced and beginners developers.


Here I explain how to build and share the above map in 6 steps:

Continue reading

data, data journalism, data visualization, HTML, Interactivity, maps

How to: create maps with interactive tables from Google spreadsheets

I just discovered Awesome Table, a tool that allows users to visualise Google sheets into maps, tables, graphics, cards, etc. without coding skills.

This gadget contains multiple extensions that make interactivity easy. Geocode, for instance, is an add-on that geolocalises data from the spreadsheet and creates a map with interactive tables.

Here I explain how to do it in 6 steps:

Continue reading

data journalism, data visualization, Interactivity

3 good narrative visualisations around human stories

Data visualisations are increasingly using narratives to convey complex information, as Edward Segel and Jeffrey Heer discuss on Narrative Visualization: Telling Stories with Data. From a few case studies, they show different storytelling formats -away from the traditional ones- and analyse both the layout and the content.

On this paper, they share some words by Jonathan Harris, creator of We Feel Fine and Whale Hunt, who considered himself a storyteller and visualisation designer, in this order:

“I think people have begun to forget how powerful human stories are, exchanging their sense of empathy for a fetishistic fascination with data, netweorks, patterns, and total information… Really, the data is just part of the story.”

I agree. Nowadays, there are interactive pieces and tools that gather plenty of datasets without a human voice or face. Yesterday, I spent some time reviewing creative agencies websites around the world and spotting some pieces that wrap both data and human stories. Below are 3 good examples:

Continue reading