d3js | bubble chart quadrant

'A Bubble Chart is a multi-variable graph that resembles a combination of a Scatter plot and a Proportional Area Chart.' This example is split into a quadrant colouring the circles depending on the quadrant they fall into.

More info on Bubble Chart Chart built on d3fc

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body { font-family: Consolas, monaco, monospace;}
    header { padding-left: 25px; }
    .chart {
        margin: 10px 0;
        width: 100%;
        height: 600px;
    }
    .chart > svg {
        margin-left: auto;
        margin-right: auto;
    }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/d3fc/11.0.0/d3fc.css" rel="stylesheet"/>

<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">

<body>
<header>
    <p>Bubble chart organised in a quadrant</p>
</header>

https://cdnjs.cloudflare.com/ajax/libs/d3fc/8.0.0/d3fc.bundle.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js