D3 Examples - scatterplot unemployment

scatterplot unemployment

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.

xxxxxxxxxx
 
<!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>
​
  <script src='axis.js'></script>
  <script src='scatterplot.js'></script>
  <script src='tooltip.js'></script>
  <script src='page.js'></script>
  <script src='loadData.js'></script>
  <script src='reducer.js'></script>
  <script src='actionsFromDispatch.js'></script>
  <script src='vis.js'></script>
</body>
    