scatter-plot unemployment regional

Here the data correlates the Unemployment rate to Investment percetnt of GDP of 99 countries around the world. By hovering the mouse on the circles the specific details of the data point disapears. Also the chart axis could be change using the selection bottoms.

This visualization is under development and is being change weekly.

Investment = Percentage of GDP that is invested in the country in a given year.

The data is provided by International Monetary Fund.

Built with blockbuilder.org

forked from micahstubbs's block: scatterplot menus with d3-component | radius select Built with blockbuilder.org

forked from micahstubbs's block: scatterplot menus with d3-component | radius select

forked from bpartopour's block: scatterplot unemployment

forked from anonymous's block: scatterplot unemployment

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://unpkg.com/d3@4'></script>
  <script src='https://unpkg.com/d3-component@3'></script>
  <script src='https://unpkg.com/redux@3/dist/redux.min.js'></script>
  <script src='https://unpkg.com/d3-tip@0.7.1'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
  <link rel='stylesheet' href='https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css'>
  <style>
    .point {
      fill: currentColor;
    }

/* Tooltip styles copied from
    		https://bl.ocks.org/Caged/6476579 */
    .d3-tip {
      line-height: 1;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
  </style>
</head>
<body>

https://unpkg.com/d3@4

https://unpkg.com/d3-component@3

https://unpkg.com/redux@3/dist/redux.min.js

https://unpkg.com/d3-tip@0.7.1

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js