Visualization Sprint

World Bank Global Development Sprint

Visualization Sprint:
an experiment in collaborative
data visualization
Visualization Sprint Process Outline

World Bank Global Development Sprint

For International Open Data Day — a global event where citizen coders and designers work to demonstrate the benefit of open data policies — we've teamed up with the World Bank to launch the Global Development Sprint, a collaborative data visualization project where anyone can fork code to visualize the same open data set.

We’re using the World Bank’s Major Contract Awards dataset, which serves as a guide on the distribution of major contract commitments among the Bank’s member countries. Together with fellow coders and designers, help governments, development agencies, and NGOs better understand and communicate the impact of global development.  

Mahir Yavuz got things started with an initial sketch using d3. Now it’s your turn. Over the next few days, add layers of comparison by exploring the relationships between and among countries or the funding across sectors. Are there trends over time? Don’t use d3? No problem. Head over to the World Bank Data Channel to download the full set and design your own visualization.

Data: For the initial sketch, Mahir used data from 2013 but you can get the full data set here (available in .csv and an API). Like our challenges, don’t feel restricted by the data. Mash it up with other open data to add context or a deeper level of analysis. We’re excited to see what you uncover.

Explore Versions

Comments

De Datagraaf's picture

Hum, right = write of course.

De Datagraaf's picture

Wow, artzub, you right some genuine bad-ass code! I will try and get my head around your latest version and see what I can add to it.
(But somehow your full screen version throws some errors, so I haven't seen it working properly just yet.)

artzub's picture

We are very stupid people... =))) Why we don't use document.location in url Open in new window? =)

artzub's picture

@de-datagraaf Great work!!! In your graph fading so fast it's cool.
I've just added my version with chord graph with filtering. It was hard job =) Really made matrix and after make correct chords was very difficult, but I won =) I hope that you can understand how it works =)

Next step is visualization projects and what with them connected.

De Datagraaf's picture

Hm, for one thing, I think there is something wrong with the sorting of the variables in my chord graph. (I stared at it so long, I have to give it a rest before I can try and fix this.)

De Datagraaf's picture

or maybe the modal income per country wouold be even better, since it is much less sensitive for outliers, and therefor gives a better picture of what large groups of people can spend.

Another interesting figure to add would be the income differences within countries aswell as between countries.

De Datagraaf's picture

@all
What would be interesting data to add, maybe, are the (trends in) gross national income/product and the average wage per country.

De Datagraaf's picture

@artzub
A chord diagram does seem to be a fitting graph.

What also came to mind, are the great visualizations published a few years back by Aaron Koblin.
http://www.aaronkoblin.com/work/flightpatterns/
Basically this would mean projecting a chord diagram on a world map.
Seems somewhat ambitious though.
But since I am working on a world map of some other data, I can at least try and put this data on a world map in some form or other aswell (if nobody beats me to it of course).

De Datagraaf's picture

@artzub
A chord diagram does seem to be a fitting graph.

What also came to mind, are the great visualizations published a few years back by Aaron Koblin.
http://www.aaronkoblin.com/work/flightpatterns/
Basically this would mean projecting a chord diagram on a world map.
Seems somewhat ambitious though.
But since I am working on a world map of some other data, I can at least try and put this data on a world map in some form or other aswell (if nobody beats me to it of course).

De Datagraaf's picture

@artzxub
Sorry for being so slow to respond. I can't spend a lot of time behind the computer at the moment because I am working over at my climbing gym this week and weekend.
I can think about this though. And this evening and next week I
will have much more time.

artzub's picture

@all
Well... I'm focusing on following questions:
- who lends to whom? how much? for which purposes? — it's the first and the main, and maybe
- are there structural changes in inter-regional relations (i.e. the flows of money from Europe to Africa versus the ones from China to Africa)?

artzub's picture

@de-datagraaf I'm now working this problem! It's cool that you hit right on target.
Do you have any result or ideas how can we show it?
I think about this http://bl.ocks.org/mbostock/1046712

If you give me time, I'll try to get it quickly.

artzub's picture

@de-datagraaf I suppose that if we make the graphic with the auto-calculation size it'll be more universally.

@zenodux
When you fork, the URL of the page with the submission form is in the format http://www.visualizing.org/node/add/sprint-version?parent=[parent_viz]&sprint=[your_new_viz_num] - note your new viz number!
Re: I also thought about it, but it don't work.

