Over a million developers have joined DZone.

Euro Debt and Financial Crisis Visualized With Timeline Using d3.js and Three.js

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In a couple of recent articles I've been using Three.js and d3.js to create 3D maps and visualize metrics. In the last week I combined a couple of these techniques to create a visualization of the financial/debt crisis in the Eurozone:

European_Debt_Crisis_ timeline.jpg

What does this timeline represent?

In this timeline I show how the interest rates for the long term bonds change over time for the Countries of the Eurozone. This is the interest rate countries pay to refinance their debts. Why is this interesting? This interest rate is a very good indication of the financial stability of a country. Is the rate high, then refinancing debt will cost more and more and interest payments will go up. A situation which, at certain percentages, will bankrupt a country.

In this visualization the following is shown:

  • Timeline at the bottom shows events that occur during the period 2009 to 2012.
  • For each event a 'bubble' is shown that explains a bit more about the event.
  • The map shows the countries. Green means low debt rate, red means high debt rate.
  • For better visualization the height of a country is also defined by this debt rate.

Techniques used

This timeline uses the following techniques:

  • d3.js: This library is used to create the timeline visualization at the bottom.
  • Three.js: To visualize the interest rate a 3D model is created in Three.j

In a couple of future articles I'll go into more detail on how the various libraries are used.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Jos Dirksen, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}