A couple of weeks ago Kristaps, from infogr.am, and I got together to do our first joint webinar on using web data to build an infographic. It got such a great response, that we thought “why not do it again?”. So, back by popular demand, this week I am once again joined by the fantastic Mr. Kristaps to show you how you can get data from the web and turn it into a cool infographic.
Now, we wouldn’t just want to repeat ourselves – that wouldn’t be much fun – so this time we’re doing it with a little twist. One of the key benefits of using import.io, is that we pull data from websites in real-time. This means that you can build an infographic with data that changes regularly and have it always be up-to-date.
Let’s get some data
Because I’m doing this webinar in an hour, I need some data that changes very frequently. so we’ll be using the NASDAQ.
Then we need to train the rows. We do this by clicking and dragging the cursor over one full stockmarket row. The app will then generalise to the rest of the rows. In this example it’s picked up the heading as a row, which we don’t want, so we need to use the “Skip” function and tell it not to extract the first row.
Now that we’ve got our rows trained, we can map our columns. In this case I’m going to map the name of the exchange as “Text”, the value as a “Number” and the date as a “Date”. You’ll notice that when I try to train the date I get an error message because the date is not technically within my row results. Luckily, we can set this manually by using our XPath override feature in the advanced column settings.
The best way to find the XPath is to open the URL in chrome, right click on the data you want and click inspect element. This will highlight the HTML in the developer window of the data you selected. Then right click on that, click copy XPath and paste it into the XPath override box in import.io.
Tip: Sometimes you will need to edit the XPath to get what you want – a great resource for learning how to do that is: w3schools
Once we’re done trianing our data, we need to publish it to import.io to create our API. This will take you to a data set page. From here you need to click on the integrate button (top right) and choose Google Sheets from the menu on the side. Next, put in your password to get your API key and import.io will generate a formula for you. All you need to do it paste that formula into an empty cell in Google Sheets and all the data will be pulled live from the site via the API into your table.
Here it is: NASDAQ Google Sheet
And the API: NASDAQ API
Now it’s over to Kristaps to show you how to get it into infogr.am!
It’s best when building infographics not to try and visualize too many data points at once, so the first thing to do is narrow down the data to two columns. Then we open infogr.am and choose what type of infographic we want to make.
Time for the data. Click “Upload data” and select “load live data”, then paste in the link to your Google Doc. Finally, you need to choose how often you want the data to update.
Now any time the data is updated, our infographic will reflect that!
Join us next time:
Our next webinar on (Sept 9) is going to be a cracking one. The development team has been cooking up some pretty exciting stuff in our secret underground data bunker. They’ve taken the Extractor you know and love and stripped it down, making it quicker and more streamlined. A GT sport version if you will. Not to mention its got a load of cool new features. In the next webinar I’ll be showing you how it works from end-to-end – get ready to be WOW-ed.
Here’s a quick sneak peak!
Woah! That was fast!