KnoWorld and Popfly Tutorial 12/4/09
So now you’ve heard all about KnoWorld, and you want to try out some visualizations. But how?
First of all, it’s important to know that KnoWorld lives inside a website called Popfly. This site allows you to create mashups with data from many different sources (like Facebook, Live Search and Flickr), filter and mash these data, and show them in interesting visualizations like photo carousels, interactive lists, or maps.
So basically what you have to do is to create an account or sign in at Popfly using your Windows Live ID (the same you use for Messenger, Hotmail, Spaces…). After that you can already start mashing up!
If you’ve never used Popfly, check out this video tutorial to see how easy it is to create a basic mashup – it only takes 30 seconds!
http://www.popfly.com/Videos/?video=ThirtySecond
A more detailed (22 min) introduction can be seen at
http://silverlight.net/learn/learnvideo.aspx?video=86527
When you’re in Popfly, start by clicking Create and then Mashup near the top right corner to open the Mashup Creator.
In this tutorial we’re going to explain you Popfly and KnoWorld while we recreate the US CO2 Emissions vs Environmental Events mashup we presented in our previous post.
Starting your mashup
So to start your mashup with the KnoWorld blocks simply search for “knoworld” in the block list on the left. You’ll find all of our blocks, and they’ll be ready to be dragged to the main area.
The basic data block is called Gapminder. This block can get data from all of our available indicators (full list at http://tinyurl.com/gap-ind). You can select your data by country (that will get a historic timeline for that country) or by a specific year (which will get the data for all the countries in that year). Here we will use it to get the CO2 emissions historic data for the US.
The main visualization is the Timeplot block. This one allows you to plot indicators in a line graph and mark events in the graph, allowing you to understand the relationship between the events and the indicator. Here we will use this block as means to visualize the indicator along with the events.
Let’s try a simple example: in the mashup creator, drag the Gapminder block to the main white area – it will show up as a spinning cube. After, drag the Timeplot block to the main area as well.
The next step is to configure the blocks to get the data we want. In the Gapminder block, click the small wrench icon (
) or double-click the block to configure it. You will see something like this:
In the Operations list in the top left corner, you can choose if you want to get the data by year or by country. Here we’ll select by country to get data from the United States. Next, type in the boxes the parameters we want. In this case, type “co2 emissions (tonnes per person)” in the Indicator box, and “united states” as country. Click OK to confirm.
The next step is to connect the two block to show the Gapminder data in the Timeplot visualization. To do that, click the Gapminder block – a blue arrow will appear – and then click the Timeplot block. The blocks are now connected and you can configure the Timeplot block to show the data the way you want.
Click the small wrench in the Timeplot block to select how the data will be displayed. We want the years from Gapminder to be used as dates in the graph, and the values should be shown accordingly. Use the boxes to connect the correct data to the correct places, like this:
Now you’re ready to test your Mashup! Click OK if you haven’t already and click the green “Run” button to see what happens. It may take some time to load…
Showing some events
Now all that’s left is to display the events. To add events to your mashup, go back to the “Edit” mode and double-click the Timeplot block. You can add events directly by typing their dates directly in the eventDates box, and by typing their titles in the eventTitles box, separated by commas.
To add a large quantity of events, it’s more convenient to grab them from another block (such as an RSS feed) or to use a data block (the “yellow block”). In this case we’ll build a data block to store our events.
To build a yellow block, save your mashup by clicking the “Save” button, give it a name and description, and click OK. Then go to the “Create” menu and select “Mashup Data” to create a data block. This block acts just like a table to hold your data – just type the column headers in the first line separated by a comma, and type the data in the big box accordingly. Be careful not to use apostrophes (‘), commas (,) or quotes (“) in the data, because these characters are treated differently from the rest of the text.
So, in your data block, type in (or copy-paste) the events and dates, like this:
If you want, you can download the events we’ve used in the sample from this file to paste them into your block.
Save your data block by clicking “Save” and use the “My Stuff” –> Projects menu to go back to the mashup. There, click in the “Actions” link under your mashup and select “Edit” to open the Mashup Creator.
Now drag your yellow block from the blocks list (it should be near the end) and connect it to the Timeplot block. In the Timeplot configuration, select the appropriate values and that’s it!
Now you have a full featured mashup that displays data and events together! You can share it through the “Share” button and copy the link, or even put it into your site or blog with the “Embed” code. If you used a data block, don’t forget to share it as well or users might not be able to see your mashup.
This was only a small introduction to what can be done with Popfly and KnoWorld. For example, you could also use other blocks to filter or sort the data (for example, show only the data from a specific interval), show it in maps or display flags for the countries, and much more! In Popfly, every mashup can be “ripped”, so you can see how it was made and change it. Please rip our mashups for a sample of what can be done with KnoWorld, and see how it’s done!
We hope you liked it, and we definitely hope you’ll use our blocks and spread the word. If you have doubts, ideas, questions or suggestions, please drop a comment in this post and we’ll help you. Also, if you have an idea but don’t know how to do it in Popfly, drop a comment and we might be able to help you to make it come true!
Finally, for more detailed information, you can download our official presentation along with all the links, explanations and ideas by clicking this link.
Thank you!
Virtual Dreams – Mashup team
- Bruno França dos Reis
- Roberto Sonnino
- Eduardo Sonnino
Comments»
[...] own mashups with all the indicators and an infinity of visualization possibilities, please head to our next post, where we’ll show you how through a step-by-step tutorial on KnoWorld and Popfly. If you already [...]
[...] Tutorial – 332 views [...]