Over a million developers have joined DZone.

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

DZone's Guide to

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

· Web Dev Zone
Free Resource

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

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.


Dev Resources & Solutions Straight to Your Inbox

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 }}