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.

Data journalism community

Twitter is a good platform to explore and find the main users and hashtags around data journalism and data visualisation. Read this previous post to know more about it.

My suggestion? Research users that share useful content, create a list including all these users, and publish the list on Twitter. You may get response and feedback from professionals on that field.

Examples from general topics are continuously shared. This visualisation was created by Bloomberg Business, posted on Flowing data and shared on Twitter:


It is also useful to be part of mailing lists and forums around open data and journalism. Some examples are NICAR-ESP-L and the Open Knowledge Network. Professionals around the world share their projects and ask for help and opinions.

Coding is a plus…

It’s important to learn some basic HTML, CSS, JavasScript and other libraries such as D3. However, there are plenty of websites that allow journalists to create infographics and online visualisations. Some examples are Infogr.am, Tableau, CartoDB or Timeline JS.

I have tried 2 different code editors: Codepen, online, and Atom, a free and open-source text forMac. The first option seems easier because it allows a real-time preview and libraries such as jQuery are already on the system.

There are many online courses and tutorials in this area. I have been learning through an HTML, CSS and Javascript course on Coursera and basic JavaScript on Codecademy. I prefer the first one because videos and questions throughout the lesson are easier to be followed. Codecademy can be more active but the hint offered by the website when you get stuck isn’t always useful.

… but curiosity is essential

No matter how well you know these websites if you don’t have a good story. Sometimes there are broad issues that have to be tackled, but knowing how to do is what distinguishes a good or bad journalist.

Jeff Leek writes on The Elements of Data Analytic Style (2015):

“The goal is to tell a clear, precise and compelling story. Throughout your written analysis you should focus on how each element: text, figures, equations, and code contribute or detract from the story you are trying to tell.”

This visualisation, created by Nathan Yau, explains 24 hours of Americans’ life through categories and dots using American Time Use Survey data from 2014:


Suggested websites

Visualoop is a great source to look for examples and other colleagues’ work.

Data Driven Journalism is a website run by journalists, designers, editors and developers that use data for their journalism pieces. It also runs online courses in this field with professors from several countries.

Flowing Data is a website run by Nathan Yau that explores how professionals use analysis and visualisations to understand data and other people’s behaviour.

Visualising data is a site run by Andy Kirk that collects articles, news, projects, and wraps the best visualisations of the month in a single post.

What is next?

It seems that data journalists are the new punks, as Simon Rogers suggests on this TEDx talk:

There is a boom around open data and visualisations, and presenting beautiful information is now less complicated.

For my second assignment, I am scraping data on the United Nations budget for peacekeeping operations since 2006.

The first step is to depict the amount of money that state members are paying and how is it distributed through several operations. I’ll try to show how the map has changed till date, taking into account the refugees and economic crisis around Europe.

Do you have any other example? Let me know in the comments or on Twitter: @mcrosasb


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s