comparing year-on-year changes with a nifty animated transition
Re: Yes it's great idea and it was in my plans. I think make a timeline on basis of contract signing date. I suppose that it matters. And after we can group on years, but first it need decide on basis of the current data.

What about mashup the Twitter and Worldbank... In my mind it's difficult task because we must provide cross-domain request and it's not possible at current context. But the idea about geolocation impressed me. And i'll think about it.

All browsers support method calc, but Safari really supports him with prefix -webkit-. I'll fix it in next version, if don't find other way. (Maybe decide through margins).

De Datagraaf's picture

@all
Just trying to word a what should be shown:
- who lends to whom?
- how much?
- for which purposes?

- how do these flows change over time?

- are there any correlations with world events?

more specific questions:
- did the current crisis diminish the total size of the flows?
- did the current crisis diminish the size of partiucalr flows?

- are there structural changes in inter-regional relations (i.e. the flows of money from Europe to Africa versus the ones from China to Africa)?

- are there any notworthy changes in one-on-one-relations between countries?

There are probably a lot more interesting subject matters to visualize. But these seem to be the more obvious questions to try and answer.

So much for the real data. I am not really into twiiter 'data', so I see no immediate purpose for this. But I could imagine we could explore whether there are any correlations between the money flows and conversational flows between countries and/or regions.

I'll leave it at that for now.

Regards,

wim

De Datagraaf's picture

@artzub
The visualization you refer to would be great to portray one of the really interesting aspects of this data set: borrower-borrowee relations; who borrows how much to whom?
So, let's follow he money!

De Datagraaf's picture

Just a quick question on the size of the graphic. I am curious what the editors have to say on this matter. Are full screen graphics allowed, or are we to stick to the box size? (Last time around we stuck to the box size mainly.
But the real challenge would be to have a visualization that works full screen, aswell as adapt itself to this particular box size where need be (or any box size, for that matter).
Regards,
wim

zenodux's picture

Here's a typical record from the WB's Contracts API - which of these fields would you like to see in a popup? Which should we use for a next visualization?

As of Date: "12/18/12 0:00"
Borrower Contract Reference Number: "MWP-B2.5/2-6"
Borrower Country: "Armenia"
Borrower Country Code: "AM"
Contract Description: "Procurement of vehicles"
Contract Signing Date: "8/6/12 0:00"
Fiscal Year: "2013"
Major Sector: "Water, sanitation and flood protection"
Procurement Category: "Goods"
Procurement Method: "SHOP"
Procurement Type: "Equipment, Transportation"
Product line: "IBRD/IDA"
Project ID: "P126722"
Project Name: "MUNICIPAL WATER"
Region: "EUROPE AND CENTRAL ASIA"
Supplier: "GLOBAL MOTORS CJSC"
Supplier Country: "Armenia"
Supplier Country Code: "AM"
Total Contract Amount (USD): "$40,995.00 "
WB Contract Number: "1325908"

zenodux's picture

@edward thank you - I will look at that. BTW hello!

@artzub absolutely - that seems like a cool viz. I am fleshing out how I want to do a Twitter mashup, this may help. My initial idea was to mash up the World Bank Projects API, which has geocode data for 1669 projects, with the World Bank Major Contract Awards 2007-2013 API and Twitter.

The 2013-only csv that Mahir's initial visualization uses comes from that second World Bank API (Major Contract Awards) and contains 2429 records from 2013. I think for reliability and speed, we could fetch the data from the WB's site directly, which would also allow us to do time series stuff, comparing year-on-year changes with a nifty animated transition. D3 excels at this.

I did not yet check if all the geolocated records in the Projects API are from 2013. Assuming they are, that means most of our projects would have geocodes (only 760 wouldn't - not bad). Incidentally, the API endpoint for getting one record from the projects API is: http://search.worldbank.org/api/v2/projects?format=xml&qterm=P116805&rows=1 - It an return json too, XML is easier to read in-browser for us carbon-based life forms - the silicon-based HTML5 ilk prefer json. :) The Major Contract Awards API endpoint is at https://finances.worldbank.org/resource/kdui-wcs3.json and their landing page for exploring the API is at https://finances.worldbank.org/Procurement/Major-Contract-Awards-FY2007-...

So, mashing those two up gives us geocodes for projects. I propose that we then use Twitter's API to filter for tweets around the project in question - shall we call this tweet geofencing? From that resulting bucket of tweets, we can cull a list of the users who made those tweets and are in the area of the project. I think this is the key. I know that I don't use location on most of my tweets, just a small minority. So what we are doing at this stage is just trying to narrow down the potential pool of tweets to search by area. With that list of users, we can also look at their followers and people they follow. We can filter this bigger bucket of tweets against keywords for the the project, such as the name and generic description, i.e. - "bridge" etc. We could then display these tweets live on the right side of the viz screen using Twitter's streaming API whenever a user hovers over a project. We could expand on this technique depending on how the data is filtered in the current view. I would welcome any feedback on this mashup idea. I will then take that feedback and build it! I'm excited to see what ideas you come up with!

zenodux's picture

I would recommend that submitters include a URL link to the viz in their description. These visualizations cannot be fully appreciated or even understood in the small iframe on this page - this iframe should be considered a preview in my most humble of opinions. This is how you do it:

When you fork, the URL of the page with the submission form is in the format http://www.visualizing.org/node/add/sprint-version?parent=[parent_viz]&sprint=[your_new_viz_num] - note your new viz number!

Armed with your new viz number, you can then divine your viz destination URL like so: http://www.visualizing.org/sprint/launch/[your_new_viz_num]

So, e.g. to artzub's most excellent version 9: Like the preview above? Open me up in a new window full screen for the real deal!

So exciting! Don't forget to check out the zooming in both visualizations in version 9! They are glorious in full screen! Now I'm off to check out versions 7 and 8. I have some ideas of my own that I will expound upon in a future post, but I want to see what you all have done so we can merge all the ideas into one awesome viz!

No! Sleep! Till Brooklyn!

zenodux's picture

@artzub you rock! Much love for your packages viz and the isolating by sector - I didn't realize your version 9 did that until I stumbled on it by accident!

artzub's picture

I've just found this cool visualization http://www.findtheconversation.com/concept-map What do you think about this. Could we use her in this sprint.

artzub's picture

Also I forgot to write in description that filters work with any layouts.

artzub's picture

Erm... Link (open in new window) don't work =) you can try this http://visualizing.org/sprint/launch/49162

artzub's picture

@de-datagraaf hello! all is well =) how are you!?
I believe we will achieve excellent results... =)
I've looked your version and something came up. I hope this will work =)

