Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}