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:

output_5AfmIU

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

Continue reading

Standard
automation, chatbots, data journalism, HTML, Javascript, social media

What I learned from bots, chatbots and channels on Telegram

After some posts on how to build bots on Facebook, I got some feedback on making a difference between bots and chatbots. On a conversation with Miquel Serrabassa, Head of Technology at the Catalan newspaper La Nació Digital, he pointed out that some bots are, in fact, channels:

“These bots lack of interaction. They are unidirectional and post automated messages, but people cannot chat with them.”

According to Telegram, users interact with bots through messages, commands and inline requests controlled by a developer (and an API). From this definition, examples can be as broad as newspaper notifications, weather forecasts, and quiz games.

I have been experimenting and testing Telegram bots with basic coding skills and this is what I’ve learned so far:

Continue reading

Standard
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.

output_8iEyPG

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

Continue reading

Standard
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

Standard
CSS, data, data journalism, data visualization, HTML, Interactivity, Javascript, journalism

My first steps into data journalism and datavis

As part of my Online Journalism MA, I have been investigating data journalism users and data visualisation pieces from inside and outside newsrooms.

In this post, I summarise the main points throughout this learning that might help future beginners in this field.

Continue reading

Standard
CSS, data, HTML, Interactivity, Javascript

3 useful sources to add interactivity to your website

This post is for beginners (like me) that are learning HTML, CSS and Javascript. Below are three useful websites to embed maps, charts and timelines to your HTML or Javascript code and will help you (me) to not get crazy.

I have used an online editor called Codepen, where you can get a real-time preview of your code, to show some examples.

Continue reading

Standard