De Datagraaf's picture

On a personal note: Hello Edward and artzub! It's been a while. How are things?

Edward Lee's picture

@zenodux - I just made a single change to your version #3, inserting the proper data URL. The local URL is commented out for comparison.

Add comment

Login or register to post comments

How It Works

A "visualization sprint" is a new collaborative design and coding experiment where contributors work together to find the best solution, or solutions, for visualizing a data set. Taking cues from citizen science, open source culture and code sprints, Visualizing.org has conceived of this format in order to promote community dialog, learning, and feedback about visualization techniques.

Starting from an initial sketch written in a popular scripting language, anyone is invited to "fork" the code — adding to or modifying an existing version and then posting it back to the sprint. Any version can be forked, and new "alpha" sketches can also be submitted to start a new branch from scratch.

Check out the project prompt and data set at the top of the page, then look at the initial sketch. What are we trying to visualize here?
Explore other contributions: what are the branches the design has taken? where does the visualization still need work?
Add your voice to the discussion by voting versions up or down and commenting as you explore.
Choose a version to modify and click the "Fork This Version" button.
Work on the code, testing as you go along. When you're ready, commit your contribution along with a short description.
Repeat from step 2!

More Info

Is this project only for programmers?

Sort of. The purpose of this sprint is to explore and discuss techniques in interactive visualization, and it uses simple scripting languages so that we can easily see and modify the code. If you're not a coder we encourage you to participate by voting on the versions, adding your voice to the comments, analyzing the data set, or even sketching visual design directions that others could help realize.

What resources are available for my version?

When you fork a version, the top of the edit form will have a list of libraries and data sets you can use. If you need help figuring this out, just send us an email.

Can I transform the data set?

Yes! You are encouraged to transform and analyze the data set. If you modify the data in a useful way, send us the updated file so we can share it with everyone working on the sprint.

How does the sprint end?

The focus here is on process, but we also want to have a nice visualization (or several) to present. Hopefully, the consensus of all participants will bring the most promising branches to a state polished enough to be called "final."

Is there a prize?

No, there is no prize.