Old school D3 from simpler times

All examples By author By category About

eesur

Full window Github gist

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>

<section id="vis" class='chart'></section>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3fc/8.0.0/d3fc.bundle.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>

<script src="script-compiled.js" charset="utf-8"></script>

<script>
    d3.select(self.frameElement).style('height', '700px');
</script>

xxxxxxxxxx
 
<!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>
<!-- https://github.com/ScottLogic/d3fc -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/d3fc/11.0.0/d3fc.css" rel="stylesheet"/>
<!-- https://clrs.cc/ -->
<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>
​
<section id="vis" class='chart'></section>
​
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3fc/8.0.0/d3fc.bundle.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>
​
<script>
    d3.select(self.frameElement).style('height', '700px');
</script>
​
​
    

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